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

마지막 문제는 실습 문제라서 코드가 정말 길이서 따로 이 문제를 풀기로 했다. 아직 실습 문제를 혼자서 풀 수 있는 실력은 되지 않아서 자료를 찾아보면서 풀었다.    테스트 문제 풀기 두 번째 문제 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..

첫 번째 실습인 초기 앱 구성하기 프로젝트를 이어서 진행해 보겠다. 아직 12분 이상의 영상 시청 분량이 남아있다.    실습 1 - 초기 앱 구성하기 두번째지금까지 작성했던 코드를 초기화하고 이제 게임에 맞게 코드를 다시 작성해 보겠다. 1. util.js 살펴보기changeState는 상태를 변경하는 코드이다. 이제 onClickStart를 구현해 보겠다. 게임을 시작했을 때 어떤 일이 벌어지는지에 대한 것이다. app에서는 콜백을 통해 완전히 새로운 상태를 만들어 기존 state를 완전히 덮어씌운다.단어를 로딩하는 것은 util함수에 있는데 이 내용부터 살펴보기로 하자.   단어를 데이터로 받아오는 것이다.     2. app에서 fetchWord 호출하기이것을 콘솔 로그로 시작한다.    3. c..

이어서 행맨 게임 로직에 대해서 학습해보고 본격적으로 게임을 만들어보는 실습을 진행해보겠다.    이론 4 - 행맨 게임 코드 구조 : 게임 로직       자바스크립트에서는 enum이 없으므로 이들을 별도의 객체에서 저장해 유틸에서 활용한다. 타이머는 60초 정도로 정하고 있다.     true는 특별한 의미는 없고 키 값이 존재한다는 것이다. 처음에는 별로 저장되었다가 단어를 하나씩 맞출 때마다 베일이 벗겨지는 정보가 wordArr이다.                실습 1 - 초기 앱 구성하기      문제 풀기 1. 앱 실행하기  수업 영상에는 행맨 이미지가 보이는데 여기서는 아무것도 보이지 않았다. 이제 코드를 작성하며 게임을 하나씩 만들어보기로 하자.    2. 행맨 이미지 컴포넌트 살펴보기행맨..

자바스크립트 심화 4주차 수업만이 남아있다. 이 주차에는 행맨 게임을 만들어보는 시간인데 정말 재미있을 것 같다. 사실 내가 자바스크립트를 공부하는 목적도 모두 게임을 만들기 위함이다.이제 본 수업에 들어가 게임을 만드는 방법에 대해서 배워보기로 하자. 이론 1 - 행맨 게임 소개 이론 2 - 행맨 게임 코드 구조 : 상태 관리 여기서 객체는 완전히 새로운 객체이다. 상태 관리에서 컴포넌트로 코드를 넘겨준다. 유저가 어떤 동작을 했을 때 상태 변경할 수 있는 요청을 보낸다. 이때 요청은 콜백 함수를 호출함으로 이루어진다. 그러면 상태 관리 코드에서는 상태를 넘기면서 상태를 바꾼다. 다른 객체가 되면 기존 객체의 데이..