React 초기설정 (without CRA)

개요

CRA로 항상 해왔지만, 사용하지 않는 패키지들도 저절로 다운로드가 되고, 따라서 빌드속도가 느려지게 되고 bable이나 webpack 설정을 변경하는 것이 까다롭고 복잡하다고 해서 CRA없이 초기 셋팅을 진행하고자 했다.

참조 링크

https://rinn-story.tistory.com/27

---

React 설정

• 패키지 설치

npm init
npm i react react-dom

• React에 기본적으로 필요한 파일 생성
  • index.html, index.tsx, App.tsx
  • 이때 index.html은 public 파일 내에 위치해야함

TypeScript 설정

• TypeScript 관련 패키지 설치

npm i -D typescript @types/react @types/react-dom
tsc --init

• TypeScript 설정 파일 초기화
  • tsconfig.json 파일 추가 → 자신이 원하는대로 스타일 설정 가능
  • https://velog.io/@tnehd1998/tsconfig.json-내용-정리 → 해당 글 참조해서 설정 진행함

💡 tsc - -init 에서 에러 발생
tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\ADMIN\AppData\Roaming\npm\tsc.ps1 파일을 로드할 수 없습니다.
자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1

• tsc -v
• + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

1) node 삭제 후 재설치 진행 → 해결 안됨

2) ExecutionPolicy 스크립트 코드 제한 해제

→ 스크립트 보안 오류로 접근

• PowerShell 관리자 권한으로 실행
• ExecitionPolicy가 Restrcited 모드로 되어있어서 스크립트가 실행되지 않는 것 이였음
• Set-ExecutionPolicy RemoteSigned 으로 변경

참조 링크 https://itpro.tistory.com/100

---

• tsconfig.json 파일 내용
  • target : 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
  • lib : 타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리들의 목록 → dom과 최근 ECMAScript 버전
  • jsx : JSX 코드를 어떻게 해석할지 지정 → JSX 코드를 React와 함께 사용
  • module : 자바스크립트 파일간의 import 문법을 구현할 때의 문법을 결정 → import 문법 사용
  • moduleResolution : 모듈의 해석 방법 → Node.js
  • baseUrl : 모듈 이름을 처리할 기준 디렉토리
  • allowJS : 타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지 설정 → js 파일을 ts파일에서 import 해서 사용가능함
  • sourceMap : 소스 맵을 생성할지 여부를 지정. 자바스크립트의 요소를 지니고 있음. .map 파일로 생성되며 배포 단계의 버그를 더 쉽게 잡아낼 수 있음
  • outDir : 컴파일 후 생성되는 js 파일이 저장될 폴더명 → ./dist
  • isolatedModules : 각 파일을 분리된 모듈로 트랜스파일링의 진행 여부를 결정 → 파일 간의 전역 네임스페이스 충돌을 방지
  • allowSyntheticDefaultImports : default export가 아닌 모듈에서도 default import가 가능하게 할 지의 여부를 결정
  • forceConsistentCasingInFileNames : 파일 이름의 대소문자 일관성을 강제하는지 여부를 지정 → 파일 이름이 일관된 대소문자를 가져야 함
  • strict : 엄격한 타입 검사 옵션을 활성화 할지의 여부

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["dom", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],
    "jsx": "react-jsx",
    "module": "es2015",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dist",
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  }
}

Babel 설정

• 패키지 설치

npm i -D babel-loader @babel/core @babel/preset-env
npm i -D @babel/preset-react @babel/preset-typescript

• 패키지 역할 설명

  • babel-loader, @babel/core, @babel/preset-env

    보통 ES6+문법으로 코드를 작성하면 IE 웹 브라우저와 같이 구형 브라우저에서는 제대로 지원이 되지 않는다. 따라서 babel JavaScript 컴파일러를 활용하여 IE에서도 ES6+ 문법을 사용할 수 있게 함

  • @babel/preset-typescript

    원래 바벨과 타입스크립트는 따로 작업이 되었지만, 해당 플러그인을 통해 타입스크립트와 바벨이 조화롭게 병합하여 사용하게 된다. TypeScript를 사용한다면 필요한 플러그인들의 집합

  • @babel/preset-react

    jsx로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있음. React를 사용한다면 필요한 플러그인들의 집합

• 바벨 설정 파일

  • babel.config.js

Webpack 설정

• 패키지 설치

npm i webpack webpack-cli webpack-dev-server webpack-merge --dev
npm i html-webpack-plugin ts-loader clean-webpack-plugin --dev

• 패키지 역할 설명

  • webpack, webpack-cli

    webpack : 웹팩 그 자체의 패키지
    webpack-cli : 터미널에서 webpack 커맨드를 실행할 수 있게 해주는 커맨드라인 도구

  • webpack-dev-server

    빠른 실시간 리로드를 가능하게 하는 개발 서버디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빠름. webpack.config.js에서 devServer 옵션을 통해 옵션을 지정하여 사용이 가능함

  • webpack-merge

    webpack을 dev, prod 모드로편안하게 분리하여 구축할 수 있게 도와줌

  • html-webpack-plugin

    html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인

  • ts-loader

    타입스크립트 코드를 자바스크립트 코드로 변환

• webpack.config.js 파일 추가

  • prod, dev 모드 둘다 공통으로 사용되는 설정으로 각 요소는 다음과 같은 설정을 의미
  • entry : 처음 실행되는 기본 시작 파일
  • resolve : 확장자나 경로를 처리하기 위해 설정하는 옵션
  • module : ts-loader, babel-loader를 설정하는 부분
    • loader는 오른쪽에서 왼쪽 방향으로 적용되기에 ts-loader를 babel-loader보다 오른쪽에 위치시켜야 함
  • output : 번들화 된 파일을 export할 경로와 파일명을 설정하는 부분
  • plugins : 설치한 플러그인을 적용하는 옵션

• webpack.dev.js , webpack.prod.js 파일 추가

  • 공통적으로 쓰이는 webpack.common.js를 import한 후, webpack-merge를 사용해서 webpack.dev.js, webpack.prod.js 로 분리하여 원하는 webpack 설정을 할 수 있음.
  • mode : 현재 어떤 모드로 동작하는 것인지를 확인
    • production : 배포 환경
    • development : 개발자 환경
  • devtool : 어떤 모드로 구조를 보여줄 것인지
    • eval : 최대 성능을 갖춘 개발 빌드를 위해 개발 환경에서 추천됨
    • hidden-source-map : 가장 느리지만 외부에서 리액트 구조를 확인할 수 없게하기에 배포 단계에서 추천됨

명령어 설정

• package.json 파일 수정
  • npm start로 프로젝트를 시작함

...
  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.dev.js"
  },
...

💡 npm start → 프로젝트 실행되지 않는 오류 → 다시 처음부터 설정해서 오류 해결
[webpack-cli] Failed to load 'S:\Project\web2\webpack.dev.js' config
[webpack-cli] Error: Cannot find module 'clean-webpack-plugin' …

1. webpack @4 버전으로 설치

→ 에러가 달라지긴 했으나 여전히 에러 발생

[webpack-cli] TypeError: Cannot read properties of undefined (reading 'getArguments')
at WebpackCLI.getBuiltInOptions (S:\Project\web2\node_modules\webpack-cli\lib\webpack-cli.js:831:77) …

1. webpack., webpack-cli 버전 명시

찾아보니 웹펙 4점대 특정버전은 문제가 있다는 것 같아서 webpack@4.19.0 webpack-cli@3.0.4 version으로 다시 설치함

→ Error: Cannot find module './webpack.common.js… 해당 에러 발생 → webpack.config.js 파일 명을 webpack.common.js 로 변경 → Error: Cannot find module 'clean-webpack-plugin’ 해당 에러 발생 → npm install --save-dev clean-webpack-plugin 설치 →

---