기존의 웹 브라우저 방식

1. 요청 -> view(html)를 돌려받음 -> 화면을 통째로 받는다.(서버에서 그려야 할 그림을 모두 완성하고 받음) 그 다음 html을 통째로 받으면 브라우저는 그것에 대해 그림만 그리면 끝
2. view -> 요청을 해서(자바스크립트로) -> ajax(부분변경) -> 서버에 요청 후 응답을 받음 보통 json -> 받은 응답을 토대로 javascript로 그림 그리기

1번은 화면 받아서 그림만 그리면 되는데 2번은 거기에 연산까지 추가해서 프로그래밍 해서 그림을 그림

3. 페이스북 같은곳에서 굉장히 복잡하게 짜여진 view를 받음 -> 어떤 변경을 하고 싶어서 ajax 요청을 함 -> 응답이 옴 -> 그림 그리기가 너무 복잡한 상황이라면..?
-> 계속해서 돔 찾아서 변경하고 성능 신경쓰면서 변경 하기가 까다로움

그렇다면 부분 변경을 하지 말고 -> ajax로 요청을 하면 -> 응답을 데이터로 안하고 html로 통째로 응답을 받으면 안되나..?라고 생각 할 수 있다.

이렇게 하면 복잡하진 않겠지만 서버쪽에서 다시 연산 다 해서 받아야하기도 하고 이렇게되면 ajax를 쓰는 의미가 없어진다.

그렇게 해서 나온것이...바로!
4. 리액트 -> ajax -> 데이터 변경 감지 -> UI가 자동 업데이트 되도록 프로그래밍을 할 수 있다!!
-> 이렇게 하면 나는 데이터만 변경시키면 된다! (이런걸 옵저버 패턴이라고 하는데, 어떤게 변경이 되면 그걸 감지해서 무언가를 트리거 시킴)

지금부터 설치 및 세팅을 해보자!

리액트는 변경을 감지하는 엔진이 있다. 변경을 계속해서 감지해야하기 때문에 계속 엔진이 돌아야함(daemon process) 이 동작을 계속 하기위해 서버가 필요한데 그렇기에 필요한게 자바스크립트로 만들어진 node.js 서버이다.

먼저[ https://nodejs.org/ko/ ]로 들어가서 node.js를 설치한다.
다음 리액트 머신을 설치(내가 실행시 node.js 위에서 무한으로 돌거다) react로 들어가서 다운로드 하는데 그전에 vscode에서 npm --version으로 버전을 확인해봤다.
npm이란 자바로 치면 maven,gradle 등 패키지 다운로드하는거, 의존성 관리도구라고 한다.
npm 여기 사이트 들어가서 원하는 라이브러리를 받고 할 수 있다!

설치를 하러 리액트 홈페이지로 들어가보니 npm으로 설치하는 방식과 npx로 설치하는 방식이 있다.
npx가 더 최근에 나온거같으니.. npx로 설치를 하겠다.
npm과 npx의 차이는

npm -> 라이브러리를 다운 - 빌드 -> 만약 프로젝트가 3개가 있으면 거기서 npm으로 뭐 다운받고 하면 -> 로컬에 다 다운받음, 중복되는게 생길 수 있음 그리고 다운 받은 데이터가 항상 유지됨. 그리고 프로젝트마다 받을수도 있고 글로벌하게 받을 수 있음(모든 프로젝트가 바라볼 수 있는 라이브러리 폴더를 만들고 거기에 받을 수 있음)

npx -> 라이브러리를 다운 - 빌드 -> 프러젝트3개가 있으면(캐싱해서 이미 전역적으로 다운받은게 있다면 재사용함, 없으면 다운) -> 다운 받아서 실행하고 -> 삭제

y를 눌러주고..

터미널에서 my-app으로 이동 후(cd my-app) npm start 명령어를 입력해준다.
그리고 조금 지나면!

3000번 포트로 기본 페이지가 나온다! 이제 저 위에 그림을 그리면 되는건데.. 그 전에 몇가지 더 설치하러 GoGo

vscode에서 옆에 확장 프로그램을 누르고 ESLint를 다운받는다. ESLint는 리액트 문법을 공부해서 코드를 치면 문법을 검사해준다! 이걸 설치하면 문법 잘못쳤을 경우 컴파일러가 디버깅 해준다고 한다 ㅎㅎ 자바스크립트는 인터프리터 언어이기때문에 실행전에는 코드가 잘못됐는지 알 수 없다. 하지만 이걸로 이제 실행 전에도 잘못됐는지 알 수 있게 된다.

다음은 코드를 이쁘게 정렬하기 위해 Prettier를 설치한다.

마지막으로 Reactjs code snippets을 받는다. 이건 코드 자동완성 기능!

그리고 vscode를 껐다 키고 기본 폴더를 My-app으로 잡고

app.js를 열어서 return 안에 있는 코드를 전부 지운다!
그리고

<div>
안녕
</div> 

를 입력해보자!
자동으로 정렬이 안되면 prettier 설정을 해야하는데
file - Preferences - Settins - prettier 검색해서 체크하면서 설정해도 되는데 파일을 하나 만들어서 설정하는 방법도 있다.
먼저 Settings에서 formatter를 prettier로 지정하고 format on save에 체크한다.

src폴더 안에 .prettierrc라는 파일을 만들고

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

json 형식으로 저렇게 코드를 입력해준다.
singleQuote : 모든게 홑따옴표로 바뀜
semi : 세미콜론이 자동으로 붙음
tabWidth : 탭간격 2
trailingComma : 내가 어떤 코드를 입력하면 끝에 자동으로 콤마를 넣어줌
printWidth : 줄 바꿈 할 폭 길이

이제 코드 정렬이 엉망이어도 컨트롤+s(저장)을 누르면 자동으로 정렬도 되고 세미콜론이 없이 입력해도 자동으로 세미콜론이 붙는 등 셋팅이 완료되었다.

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

function App() {
  return <div>안녕12312</div>;
}

export default App;

테스트를 해봤더니 잘 나온다! 리액트의 경우 처음 서버 킬 땐 시간이 꽤 오래걸리지만 그 다음부턴 굉장히 빠르다.

이상 첫 게시물은 여기서 마침!

* 이것은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.