[ez 정리노트 01] 웹앱 프론트엔드, 말로 설명하기 어렵던 개념들 맘잡고 싹 정리해본다 ! 또 헷갈려서 보러올테지..

1. Vite란 무엇인가? 왜 Vite + React를 쓰는가?

📦 Vite는?

• 현대적인 프론트엔드 빌드 툴이다.
• 쉽게 말하면, React 코드를 빠르게 개발/실행/빌드할 수 있게 해주는 도구

🔥 Vite가 필요한 이유

옛날에는 Create React App(CRA)를 많이 썼는데,

• 빌드(컴파일) 시간이 길고
  • 빌드란 ? 브라우저는 코드, 문법, 모듈을 이해하지 못해서 최적화된 단일 파일로 변환하는 것. 
    • compile : 최신 문법을 옛날 브라우저도 이해할 수 있게 변환 (내 코드를 컴퓨터가 이해할 수 있는 코드로 바꾸는 것)👉 그래서 JSX → 순수 JavaScript 코드로 컴파일해야 한다.
            예시: <div>Hello</div> → React.createElement('div', null, 'Hello')
    • bundle : 여러 파일 하나로 합치기
    • 등등
    • Vite (혹은 Webpack 혹은 Parcel) : 빌드 과정을 자동으로 처리해주는 프로그램
• 이전에는 개발 서버가 느렸다.
• 파일 하나만 바꿔도 프로젝트 전체를 다시 읽어야 했었음

Vite는

• 엄청 빠른 개발 서버 (수정한 파일만 즉시 적용)
• 빠른 빌드 (Rollup 기반)
• 모듈 단위로 HMR (Hot Module Replacement) 지원
  • 모듈 단위란 ? 수정한 파일(모듈) 하나만 교체한다는 뜻 
  • 파일 하나만 수정했을 때, 그 파일만 새로고침 없이 즉시 반영하는 기술
  • CSS 바꾸면 스타일만 쏙 반영되고 컴포넌트 수정하면 해당 부분만 새로 그려진다.

덕분에
👉 개발할 때 "수정 → 새로고침" 속도가 빠르고 쾌적
👉 특히 React + Vite 조합은 요즘 거의 표준처럼 쓰인다.

📌 요약

Vite는 빠른 개발 환경을 만들어주는 툴.
React는 UI를 만드는 프레임워크.
그래서 Vite + React를 같이 쓴다. (빠른 React 개발!)

---

2. Node.js와 Express란 무엇인가?

📦 Node.js란?

• 자바스크립트로 서버를 만들 수 있게 해주는 런타임!
  • 런타임이란 ? 코드를 실행할 수 있게 해주는 환경
  • 즉, 런타임 = "자바스크립트를 실행시켜주는 프로그램".
    • 브라우저(Chrome, Edge, Safari) → 자바스크립트 런타임이다. (브라우저 엔진 위에서 돌아감)
    • Node.js → 브라우저 밖에서도 자바스크립트를 돌릴 수 있는 런타임
• 원래 자바스크립트는 브라우저 안에서만 썼는데,
• Node.js 덕분에 브라우저 밖(서버 쪽)에서도 자바스크립트를 쓸 수 있게 된 것.

👉 즉,
Node.js = 자바스크립트로 백엔드를 짤 수 있게 해주는 플랫폼

---

📦 Express란?

• Node.js를 쉽게 사용할 수 있게 도와주는 "웹 서버 프레임워크"
• Node.js만으로 서버를 짜려면 복잡한 작업을 일일이 다 해야 한다. (요청 처리, 응답 보내기, 라우팅, 에러 처리 등)

Express는 그걸 아주 간결하고 쉽게 만들어줌

---

✨ Node.js + Express는 어떤 기능에 좋은가?

• 서버를 만들어서 클라이언트(React 앱)와 데이터를 주고받는 API를 만들 때
• 로그인, 회원가입, 게시판, 채팅 서버 등
• 외부 시스템과 연결할 때 (ex: DB 연동, 파일 업로드)

프론트엔드(React) 와 백엔드(Node.js + Express) 가 REST API로 통신하는 구조를 만들어줌

* REST API 란 ? 일정한 규칙을 따르는 API

    👉 즉, 프론트엔드가 서버랑 통신할 때 "정해진 약속"을 따르는 것.

📌 요약

Node.js = 서버를 만들 수 있게 하는 기반.
Express = Node.js로 서버를 쉽게 만들 수 있게 도와주는 도구

---

3. Axios란 무엇인가? 왜 쓰는가? 어디서 쓰는가?

📦 Axios란?

• 프론트엔드(React 등)에서 백엔드(Node.js 서버)로 HTTP 요청을 보낼 때 사용하는 라이브러리
• 쉽게 말하면, "React에서 서버한테 데이터 요청하는 도구"

---

✨ 왜 Axios를 써야 할까?

• 원래 자바스크립트에 fetch()라는 기본 HTTP 통신 방법이 있다.
• 하지만 Axios는
  • 문법이 훨씬 간결하고
  • 자동으로 JSON 변환해주고
    
    • 기본적으로 서버는 데이터를 JSON 포맷(텍스트)으로 보냄
    • 근데 브라우저가 받아들이는 건 자바스크립트 객체 형태.
      👉 그래서 서버에서 받은 "텍스트"를 "자바스크립트 객체"로 변환하는 과정이 필요하다!
  • 에러 처리하기 편하고
  • timeout, interceptors(요청/응답 가로채기) 같은 강력한 기능들이 있다.

그래서 현업에서는 fetch() 대신 Axios를 쓰는 경우가 훨씬 많음

---

📍 어디서 어떻게 쓰는가?

• React 컴포넌트 안에서
  (페이지 처음 렌더링할 때 데이터 가져오거나, 버튼 누르면 서버 요청 보내고 응답 받기)
• 비동기 통신이 필요한 모든 곳에서 (회원가입, 로그인 요청, 게시글 등록 요청, 데이터 조회 등)

---

📝 정리 한방에

 

Vite	빠른 React 개발을 돕는 빌드 툴
React	UI를 만드는 프론트엔드 프레임워크
Node.js	자바스크립트로 서버를 만드는 런타임
Express	Node.js 서버를 쉽게 만드는 프레임워크
Axios	프론트엔드에서 백엔드로 HTTP 요청을 보내는 라이브러리

---

💕 이렇게 이해하면 된다!

"React + Vite로 프론트 만들고 → Axios로 요청 보내고 → Node.js + Express가 서버에서 받아서 처리해준다."