지난 포스트에서는 webpack, babel을 이용해서 react 프로젝트 초기 환경 구성을 다뤘습니다.

이어서 이번 포스트에서는 typescript 그리고 import 할 때 상대경로로 불러올 수 있는 설정에 대해서 다뤄보겠습니다.

typescript

자바스크립트 개발자라면 타입스크립트를 많이 봤을 것입니다.
대체 이 타입스크립트가 뭐냐!

공식문서에서 타입스크립트를 아래처럼 설명했습니다.

TypeScript extends JavaScript by adding types.
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.

자바스크립트에 타입을 더한 것이 바로 타입스크립트이고 그냥 자바스크립트에 비해서 에러를 발견하고 해결하기 수월해질 것! 그리고 브라우저, 운영체제 등 자바스크립트를 실행시킬 수 있는 곳이라면 다 사용할 수 있고 이렇게 쿨한 언어는 오픈소스✨ 이다.

(솔직히 한동안 타입스크립트를 쓰다가 자바스크립트로만 되어있던 코드를 수정할 일이 있었는데,,,,,,, 너무 불편했고 타입스크립트를 더 열심히 공부해서 잘 활용해봐야겠다 생각하게 됐,,,,)

아무튼 이제 설정을 시작해볼게요.

dependecies 설치

$ yarn add -D typescript ts-loader @types/react @types/react-dom @types/jest @types/node

• typescript : 타입스크립트 dependency
• ts-loader : webpack을 위한 typescript 로더
• @types/[...] : 해당 패키지에 필요한 타입을 정의해놓은 것 입니다.
  • @types/react
  • @types/react-dom
  • @types/jest
  • @types/node

webpack 설정 수정

webpack.config.js

module.exports = {
    ...,
    extensions: ['.js', '.jsx', '.ts', '.tsx'] // <--- 추가
    module: {
    	rules: [
            ...,
            {                                 //
                test: /\.(ts|tsx)$/,          // <--- 추가
                exclude: /node_modules/,      //
                use: 'ts-loader'              //
            },                                //
            ...
        ]
    }
}

js, jsx -> ts, tsx 로 바꾸기

당연히 typescript 를 사용할 것이니 아래처럼 바꿔줘야합니다.
.js -> .jsx,
.ts -> .tsx

webpack의 entry path 체크해보기

webpack이 dependecy 트리를 만들고 실행시키기위해서 처음 열어보는 파일은 바로 webpack.config.js 에서 entry에 설정해놓은 파일 경로입니다.
위에서 js -> ts로 바꿨다면 보통의 엔트리파일인 src/index.js 파일도 ts로 바꼈을 것입니다.

저의 경우는 이 파일의 확장자를 바꾸지 않고 index.js로 사용하는 편인데 만약 확장자를 ts로 바꾸셨다면 entry부분을 수정해줘야합니다.

상대경로 설정

이 상대경로 설정은 무엇을 말하는 것이냐 하면요!
아래처럼 폴더를 너무 깊게 파는 것은 안좋은 경우지만 만약 저렇게 해야한다면 가독성이 너무 떨어집니다. 내가 쓴거면 뭐 습관들여서 어떻게든 해보겠는데 다른사람이 저렇게 썼다면 읽기 너무 어렵겠죠.

import ComponentA from '../../../component/A';

그래서 현재 어느 폴더에 있던지, 불러오는 근원을 같게 하여 아래처럼 쓰도록 상대경로 설정을 해볼거에요.

import ComponentA from 'component/A'

웹팩 설정 파일 수정

저의 경우는 보통 수정하는 코드가 /src에 있기 때문에 여기를 Root로 설정해줬어요.

webpack.config.js

const path = require('path');
const SRC = path.resolve(__dirname, '../src');
...

module.exports = {
	...,
    resolve: {
    	extensions: ['.js', '.jsx', '.ts', '.tsx'],
        modules: [SRC, './node_modules']               // <--- 추가
    }
}

사용한 결과 아래처럼 import App from 'App' 이렇게 사용 가능할 수 있게 되었습니다.

마치며,,

👏👏👏👏👏 여기까지 typescript 그리고 상대경로 설정하는 것을 완료했습니다.
다음 포스트는 router 설정 그리고 code spliting HOC으로 만들어놓기를 다룰 예정!
전체 코드는 react-boilerplate-webpack-babel 에서 볼 수 있어요~!!