리액트 기초 입문 (맥북 프로 초기 설정)

안녕하세요 오랜만에 돌아온 jju_developer입니다.

 

리액트 공부를 위해 맥북을 사용한 리액트 초기 설정에 대해 알아보겠습니다.

 

1. Node.js 설치

노드js

Node.js

웹사이트에 들어가서 노드제이에스를 깔아줍니다.

왼쪽 버전으로 설치를 한 후,

 

아무 폴더나 만들어서 거기서

2. 새폴더의 터미널을 열고 npx create-react-app blog 엔터 치기

npx create-react-app blog를 치고 리액트 프로젝트를 만들어봅니다.

이렇게 뜨면 성공적으로 작업 파일이 생성이 된 것입니다.

파일에 들어가 보면 blog 폴더에 기초 파일이 생성된 것을 볼 수 있습니다.

이것을 vscode에서 열어줍니다.

 

3. VSCODE에 파일 불러오기

블로그

VSCODE에서 해당 폴더를 열어줍니다.

정상적으로 폴더를 열어주었으면 해당 폴더에서 위쪽 상단에 Terminal을 눌러서

새로운 터미널을 켜줍니다.

아래에 터미널 창이 생길 것입니다.

4. VSCODE에서 실행하기

VSCODE에서 터미널을 연다음 npm start를 치면

 

아래와 같이 http://localhost:3000/가 자동으로 뜨면서 리액트가 정상적으로 실행된 것을 볼 수 있습니다~!!!

[정리]

html 파일에 직접 리액트를 설치를 할 순 있으나,,,

시간이 오래 걸리기 때문에 Create React App을 이용하여

프로젝트를 일반적으로 생성을 하는데..

이 라이브러리를 사용하고 싶으면 npm이 필요합니다.

npm은 노드 js를 설치하면 자동으로 딸려오기 때문에

노드js를 깔고 npm 명령어를 쓸 수 있었던 것입니다.

src에서 소스코드를 짜면 됩니다!

public은 잠시 이미지나 파일을 보관할 때 static 파일을 모아놓은 곳이라고 합니다.

참고하셔서 코드 짜실 때 유용하게 사용하시기 바랍니다~!!!

 

그럼 여기까지 맥북 프로를 이용한 react 초기 작업을 마치겠습니다.

 

감사합니다❤️