react설치방법

npm create vite@lastest

오늘은 react 2번째 공부입니다. react를 시작하기 전에 설치부터 해야겠죠? react 설치방법을 알려 드리도록 하겠습니다. 제가 설치하는 방법은 vite를 사용해서 설치합니다.

react설치방법

 

 

 

 

vite 공식문서 바로가기

react 공식문서 바로가기

 

• 왜 react 앱이라고 하는가?
• react 설치 방법은?
• react 폴더별 설명

 

 

 

왜 react앱이라고 하는가?

웹 브라우저에서 동작하는 애플리케이션 같아서 그렇게 부르고 있습니다.

 

react설치방법

react 설치 방법은?

- 아무 폴더 생성

- vs code에서 해당 폴더 열기로 열어주기

- 새 터미널 열기

- *vite와 함께 react 설치해 주기

 

*vite:차세대 프런트엔드 개발자 툴

*기타 도구 설치 및 설정하는 것이 입문자에게 어렵기 때문에 기본적으로 설치가 되어있는 vite를 사용해서 react를 설치합니다.

npm create vite@lastest

위의 코드를 입력하여 설치해 주기

 

다음으로 순차적으로 따라 해 주시면 설치가 가능합니다.

- project name : "원하는 프로젝트이름 넣기"

- select a framework: React 선택

- select a variant: 원하시는 것을 고르시면 됩니다. (타입스크립트를 사용한다면 타입스크립트, 사용 안 한다면 javascript)

 

Done. Now run:

이것이 나왔다면 설치가 되었다고 생각하시면 됩니다.

 

이제 vscode를 닫고 새로운 vscode를 열어주셔야 합니다.

이때는 위에서 프로젝트이름으로 만든 폴더로 열어주시기를 바랍니다.

 

- 새로운 터미널 열어주기

npm i

 위 코드를 입력하여 node_modules설치해 주기

 

npm run dev

앱을 개발용으로 실행하는 명령어입니다. 이것을 터미널에 입력하시면 터미널에 local: 어쩌고 저쩌고라고 나올 겁니다.

이것을 컨트롤+클릭하시면 해당 프로젝트를 브라우저에서 확인하실 수 있습니다.

 

r + enter :서버를 다시 실행
u + enter :서버의 주소를 다시 보여줌
o + enter :자동으로 브라우저를 열면서 실행시켜줌
c + enter :콘솔을 클리어해줌
q + enter :서버를 종료

터미널에 위의 것들을 입력하고 엔터를 눌러주면 실행되는 단축키라고 생각하시면 됩니다.(enter는 입력이 아니고 진짜 엔터키를 눌러야 한다는 의미입니다)

 

 

 

react 폴더별 설명

1.public

이미지나, 폰트, 동영상 등 코드가 아닌 정적인 파일들을 저장하는 공간이라고 생각하시면 됩니다.

 

2.src

코드들을 보관하는 공간이라고 생각하시면 됩니다.

 

3.assets

이미지나, 폰트, 동영상 등 코드가 아닌 정적인 파일들을 저장하는 공간이라고 생각하시면 됩니다.

 

* public와 assets 약간의 차이가 있습니다. 이것은 나중에 따로 정리해 드리도록 하겠습니다.

 

파일설명

 

1.eslintrc.cjs

 코드 스타일을 통일하는데 도와주는 도구

 

2. gitignore

 git hub에 업로드할 때 올리면 안 되는 파일들을 적어두는 곳이라고 생각하시면 됩니다.

 

3. index.html

 실질적 react가 돌아가고 있는 파일이라고 생각하시면 됩니다. 왜냐하면 react는 페이지가 하나이기 때문입니다.

 

4.vite.config.js

react를 만들 때 사용한 vite라는 도구의 옵션을 설정하는 곳

 

 

 

react란

react란

리액트 Component문법, 삼항연산자, .map()

리액트 Component문법, 삼항연산자, .map()