처음 보는 코드 이해하기
특정 함수를 읽고 무엇을 하는지 파악하는 법
⏱ 예상 ~5분
01 · 읽기
지난 수업에서 코드베이스의 큰 그림을 잡는 법을 배웠어요. 이제 좀 더 가까이 들여다볼게요. 특정 함수를 읽고 무엇을 하는지 어떻게 파악할까요?
이건 엔지니어로서 매일 쓰는 기술이에요. 파일을 열고, 다른 사람이 쓴 함수를 보고, 무엇을 하는지, 어떻게 동작하는지, 버그가 있는지 파악해야 해요.
좋은 소식이 있어요. 코드는 구조적이고 논리적인 방식으로 쓰여요. 뭘 봐야 할지만 알면, 함수를 읽는 건 레시피를 읽는 것과 거의 비슷해요.
02 · 읽기
아래는 마주치는 어떤 함수든 읽는 체계적인 방법이에요. 이 단계를 순서대로 따라가면, 가장 헷갈리는 함수도 의미가 보이기 시작해요.
핵심 정리
- 함수 이름 읽기 — 보통 무엇을 하는지 설명해 줘요
- 매개변수 읽기 — 어떤 입력을 기대하나요?
- 반환값 읽기 — 무엇을 출력하나요?
- 로직을 한 줄 한 줄 따라가기
- Claude 활용: '이 함수가 무엇을 하는지 쉬운 말로 설명해 줘'
03 · 코드 예제
이 함수를 읽고, 해설을 보기 전에 무엇을 하는지 파악해 보세요. 위 단계를 활용하세요. 이름, 매개변수, 반환값, 그다음 로직 추적.
수수께끼 함수
function processItems(items, threshold) {
const filtered = items.filter(item => item.price > threshold);
const sorted = filtered.sort((a, b) => b.price - a.price);
return sorted.slice(0, 5);
}
이 함수는 아이템 목록과 가격 기준을 받아서, 기준 아래는 걸러내고, 가격순(가장 비싼 것부터)으로 정렬한 다음, 상위 5개를 반환해요. 'filter', 'sort', 'slice' 같은 이름이 단서예요. 주석이 없어도 코드 자체가 무엇을 하는지 알려줘요. 읽을 줄만 안다면요.
04 · 프롬프트 템플릿
함수에서 막혔다면 Claude로 이해한 게 맞는지 확인하세요. 자리표시자를 실제 파일과 해석으로 바꿔주세요.
{{filename}}에 있는 processItems 함수가 무엇을 하는지 설명해 줘. 내 이해는 {{your_understanding}}인데, 맞아?05 · 빈칸 채우기
함수를 읽을 때 가장 많은 걸 알려주는 세 가지는 이름, _____, 그리고 반환값이에요.
06 · 퀴즈
익숙하지 않은 함수를 읽을 때 가장 먼저 봐야 할 것은?
- 함수 위의 주석
- 함수의 마지막 줄
- 함수 안의 변수들
- 함수 이름과 매개변수
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.