Typescript를 사용하여 React 시작하기 - Setting 및 알고 넘어가기

안녕하세요. AlbertKo입니다.

요즘 프론트엔드 하면 React.js와 Vue.js죠.

저는 SPA 개발을 Angular로 시작했습니다만, 저 둘의 인기에 점점 뒤쳐지는 느낌이네요 ㅜㅜ

Angular도 충분히 좋은 프레임워크입니다. 뭘 쓰든 본인 손가락과 머리와 그에 따른 노력에 따라 Return이 달라지지요 ㅎㅎ

그치만, 현재 구직 중인 저로서 몸서 느낀 점은 Angular는 저 둘의 인기에 묻혀서 참... 구직이 힘이드네요.

개인적으로 개발자 분들은 남들 말을 듣는 것 보다는 몸서 느껴보는 것이 좋을 것 같습니다.

다 해보세요!! ㅋㅋㅋ 저는 속도라든지... 는 아직 직접 뭐하다 할만한 정도는 아닌 것 같으니 겸손함을 좀 갖겠습니다.

React.js 란???

React란 Facebook에서 개발 유지 보수 중인 SPA 개발을 위한 라이브러리 입니다.

JSX를 이용하여 템플릿과 Javascript를 합쳐 사용하여, javascript 내에서 DOM을 생성합니다.

Typescript를 사용한다면 JSX가 아닌 TSX를 사용하면 됩니다.

Component를 이용하여 유지 보수가 더욱 편한 것 또한 장점이며, 사용이 간편합니다.

또, Virtual Dom을 사용하기에 기존 문제점이던 DOM 조작법을 유연하게 만들어줍니다.

기존 DOM은 사용이 편이하지만, 속도와 조작에서 문제가 있었습니다.

노드 수가 많아질수록 수정해야할 노드를 찾는 것부터 읽어들일 때 속도가 느렸기 때문에, 이 Virtual DOM은

많은 이점이 있다고 볼 수 있습니다. Vue.js 에서 역시 Virtual DOM을 사용할 수 있어요.

시작하기

시작하기 앞서서 npm은 기본으로 설치를 하셨어야 합니다.

안하셨다면 구글링을 통해서 설치를 하시고 오세요!!

자, 그럼. 맨 처음으로 해야할 것은 당연히 Project 폴더를 만드는 것이겠죠 ㅎㅎ

mkdir FirstReact && cd FirstReact

그 다음 소스파일 폴더를 만들어 줍니다.

mkdir src && cd src

mkdir components

그 다음 프로젝트 폴더의 루트로 이동 후 Node Package Manager를 Initialize 해줍시다.

npm init

그 다음 이제 본격적으로 필요한 것들을 설치해 봅시다.

필요한 것은

1. Module Bundler
2. Typescript loader
3. React

이렇게 세가지가 필요합니다.

Webpack 설치하기

Module Bundler로 Webpack을 먼저 설치하겠습니다.

npm i -g webpack

"그래서 Webpack이 뭔데요????"

점점 날이 갈수록 복잡해지는 javascript와 대규모의 의존성 트리들의 구성을 해결해야 하는데,

그 방법이 Javascript를 동작에 따라 각 각 모듈로 나누고,

자바스크립트로 컴파일 되는 Typescript와 같은 언어들을 사용하는 것입니다.

문제는 위에 것들을 브라우저에서 이해할 수 있도록 번들로 묶어주고 변환해 줘야하는데 그 일을 해주는 것이 Webpack이라는 bundler입니다.

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack이 무엇인지 개념에 대해 github에 기재 되어 있는 내용을 가져온 것입니다.

"웹팩은 모듈 번들러 입니다. 자바 스크립트 파일을 브라우저에서 사용하기 위해 번들링하는 것이 주 목적이며, 모든 리소스 또는 자산을 변형, 번들링 또는 패키징 할 수도 있습니다."

아직도 이해가 되시지 않으시다면 밑에 이미지를 같이 참고해서 보세요.

<webpack 홈페이지에 그림 설명>

React 설치하기

npm i --save react react-dom @types/react @types/react-dom

React와 뒤에 react-dom은 아마도 virtual dom 쪽 사용을 위한 모듈이겠죠?ㅎㅎ

그 뒤에 @types가 붙은 것들은 typescript 사용을 위해 래핑한 모듈인 것 같습니다.

찾아보지도 않고 그냥 막말하는 것 같네요.

혹시 틀렸다면 댓글로 피드백 주세요!

Typescript loader 설치하기

Webpack에서 로더(loader)란 위에 Webpack이 무엇인가에 대해 써놨듯이 주 기능은 Javascript 모듈들의 번들러입니다. 하지만, 그 외에도 번들링이 가능하다고 했는데. 이때 javascript 외에 다른 파일들을 번들링하기 위해서 필요한 것이 로더인 것입니다.

Typescript를 쓰기 때문에 typescript용 loader를 설치해야합니다.

Typescript 로더는 대표적으로 두가지가 있는데

• ts-loader
• awesome-typescript-loader

이 두가지입니다.

뭘 쓸지는 본인이 편한데로 쓰시면 됩니다. 저는 awesome-typescript-loader(atl)을 사용했습니다.

둘의 차이점에 대해서 간단하게 말하자면, 

1.  atl이 속도가 더 빠르지만 ts-loader에 비해 복잡성이 큽니다.
2. babel과 통합이 가능하여, babel을 같이 개발시 빌드 시간을 줄일 수 있으며, 스피드 방면으로 caching을 가능할 수 있습니다.
3. type-checker를 별도 프로세스로 fork하여 일부분에서 개발 시나리오의 속도를 높일 수 있습니다.

그럼 이제 설치를 해보겠습니다.

npm install --save-dev typescript awesome-typescript-loader source-map-loader

설치를 하고난 후에 tsconfig.json 파일을 만들어주세요.

저는 typescript-cli를 이용하여 생성했습니다.

tsc --init

후에 내용은 다음과 같이 해주시면 됩니다.

{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] 

}

여기까지하면 기초적인 세팅은 끝났다고 생각하셔도 됩니다!

쓰다보니 글이 길어져서 Hello World를 뛰우는 것은 다음 글에서 짧게 알려드리도록 하겠습니다.

수고하셨습니다. :)