오늘부터 'Do it! 리액트 모던 웹 개발 with 타입스크립트' 라는 책을 방학 동안 공부할 계획이다.

책의 목차는 이러하다.

01장 리액트 개발 준비
02장 리액트 동작 원리
03장 컴포넌트 CSS 스타일링
04장 함수 컴포넌트와 리액트 훅
05장 상태 관리와 리덕스 패키지
06장 리액트 라우터
07장 몽고DB와 API 서버

01 리액트 개발 준비

01-1 리액트 프레임워크 이해하기

리액트 프레임워크는 가상DOM과 JSX라는 새로운 방식으로 동작하는 프레임워크이다.
리액트는 앵귤러, 뷰와 함께 대표적인 프런트엔드 자바스크립트 프레임워크로 분류한다.

SPA란?

URL 문자열을 HTTP 프로토콜을 사용하여 웹 서버에 요청해야 하는데, 이를 HTTP 요청이라고 한다.
HTTP 요청을 받은 웹 서버는 해당 자원을 웹 브라우저에 보내 주는데, 이를 HTTP 응답이라고 한다.
웹 브라우저는 웹 서버에서 보내온 HTTP 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여 주는데, 이를 렌더링이라고 한다.

리액트 프레임워크로 만은 웹 어플리케이션은 index.html 파일 1개로 동작한다.
따라서 웹 서버에 자원을 한 번만 요청하므로 화면 깜박임 현상이 발생하지 않는다.

이런 방식의 웹 애플리케이션을 싱글 페이지 애플리케이션(SPA)라고 한다.

클라이언트에서 동작하는 템플릿 엔진

프런트엔드 프레임워크란 클라이언트(웹 브라우저)에서 동작하는 템플릿 엔진이라고 할 수 있다.

01-2 윈도우에서 리액트 개발 환경 만들기

설치하는 프로그램들은 다음과 같다.

프로그램명	용도	운영체제	기타
Node.js	웹 서버 개발 플랫폼	윈도우/macOS	필수
VSCode	소스 코드 편집기	윈도우/macOS	권장
scoop	윈도우용 설치 프로그램	윈도우	권장
Homebrew	macOS용 설치 프로그램	macOS	권장
touch	파일 관리 유틸리티	윈도우	선택
Chrome	웹 브라우저	윈도우/macOS	권장

나는 현제 윈도우 운영체제를 사용하고 있고, VSCode와 Chrome은 이미 설치되어 있는 상태이다.

scoop 설치하기

scoop은 brew나 apt와 같은 방식으로 명령 줄에서 프로그램을 쉽게 설치하게 해주는 프로그램이다.

윈도우 파워셸에서 scoop 설치를 다음과 같이 진행한다.

이어서 다음 명령어들을 통해 git과 aria2라는 프로그램도 추가로 설치하였다.

Node.js 설치하기

마찬가치로 파워셸에서 node.js를 설치하는 명령을 실행하였다.

버전을 확인할 수도 있다.

VSCode 설치하기

파워셸에서 다음 명령어를 통해 VSCode를 설치하였다.

그리고 소스 파일을 VSCode로 실행할 수 있도록 설정하였다.

touch 프로그램 설치하기

touch는 간단한 명령으로 파일이나 디렉터리를 만들어 주는 유틸리티이다.

>scoop install touch 명령어를 통해 touch를 설치하였다.

크롬 브라우저 설치하기

마지막으로 크롬 브라우저를 설치하면 윈도우 환경에서 리액트 개발을 위한 도구를 모두 설치한 것이다.

01-3 VSCode 개발 환경 설정하기

리액트 개발은 보통 VSCode를 기본 편집기로 사용한다.

VSCode에서 타입스크립트로 리액트 프로젝트를 개발할 때에 몇 가지 환경을 설정해 주면 좀 더 편리하게 개발할 수 있다.

이 책을 실습하는 데 필요한 확장 프로그램들도 설치해 보겠다.

프로그램명	용도	기타
프리티어	코드 정렬	권장
테일윈드CSS	CSS 스타일링	필수
헤드윈드	테일윈드CSS 클래스 분류기	선택
포스트CSS	CSS 구문 강조 표시	선택

편집기 설정 파일 이해하기

설정 화면에서 소스 코드의 탭 크기를 기본값 4에서 2로 변경하였다.

기본설정: 사용자 설정 열기(JSON)에 들어가면 settings.json의 파일 내용을 볼 수 있다.

프리티어 설치와 설정하기

프리티어는 코드에서 띄어쓰기, 들여쓰기, 탭, 줄바꿈 등을 일정한 패턴으로 보기 좋게 정리해 주는 프로그램이다.

VSCode 활장 마켓플레이스에서 'prettier'을 검색하여 설치하면 된다.

프리티어는 설치하고 나서 settings.json 파일에 설정을 해줘야 제대로 동작한다.

4~5행은 VSCode의 기본 포매터를 프리티어로 설정하고 파일을 저장할 때 항상 프리티어를 동작하게 한다.

6~8행은 타입스크립트 파일일 때 프리이터가 기본으로 동작하게 한다.

테일윈드CSS 설치하기

이 프로그램은 CSS 스타일링 코드를 좀 더 쉽게 작성할 수 있도록 해준다.

확장 마켓 플레이스에서 'Tailwind CSS' 로 검색하여 설치한다.

헤드윈드 설치하기

헤드윈드는 테일윈드CSS 관련 코드를 이해하기 쉬운 순서로 재배치해 주는 프로그램이다.

확장 마켓플레이스에서 'Headwind' 로 검색하여 설치한다.

포스트CSS 설치하기

@tailwind 규칙은 표준이 아니기 때문에 불필요한 경고 메세지가 뜬다.
이 불필요한 경고 메시지는 포스트CSS라는 프로그램을 설치하면 없앨 수 있다.

확장 마켓플레이스에서 'PostCSS' 로 검색하여 설치한다.

타입스크립트 컴파일러 설치하기

VSCode 터미널에서 명령으로 타입스크립트 컴파일러를 설치한다.

버전도 확인하였다.

타입스크립트 프로그램 만들고 컴파일하기

touch 명령으로 src 디렉터리에 index.ts 파일을 만든다.

위와 같이 디렉터리 아래에 index.ts 파일이 생기는 것을 확인할 수 있다.

터미널에서 명령을 실행하여 src/index.ts 파일의 실행 결과를 확인할 수 있다.

프리티어로 소스 정리해 보기

프리티어를 사용하려면 먼저 디렉터리에 .prettierrc.js 파일을 만들어야 한다.

파일에 다음과 같이 작성하고 저장한다.

이후에 index.ts 파일을 변경 후 저장해보면

위와 같이 프리티어가 자동으로 동작하여 큰따옴표를 작은따옴표로 변경하고, 세미콜론이 제거되었다.

특정 코드에서 프리티어 동작하지 않게 하기

코드를 작성하다 보면 특정 줄에서 프리티어가 동작하지 않게 하고 싶을 때가 있다.
이때에는 프리티어 무시 주석을 작성한다.

2행과 같이 작성하면 3행에는 프리티어를 적용하지 않는다.

다만 프리티어 무시 주석은 타입스크립트 컴파일러의 타입 체크 기능을 무력화한다.
따라서 개발이 끝난 코드에만 무시 주석을 적용해야 한다.

01-5 첫 번째 리액트 프로젝트 만들기

이번에는 CRA로 리액트 프로젝트를 만들어 보고 기본으로 알아야 할 내용을 살펴보겠다.

npm은 Node.js 프로젝트에서 개발에 유익한 다양한 오픈 소스 라이브러리를 쉽게 설치해 사용할 수 있게 한다.

리액트 프로젝트 만들기

CRA로 타입스크립트용 리액트 프로젝트를 생성하는 명령이다.

npx create-react-app 프로젝트_이름 --template typescript

터미널에서 아래와 같이 명령어를 실행하여 리액트 프로젝트를 생성했다.

리액트 프로젝트 구조

다음은 CRA로 만든 ch01_5 리액트 프로젝트의 디렉터리와 파일들을 보여 준다.

package.json 파일 보기

리액트 프로젝트는 기본적으로 Node.js 프로젝트이다.
그리고 모든 Node.js 프로젝트는 루트 디렉터리에 항상 package.json 파일이 있다.

CRA로 생성한 프로젝트의 package.json 파일 내용은 다음과 같다.

애플리케이션 실행하기

터미널에서 npm start 명령을 실행하면 실제로는 react-script start 명령이 실행된다.
start 명령은 프로젝트를 개발 모드로 실행하고, build 명령은 빌드 모드로 실행한다.

>npm run start # 개발 모드
>npm run build # 빌드 모드

웹팩과 번들 파일

웹팩은 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러이다.

웹팩의 결과물을 번들이라고 한다.

빌드 모드로 실행하기

터미널에서 아래의 명령어를 빌드 모드로 실행한다.

>npm run build

탐색기를 보면 build 디렉터리가 새로 생겼고 이 폴더에 index.html 파일도 보인다.

이제 웹 서버를 가동하고 웹 브라우저에서 리액트 애플리케이션을 실행해 보겠다.
아래의 명령어를 터미널에 입력한다.

그리고 나온 서버 주소를 Ctrl 을 누른 채 마우스 왼쪽으로 클릭하면 접속된다.

리액트 애플리케이션이 실행된 것을 볼 수 있다.

개발 모드로 실행하기

위에서 Ctrl + C 를 눌러 서버를 중지한다.

그리고 아래 명령어를 터미널에 입력하면 서버를 따로 구동하지 않아도 웹 브라우저가 실행되고 리액트 애플리케이션이 실행된다.
웹팩이 서버로 작동하기 때문이다.

> npm start

소스 코드 수정해 보기

src/App.tsx 파일을 열어 모든 내용을 지우고 아래와 같이 수정한다.

저장 후 웹 프라우저에 수정한 내용이 즉시 반영된 것을 볼 수 있다.

개발 모드에서 핫 모듈 교체

변경 사항이 즉각즉각 웹 브라우저에 반영되어 눈으로 확인할 수 있으면 개발자의 생산성을 높여 준다.
웹팩은 이 기능을 핫 모듈 교체라고 한다.

프리티어 적용하기

또다른 터미널을 열어서 .prettierrc.js 파일을 만든다

위와 같은 내용으로 파일을 사용한다.

console.log를 사용하는 디버깅

다음 코드를 추가하고 저장한다.

앞에서 만든 프리티어 구성 파일이 적용되어 3행 끝에 있던 세미콜론이 없어지는 것을 확인할 수 있다.

console.log는 자바스크립트가 기본으로 제공하는 함수이다.
함수의 출력은 웹 브라우저에서 F12 를 누르면 나타나는 개발 도구 창의 [Console] 탭에서 확인할 수 있다.

가짜 데이터 만들기

실제 데이터를 얻기 어려울 때는 그럴듯한 가짜 데이터를 임시로 사용할 수 있다.
이럴 때에 외부 패키지의 도움을 받으면 편리하다.

Node.js용 외부 패키지 설치하는 방법

다양한 오픈소스 패키지를 npm install 또는 간단히 npm i 명령으로 설치할 수 있다.

설치 명령에는 다음처럼 2가지 옵션을 줄 수 있다.

npm i 옵션	의미	단축 명령
--save	실행에 필요한 패키지 설치. package.json 파일의 "dependencies" 항목에 등록됨	-S
--save-dev	개발에 필요한 패키지 설치. package.json 파일의 "devDependencies" 항목에 등록됨	-D

chance, luxon 패키지 설치하기

chance 패키지는 다양한 종류의 그럴듯한 가짜 데이터를 제공해 준다.
또한 luxon 패키지는 2021/10/6 과 같은 날짜를 '20분 전' 형태로 만들어 주는 유용한 기능을 제공한다.

이 둘은 자바스크립트로 구현되어 있으므로, 타입스크립트에서 사용하려면 @types/chance, @type/luxon 타입 라이브러리가 추가로 필요하다.

터미널에서 npm i 명령으로 두 패키지를 설치한다.

npm i 로 설치한 패키지는 dependencies 에, npm i -D 로 설치한 패키지는 devDependencies 항목에 추가된다.

package.json 파일에서 반영된 것을 확인할 수 있다.

터미널에서 다음 명령어로 필요한 디렉터리와 파일을 생성한다.

util.ts 파일 작성하기

util.ts 파일에 다음 코드를 작성한다.

가짜 데이터를 만들 때 도움을 주는 함수를 정의한 것이다.

image.ts 파일 작성하기

Lorem Picsum 은 다양한 테마의 고해상도 이미지를 제공하는 사이트이다.

이 사이트의 무료 이미지의 Url을 호출하여 사용한다.

chance.ts 파일 작성하기

이제 util.ts와 image.ts 파일에 정의한 함수들을 사용해 chance.ts 파일을 다음처럼 구현한다.

date.ts 파일 작성하기

앞에서 설치한 luxon 패키지는 '19시간 전' 형태로 날짜를 만들 때 필요한 DateTime 객체를 제공한다.

index.ts 파일 작성하기

지금까지 구현한 내용을 export * 구문으로 다시 내보내준다.

가짜 데이터 사용해 보기

이제 src/App.tsx 파일에 다음 코드를 작성하여 src/data 에 구현한 가짜 데이터 함수들을 사용해 보겠다.

소스가 자동으로 반영되어 웹 브라우저에 표시되는 내용이 다음처럼 바뀐다.