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

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에 ..

조금 전까지 1시간 반 동안이나 새벽에 해결하지 못한 문제를 다시 풀어보았으나 여전히 해결하지 못해 그냥 넘어가기로 했다. 나중에 풀 수 있는 때가 있을 것이다. 때로는 안 풀리는 문제가 있을 때 넘어가는 것도 좋은 방법이다. 그래도 3문제 중에서 한 문제는 해결했다.이제 3주차 새로운 단원 학습을 시작해 본다.    이론 1 - 자바스크립트 제어 흐름       자바스크립트 코드는 1번부터 순차적으로 실행되는 것은 아니다. 예를 들어 함수가 선언되고 실행 문장은 17번째 줄에 있다고 해서 코드는 이 순서를 왔다갔다 하면서 실행한다. 비동기 흐름에서도 마찬가지다.    비동기 코드를 이처럼 작성해 볼 수 있다. 자바스크립트는 비동기 API를 작동하여 이 함수를 별도의 공간에 저장한다.  즉, 하나의 메인..

내장 객체 실습부터는 안 풀리는 문제가 태반이라서 내가 예상한 공부 시간보다 3배이상 더 걸리고 있다. 수십 번 코드를 다시 실행해도 선생님 코드대로 똑같이 작성해도 문제가 계속 틀린다.아마도 엘리스 프로그램에서 준비한 강의가 3년이 지나고 4년이 다 되가는 아주 오래된 수업을 넣었기에 지금과는 맞지 않는 문제가 발생한 것 같다. 아무튼 이만저만 실망이 너무 크다. 그래도 할 수 있는데까지 공부를 진행해볼 생각이다. 조금 전에 이런 문제점을 문의사항에 보냈는데 답은 오지 않을 것 같다. 이번에도 안 풀리면 그냥 넘어가려고 한다. 문제 자체가 잘못된 거니까.    실습 5 - 복리 계산기 구현하기    문제 풀기 1. 코드 살펴보기  HTML 파일   App.js 파일   2. 코드 실행하기    아직은 ..

이어서 상대 시간 표시 앱을 구현하는 문제부터 풀어보겠다. 실습 4 - 상대 시간 표시 앱 구현하기 문제 풀기 1. 코드 살펴보기 App.js RelativeTime.js 코드를 실행해보면 이와 같다. 오른쪽에 방금 전이 아니라 시간이 표시되어야 할 것 같다. 2. 코드 설명하기초를 1로 보았을 때 거기에 60을 곱해 분을 초로 환산하고, 이런 식으로 해서 hour, day, week 등을 구한다. 그런 다음 이 조건을 충족하는 타입 맵을 리턴한다.이제 시간을 만드는 함수를 작성해본다. 현재 시간과 기준점이 있고 기준점에 따라 시간을 구하는 suffix도 만든다. 시간을 초로 나누어 특정 시간 전이라는 표시를 붙인다. 다음으로 시간을 계산하는 함수 RelativeTime도 작..

현재 시간을 구하는 문제부터 실습 문제를 풀어보겠다.    실습 2 - 현재 시간 구하기     문제 풀기 1. 코드 살펴보기 App.js   Clock.js  Clock.spec.js   2. 코드 실행하기  현재 시간이 나와야 하는데 지금은 현재 시간을 구할 수 없다. 이제 코드를 작성해보자.    3. 코드 작성하기연, 월, 일, 시, 분, 초의 객체를 만들고 현재 시간 문자열을 작성한다. 문자열을 작성할 때는 템플릿 문자열을 사용한다. 그리고 date 객체가 아닐 때는 현재 시간을 구할 수 없다는 메시지를 띄운다. 하지만 주의할 점이 한 가지 있다. JavaScript의 Date 객체에서 getMonth 메서드는 0부터 시작한다. 즉, 0은 1월, 1은 2월, … 11은 12월을 의미한다. 그래서..

자바스크립트 내장 객체 세 번째 시간이다. 2주차 강의는 이 단원이 마지막이고 이제 실습 문제가 많이 남아있다.     이론 5 - 자바스크립트 내장 객체 3  이 메서드의 값은 바뀌지 않는다.                이 값은 date2가 더 크다. dayTime은 하루를 밀리초로 계산한 값이다.         여기서는 문자열을 받아 리스트 형태로 변환한다. admin은 제외하고 하나의 문자열로 만드는 코드이다.           자바스크립트 객체를 JSON 객체로 만들어준다. parse는 JSON 문자열을 자바스크립트 객체로 변환하는 것이다.     퀴즈 5 - 자바스크립트 내장 객체 : Math        퀴즈 6 - 자바스크립트 내장 객체 : Date        퀴즈 7 - 자바스크립트 내장..