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

점심을 늦게 먹은 데다 집안일할 게 있어서 하고 나니 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 - 행맨 게임 코드 구조 : 상태 관리 여기서 객체는 완전히 새로운 객체이다. 상태 관리에서 컴포넌트로 코드를 넘겨준다. 유저가 어떤 동작을 했을 때 상태 변경할 수 있는 요청을 보낸다. 이때 요청은 콜백 함수를 호출함으로 이루어진다. 그러면 상태 관리 코드에서는 상태를 넘기면서 상태를 바꾼다. 다른 객체가 되면 기존 객체의 데이..

이어서 영화진흥위원회에서 받은 키로 JSON 실습을 진행해보겠다.    영화진흥위원회 API 실습해보기  1. JSON의 객체 타입 객체 안에 키와 VALUE를 접근하는 실습을 진행했었다. 이제 본 프로젝트 실습으로 넘어가보자.    2. 폼 태그에서 중요한 3가지 내가 만든 사이트의 정보를 가지고 오고 싶다면 비동기 통신의 Ajax를 사용할 수 있다. 요청을 받으면 사이트로 요청을 보낼 것이다. 클릭할 때마다 데이터를 가져오되 화면에서만 가져오는 비동기로 만들어보려고 한다. 폼 태그에서 제일 중요한 것은 action과 method이다. 서버의 주소와 전달할 방법, 그리고 넘겨줄 데이터가 필요하다.   이것을 제이쿼리 방식으로 받아오려고 한다.    3. 기본적인 정보 작성하기조금 전에 보았던 영화 정보..

제이쿼리에서 효율적으로 활용하는 Ajax에 대해서 공부해 볼 것이다. 이 수업부터는 인공지능 사관학교에서 진행되었던 자바스크립트 수업이다. 어제 수료식도 했지만 난 여전히 한 달 동안 열심히 공부해서 이곳에서 배웠던 모든 것들을 블로그에 정리해서 학습일지로 올릴 생각이다.이번 달에는 공부일지를 많이 올리지 못해 남은 3일 동안 최대한 많이 올려야 매달 목표량인 300개를 채울 수 있을 것 같다.     Ajax 기본 개념과 동기와 비동기의 차이  XML은 HTML과 비슷하다. XML은 태그를 통해 주고 받는 것을 말한다. 동기화에서 synchro는 모든 동작을 똑같이 하는 것이다. 여기에 a가 불으면 부정의 뜻으로 비동기를 뜻한다.      클라이언트는 서버에게 요청을 하고, 서버는 그에 따른 응답을 한..

실습 문제만 풀면 이 단원 학습도 마치게 된다. 오늘 저녁도 안 먹고 잠을 잤더니 배가 무척 고프기는 하지만 그래도 공부를 해볼 것이다.     실습 4 - 유저 정보 요청하여 변환하기    App.js   index.html   index.js   User.js     문제 풀기 1. 유저 정보를 변환하는 함수 작성하기 또는 이렇게 작성해도 된다. 유저를 거르는 필터 함수를 받는다.      2. transformUser 함수 작성하기유저 이메일 정보 등을 변환하는 정보를 작성한다.  실행해보니 앱이 작동되지 않아 코드를 수정해보았다. 변수 이름과 함수 이름을 잘못 쓴 부분이 있었다.    3. 코드 수정하기   4. 코드 실행하기     데이터가 이렇게 요청되었다. 모두 40세 이상의 유저를 받을 수..