코드와 프로세스

얻어갈 것

• 코드가 실행 중인 프로그램이 되기까지의 흐름을 잡습니다.
• 빌드, 실행, 프로세스가 각각 어느 단계인지 구분합니다.
• 서버가 요청에 응답하고, 브라우저가 받은 파일을 실행하는 구조를 이해합니다.

이 레슨에서 잡을 큰 그림

일반적으로 웹 서비스가 실행되까지의 흐름을 보면 아래와 같습니다.

1. 사람이 읽고 고칠 수 있는 코드가 있습니다.
2. 코드를 실행 가능한 형태로 빌드합니다. (우리 실습에서는 별도의 빌드 과정이 있지 않습니다)
3. 실행 명령을 내리면 컴퓨터 안에 프로세스가 뜹니다.
4. 서버 프로세스는 요청을 기다리다가 응답을 돌려줍니다.
5. 브라우저는 받은 파일을 읽고 화면과 동작을 실행합니다.

확대

1. 코드는 원본입니다

코드는 소프트웨어의 원본입니다. 사람이 읽고 고칠 수 있는 텍스트이고, AI가 수정해 주는 것도 대부분 이 원본 코드입니다.

테트리스 프로젝트라면 index.html, server.js 같은 파일이 여기에 해당할 수 있습니다.

코드는 그 자체로 아직 "살아 움직이는 프로그램"은 아닙니다. 저장 장치 어딘가에 놓여 있는 원본에 가깝습니다.

2. 빌드는 실행 가능한 형태로 만드는 과정입니다

빌드는 소스 코드를 컴퓨터나 브라우저가 실행하기 좋은 형태로 만드는 과정입니다.

우리가 보는 코드는 사람이 읽고 고치기 좋은 형태입니다. 하지만 브라우저나 서버가 실행하려면 파일을 묶고, 변환하고, 배포하기 좋은 형태로 정리해야 할 때가 많습니다.

테트리스처럼 단순한 HTML, CSS, JavaScript 프로젝트는 빌드가 없거나 잘 드러나지 않을 수 있습니다. 뒤에서 만들 카공맵처럼 React, Next.js, 지도 SDK 등 여러 기능이 들어간 프로젝트는 보통 빌드 과정을 거쳐 실행됩니다.

3. 실행하면 프로세스가 뜹니다

빌드된 결과물을 실제로 실행하면 컴퓨터 안에는 프로세스가 뜹니다.

프로세스는 실행 중인 프로그램입니다. 컴퓨터 입장에서는 메모리를 쓰고, CPU 시간을 받고, 멈출 때까지 살아 있는 작업입니다. 앱을 켜면 앱 프로세스가 뜨고, 개발 서버를 켜면 개발 서버 프로세스가 뜹니다.

$node server.js  # 개발 서버 프로세스 실행
$Ctrl + C  # 실행 중인 개발 서버 멈추기

4. 서버는 요청에 응답합니다

서버의 기본 역할은 요청을 받고 응답을 돌려주는 것입니다. "서버"라는 말이 거창하게 들리지만, 지금 단계에서는 누가 요청하면 무언가를 돌려주는 실행 중인 프로그램이라고 보면 됩니다.

서버도 역할이 다를 수 있습니다.

• 웹 서버는 보통 브라우저가 실행할 수 있는 HTML, CSS, JavaScript 같은 파일을 응답으로 줍니다. 브라우저가 localhost 주소로 들어가면, 개발 서버가 "여기 이 파일들을 가져가세요" 하고 돌려주는 식입니다.
• API 서버는 조금 다릅니다. 화면 파일 대신 JSON 같은 데이터나 처리 결과를 응답으로 줄 수 있습니다. 예를 들어 테트리스 랭킹을 공유하게 만들면, 브라우저는 "새 점수를 저장해줘" 또는 "상위 10개 점수를 줘"라고 요청하고, 서버는 그에 맞는 데이터를 응답해야 합니다.

5. 브라우저가 받은 것을 실행합니다

브라우저는 서버가 응답한 파일을 읽고 화면과 동작을 실행합니다. HTML은 구조를 만들고, CSS는 모습을 입히고, JavaScript는 움직임과 규칙을 담당합니다.

로컬 테트리스의 키보드 입력, 블록 이동, 점수 계산은 대부분 브라우저 안에서 일어난다고 보면 됩니다. 서버가 매 순간 블록을 움직이는 것이 아니라, 브라우저가 받은 코드를 실행해서 게임을 움직입니다.

다만 요구사항이 커지면 서버 역할도 커집니다. 친구들과 같은 랭킹을 보려면 브라우저 혼자 기억하고 있어서는 안 됩니다. 그때는 서버가 점수 저장 요청을 받고, 데이터베이스에 저장하고, 다시 랭킹 데이터를 응답하는 구조로 넘어갑니다. 이 흐름은 뒤의 API와 데이터베이스 레슨에서 더 자세히 봅니다.

테트리스 파일로 보면

프로그래밍 언어 자체가 이 레슨의 핵심은 아닙니다. 그래도 브라우저에서 실행되는 결과를 볼 때 HTML, CSS, JavaScript의 역할은 알아두면 좋습니다. 그래야 문제가 생겼을 때 AI에게 더 정확하게 말할 수 있습니다.

확대

AI에게 더 물어보기

AI에게 코드 구조를 직접 물어보는 연습을 해봐도 좋습니다.

방금 만든 테트리스 프로젝트의 파일 구조를 설명해줘.

아래 기준으로 나눠서 알려줘.
1. 어떤 파일이 소스 코드인지
2. 빌드 명령어가 있다면 무엇이고, 결과물이 어디에 생기는지
3. 실행 명령어가 있다면 어떤 프로세스가 뜨는지
4. 서버가 어떤 요청에 어떤 응답을 주는지
5. HTML, CSS, JavaScript가 각각 어느 파일에서 어떤 역할을 하는지

마무리

• 지금은 프로그래밍 언어를 배우기보다 프로젝트가 실행되는 전체 흐름을 파악합니다.
• 코드는 원본이고, 빌드는 실행 가능한 형태로 준비하는 과정입니다. 코드를 실행하면 컴퓨터 안에 프로세스가 뜹니다. 서버 프로세스는 요청을 기다리다가 응답을 돌려주고, 브라우저는 그 응답으로 받은 파일을 읽어 화면과 동작을 실행합니다.
• 다음 레슨에서는 이 흐름을 이어서, 브라우저가 서버에 요청하고 응답을 받는 웹의 기본 구조를 봅니다.