Module 2A · Foundations (hello-world)

2A.1 · The big picture

프로그램이 두 개 돕니다. 화면 담당(프론트)과 데이터 담당(백). 둘은 서로 다른 문(포트)으로 들어갑니다.

이 앱에서 데이터 하나가 흐르는 길:

핵심: 프론트와 백은 별개의 프로그램이고, 둘 다 따로 켜야 합니다(터미널 2개). ft_inception에서 컨테이너를 여러 개 띄운 것과 같은 느낌이에요.

2A.2 · Flask

"이 주소로 요청이 오면 이 함수를 실행해"를 적는 파이썬 도구.

이 앱의 백엔드는 사실 이게 거의 전부입니다:

@app.route("/api/hello")   # 이 주소로 GET이 오면
def hello():               # 이 함수를 실행하고
    return jsonify(message="Hello from Flask")  # 이 JSON을 돌려준다

2A.3 · Endpoints

"주소(경로) + 방법(메서드)" 한 쌍. 우리에겐 GET /api/hello 하나뿐.

흔히 쓰는 방법(메서드):

• GET — 달라고 요청 (읽기). 우리 앱이 쓰는 것.
• POST — 새로 만들어 달라 (쓰기).
• PUT/PATCH — 고쳐 달라, DELETE — 지워 달라.

2A.4 · CORS

"다른 동네에서 온 응답을 읽어도 돼?"를 브라우저가 확인하는 보안 규칙.

왜 막을까요? 악성 사이트가 당신이 로그인한 은행 페이지의 응답을 몰래 읽어가는 걸 막기 위해서입니다. 그래서 기본은 차단, 허락은 명시적으로.

2A.5 · React

화면을 직접 고치지 말고, "이 상태면 화면이 이렇게 생겨야 해"만 적는 도구.

그래서 우리 코드는 "데이터가 있으면 이렇게, 없으면 이렇게"만 적습니다:

{error
  ? <p>Error: {error}</p>     // 에러면 빨간 문구
  : <p>{message || "Loading…"}</p>}  // 아니면 메시지(없으면 Loading…)

ft_transcendence에서 화면을 JS로 직접 갈아끼웠다면, React는 그 "갈아끼우기"를 대신 해주는 도구라고 보면 됩니다.

2A.6 · Vite

프론트 개발용 서버. 코드 저장하면 화면이 즉시 갱신되고, 백으로 요청을 대신 넘겨준다.

설정은 딱 이 한 줄의 규칙입니다:

// vite.config.js
proxy: { "/api": "http://localhost:5001" }
// "/api 로 시작하는 요청은 전부 5001(Flask)로 넘겨라"

2A.7 · JSX

JavaScript 안에 HTML처럼 쓰는 문법. 브라우저가 읽기 전에 평범한 JS로 번역된다.

// 우리가 쓰는 것 (JSX)
<p>{message}</p>

// 빌드 후 실제로 실행되는 것 (평범한 JS)
React.createElement("p", null, message)

파일 확장자가 .jsx인 건 "이 파일엔 JSX 문법이 섞여 있으니 번역해 줘"라고 도구에 알리는 표시입니다.

2A.8 · Mount

컴포넌트가 화면에 처음 나타나는 순간. "fetch on mount" = 화면 뜨자마자 한 번 데이터 가져오기.

그걸 담당하는 코드:

useEffect(() => {
  load();        // 데이터 가져오기
}, []);          // ← 빈 [] = "처음 한 번만". 이 줄이 'on mount'를 뜻한다

맨 끝의 빈 배열 []가 "마운트 때 한 번만"의 신호입니다. 만약 거기에 무언가를 넣으면 그게 바뀔 때마다 다시 실행돼요.

2A.9 · Stateless

서버는 기억상실. 매 요청을 "처음 보는 손님"처럼 대한다. 그래서 갱신하려면 매번 새로 물어야 한다.

예를 들어 서버 시각(/api/time)은 "묻는 그 순간"의 값일 뿐입니다. 1분 뒤 시각을 알고 싶으면? 다시 물어봐야 합니다. 서버가 알아서 밀어주지 않아요.

"기억이 없다"는 건 서버 얘기일 뿐, 화면 쪽(React)은 useState로 잠깐의 상태(message, error)를 들고 있습니다.

2A.10 · Self-check (read the code)

위 퀴즈가 개념이었다면, 이건 실제 코드를 보고 답하는 문제입니다. 정답은 접어 뒀어요 — 먼저 생각해 보고 펼치세요.