리액트를 다루는 기술 + typescript 1장 1

1장에 대한 요약

1. React 서론

• 컴퓨터의 성능이 매우 발전함에 따라 동적인 페이지 에 대한 필요도가
  높아졌습니다.
• 이에 FaceBook이 최대한 성능을 아끼고 동적인 웹을 보여줄 수 있는
  “React” 라는 시스템을 개발했습니다.
• 성능을 아끼는 방법은, 수많은 Component 에서 몇 개의 정보가
  변경되었을 때, 모든 Component를 변경하는 것이 아니라,
  변경 된 Component 만 변경하는 방식입니다.
• 이 방식은 Virtual DOM을 사용하여 성능을 아낍니다.
• Virtual DOM : 변경된 Component를 가상의 환경에서 만든 후,
  실제로 변경 된 DOM을 비교하여 반영하는 방식

2. 작업 환경 설정 - 저는 “Mac”입니다.

1. Node.js / npm, yarn 설치하기
2. 코드 에디터 - “vscode” 설치하기
3. Git 설치하기
4. create-react-app 으로 프로젝트 만들기

1. Node.js / npm, yarn 설치하기

1. https://nodejs.org/ko/ => NodeJs 홈페이지
2. 자신에게 맞는 운영체제, 버전으로 설치
3. 터미널에 node -v 입력하여 설치되었는지 확인.
4. yarn 을 설치하기 위해 명령어 입력
5. npm install --global yarn
6. 터미널에 yarn --version 입력하여 설치되었는지 확인.

2. 코드 에디터 - “vscode” 설치하기

1. https://code.visualstudio.com/ => Visual Studio Code
2. 자신에게 맞는 운영체제, 버전으로 설치
3. vscode 실행 후, 왼쪽 밑의 확장 버튼에서 필요 프로그램 설치
4. “ESLint”, “Reactjs Code Snippets”,
   “Prettier-Code Formatter”
5. vscode 한국어 설정을 위해 확장에서
   “Korean Language Pack for Visual Studio Code”
   다운 후 한국어로 설정

2. Git 설치

1. https://git-scm.com/ 에서 git 설치

3. create-react-app 으로 프로젝트 생성하기

1. Typescript 버전 react는 명령어가 다릅니다!
   

1번째 명령어

yarn create react-app hello-react --template typescript

2번째 명령어

cd hello-react

• yarn 으로 만든 프로젝트로 이동

3번째 명령어

yarn start

• 현재 디렉토리의 웹 프로젝트 서버 스타트

추가 할 확장 프로그램 !

• Live Server
  yarn start 후 소스코드를 수정하고 저장하기만 하면 바로
  웹 사이트에 적용이 됩니다.

• vscode-styled-components
  
  • 추후 styled-components 적용 시 Syntax Highlight를 위해서
    다운로드 합니다.
  • 미 적용 시 모든 styled-components가 주황색으로만 뜹니다.
• 또다른 확장 프로그램이 있을 시 예제와 함께 알려드리겠습니다.