퍼블리셔 → 개발자, 진짜 장벽은 문법이 아니라 용어였다

개발 공부를 시작하며 알게 된 게 있어요.

제 발목을 잡은 건 문법이 아니라 용어였어요.

for문이나 함수는 오히려 금방 익혔는데, 문서를 읽다 보면 다들 당연하다는 듯 쓰는 단어들 앞에서 자꾸 멈췄거든요.

그 단어들을 퍼블리셔가 알아들을 말로 번역해봤어요.

빌드와 번들.

퍼블리싱 땐 index.html을 그냥 브라우저로 열면 끝이었죠.

그런데 요즘 프론트는 그 사이에 가공 단계가 있어요.

여러 파일로 나눠 쓴 코드를 브라우저가 이해할 하나의 결과물로 묶고(번들) 최적화하는 과정, 그게 빌드예요.

SCSS를 CSS로 컴파일하던 그 감각의 확장판이죠.

”빌드가 깨졌다”는 그 가공이 실패했다는 뜻이고요.

배포.

FTP로 파일을 서버에 올리던 것, 그게 배포의 원형이에요.

지금은 더 자동화됐을 뿐이고요 — 코드를 push하면 빌드가 돌고, 결과물이 알아서 서버로 올라가 세상에 공개돼요.

이 블로그도 그렇게 올라가요.

”배포됐다”는 지금 인터넷에 반영됐다는 뜻이에요.

상태(state). 이게 제일 헷갈렸어요.

퍼블리싱에서 상태는 .is-active, .is-open 같은 클래스였잖아요.

개발에서의 상태도 본질은 같아요.

지금 화면이 어떤 모습이어야 하는지를 결정하는 값.

모달이 열렸나(isOpen), 입력값이 뭔가(query). 다만 그 값을 클래스가 아니라 변수로 들고 있고, 값이 바뀌면 화면이 자동으로 다시 그려진다는 게 다르고요.

(상태에도 종류가 있다는 건 또 다른 이야기고요.)

의존성(dependency). “이 작업은 저게 있어야 돌아간다”는 관계예요.

라이브러리를 설치하면 package.json에 의존성으로 적히는데, 폰트나 아이콘을 CDN으로 불러다 쓰던 거랑 비슷해요.

내 코드가 기대는 남의 코드 목록인 거죠.

클라이언트와 서버.

퍼블리셔는 늘 클라이언트(브라우저) 쪽에 살았어요.

사용자 눈앞에서 도는 코드요.

서버는 그 너머, 데이터를 보관하고 계산하는 쪽이고요.

개발로 넘어오며 배운 큰 감각 하나가 이 코드는 어느 쪽에서 도는가를 늘 의식하는 거였어요.

비밀 키는 절대 클라이언트에 두면 안 되는데, 이 구분을 모르면 실수로 전 세계에 공개해버리거든요.

돌아보면 새 분야가 어려운 건 개념이 어려워서가 아니라, 이미 아는 것에 낯선 이름이 붙어 있어서인 경우가 많았어요.

빌드는 컴파일의 확장이고, 상태는 상태 클래스의 변수판이고, 배포는 FTP의 자동화판이었죠.

혹시 같은 자리에서 멈춘 중이면, 그 단어를 당신이 원래 쓰던 말로 한번 바꿔보세요.