[React Study] 5주차 - 트위터 클론코딩 (2)

ㅎㅎ·2023년 10월 23일
FirebaseReactTecheervite
0

Study

목록 보기
4/4

3주차 태스크:
뉴스 뷰어 API 연동해보고, API가 무엇인지 공부하기

5주차 - 트위터 클론코딩 (2)

노마드코더의 <트위터 클론코딩> 강의를 수강하면서 Firebase를 사용해 트위터를 클론 코딩해보기.

이번 게시물은 Vite라던지 타입스크립트라던지 처음 들어본 용어가 있어서 새로 알게된 지식을 정리하고 넘어가는 글이 되겠다.

  1. Vite란?
    1.1. Create React App(CRA) 대신 사용할 때의 이점
    1.2. Vite 프로젝트 생성하기
  2. TypeScript란?
    2.1. TypeScript의 특징 및 장점

1. Vite란?

프랑스어로 '빠르다' - Vite 공식문서 가이드

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초첨을 맞춰 탄생한 비드 도구이다.

  • 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다
    • HMR (Hot Module Replacement) 등
  • 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다.

1.1. Create React App(CRA) 대신 사용할 때의 이점

Create React App(CRA) 란?

npx reate-react-app my-app

CRA는 페이스북에서 제공하는 도구로, React 애플리케이션의 초기 설정을 자동으로 수행할 수 있다.

구동 속도가 빠르다

CRA는 Webpack을 사용하여 애플리케이션을 빌드하는데 속도가 느리다. 반면, 빠른 자바스크립트 빌드 툴인 ESbuild를 기반으로 만들어진 Vite는 그 속도가 100배 빠르다고 한다.

  • HMR (Hot Module Replacement) 이란?

    앱을 종료하지 않고 갱신된 파일만을 교체하는 방식. CRA도 이를 지원하지만 이 기능을 사용하면 빌드 시간이 더 오래 걸리고 일부 모듈은 다시 로드된다.

Vite는 이를 번들러가 아닌 ESM(ES Modules)을 이용해 지원한다. 어떤 모듈이 수정되면 Vite는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐이다. 전 과정에서 완벽하게 ESM을 이용하기에, 앱 사이즈가 커져도 HMR을 포함한 갱신시간에는 영향을 끼치지 않는다.

1.2. Vite 프로젝트 생성하기

NPM, Yarn (외에도 PNPM, Bun) 두 방법 모두 사용할 수 있다.

  • npm

    $ npm create vite@latest

  • yarn

    $ yarn create vite

이후에는 프롬프트 창에서 프로젝트 이름과 사용할 언어를 선택하는 메시지가 나온다. 메시지를 따라서 선택하면 프로젝트가 생성된다.

생성 명령어 작성 시 이름과 템플릿을 직접 지정하는 방법은 공식 문서 참조.

프로젝트 생성부터도 속도가 엄청나게 빠르다!

📌 스타일 컴포넌트 패키지 설치

npm i styled-components

2. TypeScript란?

JavaScript의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발하고 유지하고 있으며 엄격한 문법을 지원한다.

TypeScript의 공식 핸드북 링크

자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 즉, JavaScript에 타입을 부여한 확장 버전이다.

자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램은 타입스크립트 프로그램으로도 동작한다.

2.1. TypeScript의 장점

정적 타입 : 에러 사전 방지, 안정성, 협업용이성

프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 정적 검사라고 한다. 어떤 것이 오류인지와 어떤 것이 연산되는 값에 기여하지 않음을 정하는 것이 정적 타입 검사이다.

  • JavaScript의 경우
function sum(a, b) { // 숫자 덧셈을 위한 함수
  return a + b;
}

sum('10', '20');

함수 작성자의 의도는 숫자의 덧셈인데, 다른 개발자가 보기에 타입을 짐작하기가 어려워 위와 같은 일이 생길 수 있다. (위 함수는 간단하기 때문에 한 눈에 파악할 수 있지만 큰 범위의 프로젝트일 경우에는 더 파악하기 어려워진다.)

  • TypeScript로 다시 작성한 경우
function sum(a: number, b: number) {
  return a + b;
}

sum('10', '20'); // ERROR 발생

타입스크립트는 이 경우에 에러메시지를 출력한다. 이처럼 컴파일 단계에서 오류를 포착할 수 있고, 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 기술할 수 있게 한다. 코드의 가독성을 높이고, 안정적이고 예측할 수 있게 하며 디버깅을 쉽게 만든다.

실행 속도의 향상

JavaScript는 동적 타입의 인터프리티 언어로, 런타임 시 타입이 결정되어 적용된다. 이 과정에서 오류가 있는지 확인하는 작업이 추가되기 때문에 실행 속도가 오래 걸린다.

반면 TypeScript는 코드 작성 시 타입을 미리 결정하기 때문에 런타임 때의 작업을 줄여 실행 속도가 빠르다.

profile
ㅎㅎ
Backend
이전 포스트

[React Study] 3주차 - 뉴스 뷰어 API 연동해보고, API가 무엇인지 공부하기

0개의 댓글