React 오프라인 1강
1. HTTP 요청을 하면 view를 돌려준다.
- 화면 통째로 그림을 그려서 돌려주게 된다.
- 부분 변경을 하고 싶을 때는 AJAX를 쓰게 된다.
2. view에서 부분 변경 요청을 받을 때 AJAX를 사용한다.
- 요청을 하려면 javascript로 할 수밖에 없다.
- 응답은 JSON으로 하게 된다.
- 응답 받은 데이터를 토대로 그림을 그리게 된다.
- 이 또한 javascript로 하게 된다.
1번과 2번의 차이점은 1번은 그림만 그려내면 되지만, 2번은 연산을 해야 한다.3. 페이스북과 같이 화면 UI가 굉장히 복잡한 것에서 부분 변경이 필요하다.
- 하지만 AJAX로 응답을 받아서 그림을 그리기엔 복잡하다.
- 부분적으로 변경되는 부분이 굉장히 많기 때문에 성능을 신경 쓰기도 그림을 그리기에도 어려워진다.
- 클라이언트 측에서 그림을 그려주면 코드를 잘 못 짰을 때 퍼포먼스가 느려지게 된다.
- 그래서 부분변경을 하지 말고 AJAX로 html을 통째로 받으면 되지 않을까?
- 하지만 이렇게 되면 복잡하진 않지만, 서버에서 연산도 해야되고 html 파일을 불러오기만 하는 것이기 때문에 별다를게 없다.
4. 따라서 페이스북에서 만든 React가 나오게 되었다.
- 데이터 변경 감지를 하여 UI가 자동 업데이트 될 수 있도록 프로그래밍이 가능하다.
- 따라서 데이터만 변경시키면 되고 데이터를 감지해서 무언가를 trigger 시키는 것이다.
- 이를 Observer 패턴이라고 한다.
- React는 변경 감지를 하고 UI만 업데이트 하는 엔진이다.
- 이러한 엔진이 계속해서 돌아야 변경 감지를 할 수 있을 것이고, 데몬 프로세스를 가지고 있다.
- 따라서 엔진을 계속해서 돌리게 할 서버가 필요한데, 이 서버는 node.js 서버이다.
- node.js는 javascript로 만들었으며 네트워크 애플리케이션을 개발할 때 주로 사용한다.
- node.js가 있기 때문에 React 머신이 무한으로 돌 수 있는 것이다.
npm은 무엇인가?
- javascript 엔진으로 만든 의존성 패키지 관리자이다.
- npx는 5.2.0 이상 버전으로 사용 가능하다.
- gradle, maven과 같이 의존성 관리 도구라고 할 수 있으며 빌드까지 도와준다.
- 이러한 도구는 웬만한 언어들은 모두 있다.
- 이런게 없으면 라이브러리를 다운로드하고 관리하기가 어렵기 때문에 필요하다.
npm과 npx의 차이
- npm : 라이브러리를 다운하고 빌드하면 (프로젝트)로컬에 모두 다운받아서 중복되는 게 많아진다.
- 다운받는 것이 항상 유지된다.
- 프로젝트마다 다운받을 수 있고(로컬) 글로벌하게 다운받을 수도 있다.
- 글로벌하게 다운받는다면 라이브러리 버전 관리가 어려워진다. 이전 버전을 삭제하고 다운받아야 되기 때문이다.
- npx : 다운 받은 것을 전역적으로 사용해서 재사용하고 없으면 다운로드 한다.
- 실행될 때만 다운로드 받고 삭제하기 때문에 가볍게 사용할 수 있다.
React 시작하기
npx create-react-app my-app
cd my-app
npm start- ESLint : React의 문법을 디버깅 해주는 플러그인을 다운로드 해준다.
- 인터프리터 언어이기 때문에 실행하지 않아도 검사가 가능하다.
- Prettier : code 정렬을 해주는 플러그인이다.
- Reactjs Code snippets : 코드를 자동완성 해주는 플러그인이다.
출처
react 오프라인 1강 - 설치 및 세팅 메타코딩
혼자 공부하는 공간