[TIL] 1/20 React 입문주차

• React란? UI를 만들기 위한 라이브러리
• 프레임워크란? 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합
  ex) Spring, Django etc.
• 라이브러리란? 공통 기능의 모듈화가 이루어진 프로그램의 집합
• React 특징과 이점 :
  1. SPA(Single Page Application) <-> MPA(Multi Page Application)으로 하나의 html 페이지로 이루어진 애플리케이션이다
  2. 인기가 많다 npm trends로 확인해보면 react.js의 인기가 높다는걸 알 수 있다
  3. UI가 필요한 곳이면 어디든지 사용할 수 있다
  4. 커뮤니티가 막강하다

---

• MPA : 2개 이상의 페이지(html)로 구성된 애플리케이션
• SPA : 하나의 html 페이지로 이루어져 있는 애플리케이션
  ex) React, Vue, Angular
  전통적인 MPA가 가지는 불편함(깜빡거림, 렌더링 속도 등)때문에 등장하게 됨
• Routing
  • Hashed Routing : 해시(#) 값을 기준(hashed)으로 페이지를 이동(routing)하는 기술
    • path : 어디로 갈 것인지 정해주는 중요한 것
    • query string : 물음표 뒤에는 key-value로 쌍이 나오는데 sort라는 변수에 desc를 할당한다 라고 이해해도 좋다
      여러개가 들어갈 경우 &로 묶어준다

중요! 외우기!

•  Browser Routing : /로 깔끔하게 경로 처리
  react.js는 UI구성을 위한 라이브러리라서 한 라우팅 스타일을 강제하지는 않지만 사용자경험을 위해 Browser Routing 방식 채택
• npm과 yarn
  • 공통적인 특징
    • 둘 다 자바스크립트 런타임 환경인 노드의 패키지 관리자
    • 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그림을 온라인 데이터베이스에 올려놓는데,
      그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자
  • 차별적인 특징
    • NPM(Node Package Manager)
      • node.js 설치할 때 자동으로 설치됨
      • JS 프로그래밍 언어를 위한 패키지 관리자로, JS라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할
    • YARN
      • 2016년에 faceook, exponent, google, tilde와 같은 회사에서 공동 작업으로 개발한 패키지 관리자
      • npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 좋다
        • 병렬로 패키지 다운하여 속도 향상시킴, 더 정확한 버전 관리를 위해 yarn.lock파일 사용한다
        • 속도와 관련해서는 npm도 버전 5 이후로 많은 성능 개선이 이루어져서 현재는 성능 차이가 많이 줄어듬

---

리엑트 프로젝트 생성 방법

1. CRA(Create React App)
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성해준다
yarn create react-app (원하는 폴더명) 이렇게 터미널에 치면 설치가 된다
설치가 된 후 지정해준 폴더명으로 폴더를 생성했으니 디렉토리를 이동해서 yarn start하라는 메시지가 뜬다
vscode로 이동해서 yarn start를 하면 리엑트 프로젝트가 생성된 것을 볼 수 있다!
(사진은 저녁시간에 자리를 잠깐 이동했는데 그 사이에 변경사항이 날라가면서 사진도 날라갔다ㅜ)

 

2. vite

yarn create vite (원하는 폴더명) --template react(이렇게 하는 이유는 vite는 react만을 위해서 만들어진게 아니기 때문)
생성 속도가 CRA에 비해 엄청나게 빠르다! -> CRA에 비해 좋은 점
이번에는 CRA에 비해 명령어가 하나 더 있다
yarn까지 하고 vscode로 이동해서 yarn dev를 넣으니 5173포트에서 프로젝트가 실행되고 있다는걸 알려줬다

주소를 복사하고 브라우저에서 검색해보니 카운트 옵션도 들어가있는 리엑트 프로젝트가 실행되고 있는걸 볼 수 있었다

그럼 vite란 무엇일까?

vite도 CRA와 같이 리엑트 프로그램을 풀세팅 해주는 빌드 도구인데 CRA는 WebPack(모듈 번들러)이라는걸 사용한다

vite는 Esbuild를 사용해서 엄청 빠르다 

특징 :

- 빠른 콜드 스타트와 HMR(Hot Module Replacement) : 속도 측면에서 CRA와는 비교도 안되게 빠름

- CRA는 설정을 숨기지만 vite는 사용자가 필요에 따라 설정을 더 쉽게 조정할 수 있다

- Esbuild를 사용한다

 

3. A-Z까지 혼자 하기

---

강의를 따라 jsx파일에서 실습을 했다

기억해야 할 것!

jsx에서는 html코드 부분에서 {}로 JS 코드에 접근한다는 것!
사진에서는 22번째 줄에서 확인할 수 있다

---

JSX란? HTML을 품은 JS => JSX

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

이런 HTML 태그는.js파일 안에서 쓸 수 없기 때문에 JSX가 나온 것

JS 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

브라우저는 JS만 해석할 수 있기 때문에 bable이라는 도구를 이용해서 js로 변환해서 브라우저가 해석할 수 있게 됨

rafce이라고 적으면 html에서 !하는 것처럼 코드 스니펫으로 간편하게 사용할 수 있다!
-> 만약 잘 안된다면 확장팩에서 react snippet을 깔아보자!

 

---

오늘은 새로운 주차 리엑트주차가 시작되었다

그리고 새로운 팀!

이번 팀은 팀플까지 이어진다고 하니 이전 팀과는 좀 다른 분위기로 같이 으쌰으쌰를 잘하면 좋겠다

이미 분위기가 다르긴하지만,,!

오늘 들으려고 목표한 강의는 아직 3개가 남았다 내일 일찍 일어나서 마저 들어야겠다!