[ Mac React+TypeScript ] 리액트(React)+타입스크립트(TypeScript) 설치방법을 알아보자.

Vue.js를 설치하는 방법은 다음과 같습니다

1. Node.js설치
  Vue.js를 사용하기 위해서는 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 Vue 개발 환경에서 필요한 패키지 및 도구를 관리하는 데 사용합니다 Node.js의 공식 웹사이트 (Node.js (nodejs.org))에서 다운받을수 있습니다.

2.Node.js 설치확인
  Node 다운로드는 최신 버전보다 LTS 버전을 사용하는 것이 좋습니다. 이유는 안전성과 신뢰성, 보안 업데이트, 호환성, 커뮤니티 지원 등의 이유가 있습니다. 그리고 버전이 많이 낮은 12번대의 Node.js를 사용할 시 es6의 신 문법등의 제약이 걸리게 됩니다. 
Node.js 가 설치 됐다면 터미널에 명령어를 입력합니다.   

node -v

위와 같이 버전이 나온다면 Node.js 설치 성공입니다.

3. Create React App 사용

  Create React App은 React 프로젝트를 쉽게 설정할 수 있는 도구입니다. 터미널 또는 명령 프롬포트에서 다음 명령어를 실행하여 Create React App을 전역으로 설치합니다.

npm install -g create-react-app

 

4. React+TypeSrcipt 프로젝트 생성
  이제 React와 TypeScript를 함께 사용할 프로젝트를 생성합니다. 원하는 디렉토리로 이동 한후, 다음 명령어를 실행합니다.

npx create-react-app my-app --template typescript

'my-app' 부분은 프로젝트의 이름으로 변경할 수 있습니다. 위 명령어는 Create React App을 사용하여 TypsScript 템플릿을 이용하여 프로젝트를 생성합니다.

명령어를 실행하면 아래와 같은 설치로그가 출력됩니다.

 

설치가 완료되면 아래와 같은 설치로그가 출력됩니다.

 

5. React 프로젝트 실행하기

    프로젝트 생성이 완료되면 프로젝트 디렉토리로 이동후 실행해줍니다.

아래의 명령어를 입력합니다.

cd my-app
npm start

* React 프로젝트가  설치된 경로로 이동하지 않으면 npm start 명령어를 이용할 수 없으니 주의해 주세요.

 

아래는 npm start 후에 출력되는 로그입니다.

화면이 정상적으로 보이셨다면 

브라우저 url 입력창에 http://localhost:3000/ 주소로 이동합니다.

 

위와 같은 화면이 출력되면 React + Typescript 설치 및 실행 완료입니다!