10월 중순부터 SSAFY에서의 마지막 프로젝트를 진행하고 있다.
지금껏 두 개의 프로젝트는 CRA를 통해 빠르고 간단하게 개발 환경을 구축하였지만, Webpack과 Babel, ESLint 세팅을 하나하나 들여다보지 못했다. 올해의 마지막 프로젝트는 기존에 주어진 시간보다 1주가량 단축되었지만, 이번엔 초기 설정을 직접 하면서 앱의 내부 작동 방식을 이해해보고자 한다.
1. npm(*Node.js 패키지 관리자)으로 프로젝트 시작
npm init -y: npm init만 작성하면 프롬프트에 질문지가 띄워지지만, -y 플래그는 프로젝트명, 버전, 설명, 의존성을 기본값으로 설정하여 ‘package.json’ 파일을 자동으로 생성한다. (init은 “initialize”의 약어로, 초기 설정을 의미한다)npm i react: React 설치. node_modules 폴더가 생성된다.npm i react-dom: React-Dom 라이브러리 설치.
2. 타입스크립트 TypeScript 설정
npm i -D typescript @types/react @types/react-dom: TypeScript와 TypeScript에 필요한 React 및 React DOM 타입 정의 패키지 설치.-D로 package.json에 “devDependencies”로 패키지가 기록되며, 개발 의존성에만 추가하여 프로덕션 환경에는 포함하지 않는다.npm i -g typescript를 이미 이전 프로젝트에서 사용했는데 또 설치해야할까?- →
-g로 TypeScript를 전역으로 설치하면 프로젝트 로컬 디렉토리가 아니라 시스템 전체에서 사용할 수 있게 된다. 우리는 3명의 프론트엔드 디벨로퍼가 협업할 예정이므로, 각자 local에 설치되었을 TypeScript 버전이 다를 수도 있기 때문에-D로 고립시켜 다른 프로젝트에 의해 영향을 받지 않을 환경을 만들었다.
tsc --init: TypeScript 컴파일러 설정 파일인 tsconfig.json을 생성한다. (*명령어 중tsc는 TypeScript Compiler의 약자)
3. tsconfig.json 설정
//tsconfig.json
{
"compilerOptions": {
"target": "es5", // JS로 변환시 ECMAScript5로 코드를 생성하여 브라우저와의 호환성을 유지
"module": "esnext", // commonjs(node.js 환경용)에서 esnext(브라우저 환경용)으로 수정
"lib": ["dom", "ESNext"],
// ["dom", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"]로
// 명시적으로 지정했지만 최신 표준을 자동으로 지원하도록 간단하게 수정
"allowJs": true,
"jsx": "react-jsx", // 일반적으로 "react"로 설정되어있지만 "react-jsx"로 작성하면 JSX 변환 규칙 사용 가능
"sourceMap": true, // 오류가 발생한 줄, 열 번호를 확인할 수 있어 디버깅에 유용
"outDir": "./dist", // 컴파일된 JS 파일을 저장할 위치
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": "./", // 모듈 찾을 때의 시작점을 프로젝트 루트로 지정 - 상대 경로 사용시 혼란 방지
"paths": {
"@/*": ["src/*"],
},
"allowSyntheticDefaultImports": true, // default export를 하지 않은 모듈이더라도
// import something from './somewhere/과 같은 구문을 사용할 수 있음
// = named export를 default export로 취급
"esModuleInterop": true, // CommonJS 모듈 시스템과 ES6 모듈 시스템 간의 호환성 유지
"forceConsistentCasingInFileNames": true // 대소문자의 일관성 지키기!
"skipLibCheck": true // 라이브러리 파일(lib.d.ts)의 유효성을 확인하지 않음 - 컴파일속도 향상
},
"include": ["src"], // 지정하지 않으면 프로젝트 디렉토리 내의 모든 TS파일을 컴파일 대상으로 간주// CRA에서 기본으로 제공되었던 옵션이지만 사용하지 않은 것
"compilerOptions": {
"resolveJsonModule": true, // JSON파일을 모듈로 가져오는 기능
"noEmit": true, // 컴파일된 JS코드를 생성하지 않음
},
4. index 및 App 등 기본 파일 리셋
//index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRA 없이 만드는 React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>//index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);//App.tsx
import React from "react";
const App = () => (
<>
<h1>이곳은 App.tsx</h1>
</>
);
export default App;'React' 카테고리의 다른 글
| CRA 없이 React + TypeScript 개발환경 구축하기 (3/3) - ESLint, Prettier 설정 (0) | 2024.01.23 |
|---|---|
| CRA 없이 React + TypeScript 개발환경 구축하기 (2/3) - Babel, Webpack 설정 (0) | 2024.01.15 |
| React | TIL | 지난 프로젝트의 index.tsx 되짚어보기 (0) | 2023.08.30 |
