React #0 (개발 환경 구축)

VSCode 확장 설치

 

(Prettier 나 코드 스펠체커, ESLint, Path 인텔리센스 등등은 이미 JS 할 때 설치해서 쓰셨을 거라 믿습니당)

 

(팩 안에 4가지 필수&권장 확장이 들어있으므로 아래 걸로 그냥 받아버리자)

 

테일윈드를 쓸 거니까 기존 바닐라 CSS에서의 구문 오류가 출력되지 않게끔 해두는 작업.

 

 

 

리액트 시작할 때 타입스크립트가 선행으로 환경이 잡혀있어야 하는데,

 

이 글을 보고 있는 독자분께선 아직 구축 안되어있으면 아래 링크에서 먼저 설치해야 합니다

 

https://chiro-j.tistory.com/45

TypeScript 기초 #0 (설치)

 

 

 

 

리액트 프로젝트 생성

npx create-react-app 프로젝트_이름 --template typescript

 

 

웹팩 설치 완료

 

npm run start	# 개발 모드
npm run build	# 빌드 모드

 

 

빌드 모드 설치 - npm run build 입력

 

 

 

웹팩을 설치했으니 리액트 앱용 서버를 설치하고 가동까지 해보자. (만든 프로젝트 폴더로 이동 : cd 프로젝트 이름)

npm install -g serve		# 서버 설치
serve -s build			# 서버 가동

 

 

 

 

저 2개의 링크 중에 아무거나 ctrl + 좌클릭 해서 누르면 해당 웹페이지가 열린다.

 

(근데 사실 빌드 모드 설치 안해도 npm start 하면 아래처럼 똑같이 뜬다.)

 

 

※ 서버 끌 땐 ctrl + C 눌러서 나옴. 나오면 터미널 입력 불가 상태가 풀린다.

물론 서버도 꺼지니까 새로고침 하면 사이트 연결 실패 나옴.

 

 

 

파일 수정해서 "Hello, World!" 띄워보기

 

아래 경로 (src 폴더)에 가서 App.tsx 를 열어보자

 

 

import 단은 남기고 아래 나머지 싹 지운 다음, 아래 코드를 붙여 넣고 저장하면

 

// ./src/App.tsx
export default function App() {
  return <h1>Hello World!</h1>;
}

 

화면이 바뀌어 있을 것이다.

 

 

 

여러 패키지 설치

 

- Node.js

# 터미널에서 입력
npm i

 

- chance, luxon 

# 터미널에서 입력
npm i chance luxon
npm i -D @types/chance @types/luxon

 

설치 완료 됐으면 package.json 파일 아래 쪽에 들어온다.