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

며칠 전에 공부를 마쳤던 자바스크립트 심화 과정이다. 이 과목도 일주일에 걸쳐 공부했었다. 기초보다 짧게 끝난 것 같아 내가 꾸준히 체크하고 있는 학습 달력을 살펴보니 별로 그렇지 않았다. 심화 수업은 사실 정말 어려웠다. 풀리지 않는 실습 문제도 두 문제나 있어서 학습 진행률이 3% 부족하다. 엘리스에 이 문제에 대해 문의를 해보았는데 인공지능 사관학교 운영 사무국에서 따로 관리하니 담임 선생님을 통해 연락하겠다는 답변을 받았다. 담임이 관리한다고 하니 난 당연히 내 의견이 묵살되며 아무런 답변이 오지 않겠구나 하고 생각했는데 역시나였다. 정말 이번 담임 선생님(특히 여자)들은 정말 마음에 안 든다. 약속을 하면 지킨 적이 거의 없고 도대체 믿음이라고는 조금도 가지 않는 사람이었다. 카톡으로는 장황하게..

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

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

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

API의 다른 형태인 fetch API에 대해서 공부해보겠다.    이론 6 - Fetch API           for문을 통해서 header의 정보를 얻을 수 있다.     promise를 사용하지 않고 .json을 사용하는 것은 이와 같다.       이런 식으로 fetch 데이터를 활용해서 통신할 수 있다.      퀴즈 6 - Fetch API        학습을 마치고조금 전에 7시 다 되어서 6시 40분이었나 아무튼 그쯤이었는데 너무 졸리고 피곤해서 밥 먹을 기운도 없어 낮잠을 자게 되었다. 근데 계속 자다가 금방 전화가 와서 깼다. 그리고 오늘 공부할 게 조금 남아있던 참이라 일어나서 학습을 마무리해본다. 강의를 듣다 너무 피곤해서 학습일지를 쓰다 말았다.배는 고프지만 머리는 맑아서 참 ..

다시 이어서 비동기 공부를 시작해본다. 요즘 들어 공황장애가 다시 심해졌는지 외출을 한번 할 때마다 너무 힘들다. 어제도 그제도 버스나 지하철 타면 숨이 막히고 하늘이 노래져서 정말 힘든 시간을 보냈다. 오늘도 같은 증상을 느끼며 길에서 쓰러지지 않으려고 호흡을 하며 정신줄을 놓지 않으려고 애를 썼다.지금도 많이 힘들지만 그래도 아주 천천히 공부를 해볼 생각이다. 그러다가 너무 힘들면 쉴 생각이다. 이것 외에도 지금 몸의 다른 증상이 있어 걱정이 많이 된다. 아무튼 몸이 병이 날 정도로 열심히 개발 공부를 했다는 증거니 스스로가 자랑스럽기는 하다. 예전에 발레리나 강수지가 그런 말을 했던 기억이 난다. 저녁에 발이 아프지 않다면 그건 연습을 열심히 하지 않았다는 거라고..그래서 난 한편으로는 감사하고 기..

점심을 먹고 눈 찜질도 하고 쉬었다가 이제 4시가 다 되어 오후 공부를 시작해본다. 오후에도 3시간 정도 열심히 공부할 생각이다. 2시간만에 3주차 학습을 마치고 자바스크립트 마지막 날 두 교시 분량의 수업도 절반 이상 마치는 것이 이번 오후 공부의 목표이다.     이론 4 - async/ await      원래는 .then(), .catch()를 사용하는데 await 키워드를 사용하면 then에서 data를 받을 수 있다.       fatchData2를 호출하는 경우에 fatchData3를 바로 실행하지 않고 fatchData2가 promise로 리턴된다. promise가 성공 혹은 실패가 될 때까지 제어를 멈추게 된다. 따라서 비동기 코드의 순서를 부여하는 것은 promise와 같다.      ..

식사를 기다려며 한 가지 단원을 더 공부하기로 했다. 강의가 조금 길지만 그래도 이것까지는 공부를 마쳐볼 것이다. 점심에 고구마를 찌려고 다듬고 기다리는 중이다. 작은 요리라도 해보면 한 끼 식사의 감사함을 느낄 수 있다.    이론 3 - Promise       실행 결과를 보면 Promis의 처리가 더 먼저 되는 것을 알 수 있다.      new Promise를 사용할 수도 있고, 비동기 처리를 반환하는 fetch()를 사용할 수도 있다. promise에는 상태를 나타내는 flag가 있다. 성공의 경우 then, 실패할 때는 catch가 호출된다.       콜백 함수는 executor라고 한다. 이 코드는 0~1 값 중에서 0.5보다 작은 때는 실패는 그 외에는 성공을 호출한다.      이렇게..

이번에는 이벤트 루프에 대해서 공부해 보겠다.     이론 2 - 이벤트 루프      타이머 끝에 실행되거나 인터벌 간격으로 코드를 처리하는 경우가 있다.     메인 스레드는 콜 스택을 이용해서 코드를 읽고 실행한다. 콜스택에서 함수 안에 함수를 호출하는 경우 함수가 스택에 쌓이게 된다. 이렇게 실행 컨텍스트가 쌓이게 된다.비동기에서는 10초 후에 setTimeOut이 종료되면 Task queue로 들어간다. 이벤트 루프가 하는 일은 Task queue에 task가 남아있다면 이벤트 루프를 통해 task를 Call stack에 넣고 코드를 실행한다.              내부적으로는 콘솔이 실행된다.       request()를 만나면 resquest 를 호출한다.      Task queue에 ..