프론트엔드 공부하기
2024년 1월 1일
공부하면서 까먹지 않게 적어둘까 한다.
너무 체계 없이 그 때 그 때 필요한 것만 찾아서 코드만 베껴 쓰는 식으로 했더니 영 기초가 부실한 것 같아서 제대로 공부를 해 볼까 한다. 패스트캠퍼스에서 김민태의 프론트엔드 아카데미를 듣기 시작했다.
추천 도서
자바스크립트 완벽 가이드
한국어판은 번역이 영 안 좋다는 후기가 있어서 일단 영문판으로 보기 시작했다. 아는 내용은 빠르게 넘어가면서 훑어봐야 할 듯.
환경 준비
VS Code 설치
Extension 중 Debugger for Chrome을 설치하라고 했으나 해당 확장은 이제 더 이상 안 나오는 것 같다. 대신 JavaScript Debugger를 쓰라고 권장하길래 그걸 깔았다.
node.js 설치
LTS 버전을 깔아도 되고 그냥 최신 버전을 깔아도 된다. 원래 아이맥에 깔려 있던 게 버전 18이라서 이 김에 삭제하고 다시 깔았다.
brew로 설치했고, 21.5.0 버전이 설치됐다.
Parcel.js 설치
npm install -g parcel-bundler
TypeScript 설치
npm install -g typescript
자바스크립트 변천사
LiveScript, JScript부터 시작해서 ActionScript의 전성시대, 아이폰의 등장을 거쳐서 모던 자바스크립트로 이어지는 역사를 간략하게 짚어준다.
ES2015 이후 버전으로 개발하고 BABEL 등을 통해서 2009년에 발표된 ECMAScript 5.0 버전으로 트랜스파일해서 배포하는 방식에 대해 설명한다.
웹앱의 구성요소
HTML, CSS를 JavaScript를 가지고 렌더링하는 웹앱의 특성에 대해 설명
Client Side Rendering, Server Side Rendering 등에 대해 설명
HTML, CSS만으로는 표현이 불가능한 2D, 3D graphics를 (차트나 간단한 그래픽을 표현하기 위해) 구현하기 위한 Canvas 등에 대해 설명
미디어 파일, 웹 어커, 웹 어셈블리 같은 스펙이 있다 (하지만 이 에센셜 강의에서는 다룰 수 없다) 설명
모던 JavaScript와 개발 환경
(개발 환경 중심으로 설명함)
모던 자바스크립트의 기준이 분명하게 정해져 있는 건 아니지만 대체로 ES2015 버전부터 모던 자바스크립트라고 부르는 데 무리가 없는 편이다.
프론트엔드 개발 환경은 ES2015 등장부터는 아니고, node.js가 등장하면서부터 급격하게 변화하기 시작했다.
복잡한 프론트엔드 개발 환경이 왜 이렇게 만들어졌는지 어느 정도 이해하기 위한 내용
이런 개발 환경이 만들어진 이유: 웹앱이 엄청나게 크고 복잡해졌다. 대규모 프론트엔드 웹앱은 수십만에서 수백만 줄에 육박할 수 있다. 심하면 필요한 파일 수만 수만 개에 이를 수 있다.
원래 간단하게 HTML을 수정해 주기 위한 용도로 개발된 언어였는데 이렇게 복잡한 수준까지 진화해 왔다. 원래는 모듈도 없었는데 ES2015부터 모듈 개념이 지원되기 시작함 (import, export)
근데 이 모듈 때문에 엄청나게 복잡해지기 시작했다.
또한 브라우저 호환성 때문에 고려해야 할 게 정말 많다.
계속해서 업데이트되는 자바스크립트 버전과 기능에 발 맞추어 번들러라는 게 등장하기 시작되었다. - 자바스크립트에서 다른 자바스크립트 파일을 불러들이는 작업을 자주 하는데, 이렇게 불러온 자바스크립트 파일들을 하나로 묶어주는 역할을 한다.
번들링이 등장하면서 여러 서로 다른 자바스크립트 코드를 서로 불러가면서 개발하는 게 훨씬 수월해졌다. 예: webpack, parcel 등
번들러에서는 자바스크립트 파일 뿐 아니라 jpg, png, hbs, sass 등 여러 유형의 파일들까지도 입력으로 받을 수 있으며, jpg, png 등 다른 유형의 파일도 출력하게 되도록 바뀌었다. (좀 더 포괄적인 범위의 번들링)
비용 절감을 위해 파일 사이즈를 줄이는 등의 작업도 진행해 줌. (불필요한 주석이나 코드 축소, 이미지 파일 압축 등)
트랜스파일: 다른 언어로 개발된 코드를 브라우저에서 이해할 수 있는 자바스크립트로 변환하는 작업. (컴파일러 - 고수준 언어 > 어셈블리/기계어로 변환: 트랜스파일러: 한 언어의 소스를 다른 언어의 소스로 컴파일. source to source compiler라고도 부름)
BABEL 등이 유명한 트랜스파일러. 요즘 번들러의 중요 역할 가운데 하나가 바로 트랜스파일러 기능을 수행하는 것
TypeScript vs. JavaScript
TypeScript: Superset of JavaScript
자바스크립트와 공생하면서 타입을 지정하는 기능을 추가
데이터의 타입을 분명하게 설명/선언하지 않으면 나중에 유지보수 과정에서 문제가 생길 가능성이 매우 높음. 타입스크립트는 이 문제를 해결하는 것을 최우선으로 함
Node.js and npm
Node.js는 모던 자바스크립트를 만들어가는 과정에서 매우 중요한 자리를 차지함
node.js는 전에는 브라우저에서만 실행시키던 자바스크립트를 아무 데서나 실행시킬 수 있게 해 줌
npm은 노드 모듈을 매우 간편하게 설치해서 쓸 수 있는 환경을 만들어 줌
