1. 리액트 개발환경 구성하기

# 리액트를 쓰는 이유?

옵저버 패턴과 연관 되어 있다.

리액트는 데이터 변경을 감지시 UI가 자동으로 업데이트 된다.

리액트의 변경을 감지하고 UI를 자동으로 업데이트 해주기 위해서는 데몬이 필요한데 그것을 Node.js를 활용하여 구성 한다.

여기서 서버의 정의를 잠깐 짚고 넘어가면, 서버란? 어떤 요청에 대한 처리를 수행해 주는 역할을 하는데 그 처리를 밤낮없이 계속해서 수행하는것을 서버라고 한다.

1. node.js를 설치한다.
2. vscode를 설치한다.
3. react 프로젝트를 생성한다.

아래는 react 프로젝트 생성 명령어 이다.

npx create-react-app {프로젝트 명을 넣어준다}

예를들어 프로젝트 명이 test_01 이라고 함다면 아래와 같이 생성해 주면 된다.

4. npm과 npx의 비교 (npx 써라...)

npm → 라이브러리를 다운 - 빌드 → 프로젝트의 라이브러리를 전부 다운로드 한다.→ 프로젝트마다, 글로벌하게
npx → 라이브러리를 다운 - 빌드 → 라리브러리가 없는것만 다운로드 한다. → 실행 후 해당 라이브러리르 삭제한다.

프로젝트를 실행

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd test_01
  npm start

npm start 를 입력하여 리액트 서버를 실행 시킨다.

 

리액트가 정상적으로 실행된 화면

5. 확장 프로그램 설치

- ESLint

- Prettier

- React code snippets

재시작 후 적용됨

 

app.js 파일을 아래와 같이 수정한다.

import logo from './logo.svg';
import './App.css';

function App() {
  return <div>안녕 하세요!!</div>;
}

export default App;

수정 후 npm start 로 서버를 기동 하면 아래와 같이 수정된 페이지를 볼 수 있다.

6. 자동정렬 기능 활성화 및 .prettierrc 파일 작성하기

- 저장 시 자동정렬 → 파일 → 기본설정 → 설정 → format on save → 체크

- .prettierrc (아래와 같이 옵션을 따로 파일로 지정하여 관리 할 수 있음)

{
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

- 리액트 자동정렬 단축키

Windows에서는 Ctrl을 누른 상태에서 K(영문) + F(영문)을 순서대로 누릅니다.