01-1 리액트 프레임워크 이해하기
React : 가상 DOM(Document Object Model)과 JSX(JavaScript XML) 새로운 방식으로 동작하는 프레임워크
- 싱글 페이지 애플리케이션(SPA)이란 ?
웹 서버 : 웹 브라우저가 요청하는 다양한 유형의 자원(resource)을 제공하는 역할
HTTP 요청 : ‘http://웹_서버/자원1’과 같이 URL문자열을 웹 서버에 요청
HTTP 응답 : 웹 서버는 해당 자원을 웹 브라우저에 보내줌
렌더링 : <웹 브라우저> 웹 서버 → HTTP 응답 데이터 → 👀사용자 웹페이지 화면
웹 페이지가 처음 응답받은 자원을 렌더링 한 뒤 다시 다른 자원 요청
→ 렌더링한 내용 모두 지움
→ 다시 렌더링 : 깜빡임(새로고침) 현상 발생
리액트 프레임워크는 SPA 즉, index.html 파일 1개로만 동작하기 때문에 깜박임 현상❌
→ 백엔드에서 받은 JSON데이터를 해석하여 사용자가 새로 요청한 부분만 동적으로 화면 생성
- MPA(Multi Page Application)이란 ?
사용자 요청이 있을때마다 완전히 새로운 HTML을 전달받는 방식
클라이언트에서 동작하는 템플릿 엔진
웹 서버는 대부분 HTML템플릿 엔진 제공
템플릿 엔진은 HTML문서를 DB.. 추출한 데이터와 결합함
프론트엔드에서 템플릿 엔진 :
백엔드의 **JSON데이터** 해석 → JavaScript 객체들의 조합 → 웹브라우저가 이해할 수 있는 DOM객체로 변환
서버 쪽 템플릿 엔진의 출력물 : HTML
프론트엔드 쪽 템플릿 엔진의 출력물 : DOM 객체들의 조합
리액트 버전 18 특징
- 동시성(concurrent React)
- 자동 일괄처리(automatic batching)
- 트랜지션(trainsition)
- 향상된 서버-측 렌더링(sever-side rendering)
01-2 윈도우에서 리액트 개발 환경 만들기
- bug fix란?
컴퓨터 시스템 또는 프로그램 안에 있는 버그를 수정하여 정상작동하게 만드는 작업
VS CODE 확장 프로그램
- Pritter : 코드에서 띄어쓰기, 들여쓰기, 탭, 줄바꿈 등 일정한 패턴으로 보기 좋게 정리해주는 프로그램
ts파일에서 지정한 Pritter가 동작하지 않게 하려면 ?
//prettier-ignore : 아래의 내용은 프리티어 적용❌
```tsx
console.log("hello world!")
//prettier-ignore
console.log("Hello");
```- TailWind CSS : CSS 스타일링 코드를 좀 더 쉽게
- HeadWind : 테일윈드CSS 관련 코드를 이해하기 쉬운 순서로 재배치해주는 프로그램
- PostCSS : @tailwind CSS와 관련한 불필요한 경고 제거
- 타입스크립트 컴파일러 설치
npm i -g typescript ts-node
01-3 첫 번째 리액트 프로젝트 만들기
- 리액트 프로젝트 :
create-react-app(CRA) 로 생성
npm(node pakage manager) : Node.js 프로젝트에서 개발에 유익한 다양한 오픈소스 라이브러리 쉽게 설치함.
npm i -g : 최신 버전 유지하기가 번거로움
npx : 버전문제 극복하고자 등장 !
자동으로 가장 최신 버전을 찾아내 npm i -g 명령으로 설치해줌
CRA로 타입스크립트용 리액트 프로젝트 생성
npx create-react-app 프로젝트_이름 --template웹팩과 번들 파일
- 웹팩(webpack) : 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해주는 역할
JS, 이미지파일, CSS, HTML 로 구성- 번들(bundle) : 웹팩의 결과물
빌드 모드로 실행하기
npm run build웹팩은 프로젝트 directory파일을 모두 모아 main이나 chunk라는 단어가 있는 번들 파일을 생성
웹 서버 역할 serve설치_실행
npm install -g serve
serve -s build해당 build 디렉터리를 nginx나 apache서버, 자신의 웹 서버에 올리면 사용자 서비스화 가능
개발 모드로 실행하기
npm run start이때, 웹팩은 서버로 동작함.
