REACT가 나온 이유

1. (구)웹 브라우저 동작 방식
   • 요청 > view(html) > 화면 통채로 받음 > 브라우저 역할은 그림만 그림
2. 통채로 받은 View > 요청(JavaScript) > ajax로 부분변경 > 응답 : json > 그림그리기(JavaScript)
   • 페이스북같은 경우 view화면이 복잡
     • view > 요청 : ajax > 응답 : json > 그림그리기 복잡 : 어려워짐
3. view > 요청 : ajax > 응답 : html로(통채로) > 그림그리기 : 쉬움
4. 리엑트(Deamon : 서버처럼 계속 실행중 - Deamon Processes)
   • ajax > 데이터 변경감지 > UI 자동 업데이트 (옵저버 패턴)
   • 기존걸 살리면서 편한 개발환경을 제공

설치

1. Node.JS : JavaScript로 만들어진 서버
   1. 서버 : 어떤 요청을 받으면 그 요청을 처리해주는 역할을 수행
   2. LTS(Long Term Support) : 장기 지원 버전이라고 하는데 일반적인 경우보다 장기간에 걸쳐 지원하도록 고안된 버전
   3. 버전 확인

       node --version
      

2. react 설치
   1. npm,npx : 의존성 관리도구, Java의 Maven이나 Gradle과 같은 역할
   2. 버전 확인 ```shell npm –version

   # 설치 npx create-react-app my-app

   # 실행 my-app # 생성된 my-app폴더 이동 후 npm start 실행 npm start ```

   1. npm과 npx의 차이
      1. npm : 라이브러리 다운 - 빌드 > 프로젝트 3개 (로컬에 다 다운 중복o)
         1. 프로젝트마다 : 로컬환경 프로젝트
         2. 글로벌 : 모든 프로젝트가 바라볼 수 있는 라이브러리 폴더를 만들 수 있음
      2. npx : 라이브러리 다운 - 빌드 > 프로젝트 3개 (다운 받은 걸 재사용, 없으면 다운) > 실행 후 삭제
3. VSCode 확장자 설치
   1. ESLint : JS문법 체크
   2. Prettier - Code formatter : 컨트롤+shift+f 와 같은 코드 정렬기능
   3. Reactjs code snippets : 자동완성기능

• ← Previous Post
• Next Post →