Typescript와 React npm 모듈 설치관련 정보.

Typescript와 React npm 모듈 설치 관련 정보.

 

개발자에 관한 관심이 많아지면서, 자연스럽게 코딩을 접하는 분들이 많아지고,

프런트엔드에 필요한 프로그래밍 언어, 라이브러리 혹은 프레임워크를 배우시게 되는 과정에서

리액트를 알게되거나 배우시는 분들이 많아지는 것 같습니다.

저는 개인적으로 너무 좋은 현상이라고 생각합니다.

개발자는 자신의 지식을 이리저리 꽁꽁 숨기는 직업이 아닌 너도나도 지식을 나누어 필요한 혹은 유용한

프레임워크 라이브러리 혹은 알고리즘을 대중화시키고 나누는 것이 중요합니다.

리액트를 배우시는 경우라면 자바스크립트를 어느 정도 사용하실 수 있다는 뜻일 것입니다.

또한 그 과정에서 타입스크립트를 들어보시거나 경험해 보신 분들도 많을 것입니다.

오늘은 타입스크립트로 리액트 프로젝트를 할 때 npm 모듈에 관해 잠시 이야기해보려 합니다.

 

1. 타입스크립트로 리액트 프로젝트를 만드는 방법.
2. 타입스크립트를 사용할 때 모듈 관리방법.
3. 마치며.

 

1. 타입스크립트로 리액트 프로젝트를 만드는 방법.

리액트 프로젝트를 시작하신다면 대부분 create-react-app이라는 모듈을 아실 것입니다.

이 모듈은 리액트 프로젝트에 필요한 기초적인 세팅을 편하게 준비해주는 모듈입니다.

당연히 이러한 모듈 없이도 직접 세팅을 하실 수 있으나, 가장 편리하고 보편적으로 사용되는 방법이

아마 create-react-app이지 않을까 싶네요.

기본적인 터미널 명령법은 프로젝트를 생성할 경로에 npx create-react-app my-project-name입니다.

하지만 타입스크립트를 기반으로 리액트 프로젝트를 생성하시려면

npx create-react-app my-project-name --template typescript라고 입력하시면 됩니다.

그러면 자동으로 타입스크립트를 기반으로 하는 리액트 프로젝트가 생성됩니다.

그럼 파일의 확장자는 jsx가 아닌 tsx로 바뀌게 됩니다.

 

 

2. 타입스크립트를 사용할 때 모듈 관리방법.

 

자바스크립트를 기반으로 리액트 프로젝트를 하신다면 필요 없는 내용이지만,

타입스크립트를 사용하신다면 생각보다 유용한 내용일 것 같습니다.

타입스크립트를 기반으로 하는 리액트 프로젝트에서 npm 모듈들을 정확히 인스톨하여도

에러가 뜨는 경우가 있습니다. 그럴 때는 먼저 npm 홈페이지를 확인하시는 것이 중요합니다.

몇몇 모듈은 곧잘 타입스크립트를 지원하기도 하나 대부분의 모듈이 또 다른 디펜던시를 설치해 주어야 합니다.

방법은 전혀 어렵지 않습니다.

 

예를 보시겠습니다.

위의 axios의 경우 옆에 TS라고 표시되어있습니다.

그렇다면 타입스크립트의 경우에 별다른 추가적인 디펜던시 없이 곧바로 인스톨해주시면 됩니다.

예를 들면 npm install axios와 같이 말이죠.

 

자 그럼 다음의 경우를 보겠습니다.

styled-components의 경우 옆에 TS가 아닌 DT라고 표시되어있는 것을 알 수 있습니다.

이러한 경우 두 번의 모듈 설치가 필요합니다.

한 번은 npm install styled-components입니다.

그 후 추가적인 설치를 위해 DT를 클릭해주세요.

그렇다면 페이지가 바뀌면서 아래와 같이 될 것입니다.

모두가 인스톨하는 경우가 다르나 저의 경우  추가적인 모듈을 설치할 때 -D옵션으로 devDependency로 분류합니다.

예를 들면 npm install -D @types/styled-components와 같이 터미널에 입력합니다.

styled-components와 같이 따로 설치해야 하는 모듈이 존재하는 경우, TS의 모듈만 설치해서는 동작하지 않기에,

두 개의 모듈을 모두 설치하는 것이 중요합니다.

 

3. 마치며.

자 오늘은 가볍게 typescript에서 개발을 시작할 때 npm 모듈들에 관해 알아보았습니다.

자바스크립트로 시작하다 타입스크립트로 처음 코드를 작성하다 보면, 편하다, 좋다는 느낌보다는

너무 불편해, 짜증 나, 왜 자꾸 오류가나... 하는 생각이 더 많이 들게 됩니다.

하지만 이렇게 하나씩 배워가는 게 아닐까요??

오늘도 짧은 글 읽어주셔서 감사합니다. 조금이나마 제 글이 도움이 될 수 있으면 좋겠습니다.

항상 좋은 하루 보내시고, 열공하시고 열심히 코딩하시기 바랍니다!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.