웹앱 구성요소

• HTML
• CSS
• 자바스크립트

웹앱의 실행

브라우저 (UI표현)
웹서버(html) -> 브라우저(JS실행) -> UI 표현

앱 성격에 따라 랜더링 방식이 존재

• 클라이언트 사이드 랜더링 - 브라우저가 JS해석 실행 시키면 JS에 의해 최초HTML에서 변경된 상태로 나오는 UI
• 서버 사이드 랜더링 - 웹서버에서 HTML을 브라우저에 전송하여 실행 후 나오는 UI

JS는 오직 브라우저 내에서 런타임환경이 제공되었으나 node.js 라는 새환경이 생김

node.js

• JS는 오직 브라우저 내에서 런타임환경이 제공되었으나 node.js 라는 새환경이 생김
• node.js 웹브라우저 없이 서버사이드에서 런타임 환경을 제공하는 sw플랫폼
• npm 노드 패키지 관리자. node.js에서 사용하는 모듈을 패키지화 하여 npm을 통해 관리 배포
• 노트 패키지 설치 시 npm 명령어 사용
• 웹팩, 파셀 등 package.json 스크립트 기반으로 동작하는 패키지 번들러

node.js 모듈설치

• 프로젝트 기본설정 npm init
• parcel설치 npm install -g parcel-bundler
• typescript설치 npm install -g typescript

모듈
여러 기능들이 작성되어 있는 코드가 모여있는 하나의 파일
(참고) https://velog.io/@doondoony/JavaScript-Module-System#-es6-modulesesm

빌드시스템

• webpack, parcel 란 패키지 번들러
• 기능단위로 모듈화 한 js 파일을 하나로 관리 해주는 도구
• gulp 란 task runner. 반복작업에 대한 자동화

패키지 번들러를 왜 사용하는가

• 웹사이트가 대규모가 됨에 따라 크고 많은 파일 관리
• 서버-클라이언트 간 처리 속도개선
• 모듈을 하나의 최적화 된 파일로 만들어준다
• 소스의 가독성

웹팩과 gulp 차이점

• webpack + gulp 조합
• parcel + gulp 조합

babel

• es6코드를 그 이전 js 엔진에서 실행할 수 있도록 이전 버전과 호환 되는 js 버전으로 변환해주는 컴파일러

앱 APP

• 본질 입력 데이터를 어떠한 처리과정을 통해 출력 데이터로 변환하는 과정