1단원 정리 Do It 리액트 모던 웹 개발 with 타입스크립트 (리액트) 공부

1. 리액트 프레임 워크 

• 프론트엔드 개발에 가상DOM(document object model)과 JSX(JavaScript XML)라는 방식으로 동작하는 프레임 워크
• 백엔드에서 받은 JSON 데이터를 해석하여 새로 요청한 부분만 동적으로 화면을 생성함
• SPA(Single page application) 싱글페이지 어플리케이션을 만드는 프레임워크

2. 개발환경 만들기

책에서는 scoop를 사용하여 개발환경을 셋팅을 했지만
저는 vscode를 활용하여 셋팅을 하였습니다 !

따로 vscode 설정은 책을보고 그대로 따라하였습니다!

여기서 
ts-node index.ts 로 console.log("hello world"); 하는 부분이 있는데 여기서 에러가 날수가 있습니다.
C:\Users\ASUS\Desktop\rcp\ch01\ch01_4\src>ts-node index.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\ASUS\Desktop\rcp\ch01\ch01_4\src\index.ts at new NodeError (node:internal/errors:393:5) at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:75:9) at defaultGetFormat (node:internal/modules/esm/get_format:114:38) at defaultLoad (node:internal/modules/esm/load:81:20) at nextLoad (node:internal/modules/esm/loader:161:28) at ESMLoader.load (node:internal/modules/esm/loader:594:26) at ESMLoader.moduleProvider (node:internal/modules/esm/loader:446:22) at new ModuleJob (node:internal/modules/esm/module_job:64:26) at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:469:17) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:423:34) { code: 'ERR_UNKNOWN_FILE_EXTENSION' }
 위 오류가 나왔습니다 저같은경우는
그래서 검색을 해보니
Node.js가 TypeScript 파일(.ts 확장자)을 ES 모듈로 로드하려고 할 때 발생하는 문제입니다. Node.js는 기본적으로 .ts 파일을 인식하지 않기 때문에 이 오류가 발생합니다.
라고 하여 해결방법으로는 

ts-node --esm index.ts 

이명령어를 사용하니까 실행이 되었습니다 참고바랍니다.

3. 리액트 프로젝트생성 / 빌드 / 실행하기

리액트 웹 애플리케이션은 cra라는 프로그램으로 node.js 프로젝트를 생성해서 만듬

 

1. 프로젝트 생성

• npx create-react-app 프로젝트이름 --template typescript 명령어를 사용하여 타입스크립트 기반 리액트 프로젝트를 생성

이런식으로 설치가됨

2. 어플리케이션 실행 명령어(리액트)

 

package.json 파일의 "scripts" 항목에는 실행할수있는 명령어가 정의되어있습니다. 

ex) npm start 라는 명령어를 실행시키면 react-scripts start 명령어가 실행되게 되어있음

 

• 빌드모드로 실행하기 

npm run build

위명령어를 사용하면 디렉토리으 파일중에 main 또는 chunk라는 단어가 있는 파일을을 찾아 번들파일들을 만들어줌
그러면 이제 build라는 디렉토리가 생김
(public 디렉터리 안에있는 index.html파일을 바탕으로 새로운 build 디렉토리 안에있는 index.html를 만들어줌)

build디렉토리 내부 사진

• 개발모드로 실행하기

npm start

위 명령어를 사용하면 서버를 따로 구동하지 않아도 리액트가 실행이됨
다음으로는  App.tsx를 hello world로 수정하여 실행도 해봄

왼쪽 리액트가 실행이된 화면 / 오른쪽 hello world로 바꿔서 실행된 화면

 

3. 외부패키지(chance, luxon) 설치하여 가짜데이터로 화면 만들기

npm i chance luxon
npm i -D @types/chance @types/luxon

자바스크립트와 타입스크립트에서 사용하려면 저렇게 둘다 써야한다
여기서 -D 를 붙이는 것은
그냥 i 만 써서 설치를 하면 pakage.json에 dependencies안에 설치가 되지만
-D를 써서 설치를 하면 devDependencies 안에 설치가된다. 이점 참고바람

그래서 설치를 하여 책에 44p ~ 48p 까지의 코드를 작성하여 실행을 시키면 아래와같이 화면이 바뀌어서 나온다.

 

코드작성

완성된 화면

 

이상 1장 끝~