1.리액트 INTRO

  • 뭔가 신기술을 따로 공부해본적이 없어서, 이리저리 기웃거리다가 이름이 너무 멋있어서 블로그,생활코딩으로 공부한 리액트를 재정리
  • 일단 이름이 너무 멋있다(R.E.A.C.T)
  • 자바스크립트 UI 라이브러리(프레임워크냐,라이브러리냐 논쟁이 있다는데 페이스북에선 라이브러리로 규정했다고 한다)

2.리액트의 목적, 사용 이유

  • 웹화면을 구성하는 DOM을 다루는 방법에 대해 고민
  • DOM을 직접 다루는 것은 위험하며, 프로젝트 규모가 커질수록 코드 유지보수가 복잡해진다
  • 리액트를 사용하면, 가상의 DOM을 미리 만들어, 필요한 부분만 업데이트를 해줄 수 있고, 객체지향방식으로 뷰화면을 구성할 수 있다
  • 따로따로 작성하고, 블럭처럼 합칠 수 있다
  • 객체지향프로그래밍과 함수형프로그래밍의 특징을 모두 갖고 있음

3.리액트로 개발하는 3가지 방법

  • 공식문서 참고

  1. 코드펜 등의 플레이그라운드(코드펜)

  2. 본인의 웹사이트에 부분적 적용(?)
  3. Create a New Reac App //이것으로 하려고 한다

4.개발에 필요한 여러가지 도구

1.VSCode : 리액트 개발에 유용한 IDE

2.Node.js : “Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임”. 자바스크립트 기반으로 구성된 서버사이드 서비스를 javaScript로 구현할 수 있게 만든 런타임이다(공식적인 설명이 어려워서 한 번 따로 공부할 필요가 있다.NodeJS 에 들어가서 LTS 안정화버전을 다운로드)

3.NPM : Nodejs Package Manager. Node.js 기반의 모듈을 모아둔 집합 저장소. npm명령어로 리액트앱을 만들고, 실행하고,배포할 수 있다. 즉, Node.js로 만들어진 프로그램을 쉽게 설치해주는 앱스토어같은 개념(Node.js를 설치하면 명령어 사용 가능)

*공식적으로는 NPM말고 NPX 사용을 권장한다.NPX는 임시로 설치하여 딱 한번만 실행시키고 지운다(공간낭비가 없고 실행할때마다 다운로드받아 최신 상태를 유지.

5.개발환경구축

  1. NodeJs에서 Node.js 안정화(LTS) ver를 다운로드 받는다.

  2. 설치 후, CMD에서 버전을 확인한다.

    npm -v

  3. 원하는 곳에 개발환경을 구축할 폴더를 만든다(워크스페이스. 여기선 바탕화면에 my-react)

  4. cmd에 cd 경로 입력 후, creat-react-app .’을 입력하여 이 폴더를 개발환경으로 셋팅

    cd C:\Users\나의PC\Desktop\my-react

    create-react-app .

  5. 구축된 개발환경(my-react)에서 sample react page를 열어보기

    npm run start

    intro page