클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

이어서 실습 문제를 더 풀어보겠다.    실습 3 - ES6 arrow function 사용하기    문제 풀기 화살표 함수 표기법으로 변경해 보았다.        실습 4 - ES6 class 사용하기     문제 풀기 프로그래밍 언어처럼 class 객체로 만들어서 코드를 작성했다.       실습 5 - ES6 destructing 사용하기    문제 풀기 destructing을 사용해서 여러 줄 코드를 한 줄 코드로 바꾸어보았다.       학습을 마치고오늘 공부할 분량을 대체로 잘 마친 것 같다. 사실 오늘 아침에 11시에 일어났을 때는 하루를 완전히 망쳤다고 생각했다. 잠도 11시간도 넘게 잤는데 이틀 치 잠을 잔 셈이다. 하지만 끝날 때까지 끝난 것이 아니다는 누군가의 말이 맞았다. 그때부터 ..

2주 차 공부를 시작해 본다. 이번에는 Node.js를 이해하는 여러 다양한 문제들이 제공되어 있다. 놀고 싶은 마음을 뒤로하며 이 공부까지는 그래도 해볼 것이다.    이론 1 - ES6       생산성 향상이라는 것은 작은 기능으로도 많은 기능을 사용할 수 있다는 뜻이다.            백틱을 사용해 변수의 내용의 문자열을 넣거나 개행을 할 수 있다.    화살표 함수를 사용해서 왼쪽에는 변수, 오른쪽에는 할일을 적어 간편하게 만들 수 있다. 익명함수에서 함수 안에 바로 선언이 가능하다.     기존 방식은 생성자 함수와 prototype을 활용했다. ES6 클래스 문법은 더 직관적이고 객체 지향 프로그래밍에 적합하게 개선되었다.                실습 1 - ES6 let, cons..

Node.js를 시작하는 방법에 대해서 배우게 된다. 이론 수업이 끝나면 1주 차의 마지막 미션 문제가 있는데 이것도 풀어볼 것이다.    이론 3 - Node.js 시작하기  Node.js를 사용하려면 설치를 해야 한다. 이것은 굉장히 빠르게 기술이 적용되는데 최신 버전 중에서 안정적인 것을 선택하는 것이 좋다. 이것을 가능하게 하는 것은 LTS 버전이다.         미션 - 용돈 압수  일반적으로 프로그래밍을 하듯이 접근할 수 있다. 문자열이 많이 길어서  + 연산자로 잘라보았다. 이 문제는 split이라는 함수를 사용해서 list 형태로 저장하면 될 것 같다.   문제 풀기 money를 split 문자열로 500원이라는 단어를 쪼갠 후에 변수에 저장하고 이를 콘솔로 출력하면 된다.    실행 결..

이번에는 Node.js가 무엇인지 살펴볼 수 있는 시간이 될 것 같다. 1주 차에는 이론 수업 위주로 진행된다.   이론 2 - Node.js의 특징    한번 실행하고 기다리려면 시간이 걸리므로 하나의 동작을 세 번으로 나누어 한번에 실행하는 것이다.    node.js는 싱글 스레드이다.        비동기가 가능한 이유는 일을 자신이 하지 않고 시키는 방식이기 때문이다. 그렇기에 작업이 끝나기를 기다릴 필요가 없다.      동기 방식에서는 실행하고 완료할 때까지 CPU만 소모되며 낭비된다. 자바스크립트에서는 단일 스레드를 사용하여 이러한 낭비를 줄인다.          결과가 왔을 때 이벤트가 실행된다고 보면 된다.          퀴즈 2 - Node.js의 특징    문제도 잘 풀었다.    ..

오늘 밤부터 Node.js 공부를 시작해보려고 한다. 사실 JDBC 공부를 먼저 하는 것이 좋겠지만 왠지 이 공부부터 하고 싶어졌다. 수업 분량이 많지 않아서 맘 잡고 하루 정도 하면 다 끝낼 수 있을 것 같다.   이론 1 - Node.js 시작하기 이에 따라 고성능의 자바스크립트가 필요하게 되었다. V8 엔진은 크롬 브라우저에서 사용하는 엔진으로 자바스크립트를 좀 더 빠르게 사용할 수 있도록 한다.    이 실행기를 통해 자바스크립트 기반의 다양한 어플리케이션을 만들 수 있게 되었다.     크로스 플렛폼은 윈도우, 리눅스, 맥 등의 다양한 환경에서도 실행이 가능한 것이다.     Node.js는 다양한 환경에서 사용할 수 있는 프로그램이다.    퀴즈 1 - Node.js의 이해     학습을 마치..

마지막 문제는 실습 문제라서 코드가 정말 길이서 따로 이 문제를 풀기로 했다. 아직 실습 문제를 혼자서 풀 수 있는 실력은 되지 않아서 자료를 찾아보면서 풀었다.    테스트 문제 풀기 두 번째 문제 4번    주어진 코드 App.js    index.html   api.js  CoffeeMaker.js   store.js    코드 분석하기 CoffeeMaker.jsCoffeeMaker 함수클로저로 상태와 API를 제어하는 함수이다.상태(state)는 초기화 후 클로저 내에서 유지되며, store.js의 update를 통해 관리된다.주요 메서드prepareMachinegrindBeanbrewPowdergetCoffeeaddBeangetState핵심 메서드prepareMachine : 머신을 준비하고 A..

점심을 늦게 먹은 데다 집안일할 게 있어서 하고 나니 4시 반이 넘었다. 지금부터 2시간 동안 열심히 오후 공부를 진행해보려고 한다. 지난 2주 동안 난 자바스크립트를 정말 열심히 공부했다.오늘은 이 과목을 마무리하는 의미로 테스트 문제를 풀어보려고 한다. 잘 풀 수 있을지 걱정이지만 풀 수 있는 데까지 최선을 다해 볼 것이다.     테스트 문제 풀기     문제 1번     문제는 잘 풀었지만 코드를 분석해보며 해설도 써보겠다. 핵심 포인트 nameChanger는 전역에서 선언된 함수로, 기본적으로 this는 호출 방식에 따라 달라진다.user.nameChanger로 참조할 수 있지만, 호출 방식에 따라 this가 다르게 바인딩된다. 보기 분석1. "nameChanger" 메서드를 호출하면 globa..

이제 지금까지 완성한 프로젝트를 보며 점검해보는 시간이다. 이것까지만 하고 점심을 먹을 생각이다.    실습 4 - 프로젝트 완성    생각해볼 문제 1. 게임에서 추가할 수 있는 방안 고민하기 컴포넌트에서 키보드 입력을 받았을 때  app에서 State 로직과 연결해서 selectCharacter로 단어를 선택하게 된다. 그리고 여기서 게임이 진행됨에 따라 상태를 바꿀 수 있었다. 상태를 줄인다면 코드를 줄일 수도 있을 것 같다.게임의 상태를 하나의 함수에 묶어서 처리했는데 이것을 여러 개로 나눌 수도 있겠다. 컴포넌트를 분리해서 모듈화를 하는 방법도 생각해보자. 프로젝트의 기능적인 부분을 보면 Chances나 time을 조절해서 난이도를 조절할 수 있다. 키보드를 눌렀을 때 단어의 길이도 조절이 가능..

행맨 게임을 만드는 일이 정말 힘들다. 두 번째 실습은 코드 자체가 잘못되어 있어서 코드를 아무리 맞게 작성해도 실행이 되지 않는 문제점이 있었다.엘리스에 문의를 해도 전혀 답장이 없으니 그냥 나 혼자서 해결하거나 적당히 넘어가는 것이 나을 것이다. 그래도 실습이 얼마 남지 않았으니 여기서 포기하는 건 정말 아쉬웠다. 지난 6월부터 웹 개발 공부를 시작한 후로 그 어떤 힘든 과제가 있어서 결코 포기한 적은 없었다. 힘을 내서 나머지 실습을 진행해 보겠다.    실습 3 - 컴포넌트 만들기 2     문제 풀기 1. components.js 살펴보기     2. Keyboard 컴포넌트 구현하기키보드 버튼에서 onClickEventListener를 추가하고 onClickItem을 추가한다. 이것은 랜덤 함..

아침식사 후 새벽에 정말 해도 안되었던 실습 문제 영상을 여러 번 돌려서 다시 시청하며 드디어 해결할 수 있었다. 이제 다음 문제로 넘어가도 될 것 같아 두 번째 실습 문제를 풀어보려고 한다.하나의 실습 과제는 20분 내외의 분량이라 꽤 많다. 거기에 잘 이해가 되지 않는 부분은 다시 되돌리기도 하고, 학습일지까지 써야 하니 한 과제 당 1시간이 훨씬 넘게 걸리고 있다. 그래도 앞으로 게임 개발을 하게 될 개발자로서 이 수업은 정말 중요하므로 모두 성실하게 임해볼 것이다. 이제 본격적인 공부를 시작해보겠다.    실습 2 - 컴포넌트 만들기 1     문제 풀기 1. components.js 살펴보기     2. 이전 코드 실행하기  아직 아무것도 구성되어 있지 않다. 이제 state 파일의 initia..