0. Hello World!
원래는 react 공식 문서를 읽으며 공부한 내용을 정리하려고 했다.
하지만 원래 공부를 시작하려고 하면 주변 정리가 하고싶어지는 법 !!
CRA로 리액트앱을 만들고 시작할까 하다가 간단히 문서를 읽으며 작은 예제 정도만 만들건데 CRA는 좀 무거운것 같기도 하고, 그냥 간단하게 webpack을 사용해서 가벼운 typescript react 환경 세팅을 해보고 싶어졌다.
1. Setting Yarn
npm은 npm install 할때마다 warning이 엄청 떠서 신경쓰인다.
한물간 npm 말고 yarn을 사용해주자
먼저 Practice01 폴더를 만들고 내부에 yarn init -y 로 yarn을 세팅해주었다.
2. Setting typescript
자바스크립트하면 유명한 사진이다.
그만큼 자바스크립트는 근본이 없는 언어인데 typescript가 없는 근본을 채워주고 있다.
진짜 간단하게 토이프로젝트를 하는게 아니라면 typescript를 사용하자.
yarn add -D typescript 를 사용하여 package.json에 typescript를 추가해주자
다음으론 프로젝트 내부에 타입스크립트 설정을 만져주기 위해 tsconfig.json 파일을 만들고 설정을 해주,,,어야 하지만 귀찮기 때문에 tsc --init 명령으로 자동으로 tsconfig.json 파일을 만들어주자.
3. Setting WebPack
webpack은 모듈을 번들링 하여 브라우저에 제공해주는 친구이다.
타입스크립트는 자바스크립트와 다르게 근본은 있지만 브라우저에서 못알아듣는다. 그렇기 때문에 webpack이 타입스크립트를 포함하여 여러 파일을 번들링해서 브라우저에 제공을 해주어야 한다.
webpack을 사용하기위해 다음 명령을 사용하자
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader
타입스크립트와 마찬가지로 웹팩 설정을 해주기 위해 webpack.config.js 을 폴더에 만들고 아래와 같이 작성해주자.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
// src/index.tsx 파일을 진입점으로 설정
entry: path.resolve(__dirname, 'src/index.tsx'),
module: {
rules: [
{
// .ts, .tsx 파일들을 ts-loader를 이용해 컴파일하여 번들링
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
use: 'ts-loader',
}
]
},
devServer: {
historyApiFallback: true // SPA를 위한 설정
},
plugins: [
// index.html에 번들링된 스크립트 파일과 스타일이 자동으로 연결
new HtmlWebpackPlugin({
template: 'index.html'
}),
]
};웹팩 설정에 기본 탬플릿 파일을 index.html로 해주겠다고 했으니 해당 위치에 index.html 파일을 아래와 같이 만들어주자.
<!DOCTYPE html>
<html>
<head lang="en">
<title>Practice01</title>
</html>
<body>
<div id="app"></div>
</body>4. Setting React
리액트 프로젝트이므로 리액트를 받아주자
yarn add -D react react-dom @types/react @types/react-dom
우리가 방금 만든 webpack.config.js 파일을 다시 한번 봐보면 나도 모르는 사이에 entry( 번들링의 시작지점 )를 src/index.tsx로 해주기로 약속을 해버렸다.
그러니까 src에 index.tsx를 만들어주도록 하자.
코드는 다음과 같다.
//src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(
<App />,
document.getElementById('app')
)index.tsx에 컴포넌트를 주렁주렁 만들수는 없다. app.tsx를 만들어서 import 하는 형식으로 index.tsx에 넣어주자.
코드는 다음과 같다.
import React from 'react';
const App = (): JSX.Element => {
return (
<div>
{'Hello, World!'}
</div>
)
}
export default App;이렇게 하면,,, 잘 되야할것 같지만 어째서인지 아래와 같은 오류가 나버리고 있다.
tsconfig.json 파일에서 jsx옵션을 찾아 “react”로 바꿔주자.
"jsx": "react"
자세한건 공식문서를 참고하자.
5. yarn start
이제 webpack 설정도 다 했고, react 설정도 다 했으니 실행을 시켜볼 차례이다.
package.json에 아래 코드를 넣어주자
"scripts": {
"start": "webpack serve --port 3000",
"build": "webpack"
}이후 yarn start로 리액트를 실행시켜주면,,,
프로젝트가 화를 단단히 내는 모습을 볼 수 있는데 이건 webpack에서 모드를 설정을 안해줘서 그렇다.
mode에는 production 과 development가 있는데 그 차이점은 여기에서 다루지는 않겠다.
다만 우리는 지금 react 공식 문서 읽기용 간단한 예제 리액트를 만들것이기 때문에 mode를 development로 설정해주자.
이후 yarn start 로 실행시켜주면 ,,,
잘 실행은 되는데,,, 크롬 console창의 빨간 warning이 나를 신경쓰이게 한다...
읽어보면 reactDOM.render는 react 18 버전부터는 사용되지 않으니 createRoot 를 사용하라는 이야기,,,
업데이트가 정말 빠른것 같다...
하라는 대로 index.tsx를 고쳐보자.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app';
const rootElement = document.getElementById('app');
if (!rootElement) throw new Error('there is no app element in document');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);마음같아서는 document.getElementById('app') 를 바로 createRoot 안에 넣어주고 싶지만 그렇게 하면 'app' element 가 없으면 어떻게 해 !! 라며 typescript 에게 혼나게 된다.
혼나지 않으려면 if문을 사용해서 없으면 예외를 발생시켜주는 식으로 반드시 존재한다는걸 증명시켜주자.
여기까지 하면 신경쓰였던 warning도 없어진 채로 잘 실행이 되는것을 확인할 수 있다.
6. alias 설정
여기까지만 해도 리액트 자체는 잘 실행이 되지만 실제 프로젝트를 진행할때 자주쓰이는 alias 정도는 설정을 해보고 싶어졌다.
폴더의 깊이가 길어지면 import를 하는 경우 ‘./../../../app’ 처럼 어디에서 모듈을 가져오는건지 알수가 없는 경우가 있다.
‘./../../../app’ 를 ‘@src/app’ 과 같이 바꿀수 있다면 @src 의 위치를 정확히 안다는 가정하에 어디에 모듈이 있는지 명확해진다.
먼저 webpack.config.js 파일에 resolve 옵션을 아래와 같이 추가해주자.
resolve: {
alias: {
'@src': path.resolve(__dirname, 'src')
}
},처음에 루트폴더에 만들었던 src 폴더의 절대경로를 @src 로 설정해줄 예정이다.
이후에는 typescript에도 alias 설정 사실을 알려줘야한다.
"baseUrl": "./",
"paths": {
"@src/*": ["src/*"]
},주석처리 되어있는 baseUrl 과 paths 녀석을 깨우고 위와같이 설정해주자.
이후 상대경로로 설정되어있는 index.tsx 파일의 import App from './app'; 부분을 import App from '@src/app'; 로 바꿔보자.
7. 실행
잘 실행되는것을 확인할수 있다.
8. Link
