안녕하세요. 후니대디입니다.
이번에는 Full Stack시리즈에서 React, Next등 Front-End에서 사용하는 기술들에 대해 간략하게 살펴보겠습니다.
What is React?
사실 웹알못인 저는 프론트엔드 프레임워크하면 가장 먼저 리액트만을 떠올립니다. 2022년 프런트엔드 프레임워크 no.1은 리액트임을 부정할 수 없습니다.
리액트의 공식적인 출처와 정의는 페이북에서 개발하고 관리하는 UI 라이브러리 입니다 (사실 지금의 리액트가 제공하는 수준은 프레임워크라고 해도 무리는 없습니다만.. 엄밀히는 라이브러리가 맞습니다). 다른 FE프레임워크와는 대조적으로 리액트는 UI기능만을 제공하며 상태 관리, 라우팅, 빌드 시스템 등은 개발자가 직접 구축해야 합니다. (이를 위해 creat-react-app의 CRA도 제공되어있긴 합니다만..)
리액트의 장점은 가상 돔(Virtual Dom)에 있습니다. 가상 돔을 통해 빠르게 UI를 업데이트합니다. 즉, 변경될 최소 집합을 계산해서 최소한의 업데이트를 진행함으로 성능을 높일 수 있습니다. 또한 단일 페이지 어플리케이션으로 효율성을 제공합니다.
▶ React 무료강좌
React Navit ?
리액트 네이티브를 이용하면 리액트로 안드로이드와 iOS의 네이티브 앱을 만들 수 있습니다. 웹에서의 react-dom 역할을 하는 리액트 네이티브 코드가 별도로 존재합니다. 이는 사실 빨리 MVP를 개발해야하는 스타트업과 같은 곳에서는 매우 매력적인 기술입니다. 물론 platform종속적인 기능들은 별도의 코드를 작성해야하며 native language보다 느리다는 평이 있습니다.
Babel
바벨은 자바스크립트 코드를 변화해 주는 컴파일러입니다. 바벨을 통해 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 최신 문법을 사용할 수 있게 컴파일 해줍니다. 또한 코드를 압축하거나, JSX문법을 사용하기 위해서도 바벨을 사용합니다. JSX문법으로 사용된 코드를 createElement함수로 변환해주죠.
WebPack
웹팩은 자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어 주는 틀입니다. 사실 간단한 프로젝트에서는 웹팩을 사용하지 않아도 됩니다. 하지만 요즘 같이 한 페이지에 자바스크립트 파일이 수십개 수백 개가 필요한 상황에서는 웹팩이 필수적 입니다. 이러한 여러 JS파일을 웹팩을 이용해 보통 하나의 파일을 만들고 HTML의 script태크에 하나의 JS파일을 포함시키면 되기때문에 관리하기 매우 용이해집니다.
creat-react-app초보단계에서는 위의 명령어를 통해 기본적인 환경이 세팅된 react 환경을 제공받을 수 있습니다.
▶ webpack 무료강좌
why next?
이런 리액트는 어떤 단점을 갖고 있을까요?
리액트는 단일 페이지 어플리케이션(SPA)입니다. 따라서 페이지를 불러올 때 필요한 모든 js파일을 한번에 불러오고 필요에 따라 UI를 빠르게 변화시킵니다.
1. 이러한 SPA 특징은 장점이자 단점이 될 수 있는데 아무래도 모든 js코드를 불러오는 과정에서 처음 페이지를 로딩할때 시간이 많이 소모됩니다.
2. 검색 엔진 최적화에 좋지 않습니다.
이런 단점을 해결하기 위해 넥스트(Next.js 이하 넥스트)는 서버 사이드 렌더링 기능을 추가하여 해결합니다. 서버 사이드 렌더링은 웹 서버를 만들면서 부가적인 과정이 필요한데 넥스트는 이를 해결해 줍니다.
▶ Next.js 무료강좌
Next 특징들
- 서버 사이드 렌더링
- Hot Code Reloading
- Typescript 내장
- file base navigation
▶ Typescript 무료 docs
Typescript ref
TypeScript 한글 문서
TypeScript 한글 번역 문서입니다
typescript-kr.github.io
한눈에 보는 타입스크립트(updated)
타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안
heropy.blog
README - TypeScript Deep Dive
JavsScript, TypeScript, React 등 영어 고유 명사는 원문 유지, 필요시 한(영) 병서
radlohead.gitbook.io
Introduction | 타입스크립트 핸드북
타입스크립트 핸드북 타입스크립트를 시작하는 분들을 위한 핸드북입니다 😄 타입스크립트의 기본 개념들을 학습하고 자바스크립트 프로젝트에 타입스크립트를 적용하는 방법까지 배워보실
joshua1988.github.io
이어지는 Full Stack 시리즈에서는 Next를 사용한 토이프로젝트를 주제로 포스팅 이어가겠습니다
