웹개발 : server 폴더와 client 폴더의 정체

처음 깃허브 레포지토리를 열었는데 server/, client/ 같은 폴더명이 보인다? 저도 “어? 클라이언트라면 사용자 PC 아닌가? 왜 서버에 client 코드가 있지?” 하고 당황한 적이 있습니다. 사실 이 폴더들은 ‘어디서 돌 명령인가’를 구별하기 위한 라벨일 뿐입니다. 

코드가 ‘실행된다’는 건 뭐죠?
컴퓨터가 파일에 적힌 명령(코드)을 한 줄씩 읽어 ‘행동’(연산·저장·출력)을 수행한다는 뜻입니다. 우리가 웹브라우저 주소창에 example.com 을 치는 순간에도, 서버라는 컴퓨터 안쪽에서 “누가 왔네? HTML 보내줘!”라는 명령이 순서대로 실행됩니다.

아래에서 아주 기초부터 차근차근 풀어봅니다.

---

1. 두 폴더가 가리키는 ‘실행 장소’

폴더 이름 명령을 읽어‑돌리는 주체 하는 일(예시)

폴더 이름	코드를 읽고 실행하는 주체	하는 일(예시)
server/	24시간 켜져 있는 웹 서버 프로그램(대표 예: Node.js 앱)	• 인터넷 요청 수신• 데이터베이스 읽기/쓰기• 첫 화면 HTML 미리 만들기(SSR)
client/	사용자 웹브라우저	• 버튼 클릭 처리• 글자·색상 실시간 변경• 페이지 간 이동(뒤로/앞으로)

브라우저도, 서버도 결국 ‘컴퓨터 프로그램’입니다.
server 코드는 서버용 프로그램이 읽어 실행하고, client 코드는 브라우저라는 프로그램이 읽어 실행합니다.

따라서 폴더를 나누는 목적은 “같은 컴퓨터 안이라도 누가 읽어야 할지 헷갈리지 않게” 하기 위해서예요.

---

2. 왜 서버에도 자바스크립트가 있을까? — Node.js 등장 스토리

옛날 웹

• 브라우저 : 자바스크립트(JS)
• 서버 : PHP, Java, Ruby … 언어 제각각

2009년 Node.js 등장

• 구글 크롬 엔진(V8)을 따로 꺼내 “서버 프로그램” 으로 실행
• 서버도 JS 사용 → 프런트·백엔드 한 언어

결과 : 프로젝트 폴더 하나에 server (JS) + client (JS) 가 공존하는 풍경이 기본이 됐습니다.

---

3. ‘언제 어디서 화면을 그리나?’ CSR vs SSR

3‑1 CSR (Client‑Side Rendering)

1. 서버는 빈 index.html 과 큰 JS 파일 하나만 보냄.
2. 사용자의 브라우저가 그 JS 파일을 실행→ 화면 첫 펼침.
3. 장점: 서버 단순. 단점: JS 다운로드·실행 지연.

3‑2 SSR (Server‑Side Rendering)

1. 서버 프로그램(Node.js) 가 React 컴포넌트를 실행→ 완성 HTML 발송.
2. 브라우저는 화면을 ‘번쩍’ 보고 시작.
3. 이후 클릭·스크롤 등의 변화는 클라이언트 JS 파일이 담당.

즉 SSR 방식이라도 JS 번들(클라이언트 코드)은 꼭 필요합니다.
서버가 초기 HTML만 대신 ‘실행’해서 만들어줄 뿐, 사용자와 직접 상호작용하는 부분은 브라우저 JS가 ‘실행’합니다.

---

4. 물리적으로 한 서버에 두고 폴더로만 나누는 이유

my‑app/
├─ server/   # 백엔드 JS 소스
├─ client/   # React 등 프런트 소스
└─ build/    # 번들된 JS/CSS (브라우저용)

• 배포 : Node.js 프로세스(= 서버 코드) + build/ 정적 파일을 하나의 호스팅(AWS EC2, Vercel 등)에 올립니다.
• 성능 : 필요하면 build/ 폴더만 CDN에 복사(전 세계로 캐싱).

정말 서버를 둘로 나누는 경우는?

• 유튜브·넷플릭스 같은 초대형 트래픽 — 정적 파일 CDN 분리
• 대기업 조직 분업 — 프런트·백엔드가 서로 배포 스케줄 독립

99 % 사이드 프로젝트·스타트업에선 한 서버 + CDN 구조가 기본입니다.

---

5. 헷갈릴 때 이렇게 생각하면 끝!

1. ‘코드를 실행한다’ = 어떤 프로그램(서버나 브라우저)이 파일을 읽고 명령을 순서대로 수행한다.
2. server 코드 → 서버용 프로그램(Node.js 등)이 실행하는 명령.
3. client 코드 → 브라우저 프로그램이 실행하는 명령.
4. 폴더명은 실행 주체를 표시하는 라벨일 뿐, 물리 서버 위치를 말하지 않는다.

앞으로 레포지토리를 볼 때 “폴더 = 서버”가 아니라 “폴더 = 이 명령은 어느 프로그램이 읽을까?” 로 이해해 보세요. 구조가 한층 깔끔하게 보입니다 🙂