[React] 7. 블로그 만들기 (1)

김주희

Aug 21, 2025

여기서 패키지 관리

브라우저는 jsx 문법(return에 html) 이해 못함

src가 배포X src가 build가 되어서(jsx 같은 문법이 컴파일돼서 처리되어서) public이 배포되어야

+build되어서 순수한 html과 js로 바뀌어야 됨

build되려면 라이브러리가 필요함

실제로 존재 안하니까

node_modules에는 jre처럼 디폴트 라이브러리가 존재함 그 다음에 package.json에 적은 라이브러리들이 들어감.

build를 하면 node_modules가 다 필요하지 않고 내가 프로젝트에서 쓰고 있는것만 뽑아냄

node_modules가 세팅됨

public의 index.html → App.js의 return문이 들어감

App.js를 완성하면 순수 js가 아님 jsx도 섞여잇으니까

react가 build를 해야됨 (react가 엔진이니까 jsx를 이해함/ 언어는 os나 컴퓨터가 이해해야 언어임)

build를 할때 node_modules가 없으면 안됨

그래서 npm install부터 해야됨 → 패키지+기본 라이브러리 다운받음

끝나면 node_modules가 생김

개발 끝남

빌드할거임

node_modules에 잇는 필요한 파일들을 가지고 ? 하면 웹팩(순수js파일)이 만들어짐

src의 수많은 파일을 압축해서 순수 바닐라js로 만들어서 하나의 압축파일로 만듦(웹팩)

웹팩 = 최종 결정체

웹팩을 최초 get 요청시에 다운받게 되는 것

그다음부터는 ajax만 동작함

클라이언트측에서 사이드 렌더링

클라이언트 서버 = 최초 다운

바벨 = 최신 문법 등 님 편하게 적어 내가 변환시켜줌

build 서버를 따로 만들어야 됨

우분투 설치

노드 설치

깃으로 프로젝트 다운

npm install

build

그 결정체를 복사해서 도커 이미지 하나 더 만듦

거기에 우분투 설치

거기에 nginx 설치하면 거기서 돌잖아?

cors 위해서 이렇게 하지X

차라리

얘는 뭐더라

상태관리

jwt 파싱하는거

서버가 토큰만 돌려주면 유저 정보 파싱해서 가져와야 되니까 필요할수도 있고 아닐수도 있고

react에서 bootstrap 가능

라우터 설정

computed property names (계산된 속성 이름)

키값을 변수명으로 대체?

인터프리터 언어니까 가능한거 java에서는 안됨

deprecate가 됐슨..

Hello.js 만들어서 node hello.js 해보면 됨


let key = "username";

let user = {
  id: 1,
  [key]: "ssar",
  password: "1234",
};

console.log(user);

이걸로 키값을 동적으로 만들어낼거임

onChanged 이벤트할때 어떤 키값이 ~