221130 - TIL

Junho Yun·2022년 12월 1일

TIL 모던JS

TIL

목록 보기

22/81

책을 보며 정리한 내용 입니다. 포스팅을 안했었네요

모던 JS를 배울 가치가 있는가

다양한 활용성

범위 측면에서 다른 언어들 보다 뛰어나다고 할 수 있습니다.
프론트엔드와 백엔드 둘다 구성할 수 있으며, 스마트폰 어플, 음성인식과 같은 AI 등의 기술도 구현할 수 있습니다.

빠른 변화

장점일 수도 있고 단점일 수도 있습니다만, 빠르게 변화한다는 것은 그만큼 노력에 대한 보상을 받을 수 있는 분야라는 것 입니다. 최신 기술을 내가 습득할 수 있다면, 다른 사람들 보다 경쟁력을 갖기 쉽다고 말할 수 있습니다. 물론 그만큼 노력해야겠습니다.

리액트의 가상 DOM

프론트엔드 개발자와 DOM

프론트엔드에서 DOM은 매우 중요합니다. 자바스크립트를 이용하면, 이 dom을 직접 지정해서 값을 변경하는 것이 가능합니다. 하지만 랜더링비용(화면표시 속도)에 문제가 생기고, 코드의 양이 많아졌을 때에는 쉽게 코드 파악이 힘들다는 단점이 있습니다.

가상 DOM

위의 문제를 해결하기 위해 등장한 것이 가상 DOM 입니다.

가상 DOM 은 자바스크립트 객체로 가상으로 만들어진 DOM입니다. 이를 이용해서 실제 DOM과의 차이를 확인하고, 변경된 부분만 반영합니다. 이는 곧 DOM 조작을 최소화 할 수 있습니다.

가상 DOM 장점

DOM조작을 최소화 한다는 것은 곧 렌더링 비용을 최소환으로 억제할 수 있다는 것을 뜻 합니다.

패키지 관리자 (npm, yarn)

자바스크립트 간단 역사

초기 자바스크립트 : 하나의 파일에서 모두 동작 -> 코드가 커지면서 혼란스러움
중기 자바스크립트 : 코드를 분할 하는 기능이 생김 -> 의존성 에러, 로딩시 코드파악 어려움
현대 자바스크립트 : 패키지 관리자를 사용해서 위의 문제점 해결

패키지 관리자

자바스크립트의 npm을 말합니다. 패키지 저장소에 저장된 여러가지 기능을 패키지(묶음)으로 받아와서 활용할 수 있도록 해줍니다.

npm install 이라는 명령어 하나로 무 많은 패키지들을 사용할 수 있습니다. 설치를 했을 때 package-lock.json 파일이 생성되고 lock 파일에 다른 패키지의 버전 정보나 의존 관계가 기록됩니다.

패키지 관리자 장점

의존 관계를 의식하지 않아도 자동으로 해결
팀 안에서 패키지를 공유하고 버전 통일하기 쉬움
전 세계에 공개도니 패키지를 간단한 방법으로 이용 가능
로딩시 위치 파악이 쉬움

ECMAScript 버전

전환기

자바스크립트의 가장 큰 변화가 있었던 것은 2015년 ES6 버전입니다.
따라서 해당 버전에서 어떤 것이 생겼는 지, 그리고 각 해당 내용들에 자세히 아는 것이 좋습니다

화살표 함수
class 구문
분할 대입
템플릿 문자열
스프레드 구문
Promise
기타

모듈 핸들러 & 트랜스파일러

모듈 핸들러 사용 이유

개발할 때는 파일을 나누고 프로덕션용으로 빌드할 때는 파일 하나에 모으기 위해서 만들어졌습니다. 즉 만들때는 생산성에 초점을 맞추고, 배포할때는 성능에 문제가 되지 않도록 해주는 것 입니다. 많이쓰는 모듈 핸들러로는 웹팩(webpack)이 있습니다.

트랜스파일러 사용 이유

자바스크립트 표기법을 브라우저에서 실행할 수 있는 형태로 변환해주는 역할을 합니다.
자바스크립트는 매해 발전하고 있지만, 브라우저에서 해당 버전의 받아들일 준비가 안되어 있는 경우들이 있습니다. 이때 작동하지 않는 브라우저에서 그 기능을 사용할 수 있도록 오래된 표기법으로 변환해주는 방식 입니다. 주로 쓰이는 것으로는 바벨(babel)이라는 트랜스파일러가 주류입니다.