다음 단계 로드맵

여기까지 무엇을 배웠나

1부부터 7부까지 왔습니다. 지금 할 수 있는 것을 먼저 정리합니다.

• 값을 다루고 조건과 반복으로 흐름을 만듭니다(1부).
• 함수로 나누고 다른 함수에 넘깁니다(2부).
• 배열과 객체로 데이터를 거르고 모읍니다(3부).
• 화면을 찾아 바꾸고 사용자의 동작에 반응합니다(4부).
• 서버에서 데이터를 받아 오고 실패를 다룹니다(5부).
• 클래스와 모듈로 코드를 나눕니다(6부).
• 오류를 읽고 고치며 값을 남깁니다(7부).

이것으로 작은 웹 페이지는 혼자 만들 수 있습니다. 8부의 프로젝트가 그것을 확인하는 자리입니다.

바로 다음에 배울 것

순서대로 적었습니다. 앞엣것을 모르고 뒤엣것을 배우면 겉돕니다.

1. npm 과 패키지

남이 만든 코드를 가져다 쓰는 방법입니다. 날짜를 다루거나 차트를 그리는 일을 직접 만들지 않아도 됩니다.

npm init -y
npm install dayjs

여기서 Node.js 를 설치하게 됩니다. 브라우저 밖에서 JavaScript 를 돌리는 것인데, 지금은 도구를 돌리기 위해 필요합니다.

2. 번들러

6.4 에서 파일을 나눴습니다. 파일이 수십 개가 되면 그것을 하나로 묶고, 오래된 브라우저도 읽을 수 있게 바꿔 주는 도구가 필요합니다. 요즘은 Vite 를 가장 많이 씁니다.

3. 프레임워크

4부에서 화면을 손으로 그렸습니다. 항목이 바뀔 때마다 replaceChildren 으로 다시 그리는 일이 늘어나면 관리하기 어려워집니다.

React · Vue · Svelte 는 데이터가 바뀌면 화면이 따라 바뀌게 해 줍니다. 무엇을 골라도 됩니다 — 하나를 익히면 나머지는 빨리 읽힙니다.

4. TypeScript

1.4 에서 타입을 봤습니다. TypeScript 는 값의 타입을 미리 적어 두고 어긋나면 실행하기 전에 알려 줍니다. 7.1 에서 본 TypeError 의 상당수를 미리 잡습니다.

function applyDiscount(price: number, percent: number): number {
	return price - price * percent / 100;
}

applyDiscount("10000", 15);   // 실행 전에 오류로 잡힙니다

문법은 JavaScript 그대로이고 타입을 적는 자리만 더합니다. 이 트랙을 마쳤다면 바로 시작할 수 있습니다 — TS 커리큘럼 이 여기서 이어집니다.

더 뒤의 것들

• 테스트 — 코드가 여전히 맞는지 자동으로 확인합니다. 고칠 때 겁이 덜 납니다.
• Git — 바꾼 것을 기록하고 되돌립니다. 혼자 만들 때도 필요합니다.
• 서버 사이드 — Node.js 로 서버를 만듭니다. 5부에서 fetch 로 부르던 그쪽을 직접 만드는 일입니다.
• 접근성 — 눈으로 보지 않는 사람도 쓸 수 있게 만듭니다. 4부의 마크업에 이름을 제대로 붙이는 일부터입니다.

무엇을 만들며 배울까

읽기만 해서는 늘지 않습니다. 만들 것을 정해 두고 필요한 것을 그때 찾아 배우는 편이 빠릅니다.

• 쓰던 종이 기록을 대신하는 화면 — 가계부, 운동 기록, 독서 목록
• 공개 API 를 붙인 조회 화면 — 날씨, 환율, 지하철 도착
• 혼자 쓰는 도구 — 이름 짓기, 단위 변환, 시간 계산

작게 시작해 끝까지 만드세요. 큰 것을 절반 만든 것보다 작은 것을 끝낸 편이 훨씬 많이 남습니다.

막혔을 때

1. 오류 메시지를 읽습니다(7.1). 절반은 여기서 풀립니다.
2. 값을 찍어 봅니다(7.2). 짐작하지 말고 확인합니다.
3. 가장 작게 줄여 봅니다. 문제가 나는 부분만 남기고 지워 나가면 원인이 드러납니다.
4. 공식 문서를 봅니다. MDN 이 기준입니다 — 함수 이름과 함께 검색하면 나옵니다.
5. 물어봅니다. 물을 때는 무엇을 하려 했고, 무엇을 기대했고, 실제로 무엇이 나왔는지 셋을 적으세요.

3번까지 하면 대개 스스로 풀립니다. 줄이는 과정에서 원인이 보이기 때문입니다.

다음 단계에서 자주 겪는 것

직접 해보기

이 단원의 정리