React, node.js를 이용한 기초 프로젝트 생성(for mac)

1. 개발 세팅 준비

1-1. Node.js 설치하기

 

https://nodejs.org/

Node.js — Run JavaScript Everywhere

 

링크에서 LTS 버전을 다운

 

pkg 파일이 다운받아지면 실행시켜 설치해주세요

 

 

1-2. VS Code 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

저는 맥용을 다운받았어요

 

실행 후 필요한 확장도구(Extension)를 설치해줍니다 

 

1-3. Extension 설치하기

1) Korean Language Pack for Visual Studio Code

-> UI 설명을 한국어로 번역해줍니다

 

2) open in browser

-> VSCode로 접근한  파일을 기본 브라우저 혹은 어플을 통해 열게 해주는 확장도구

해당 파일을 열어서 우클릭하면 바로 브라우저로 열 수 있어 편리함 / 바닐라 자바스크립트 + HTML 작업할 때 유용

 

3) ESLint

-> 자바스크립트 문법 에러가 있는 부분을 표시해주는 확장도구

 

4) Prettier - Code formatter

-> 코드를 원하는 스타일에 맞춰 다듬어주는 도구

 

5) HTML CSS Support

-> CSS 셀렉터 작성에 있어 HTML의 id와 class를 자동완성해주는 도구

6) Code Runner

-> 코드를 바로 실행해볼 수 있음 

설치하면 run이 생깁니다! 

 

 

1-4. webpack 설치

npm install

 

 

1-5. 터미널에서 설치 확인 

node -v

npm -v

git -v

git 명령어 실행 시 에러 발생, 바로 밑에서 해결해보겠습니다

 

1-6. git -v 및 git 명령어 실행 시 에러

 

에러 내용 : xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

 

 

원인 : CommandLineTools를 식별하지 못해 생기는 문제

해결 방법 : xcode-select 명령어로 CommandLineTools를 설치하면 해결가능

 

터미널에 아래 명령어 입력

xcode-select --install

실행되면서 자동으로 설치가 됩니다

 

 

 

=> 다운로드 완료된 이후에는 문제없이 실행이 잘 됩니다!

 

 

2. 기본 프로젝트 만들어보기

원하는 위치에  프로젝트 폴더를 생성한 후 

VS Code 상단에 File -> Open Folder.. 클릭해 내가 생성해둔 폴더를 선택한다

 

폴더 이름을 REACT로 생성해 불러왔다

 

 

2-1. 기본 프로젝트 생성

터미널에서 아래 명령어를 입력한다 (VSCode 내 터미널에서도 가능)

npx create-react-app blog

 

-> npx : 라이브러리 설치를 도와주는 명령어로 Node.js 설치가 되어있어야 사용이 가능하다

-> create-react-app : React 세팅이 다 된 boilerplate를 만들기 쉽게 도와주는 라이브러리(Create React App 라이브러리)

  참고 :  https://create-react-app.dev/ 

-> blog : blog 이름의 프로젝트를 만든다

 

 

blog 이름의 프로젝트가 생성되었다

REACT 아래 blog 생성 완료

 

 

아래의 터미널에서 실행을 시켜본다 

cd blog
npm run start   //개발모드 서버 실행

 

글자나 문구를 바꿔보고 싶으면 src/App.js를 변경해주면 바뀐 화면이 자동으로 나온다 

리액트는 화면이 바로 바로 바껴서 좋은듯...!!!