1. 리액트 설치 및 세팅

React(리액트) 란 프론트엔드 개발 기술로,

브라우저에 변경된 데이터를 감지하여 그림을 그리는데 최적화 된 기술입니다.

 

 

리액트를 실습해 보기 위해서는 '변경 감지'를 무자비하게 인식해줄 '서버'가 필요합니다.

요청을 하면 응답을 해주는것 = 서버

 

 

node.js 서버를 사용하겠습니다.

nodejs.org/ko/

Node.js

작성시간 기준으로 LTS 버전이 14.15.4 버전이네요.

최신버전 보다는 LTS로 다운받아주세요

 

 

프론트엔드는 MS Visual Code 를 사용할겁니다.

백엔드는 나중에 Spring으로 사용할 예정이지만 지금은 필요없습니다.

 

 

원하는 경로에 프로젝트용 새 폴더를 만들고 MS Code 에서 Add WorkSpace 를 합니다

 

 

create-react-app.dev/docs/getting-started/

Getting Started | Create React App

새 터미널을 여시고 (저는 cmd를 사용했습니다. 탭에 Terminal)

npx create-react-app my-app
cd my-app
npm start

my-app 이라는 이름으로 프로젝트를 만드는 명령어입니다.

npm start는 서버를 실행하는거구요

 

 

예상경로 :   C:\workspace\my-app> npm start

성공하셨다면 리액트로고가 빙글빙글 돌아가는 화면이 나올겁니다~ 

 

 

 

다음은 리액트 사용에 편리한 확장프로그램들 입니다

ESLint 는 리액트 문법을 검사해주는 프로그램이고,

자바스크립트는 인터프리터 언어이기때문에 실행 전까지는 오류를 알 수가 없습니다.

 

Reactjs code snippets 는 리액트에서 자주쓰이는 문법들을 자동완성 시켜주는 프로그램입니다.