제1화 한줄이의 첫 출근

코드의 일생 02

가지의 조립 시간

조각을 모았는데, 왜 코드가 안 될까?

지난 이야기에서 톡톡이가 코드를 작은 조각으로 나눴어.

이제 그 조각들이 가지에게 도착했어.

그런데 조각만 모이면 어떤 코드든 만들 수 있을까?

오늘의 이상한 질문1 + * 2는 어떻게 될까?

컴퓨터에게 이렇게 적어 주면 무슨 일이 생길까?

그렇게 생각했구나.

오늘은 가지가 이 코드를 어떻게 다루는지 지켜보자.

가지왼쪽에 하나, 오른쪽에 하나.좋아. 모양이 딱 맞네.

한줄이오! 벌써 계산한 거야?

가지아니. 아직은 어떻게 묶이는지만 알아본 거야.

한줄이이번엔 조각이 하나 더 많네?

가지그렇네.어디, 이번에도 묶어 볼까?

가지흠.

한줄이왜 그래? 뭔가 빠졌어?

가지아직은 모르겠어.그런데 이대로는 자리가 맞지 않네.

한줄이앗. 나무가 안 만들어졌어!

가지조각이 있다고 해서 아무 데나 붙일 수는 없어.

한줄이그럼 이제 어떡해?

가지먼저 어디에서 막혔는지 찾아야지.

한줄이비슷하게 생겼는데 하나는 되고 하나는 안 되네.

가지그래서 조각뿐 아니라 묶는 규칙도 중요한 거야.

한줄이그 규칙은 어떻게 알아?

가지직접 조립해 보면 금방 눈치챌걸?

작은 실험

가지의 조립대

이번에는 네가 조각을 매달아 봐.

조각은 식에 적힌 순서대로 도착해. 조각을 고르고, 알맞은 자리를 골라.

잘 안 맞아도 괜찮아. 어디에서 막히는지 살펴보는 것도 중요한 실험이거든.

꾸러미 고르기
  1. 1
  2. +
  3. 2
실제 구문 트리

토파즈 컴파일러 5.21.1 기록

expression/binaryoperator add두 값을 잇는 식 · 더하기차지한 자리
  • 왼쪽
    expression/integer1숫자차지한 자리
  • 오른쪽
    expression/integer2숫자차지한 자리
  1. 6
  2. *
  3. 3
실제 구문 트리

토파즈 컴파일러 5.21.1 기록

expression/binaryoperator multiply두 값을 잇는 식 · 곱하기차지한 자리
  • 왼쪽
    expression/integer6숫자차지한 자리
  • 오른쪽
    expression/integer3숫자차지한 자리
  1. 1
  2. +
  3. *
  4. 2
실제 오류

토파즈 컴파일러 5.21.1 기록

TPZ2001error

expected an expression

가리킨 자리

쉬운 풀이이 자리에 식이 와야 한다는 뜻이야. 더하기 기호 오른쪽에 값 대신 곱하기 기호가 먼저 나왔거든.

  1. 1
  2. +
실제 오류

토파즈 컴파일러 5.21.1 기록

TPZ2001error

expected an expression

가리킨 자리

쉬운 풀이이 자리에 식이 와야 한다는 뜻이야. 더하기 기호 오른쪽의 값이 나오기 전에 코드가 끝났거든.

조각을 매다는 조립대는 자바스크립트가 켜져 있을 때 움직여.

한 번 더 살펴보기

두 가지를 비교해 봐.

6 * 31 + * 2

둘 다 *가 들어 있지?

그런데 하나는 묶을 수 있고 다른 하나는 그렇지 않아.

기호 자체가 잘못된 게 아니라, 이 기호를 어떤 자리에 썼는지가 중요한 거야.

진짜 속사정

코드도 문법이 있어

우리가 쓰는 말에는 문장을 만드는 규칙이 있지.

코드에도 그런 규칙이 있어.

방금 조립대에서 구문 분석을 흉내 내 본 거야. 컴파일러도 조각들을 문법 규칙에 맞춰 살펴보고 코드의 구조를 알아내지.

그렇게 묶은 결과를 나뭇가지처럼 이어 그린 것을 구문 트리라고 해.

AST는 뭐야?

구문 트리에서 불필요한 문법적 세부사항을 덜어 낸 나무를 추상 구문 트리, 줄여서 AST라고 해.

아래 그림은 기록에서 식 부분을 골라 보여 줘. 더하기 하나와 숫자 둘을 볼 수 있어.

잘 묶인 코드

1 + 2

이 코드에서 더하기를 나타내는 부분은 숫자 두 개를 연결하고 있어.

실제 토파즈 구문 트리 관측 자료

토파즈 컴파일러 5.21.1 기록

이 사이트가 예제를 돌리는 언어, 토파즈의 컴파일러가 남긴 기록이야.
expression/binaryoperator add두 값을 잇는 식 · 더하기차지한 자리
  • 왼쪽
    expression/integer1숫자차지한 자리
  • 오른쪽
    expression/integer2숫자차지한 자리

묶을 수 없는 코드

1 + * 2

이번에는 문법 규칙에 맞지 않는 부분이 있어.

이런 문제를 문법 오류라고 해.

컴파일러는 잘못된 코드를 정상적인 계산으로 넘기는 대신, 무엇이 잘못됐는지 알려 줘.

실제 토파즈 오류 메시지

토파즈 컴파일러 5.21.1 기록

TPZ2001error

expected an expression

가리킨 자리

쉬운 풀이이 자리에 식이 와야 한다는 뜻이야. 더하기 기호 오른쪽에 값 대신 곱하기 기호가 먼저 나왔거든.

나무를 만들면 모든 검사가 끝날까?

그렇지는 않아.

문법에 맞게 묶였다고 해서 언제나 올바른 계산인 것은 아니거든.

나무가 완성된 다음에도 확인해야 할 일이 있어.

그 이야기는 다음 회차에서 만나 보자.

한 줄 정리

오늘 알게 된 것

컴파일러는 토큰을 문법에 맞게 묶어 코드의 구조를 알아낸다.

문법에 맞지 않는 부분이 있으면 오류를 알려 줘.

그럼 이 코드는 왜 문제가 될까?

3 +
이유 알아보기

이 식에서 +는 두 값을 연결하는 더하기 기호야.

왼쪽에는 3이 있지만, 오른쪽에 필요한 값이 나오기 전에 코드가 끝났어.

그래서 이대로는 더하기 구조를 완성할 수 없어.

이제 조각을 잘 나누는 것만큼, 올바르게 묶는 것도 중요하다는 걸 알게 됐네.

속사정 도감낱말 다시 보기구문 분석구문 트리오류 메시지

다음 이야기

제3화타미의 수상한 계산

가지는 이번에 나무 하나를 무사히 완성했어.

그런데 타미가 돋보기를 들고 다가왔어.

1 + "사과"

타미모양은 괜찮아 보이는데.이 둘을 정말 더할 수 있을까?

다음에는 타입 검사를 만나 보자.