1장. React 설치와 셋팅 방법

1장. React 설치와 셋팅 방법

📌 React란?

• 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다.
• 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다.

• 대표적인 특징
  • JSX 문법
  • Component 기반
  • Virtual DOM
  • Data Flow
  • Props and State

1. 필요 툴 설치

• Window

  Tool	version	remark
  node.js	최신 버전	npm 기능 이용
  yarn	최신 버전	npm 다운로드 후 cmd에 입력 (npm install --global yarn)
  visual studio code	최신 버전	terminal 기능 필요

• Mac

  Tool	version	remark
  homebrew	최신 버전	yarn 기능 이용 (brew install yarn)
  visual studio code	최신 버전	terminal 기능 필요

• VSCode Extensions (필수 X) => 출처

  Tool	remark
  Prettier	자동 코드 정렬 (셋팅 방법 : File --> Preference --> Setting --> editor.format 입력 [ Setting 입력 창 ] --> Format On Save 체크)
  Eslint	Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아서 일관된 코드 스타일로 재정렬 해주도록 도움
  ES7 React/Redux/GraphQL/React-Native snippets	react 구조 생성 지원 (예약어 :: rcc => react class component, rsi => react function component)
  Highlight Matching Tag	태그를 클릭시 닫는 태그 함께 highlight, 가독성 좋음
  Material Theme	테마 정하기
  Bracket Pari Colorizer	괄호마다 색깔을 다르게 줌
  Indent-rainbow	들여쓰기 된 부분을 하이라이트로 표시
  Auto Rename Tag	앞 Tag 변경 시 뒤 Tag 자동 변경
  CSS Peek	HTML에서 ctrl 누른 채 클릭 시 정의된 css로 이동
  HTML CSS Support	HTML에서 CSS 자동완성 이용하게 해줌
  Live Server	CSS 수정 시 브라우저 창 새로고침 안 해도 됨 (Command Palette> Live Server : Open with Live Server 실행)

💡 Prettier 세팅 방법 => 출처

• settings.json 수정

{
  "editor.formatOnSave": true,
  //여기부터 추가함
  "javascript.format.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.arrowParens": "avoid",
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "es5"
}

💡 yarn 오류 시 해결 방법 => 출처

• powershell 에서 권한 설정
  • PowerShell 을 관리자 권한으로 실행
  • get-help Set-ExecutionPolicy 명령어 입력 후 Y(예) 입력
  • Set-ExecutionPolicy RemoteSigned 명령어 입력 후 Y(예) 입력

2. React 설치 및 프로젝트 생성 [visual studio code툴로 진행]

• 프로젝트를 생성할 React 폴더 생성
  ex) C:\Users\문서\React class
• visual studio code에서 생성한 Folder Open
  단축키 : ctrl+K, ctrl+O
• visual studio code의 terminal에서 React 설치 명령어 입력
  npx 명령어 : npx create-react-app blog
yarn 명령어 : yarn create react-app blog

* npx : lib 설치를 도와주는 명령어[node.js 설치 시 이용 가능]
* create-react-app : react 셋팅이 다 된 boilerplate, 한번에 설치할 수 있도록 도와주는 library
* blog : blog라는 이름의 react 프로젝트를 생성하겠다.

• 설치 완료 후 visual studio code에서 생성된 프로젝트 Folder Open
  위의 예시로는 blog 폴더를 Open 합니다.

3. React 프로젝트 구조

• /src/app.js : 메인 페이지에 들어갈 HTML을 작성하는 곳 (index.html 유사)

* app.js 코드 중 p태그에 해당되는 부분을 수정해보면 바뀐 부분을 쉽게 확인할 수 있다.
<p>
   Edit <code>src/App.js</code> and save to reload.
</p>

• public/index.html : 메인페이지
• src/index.js : app.js에 있는 것을 index.html에 넣도록 명령하는 곳
  code : document.getElementById('root')
• node_modules : 라이브러리 모은 폴더
• package.json : 설치한 라이브러리 목록
• public : static 파일 보관함
  ex) image, fivicon ...

4. 실시간 미리보기

• 명령어 : npm start || yarn start
  브라우저 자동으로 안 열리는 경우 표시된 주소값 입력
  

<오늘의 결과물>

참고 유튜버 : 코딩애플