배운 내용 요약 정리 : 강의 수강 후 배운 내용을 나만의 방식으로 정리
1. 웹 프레임워크
1-1. SVELTE vs React
1-2. 번들러 (ex. vite[비트])
1-3. Firebase : 백엔드 구축 없이 백엔드 역할. / 실시간 DB, 이미지파일 업로드, 유저인증(소셜 로그인)
1-4. 배포!!
2. 번들러가 왜 필요한가?
1) Java Script
- 간단한 동작을 위해 만들어짐
- 모듈 방식이 없는채로 탄생
- 하나의 파일을 여러사람이 개발한다면? 관리도 힘들고 찾아가기도 힘들고...
2) 모듈 방식이 필요하다
- CommonJs라는 모듈 방식이 처음 도입.
- npm의 등장으로 모듈을 모두가 공유할 수 있게 됨.
- node.js, npm 등이 탄생.
3) 번들러의 탄생
- 여러개의 파일을 하나로 합치자!
- 여러개의 파일을 하나로 합친 번들을 만들어주는 번들러.
- 번들러의 단점 : 빌드 후 번들로 만드는 과정이 필요해서 수정할때마다 새롭게 빌드해야함. -> 빌드가 느림
4) Esbuild 탄생
- 빌드 속도가 100배 빠른 도구
- go언어로 만들어서 최대의 속도를 끌어냄
- But!! 빌드만 빠름. 다양한 기능들이 부족함.
5) vite의 탄생
- made by Evan You.
- 다양한 기능을 제공하면서도 빠름
- patak.dev/vite/ecosystem.html
웹 애플리케이션을 개발하면서 프로젝트는 점점 복잡해지고, 여러 개의 자바스크립트 파일과 CSS 파일, 이미지 등의 리소스가 생성되게 됩니다. 이러한 다수의 파일들은 웹페이지를 로드할 때마다 네트워크 요청을 발생시키므로 페이지의 로딩 시간을 늘리고, 이는 결국 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
이러한 문제를 해결하기 위해 '번들러'가 필요합니다. 번들러는 웹 애플리케이션의 모든 자원을 하나 또는 여러 개의 파일로 병합 및 압축하는 역할을 합니다. 이로써 네트워크 요청의 수를 최소화하여 로딩 시간을 줄일 수 있습니다.
번들러의 주요 기능은 다음과 같습니다:
- 병합(Merging)과 최소화(Minification): 번들러는 여러 개의 파일을 하나로 병합하여 네트워크 요청을 줄입니다. 또한, 코드를 최소화하여 파일 크기를 줄일 수 있습니다.
- 모듈 시스템 지원: 번들러를 이용하면 CommonJS, AMD와 같은 모듈 시스템을 브라우저에서 사용할 수 있습니다. 이는 코드의 재사용성과 유지보수성을 높여줍니다.
- 트랜스파일링 지원: 번들러는 Babel과 같은 트랜스파일러를 이용하여 최신 자바스크립트 문법을 브라우저 호환 가능한 코드로 변환할 수 있습니다. 이로써 개발자는 최신 문법을 사용하면서도 다양한 브라우저와 호환성을 유지할 수 있습니다.
- 환경 변수 처리, 파일 경로 관리: 번들러를 사용하면 환경 변수를 관리하거나, 파일 경로를 절대 경로로 관리하는 등의 추가적인 기능을 활용할 수 있습니다.
Webpack, Rollup, Parcel, Vite 등이 대표적인 번들러입니다.
따라서, 웹 애플리케이션의 성능 향상, 코드의 모듈화, 최신 자바스크립트 문법의 사용 등을 위해 번들러는 필수적인 도구라고 할 수 있습니다.
3. SVELTE
- HTML, CSS, JS 문법을 그대로 사용
- 보일러 플레이트가 존재하지 않음
- 가상 DOM이 존재하지 않는다. (컴파일러)
- but, 생태계가 부족하다.
- Killer 상태 관리 라이브러리가 없음
3-1 프론트엔드에서는 React 필수!!!
4. vite 기초
npm init vite@latestvite 번들러 생성
#슈퍼코딩, #1:1관리형부트캠프, #백엔드, #backend, #백엔드공부, #개발공부, #백엔드개발자 #취준일기, #취준기록, #취뽀, #빡공, #HTML/CSS, #javascript, #react , #java, #spring