[01.14] 리액트(React)

💥 React(웹 프레임워크)

 - React.js는 자바스크립트 라이브러리의 하나이다.

 - 사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발했다.

 - 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발이 가능하다.

💥 React의 동작 원리

 - 초기 랜더링

 - 가상 DOM 변경

 - 재조정

 - 실제 DOM 업데이트

💥 React 실습해보기(+오류해결1..)

React 사이트에 사용법이 적혀있으니, 터미널에 이대로 해보았다.

강사님은 error 없이 잘 넘어가셨는데 갑자기 난  error 가 미친듯이 뜨고.. npm start를 해보니 에러페이지가 떴다 ㅠ..

그래서 구글링을 열심히 해보았더니 이유를 알게되었다😥

React 버젼이 호환성에 맞지 않는 게 이유였고 간단한 해결방법까지 찾아서 해봤다!

1) npx create-react-app my-app
2) cd my-app
3) npm install react@18 react-dom@18
4) npm i web-vitals
5) npm start

이 순서대로 해보니 문제없이 잘 작동이 되었다... 진짜 다행😥

드~~~~~디어 React가 잘 작동된 페이지를 볼 수 있었다ㅠㅠㅠㅠㅠㅠㅠ

💥 타입스크립트 기반으로 React 프로젝트 만들어보기(+오류해결2..^^)

우선, 아까와는 다르게 타입스크립트 기반으로 React 프로젝트를 만들거기 때문에 조금 달랐다.

1) npx create-react-app todolist --template typescript
2) cd todolist
3) npm install react@18 react-dom@18
4) npm i web-vitals
5) npm start

 

하지만...................................... 또 오류났다 ^ㅁ^...

일단 문제는.. 저 순서대로 해도 tsconfig.json 이 안 생긴다는 것이다 ㅎㅎㅎㅎㅎㅎㅎㅎ

tsconfig.json을 tsc --init으로 새로 만들어서 설정을 다시 해줘야 하는 상황이 왔었다.

tsconfig.json 설정을 안 해 본 사람으로써 건들 용기가 1도 없어서 다른 방법을 찾았다 ㅠ

지금까지 저대로 잘 사용했었는데 왜 갑자기 이런 문제가 생기느냐 인데...

이번에 react 버젼이 업그레이드 되면서 생긴 이슈인 것 같았다.....

그래서 많은 사람들이 추천하는 방식인 vite 엔진을 사용하는 걸로 골랐다..😥

 

1) npm create vite@latest
2) npm i
3) npm run dev

이대로 했더니 드디어 진짜 드디어 듸덩 ㅡㅜ드이더이드디어!!!!!!!

오류없이 잘 되는 걸 볼 수 있었따...................

진짜 이거 하나 고치는 데 구글링 2시간 걸렸다 ㅎ...

최근에 발생한 이슈이다보니 정보도 많이 부족했고, 강의랑 다르게 vite 엔진을 사용해도 될려나.. 했던 걱정이 있었다.

그냥 해볼걸! 아😑