참고
자바스크립트 프론트엔드 개발 프레임워크의 최신 동향
프레임워크의 발전
프레임워크 vs 라이브러리
- 라이브러리: 프로그램에서 필요로하는 기능을 제 3자가 사용할 수 있는 형태로 모아둔 것
- 프레임워크: 애플리케이션의 전체 옥은 일부분의 형태를 규정 혹은 방침화한 것
SPA(Single Page Application)
- 브라우저 및 브라우저 렌더링 엔진 내부에서 동작하는 웹 애플리케이션
- 프라우저에서 최초 접근한 URL을 기점으로 하여 다양한 화면으로 이동을 제공하지만 기본적으로 최초의 JTML 안에서 사용자 인터페이스가 완결됨
- 페이지 내의 사용자 인터페이스 변화에 따라 URL이 순차적으로 변화하며, 브라우저 히스토리를 통해 앞의 페이지로 거슬러 올라갈 수 있음
- 페이지에서 필요로 하는 데이터는 서버로부터 API등의 형태로 필요할 때마다 단편적으로 제공됨
React
- 사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해주는 프론트엔드 라이브러리
- A JavaScript libarary fpr building user interfaces
Angular
- 강력한 명형행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한번에 갖춰지는 등 필요한 기능을 모두 내장한 프론트엔드 프레임워크
- Angular CLI 명령행 도구
- 내부적으로 RxJS 사용됨
Vue.js
- 라이브러리적 측면과 프레임워크적인 측면을 동시에 갖는 프레임워크(프로그레시브 프레임워크)
- React처럼 가상DOM을 가지면서도 React만큼 템플릿이 자바스크립트와 밀접하게 결합하지 않는다
- 단일 파일 컴포넌트 스타일
- Vue CLI 지원
React Native
- React의 기술을 기반으로 모바일용 네이티브 애플리케이션을 개발하는 프레임워크
- iOS, 안드로이드 모두 지원하는 애플리케이션 개발
- 네이티브 컴포넌트를 React의 JSX로 추상화하는 방식을 취함
- A framework for building native apps with React
클라이언트 사이드 라우팅
- URL 마다 화면을 만들어두거나 HTML5의 히스토리 API로 이전 버튼을 사용할 수 있게끔 해야한다.
CSS in JS
- 자바스크립트가 CSS 내장
- 여러 라이브러리에서 다른 작성법을 지원하지만 최종적으로 CSS로 변환되어 HTML에 적용
컴포넌트 지향
- 애플리케이션의 기본 정보를 포함하는 페이지를 통째로 하나의 컴포넌트로 정의(루트 컴포넌트)
- 루트 컴포넌트 안에 다른 컴포넌트를 포함시키는 형태로 컴포넌트 간의 부모 관계 및 형제 관계를 형성 및 상호작용을 정의
- 컴포넌트 지향 애플리케이션을 구현할 땐 컴포넌트 단독으로 필요한 기능을 수행할 수 있는 스타일과 스크립트가 존재해야하기 때문에 캡슐화 사용
SSR(server-side rendering)과 프리 렌더링
- 일반적인 웹 애플리케이션에선 사용자가 브라우저를 통해 접근하는 콘텐츠가 이미 삽입된 HTML을 응답으로 받아온다.
- SSR을 적용하면 서버에서 클라이언트로 전달되는 응답 결과에 이미 콘텐츠까지 렌더링을 마친 상태를 전달한다. 이를 구현하기 위해선 서버측에서 SPA에서 만들 렌더링 결과를 완성해야한다.
- 프리 렌더링은 요청이 들어왔을 때 대상이 크롤러인지 판단하여 크롤러인 경우 가상 브라우저로 접근하는 방식으로 생성한 다음 저장해둔 렌더링 결과를 제공하는 방식
가상 DOM(Virtual DOM)
- 자바스크립트가 HTML을 렌더링하는 방법 중 하나이다. React에서 가상 DOM을 채택하고 주목받게 됨
웹 애플리케이션의 MVC
- 뷰: 어떻게 외부에 출력할지를 정의하는 부분. 전달형태는 HTML일수도 있고 JSON일수도 있다.
- 컨트롤러: URL 요청을 받을 때(라우팅) 필요에 따라 컨트롤러가 모델과 정보를 주고받은 다음 적절한 뷰를 골라 사용자에게 반환
프론트엔드 애플리케이션의 MV
- 프론트엔드 애플리케이션에서 말하는 MV(Model-View)는 MVC 애플리케이션의 뷰 부분에 해당
- 웹 애플리케이션에선 본래 콘텐츠가 HTML에 포함된 채로 사용자에 응답을 주기 때문에 View안에 MV와 같은 구성을 할 필요가 없다. 그러나 SPA는 데이터 접근 계층이 추가되거나 URL을 요체하는 처리 등이 끼어들기에 필요하게 되었다.
MVP 패턴
- MV에 프리젠터(Presenter)가 추가된 패턴
- 모델과 뷰 사이에 프리젠터가 위치하여 양자 간의 입출력 인터페이스 역활을 맡는다.
자바스크립트 프론트엔드 개발을 위한 기초 지식 및 환경 구축
환경구축
- Node.js 설치: nvm or n 이용
- npm: -g, i, un
- package.json 버전 지정
- major: 하위 호환성이 깨질 떄 숫자 올라감
- minor: 하위 호환성이 유지되면서 새 기능이 추가될 대 숫자가 올라감
- patch: 버그 수정 등에 숫자가 올라감
- version
- 틸드(~): 지정한 버전의 아래 자리가 최신인 버전으로 업데이트
- 캐럿(^): (하위 호환성 유지를 위해) major 버전을 유지하고 그 이하 버전을 최신으로 업데이트
- x, *, “ “: 와일드카드 문자, 해당하는 모든 버전 허용
- package-lock.json: 설치된 패키지의 이름과 정확한 버전 정보를 파일에 기재(의존성 정보)
프론트엔드 빌드 도구
- 여러개의 파일로 된 CSS나 자바스크립트를 파일 간 의존관계를 해소하고 하나의 파일로 정리해주는 도구(모듈 번들러) → 파일 요청 횟수 줄어듬
- 엔트리, 아웃풋, 로더, 플러그인 으로 구성됨
- 엔트리
- 엔트리(entry)는 webpack이 모듈의 의존관계를 해석하는 시작점이다.
- 엔트리로 지정된 자바스크립트 파일부터 모듈 번들링을 시작한다. 별도의 설정을 통해 하나 이상의 시작점을 지정할 수도 있다.
- 아웃풋
- 아웃풋(output)은 번들된 내용을 출력할 파일을 말한다.
- 파일 경로는 정대 경로로 설정해야 하므로 require로 절대 경로 정보를 확인하여 사용한다.
- 엔트리