01. 리액트 개발 준비 - Reasty's Programming Memories

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

– SPA (Single Page Application)

하나의 페이지로 동작. 책에서는 브라우저의 깜빡임으로 설명하고 있음.
백엔드에서 받은 JSON 데이터를 해석하여 현재 화면에서 사용자가 새로 요청한 부분만 동적으로 화면을 생성

– MPA (Multi Page Application)

여러 페이지로 동작.
사용자 요청이 있을 때마다 새로운 HTML을 전달받는 기존 방식

“리액트”

리액트는 ‘싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크’

– 프런트엔드 프레임워크

클라이언트에서 동작하는 템플릿 엔진
(요즘엔 웹어셈블도 있던데…)
리액트, 앵귤러, 뷰 등 프런트엔드 프레임워크는 자바스크립트 객체를 DOM 객체로 전환한다.

– 리액트 버전 18 특징

동시성, 자동 일괄처리, 트랜지션, 향상된 서버-측 렌더링
=> Next.js 같은 리액트 기반 프레임워크들의 기능 향상..

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

설치해야 하는 프로그램 목록

Node.js – 웹 서버 개발 플랫폼 (플랫폼?)
VSCode – 소스 코드 편집기
scoop – 윈도우용 설치 프로그램 (권장? 일반적인가?)
Homebrew – macOS용 설치 프로그램
touch – 파일 권리 유틸 (옵션)
Chrome – 웹 브라우저 (권장, 나는 Edge 쓸래..)

> #env:SCOOP='C:\Scoop'
> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -scope CurrentUser
> iwr -useb get.scoop.sh | iex

(한번에 될 리가 없지…)

위의 링크 설명대로 다시 설치..

> irm get.scoop.sh -outfile 'install.ps1'
> .\install.ps1 -RunAsAdmin

휴..

(회사 보안 정책상(?) 무조건 관리자 권한 부여… (이게 왜 무슨 보안 정책이지??))

git과 aria2 라는 프로그램을 추가 설치(왜??)

> scoop install git aria2

aria2 – 경량 멀티-프로토콜 & 멀티-소스 커맨드라인 다운로드 도구. (뭔 소리래…)

Node.js 는 이미 설치되어 있으니 패스..

(되던 것도 안되네..)

(다음 날 다시 설치 시도하니 성공.. (서버오류였나?))

VS Code 도 설치되어 있어서 패스..

touch 프로그램 설치 – macOS나 리눅스에서 간단한 명령으로 파일이나 디렉터리를 만들어 주는 유틸리티 (그냥 해당 OS의 명령어가 더 간단하지 않나? 일단 설치…)

> scoop install touch

Chrome 설치도 패스.. (난 Edge있게 Edge 쓸래)

01-3. macOS에서 리액트 개발 환경 만들기

(맥 써본지 13년 지났네…)

01-4. VSCode 개발 환경 설정하기

프리티어 – 코드 정렬
테일윈드CSS – CSS 스타일링
헤드윈드 – 테일윈드CSS 클래스 분류기
포스트CSS – CSS 구문 강조 표시
타입스크립트 컴파일러

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

> npm i -g typescript ts-node

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

console.log("Hello world!");

(음…어… 그래..)

(ㅋㅋㅋㅋㅋ 회사컴에서는 다른 에러가 뜨네..)

스터디멤버의 도움으로 tsconfig.json 파일을 아래와 같이 변경하니 정상 작동!

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",

  "compilerOptions": {
    "lib": ["es2021"],
    "module": "Node16",
    "target": "CommonJS",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  }
}

(tsconfig.json 파일 찾는데도 한참 걸림…)

(위의 에러 내용을 찾아봐도 CommonJS로 변경하라는 공식 문서는 아직 찾지 못함. 또한 VSCode에서는 경고 메세지가… … 무슨 문제일까?)

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

module.exports = {
  singleQuote: true,
  semi: false,
}

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

> npx create-react-app [프로젝트명] --template typescript

리액트 프로젝트 구조

애플리케이션 실행하기

package.json 파일의 “scripts” 항목에 명령어가 정의되어 있음

> npm run start # 개발 모드
> npm run build # 빌드 모드(=배포 모드, 프로덕션 모드)

웹팩과 번들파일

웹팩(webpack) – 프런트엔드 프레임워크에서 사용하는 대표적인 모듈(javascript, 이미지, css, html 등) 번들러. 다양한 입력 모듈을 결합하여 단순한 형태의 모듈로 변환해 주는 역할을 한다.
[비슷한 모듈 번들러로 vite 가 있다.]

번들(bundle) – 웹팩의 결과물. main 이나 chunk라는 단어가 있는 파일들

빌드 모드로 실행하기

> npm run build            # 프로젝트 빌드 
> npm install -g serve     # 웹 서버 역할을 하는 serve 프로그램 설치
> serve -s build

개발 모드로 실행하기

> npm start    # 리액트 프로젝트를 빌드하여 번들 파일로 만든 후, 이를 반영한 index.html 파일을 생성

(npm run start 와 npm start의 차이점은 뭘까?)

(build 모드와 개발모드일때의 명확한 차이점은? 릴리즈 모드와 디버그 모드의 차이처럼 최적화 같은 작업이 이루어 질까?)

소스 코드 수정해 보기

핫 모듈 교체(HMR, hot module replacement) – 소스 코드를 수정하거나 기능을 추가하면 변경 사항이 즉각 웹 브라우저에 반영된다.

export default function App() {
  console.log('App called.')
  return <h1>Hello world!</h1>
}

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

npm i –save : 실행에 필요한 패키지 설치. pakcage.json 파일의 ‘dependencies’ 항목에 등록됨. 단축명령 ‘-S’
npm i –save-dev : 개발에 필요한 패키지 설치. pakcage.json 파일의 ‘devDependencies’ 항목에 등록됨. 단축명령 ‘-D’

자바스크립트로 개발된 패키지를 타입스크립트에서 사용하려면 @types/로 시작하는 타입 라이브러리를 추가로 설치해야 함.

chance : 다양한 종류의 가짜 데이터를 제공해 주는 패키지
luxon : ‘2021/10/6’날짜를 ’20분 전’과 같은 형태로 만들어 주는 패키지

> npm i chance luxon
> npm i -D @types/chance @types/luxon

설치가 되면 package.json 파일에 해당 패키지 명과 버전이 추가된다.

가짜 데이터 사용해 보기

import * as D from './data'

export default function App() {
  console.log('App called.')

  return (
    <div>
      <p>
        {D.randomName()}, {D.randomDayMonthYear()}
      </p>
      <img src={D.randomAvatar()} height="50" />
      <img src={D.randomImage()} height="300" />
    </div>
  )
}

프로젝트 정리하기

> rm -r -force node_modules
> rm package-lock.json