풀스택 면접 준비

1. Express → DB → React 전체 Request Lifecycle

React (Frontend)
   ↓ HTTP request
Express Router
   ↓
Controller
   ↓
Service (Business logic)
   ↓
DB Query
   ↑
Response JSON
   ↑
React state update → re-render

 

useEffect(() => {
  fetch("/api/users/1")
    .then(res => res.json())
    .then(data => setUser(data));
}, []);

==========================================================================================

app.get("/api/users/:id", async (req, res) => {
  const id = Number(req.params.id);

  const user = await db.query(
    "SELECT * FROM users WHERE id = $1",
    [id]
  );

  res.json(user.rows[0]);
});

Front → API → DB → JSON → State → Re-render

React에서 HTTP 요청을 보내면 Express가 route handler를 통해 처리하고, service layer에서 DB를 조회한 뒤 JSON을 반환하며, 프론트는 state 업데이트 후 virtual DOM diff를 통해 렌더링합니다

 

2. WebSocket vs REST 언제 쓰나

REST는 stateless request-response 구조이고 WebSocket은 persistent connection으로 TCP 기반 양방향 지속 연결할때 용이

 

3. 비동기 처리 

- 시간이 걸리는 작업을 백그라운드에 맡기고, 그 작업이 끝나기를 기다리지 않고 다음 코드를 계속 실행하는 방식입니다.

- 시간이 걸리는 I/O 작업을 non-blocking 방식으로 처리하고, 해당 작업의 완료는 event loop를 통해 나중에 실행되도록 하는 방식입니다.

JS 코드 실행
     ↓
Non-blocking I/O 시작
     ↓
I/O는 백그라운드에서 처리
     ↓
JS는 계속 실행
     ↓
I/O 완료
     ↓
Event Loop가 callback 실행

4. useEffect vs useState

useState는 UI 상태를 저장하고 상태 변경 시 리렌더를 발생시키며, useEffect는 렌더링 이후 실행되어 API 호출이나 구독 같은 side effect를 처리합니다.

* dependency array 는 useEffect가 언제 실행될지 결정하는 값입니다. React는 렌더마다 이전 dependency 값과 현재 dependency 값을 비교해서 effect를 실행합니다 

INITIAL RENDER
↓
Component function runs
↓
UI created

STATE CHANGE
↓
Component function runs again
↓
React compares old vs new
↓
DOM minimal update

[]       → 처음 한번
[value]  → value 바뀔 때
없음     → 매번

useState  → UI 상태 (render trigger)
useEffect → render 이후 외부 작업 (side effect)
useRef    → render 영향 없는 값 저장

✔ useRef
→ UI를 다시 렌더하지 않고 값을 저장/수정할 때 사용

✔ useState
→ 값을 저장하고 변경 시 UI를 다시 렌더할 때 사용

⚠️ useEffect
→ UI를 rerender 하는 Hook이 아님
→ 렌더 이후 side effect 실행용

useState는 UI 상태를 관리하며 상태 변경 시 리렌더를 발생시키고, useEffect는 렌더 이후 실행되는 side effect를 처리하며, useRef는 리렌더 없이 유지되는 mutable 값을 저장합니다.