[React] 1.개발환경구축

https://youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&si=VIaIMF7-f92nbuuH

목차

1. 개발 환경 소개 및 Vite 개념 설명
2. 개발 환경 세팅
3. Vite로 React 프로젝트 생성하기
4. VSCode 확장 추천 및 폴더 구조 설명
   
   —–

1. 개발 환경 소개 및 Vite 개념 설명

React는 JS 기반 UI라이브러리이다.

• 라이브러리(Library) : 다양한 기능을 제공함으로써 개발자가 필요한 함수를 호출해서 사용
  • React, jQuery…
• 프레임워크(Framework) : 개발자가 작업하기 위한 전체적인 틀을 제공해서 개발자가 그 틀 안에서만 맞춰서 작업을 해야함(단점이기도 함)
  • Spring Boot, Django…

프레임워크(Framework)와 라이브러리(Library)의 차이점

• 제어 프름에 대한 주도성이 누구에게 / 어디에게 있는가?
• 프레임워크는 스스로 제어 흐름의 주도성을 갖는 반면, 라이브러리는 개발자가 가지고 있다.
• 프레임워크는 집, 라이브러리는 그 집 안의 가구.
• 프레임워크는 글램핑, 라이브러리는 캠핑

외부 라이브러리 없이 브라우저가 인식하는 FrontEnd언어는 HTML, CSS, JS뿐임. 그래서 인식못하는 언어는 플러그인을 붙이거나 이해하는 언어로 번역해주는 도구를 사용함.

• 플러그인(Plug-in) : 기존 프로그램에 콘센트를 꼽듯이 새로운 기능이나 부속 프로그램을 덧붙여 확장하는 소프트웨어
• 소프트웨어 : 컴퓨터의 실행을 지시하는 컴퓨터 프로그램들로 구성

코드를 번역해주는 도구를 번들러(Bundler)라고 하는데, 예전엔 Webpack를 썼지만, 요즘은 Vite(속도가 훨씬 빠름)를 많이 씀.

리액트를 만드는 데에는 class vs function이 있음. -> funtion으로 진행될 예정

– 개정판 3까지