[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - 개발환경 설정과 오류 해결, 브라우저의 동작방식

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다.

---

CRA 버전 오류 해결 방안

https://velog.io/@soonmac/%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-You-are-running-create-react-app-5.0.0-which-is-behind-the-latest-release-5.0.1

[오류해결] You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).

node.js 버전

https://codepathfinder.com/entry/NVM-Nodejs-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

[NVM] Node.js 버전 변경하기

nvm을 사용해 원하는 버전을 다운받고 그 버전에 맞춰 use 키워드로 사용하고자 하는 버전으로 변경해주는 방법을 사용

이때 npm도 버전을 다시 

npm 버전 업그레이드

https://walldaydream.tistory.com/entry/Nodejs-npm-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%98%EA%B8%B0

Node.js & npm 업데이트 하기

create-react-app 다운 중 실패문제 해결

https://stackoverflow.com/questions/70019872/npm-err-cannot-read-properties-of-null-reading-pickalgorithm

npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

npm cache clear --force

npm start 안 될때

직접 클릭해서 스크립트 실행을 눌러주면 서버가 뜨고 로컬 서버가 뜹니다. 그럼 localhost:3000으로 제대로 실행되는 걸 보실 수 있습니다.

react 버전 낮추기

yarn add react@원하는 버전
yarn add react-dom@원하는 버전 
npm쓰다가 오류나서 yarn 다운받아 yarn로 처리

브라우저의 동작원리

• 파싱: 렌더링의 전처리 단계이다/
  • HTML을 트리 자료 구조의 형태임 DOM트리로 변환해준다.
  • 다운로드해야 하는 리소스를 다운로드한다.(CSS는 CSSOM 트리로 변환한다)
  • 다운받은 자바스크립트를 인터프리트, 컴파일, 파싱 및 실행해준다.
• 렌더링: 파싱을 맞춘 뒤 렌더링으로 들어온다.
  • DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 만든다.(내용 DOM + 디자인 CSSOM)
  • 레이아웃을 정한 뒤 트리의 각 노드가 브라우저의 어디에 배치될지, 어떤 크리고 배치될지 정하는 것이다.
  • 마지막으로 시각화시켜 HTML과 파일을 사용자가 볼수 있게 한다.