#1 리액트 개발환경 세팅

* 해당 내용은 코딩알려주는누나님의 강의를 바탕으로 정리한 글 입니다.*

(자세한 내용은 코알누님의 강의를 참고 해주세요.)

https://codingnoona.thinkific.com/courses/3

3. (✨2024 최신 업데이트)리액트: 프론트엔드 개발자로 가는 마지막 단계

 

1. 환경설정 Comment

01: Node.js 설치하기

https://nodejs.org/en/download/package-manager 설치하기

node -v 명령어를 통해 node.js가 설치가 잘 되었는지 확인

• npm 이란?
  : Node Package Manager의 약자이다. Node.js로 개발된 모듈들을 설치하고 관리해주는 패키지 매니저이다.

02: 프로젝트 시작하기

1. 프로젝트를 설치하고 싶은 경로로 먼저 이동하기

cd desktop
cd project
---------------------------------------------------------------------------
(프로젝트 폴더가 없다면 만들어주기)
cd desktop
mkdir project
cd project

1. npx create-react-app 폴더명 을 통해 설치
2. Happy hacking 메세지가 나오면 설치 완료 code . 프로젝트 열기

03: SPA란?

Single Page Application의 준말 즉 페이지가 하나라는 뜻이다. 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹앱 경험을 선사해줄 수 있다.

단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.

리액트는 이런 SPA의 형식이다.