본문 바로가기

Frontend/엘리스 SW 엔지니어 트랙87

[ 엘리스 SW 엔지니어 트랙 ] 16일차(4주차: 자바스크립트 III - Promise, async / await, API 통신) 📍 16일 차 11.16. 화.(실시간 강의) 어느덧 엘리스를 시작한지 4주 차가 되는 날이다. 4개월의 전체 과정 중 1/4인 약 25%를 달려온 셈인데, 생각보다 시간이 빨리 가서 놀랐다. 남은 3개월도 꾸준하게 배운 내용을 기록하여 미래의 기본이 탄탄한 프런트엔드가 될 나의 밑바탕이 되어보자. 오늘은 동기 / 비동기, 콜백 함수, promise에 대해서 배웠다. 항상 콜백함수를 배울 때는 JS 엔진의 동작방식이랑 같이 배우게 되는데, 잘 알아둬야 하는 이유는 기술 면접에서 물어보기 때문이다. 실제로 면접을 볼 때마다 call back과 promise 함수의 차이점에 대한 질문을 받았다. 그때는 뭉뚱그려 대답했는데, 이번 기회를 통해 차이점을 확실하게 알아야겠다. ❏ 동기 / 비동기 동기(synchr.. 2021. 11. 16.
[ 엘리스 SW 엔지니어 트랙 ] 15일차 📍 15일 차 11.13. 토.(온라인 강의) 오늘은 JS엔진, JS 코드 실행, 렉시컬 환경, Hoisting, globalThis 등에 대해서 배웠다. 실행 컨텍스트, 렉시컬 파트는 확실하게 배워놔야 나중에 까먹지 않을 것이다. ❏ JS 엔진 JS 엔진은 JS 코드를 읽어 실행하는 프로그램이다. JS 코드는 JS 엔진을 통해 파싱되고 실행된다. Chrome 브라우저의 경우 V8 엔진을 사용한다. node.js 는 브라우저 외의 환경에서 JS 코드를 실행하도록 하는 프로그램이다. node.js 는 여러 프로그램으로 구성되며, JS 코드를 읽는 프로그램으로 V8을 사용한다. 브라우저 환경과 node.js 환경은 같은 JS 코드를 작성해도 다르게 동작할 수 있다. ❏ JS 코드 실행 JS 엔진은 코드 실행.. 2021. 11. 15.
[ 엘리스 SW 엔지니어 트랙 ] 14일차 📍 14일 차 11.12. 금.(온라인 강의) 오늘은 closure, arrow-function, spread operator, this 등 자바스크립트 동작 원리에 대해서 배웠는데, 아침부터 지금까지 계속 매달리는 중이다. 특히 closure 부분이 조금 어려운데 아무래도 내가 지금까지 잘 사용하지 않았던 문법이어서 그런가 보다. 자주자주 보고 익숙해져야겠다. 그리고 일반 함수와 화살표 함수의 차이는 FE면접에서 몇 번 받았던 질문이다. 그때는 코드의 가독성 부분만 강조했는데 `this`를 예로 들어 설명하면 면접관이 흡족해 하실 것 같다. `arrowFunction`은 선언된 당시의 `this` 값을 유지하기 때문에 `bind`, `call`, `apply`로 바꿀 수 없는 반면 `function`.. 2021. 11. 12.
[ 엘리스 SW 엔지니어 트랙 ] 13일차 📍 13일 차 11.11. 목.(실시간 강의) 오늘은 JS에서 어려운 문법인 scope, this, 실행 컨텍스트, 함수, restParameter에 대해서 배웠다. 이 내용들은 저번에 읽었던 코어 자바스크립트에 나왔던 내용이다. 책을 읽은 지 약 2개월 정도밖에 안됐는데 부분 부분 까먹은 내용들이 있었다. 까먹지 않게 틈틈이 읽어야겠다. ❏ 스코프 변수가 작동하는 유효범위 변수에 접근할 수 있는 범위 Global: 어느 곳에서든지 해당 변수에 접근할 수 있다. Local: 해당 지역에서만 접근할 수 있다. ❏ 실행 컨텍스트 실행 컨텍스트를 바르게 이해하면 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이 스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐.. 2021. 11. 11.
[ 엘리스 SW 엔지니어 트랙 ] 12일차 📍 12일 차 11.10. 수.(온라인 강의) 오늘은 DOM과 event를 온라인강의로 배우는 날이다. 이전 챕터와는 다르게 DOM은 자주 다뤄보지 않은 개념 이어어서 관련 문제를 푸는데 오래 걸렸다. 익숙해질 때까지 반복해야겠다. DOM에 관한 기본적인 개념은 어제 다뤘기 때문에 오늘은 event를 집중적으로 다뤄볼까 한다. ❏ DOM과 이벤트 소개 DOM(Document Object Model): 문서 객체모델, 객체 지향 모델로써 구조화된 문서를 표현하는 방식(문자열로 된 코드를 트리구조 형태로 바꿔주는 것) DOM 은 XML 이나 HTML 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM 의 종류: Core DOM(모든 문서 타입을 .. 2021. 11. 10.