Daily Log#2 - ES 모듈과 Vite로 알아보는 리액트 구조 이해

📖 오늘 학습 내용

[X] ES 모듈 개념 정리
[X] Vite 번들링 도구 학습 및 환경 설치
[X] 리액트 구조 구동 원리 이해
[X] .DS_Store를 .gitignore에 추가하여 관리

1️⃣ ES 모듈 이해_ECMAScript Module

ES 모듈은 자바스크립트의 공식 모듈 시스템으로 자바스크립트 세계의 레고 마을을 만드는 것과 같다. 코드를 블록처럼 작은 조각(module)으로 나누어 필요한 블록만 골라서 조립(import)해서 완성된 레고 마을(project)를 만들 수 있다. 이는 재사용성을 높이고 유지보수를 쉽게 만들어 줌!!*

모듈 스코프=집의 담장 레고 마을의 각 집은 자기만의 담장(scope)을 가지고 있어서, 이웃집과 간섭하지 않고 자기 역할만 함.(다른 집에 영향x)
정적 구조=집의 설계도 집을 짓기 위해서는 설계도(import/export)가 필요. 모든 설계도는 항상 최상단에 위치하여 마을 전체의 구조를 쉽게 파악하게 함
단일 인스턴스=공유 주민센터 한 번 지어진 주민센터(module)은 여러 번 가져다 써도 항상 똑같은 상태를 유지해요(똑같은 인스턴스를 참조)
블록 조립=마을을 완성하는 과정 필요에 따라 레고(module)을 가져오서 마을의 새로운 집이나 도로를 추가하듯, 필요한 코드만 골라 연결한 후 완성 가능!(project 완성)

2️⃣ 번들링 도구 Vite

Vite는 개발자를 위한 즉석 라면 조리기같은 번들링 도구이다! 빠르고 효율적인 개발환경을 제공한다. 기존 번들링 도구는 물 끓이고, 면 넣고, 스프 넣고 시간이 오래 걸렸다. Vite는 라면 조리(코드 실행, 변경)를 한 번에 끝내줌!

빠른 개발 서버: 필요한 파일만 로드해서 즉시 실행 가능
효율적인 HMR(Hot Module Replacement): 코드 변경 시 수정된 파일만 다시 로드 후, 새로고침 없이 반영
최적화된 빌드 성능: Rollup 기반으로 빌드 시간 단축, 최종 결과물 빠르게 생성
모던 설계: 최신 브라우저 기능과 Tree Shaking을 활용

3️⃣ React의 앱 동작 원리

React는 음식 배달 서비스랑 같다. 음식(component)을 주문(event)하면, 가상으로 미리 준비(Virtual DOM)한다. 그 후에 필요한 부분만 업데이트해서 빠르고 효율적으로 배달해주는 프레임워크!

작동 원리: 초기화 → 렌더링 → 상태 관리 → 이벤트 처리 → 효율적 업데이트

4️⃣ JSX란?

HTML+자바스크립트 하이브리드로, 자바스크립트에서 HTML처럼 직관적으로 UI를 작성할 수 있는 문법

5️⃣ vite-project 설정, .git ignore 활용

👩‍💻 Vite로 React 프로젝트 생성하기

# Vite 프로젝트 생성 명령어
npm create vite@latest 프로젝트이름

# 프로젝트 폴더 이동 후 종속성 설치
cd 프로젝트이름
npm install

# 개발 서버 실행
npm run dev

🤔 느낀 점 및 회고

ES 모듈과 번들링 도구의 역할을 이해하며, 코드 구조를 체계적으로 관리하는 방법을 배웠다. 특히, 레고 마을과 집, 이웃집 같은 비유를 활용해 이해하려고 노력했더니 학습이 훨씬 수월했다. 물론 직접 실습하며 다루는 것은 또 다른 도전이겠지만 어느정도 이해하고 넘어간 것에 의의를 두기로 했다!

처음엔 외계어같던 터미널 명령어(pwd, git status, git add, git commit, git push)도 활용해 커밋과 푸시를 스스로 완료했고.gitignore에 .DS_Store를 추가해 필요한 파일만 관리하도록 설정했다. '.gitignore'에 .DS_Store를 추가하면서, 실제로 필요한 파일만 관리하도록 설정할 수 있다는 점이 신기했다. 개발자가 보기엔 이제 막 뒤집기를 한 신생아 수준이겠지만ㅎ-ㅎ, 스스로 해보고 원하는 결과를 출력하는 소소한 경험 하나하나가 너무 소중해 ...🥹 ✨

📗 내일 계획!

[ ] 내일 배우는 새로운 개념 오늘처럼 꼭꼭 씹고 뜯고 맛보고 이해하기 😋🥢

English Version 🔗:This link provides the translated English version of the Korean work summary above

next-dam / next-dam.github.io