-
[React] React + typeScript + webpack 설정으로 프로젝트 만들기프레임워크/React(NextJs) 2022. 6. 9. 21:22
먼저 새로운 프로젝트를 생성할 폴더를 만들고 필요한 모듈들을 설치해줍니다
// 프로젝트 초기화 $ npm init -y // 웹팩 설치 $ npm install --save-dev webpack webpack-cli $ npm install --save react react-dom $ npm install --save-dev @types/react @types/react-dom $ npm install --save-dev typescript ts-loader source-map-loader프로젝트 루트 경로에 세가지 파일을 만들어야 합니다.
1. 타입스크립트 설정 파일 : tsconfig.json
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es6", "jsx": "react" } }더 자세한 설정은 https://typescript-kr.github.io/pages/tsconfig.json.html 참고
2. 웹팩 설정파일 : webpack.config.js
module.exports = { mode: "production", // Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다. devtool: "source-map", resolve: { // 확인 가능한 확장자로 '.ts' 와 '.tsx' 를 추가합니다. extensions: [".ts", ".tsx"] }, module: { rules: [ { test: /\.ts(x?)$/, exclude: /node_modules/, use: [ { loader: "ts-loader" } ] }, // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다. { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] }, // 경로가 다음 중 하나와 일치하는 모듈을 가져올 때, // 해당 전역 변수가 있다고 가정하고 사용합니다. // 브라우저가 빌드간에 라이브러리를 캐시 할 수 있도록 // 모든 의존성을 묶지 않아도 되기 때문에 중요합니다. externals: { "react": "React", "react-dom": "ReactDOM" } };3. 리액트 컴포넌트를 표시할 페이지: index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div> <!-- Dependencies --> <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> <!-- Main --> <script src="./dist/main.js"></script> </body> </html>본격적으로 React 코드를 작성할 차례입니다.
프로젝트 루트 경로에 src와 components 두개의 디렉토리를 만들어주세요.
project-name/ └─ src/ └─ components/1. src/components/Hello.tsx 파일을 생성하여 아래와 같이 작성해주고
import * as React from "react"; export interface HelloProps { compiler: string; framework: string; } export const Hello = (props: HelloProps) => { return ( <h1>Hello from {props.compiler} and {props.framework}!</h1> ) };2. src/index.tsx를 작성해줍니다
2024.02.02 수정사항
index.tsx:6 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createrootReact 18버전 이후 부터는 아래와 같이 랜더링하는 방식이 변경되었습니다.
import * as React from "react"; import { createRoot } from "react-dom/client"; import { Hello } from "./components/Hello"; const container = document.getElementById("root"); const root = createRoot(container); root.render(<Hello compiler="TypeScript" framework="React" />);React 18버전 이전 코드
더보기import * as React from "react"; import * as ReactDOM from "react-dom"; import { Hello } from "./components/Hello"; ReactDOM.render( <Hello compiler="TypeScript" framework="React" />, document.getElementById("example") );명령어를 사용해 프로젝트를 빌드 합니다
$ npx webpack
빌드한 프로젝트는 index.html 파일을 열어 확인할 수 있습니다
위 프로젝트는 아래 문서에 나와있는 내용을 보며 따라해본 내용입니다.
https://typescript-kr.github.io/pages/tutorials/react-&-webpack.html
TypeScript 한글 문서
TypeScript 한글 번역 문서입니다
typescript-kr.github.io
'프레임워크 > React(NextJs)' 카테고리의 다른 글
[React] react-hook-form(feat. typescript)으로 Input 컴포넌트 만들어보기 (0) 2022.09.06 [React] webpack 설정 (실시간 개발 모드 관련) (0) 2022.09.03 [React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법 (0) 2022.09.03 [Recoil] Next.js + Recoil + typescript 적용하기 (0) 2022.05.29 [React] react-select 라이브러리와 onChange event 함수 (0) 2021.06.22