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

보호되어 있는 글입니다.

2주차 수업이 시작되었다. 심화 과정이 정말 어렵지만 그래도 공부를 계속해보기로 했다. 1시간만 더 공부하고 새벽 공부는 여기서 마치려고 한다.      이론 1 - 자바스크립트 변수 정의 과정       실행하기 위해서는 기계가 코드를 읽을 수 있어야 한다. 컴퓨터가 읽고 실행할 수 있어야 하는데 이것은 CPU 같은 기계 장치가 읽고 실행을 할 수 있다는 뜻이다. CPU에는 instruction 즉 기계가 알아들을 수 있는 몇 종류의 명령이 있다. 자바스크립트 코드가 어떠한 과정을 거쳐 CPU의 insturction으로 변환되는 과정이 필요하다.이 작업을 자바스트립트 엔진 즉 컴파일러가 해준다. 자바스크립트 코드는 엔진을 통해 파싱되고 실행된다. 파싱은 AST라는 나무 형태의 객체 코드로 변환되는데, ..

이어서 남은 실습 문제를 풀어보겠다.      실습 7 - ArrayMainipulator 구현하기    App.js     ArrayMainipulator.js   index.js  메서드 체이닝 방식이란 app.js 파일에서 하나의 객체에 여러 작업을 동시에 진행하고, 마지막에 getArray()를 반환하는 것을 말한다. 이렇게 체인으로 연결된 것과 같다.    1. 코드 실행해보기    원소 추가 기능만 되고 아직 다른 기능은 구현되지 않았다. 이제 이 코드를 추가해볼 것이다.    2. 이전 함수 코드 살펴보기 이처럼 구현하면 된다.   3. removeElement 함수 만들기 어떤 배열을 넣는데, index가 0이라고 하면 첫 번째 인덱스를 넣는다. array.slice(0, 0)을 하면 빈 ..

실습 문제가 정말 많지만 하나하나 풀어보며 개념을 정리해 보겠다.    실습 5 - map, filter, reduce 구현하기   문제 파일 App.js     index.js   component.js     1. 문제 코드 실행하기     map 함수는 초기 배열을 2배 하는 것이다.     filter 함수는 주어진 값보다 작은 숫자만을 넣는 것이다.  reduce 함수는 이 배열 모두를 더하는 것이다.    2. map 함수 코드 작성하기map 함수는 for 문을 사용해서 구현한다. for 문은 전체 배열을 돌면서 func array에 전체 배열의 값을 넣는다. 만약 func가 다음과 같은 값이라고 가정하면 다음과 같이 쓸 수 있다.      3. filter 함수 코드 작성하기filter는 i..

이제 1주차의 마지막 이론 수업이 남아있다. 이후로 실습할 내용이 많이 남아있지만 얼마 남지 않지 않았다고 생각하니 더욱 힘이 난다. 처음 들어보는 개념이지만 충분히 이해할 수 있을 것이다.    이론 6 - ES6 Rest, Spread Operator      findMin은 여러 숫자를 받아 가장 작은 수를 리턴한다. findMin 함수의 모든 인자가 rest로 묶는다. 이 ...을 이용하면 함수 인자들을 하나의 배열로 묶을 수 있다. 그런 다음 reduce 로직을 통해 가장 작은 수를 찾는다.      여기서 유의할 점은 rest가 배열이 아니라 객체라는 것이다.     재귀적으로 호출하면서 sum에 head 값을 더하고 head를 제외한 나머지 인자들을 리턴한다. tail은 길이가 0일 때 리턴..

클로저라는 이름을 들어보기는 했으나 무엇을 하는 건지는 잘 모르고 있다. 이번 단원을 통해 클로저에 대해서 자세히 알아볼 것이다.    이론 5 - 자바스크립트 Closure 자바스크립트에서 함수를 만들었을 때, 함수가 f에 할당이 되면 f는 함수 객체가 된다. function이라는 객체는 전역으로 존재하는 객체이다. 모든 객체는 전역 fuction 객체를 상속받아 인스턴스가 된다. bind, call, apply 함수도 function 객체의 메서드로 프로토타입 체인으로 메서드에 접근할 수 있다. 일급 객체는 함수도 변수처럼 인자를 넘기고 리턴할 수 있는 것을 말한다. 함수를 완전히 변수처럼 다룰 수 있다.      add 함수가 있을 때 reduce는 함수의 인자로 넘어간다. reduce는 콜백 함수..

이번에는 화살표 함수와 일반 함수의 차이에 대해서 공부해 보겠다.    이론 4 - 화살표 함수와 일반 함수의 this  자바스크립트 엔진이 함수를 실행할 때 새로운 함수 컨텍스트를 생성하고 그것을 콜 스택에 넣는다고 앞서 이야기했다. 제일 먼저 전역 컨텍스트가 들어가고 함수 컨텍스트가 쌓이게 된다. 그리고 함수 안에 다른 함수도 호출하며 콜 스택이 쌓이게 된다. 함수가 너무 많이 쌓이면 콜스택이 스택 오버플로가 생긴다.변수를 참조할 때는 스코프 체인을 따라서 실행 컨텍스트 안에 참조하지 못하는 변수를 찾을 수 있다. 예를 들어 myFunc() 함수가 있을 때 a라는 변수가 있다고 하자. a가 어디에서 왔는지 스코프 체인을 따라 자바스크립트 엔진이 찾는데 전역 컨텐스트까지 가도 찾지 못하면 오류가 발생한..

이번에는 this에 대해서 자세히 학습하게 된다. 자바스크립트 심화 수업을 통해 이전에 알지 못했던 것들에 대해 알게 되는 것 같다.    이론 3 - this가 가리키는 것 myFunc()처럼 직접 함수를 호출하는 경우가 있고, o.method처럼 객체 메서드를 호출하는 경우도 있다. 이런 식으로 생성자를 호출할 수도 있고, f.call처럼 데이터를 넘겨주는 간접 호출 방식도 있다. call, apply는 function 객체의 메서드이다. 자바스크립트에서 객체를 만들면 모든 함수는 function 객체를 상속받는 인스턴스이다.      콜백 함수가 console.log로 출력한다고 가정해보자. myFunc()를 만들고 name, callback 함수를 받는다고 했을 때 특정 작업을 하고나서 콜백 함수..

어제도 공부를 얼마 하지 못하고 일찍 취침했다. 그리고 다음날 새벽 1시 10분에 일어나 공부를 시작해 본다. 새벽에 일찍 일어나 공부할 수 있어서 정말 기뻤다. 어제는 가족들과 오랜만에 식사도 하며 오손도손 이야기도 나눌 수 있어서 정말 좋았다. 식사 후에는 피곤해서 9시 조금 넘어서 일찍 취침한 것 같다.오늘은 새벽과 아침에 정말 공부를 많이 해서 가능하면 자바스크립트 심화 과정을 거의 끝내고 남은 수업도 모두 들어볼 생각이다. 그래서 저녁까지 해서 심화 과정을 웬만하면 다 끝내고 내일 새벽에는 그동안 정리하지 못했던 것들도 하는 시간을 갖기로 했다. 내일은 수료식이니 내 생애 정말 중요한 날이다.     이론 2 - 실행 컨텍스트  자바스크립트 엔진이 코드를 읽고 실행했을 때 전역 컨텍스트를 먼저 ..