다음 단계

🎉 완주 축하 — 30강 대장정을 마치며

이 섹션에서는 30강 동안 걸어온 여정을 돌아보고 성취를 확인해 보겠습니다.

자바스크립트 기초 30강을 완주하셨습니다! 1강에서 자바스크립트가 무엇인지 처음 배우던 때가 엊그제 같지만, 이제 여러분은 DOM을 마음대로 조작하고, 비동기 로직을 우아하게 처리하며, 실제로 동작하는 앱까지 만들 수 있습니다. 이것은 작은 성취가 아닙니다. 많은 사람이 시작하지만 완주하는 사람은 그 절반도 되지 않습니다.

30강에서 익힌 핵심 역량을 한눈에 정리해 보겠습니다.

영역	강	핵심 역량
기초 문법	1~10강	변수, 자료형, 연산자, 조건문, 반복문, 함수, 화살표 함수
자료 구조	11~15강	배열 CRUD, map·filter·reduce, 객체, 구조 분해, 스프레드
DOM 조작	16~21강	요소 선택·수정, 이벤트, 폼 처리, 동적 생성·삭제, 위임
비동기	22~26강	타이머, 콜백, Promise, async/await, fetch API
저장·오류	27~28강	localStorage, 에러 처리, 디버깅
프로젝트	29강	설계→구현→완성 전체 사이클 경험

🔑 아직 배우지 않은 ES6+ 핵심 문법

이 섹션에서는 이 과정에서 다루지 않았지만 실무에서 자주 쓰이는 ES6+ 이후 문법을 살펴보겠습니다.

30강은 입문 과정이었으므로 일부 문법은 의도적으로 다루지 않았습니다. 다음 문법들은 독립적으로 공부해 두면 실무 투입 시 큰 도움이 됩니다.

// 1. ES 모듈 (import/export)
// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14159;
export default class Calculator { /* ... */ }

// app.js
import Calculator, { add, PI } from './math.js';
import * as math from './math.js';  // 전체 임포트

// 2. 클래스 (Class)
class Animal {
  #name;  // private 필드 (ES2022)

  constructor(name) { this.#name = name; }
  get name() { return this.#name; }
  speak() { return this.#name + '이 소리를 냅니다'; }
}

class Dog extends Animal {
  speak() { return this.name + '이 짖습니다'; }  // 오버라이드
}

const dog = new Dog('멍멍이');
console.log(dog.speak());  // '멍멍이이 짖습니다'

// 3. 제너레이터 (Generator)
function* range(start, end) {
  for (let i = start; i <= end; i++) yield i;
}
console.log([...range(1, 5)]);  // [1, 2, 3, 4, 5]

// 4. 위크맵·위크셋 (WeakMap/WeakSet)
// 메모리 누수 없는 프라이빗 데이터 저장

// 5. 심볼 (Symbol) — 고유한 식별자
const id = Symbol('id');
const obj = { [id]: 123 };

// 6. 프록시 (Proxy) — 객체 접근 가로채기
const handler = {
  get(target, key) {
    return key in target ? target[key] : '없음';
  }
};
const proxy = new Proxy({}, handler);
proxy.hello = 'world';
console.log(proxy.hello);    // 'world'
console.log(proxy.missing);  // '없음'

이 모든 것을 지금 당장 외울 필요는 없습니다. 필요한 순간에 찾아보고 이해할 수 있는 능력이 더 중요합니다. 공식 문서인 MDN Web Docs에 검색하면 모든 자바스크립트 문법과 API의 완전한 설명을 찾을 수 있습니다.

🗺️ 다음 학습 로드맵

이 섹션에서는 자바스크립트 기초를 마친 뒤 어떤 방향으로 나아갈 수 있는지 살펴보겠습니다.

자바스크립트 기초를 완성한 지금, 다음 스텝은 여러분의 목표에 따라 달라집니다. 크게 세 가지 방향이 있습니다.

방향 1 — 프론트엔드 개발자: React 또는 Vue.js를 배웁니다. 현재 취업 시장에서 가장 수요가 많은 경로입니다. 자바스크립트 기초가 탄탄한 지금이 React를 배우는 최적의 타이밍입니다. React의 상태 관리, 컴포넌트, 훅(Hook)은 이번 과정에서 배운 개념의 연장선입니다.

방향 2 — TypeScript 도입: 타입 안전성을 갖춘 자바스크립트 상위 집합입니다. 현업에서 React, Node.js 모두 TypeScript와 함께 사용하는 경우가 많습니다. 자바스크립트를 어느 정도 익힌 후 TypeScript를 배우면 쉽게 적응할 수 있습니다.

방향 3 — 풀스택 / 백엔드: Node.js로 서버를 개발합니다. 자바스크립트로 프론트와 백엔드 모두 개발할 수 있어 학습 부담이 낮습니다. Express.js 또는 Next.js(풀스택 프레임워크)가 진입점으로 좋습니다.

// 학습 로드맵 예시

// ======= 프론트엔드 로드맵 =======
// 1. TypeScript 기초 (2~3주)
//    → 타입, 인터페이스, 제네릭

// 2. React 기초 (4~6주)
//    → JSX, 컴포넌트, props, state
//    → useEffect, useState, useContext
//    → React Router (페이지 이동)

// 3. 상태 관리 (2~3주)
//    → Zustand 또는 Redux Toolkit

// 4. 스타일링 (1~2주)
//    → Tailwind CSS 또는 CSS Modules

// 5. 빌드 도구와 배포
//    → Vite, Webpack 개념
//    → Vercel, Netlify 배포

// ======= 풀스택 로드맵 =======
// 1. Node.js 기초 (2~3주)
//    → 모듈 시스템, 파일 I/O, HTTP 서버

// 2. Express.js (2~3주)
//    → 라우팅, 미들웨어, REST API 설계

// 3. 데이터베이스 (3~4주)
//    → PostgreSQL 기초 + Prisma ORM
//    → 또는 MongoDB + Mongoose

// 4. 인증 (1~2주)
//    → JWT, 세션, OAuth

// 5. Next.js (3~4주)
//    → App Router, 서버 컴포넌트, API Routes

💼 포트폴리오와 취업 전략

이 섹션에서는 배운 기술을 실력으로 증명하는 포트폴리오 전략을 살펴보겠습니다.

코딩 능력은 증명해야 합니다. 취업을 목표로 한다면 GitHub에 코드를 올리고, 실제 서비스를 배포하는 것이 가장 효과적입니다.

프로젝트 수준별 제안

입문 단계에서는 이번 과정의 할 일 앱을 확장하거나, 날씨 앱(OpenWeatherMap API), 환율 계산기, 영화 검색(TMDB API)처럼 공개 API를 사용한 소규모 앱을 만들어 보세요. 공개 API는 대부분 무료이며, fetch와 async/await로 연결할 수 있습니다.

중급 단계에서는 로그인·회원가입이 있는 CRUD 앱(메모장, 가계부, 독서 기록)을 만들어보세요. Supabase나 Firebase 같은 백엔드 서비스를 사용하면 데이터베이스 없이도 실제 서비스를 만들 수 있습니다.

취업 준비 수준에서는 팀 프로젝트나 클론 코딩(유명 서비스 따라 만들기)에 도전하세요. 넷플릭스, 트위터, 에어비앤비의 핵심 기능만 구현해도 충분한 포트폴리오가 됩니다.

📚 필수 참고 자료와 커뮤니티

이 섹션에서는 앞으로 자주 사용하게 될 공식 문서, 학습 자료, 커뮤니티를 소개합니다.

공식 문서 (항상 최신, 영어)

MDN Web Docs는 자바스크립트와 웹 API의 공식 레퍼런스입니다. 특정 메서드나 API가 헷갈릴 때마다 찾아보는 습관을 기르세요. 예를 들어 Array.prototype.reduce로 검색하면 정의, 매개변수, 예제, 브라우저 호환성까지 모두 확인할 수 있습니다. javascript.info는 영어로 쓰인 자바스크립트 심화 튜토리얼로, 이 과정에서 다루지 못한 클로저, 프로토타입, 이터러블 등 고급 개념을 배울 수 있습니다.

실습 플랫폼

코딩 문제를 풀며 알고리즘 실력을 키우고 싶다면 프로그래머스(한국어)나 LeetCode를 활용하세요. 처음에는 쉬운 문제부터 하루 1~2개씩 꾸준히 푸는 것이 핵심입니다. 배운 개념을 바로 실험해보고 싶을 때는 CodePen이나 StackBlitz에서 빠르게 코드를 실행해볼 수 있습니다.

커뮤니티

막히는 문제가 있을 때는 Stack Overflow에서 검색하면 대부분의 해답을 찾을 수 있습니다. 질문할 때는 오류 메시지, 시도한 것, 기대한 결과를 함께 적으면 빠른 답변을 받을 수 있습니다. 국내 커뮤니티로는 개발자 카카오 오픈채팅방, 네이버 카페 등이 있으며, 트위터(X)의 한국 개발자 커뮤니티도 최신 트렌드를 파악하기 좋습니다.

🌱 매일 성장하는 개발자가 되는 법

이 섹션에서는 자바스크립트 너머로 계속 성장하기 위한 실질적인 습관과 마음가짐을 살펴보겠습니다.

프로그래밍은 배우는 것이 끝이 없는 분야입니다. 하지만 그게 매력이기도 합니다. 몇 가지 실질적인 조언을 드립니다.

코드를 많이 읽으세요. GitHub에는 훌륭한 오픈소스 프로젝트가 가득합니다. React, Vue.js 같은 유명 라이브러리의 소스를 읽다 보면 좋은 코드가 어떻게 작성되는지 자연스럽게 익힙니다.

무언가를 만드세요. 아이디어가 있다면 일단 만들어보세요. 완성도보다 완성이 중요합니다. 불편한 것을 자동화하는 작은 도구, 친구를 위한 간단한 웹사이트 — 무엇이든 좋습니다. 만드는 과정에서 가장 빠르게 성장합니다.

오류를 환영하세요. 오류는 실패가 아니라 배움의 신호입니다. 오류를 마주했을 때 오류 메시지를 꼼꼼히 읽고, DevTools로 추적하는 경험을 쌓을수록 더 빨리 성장합니다.

글로 설명해보세요. 배운 개념을 자신만의 언어로 정리하는 것은 이해를 깊게 합니다. 블로그를 쓰거나, 노션에 메모하거나, 친구에게 설명해보세요. 설명할 수 있으면 아는 것입니다.

📝 마지막 요약 — 여기서 끝이 아닙니다

자바스크립트 기초 30강에서 배운 모든 내용을 한 문장으로 요약하면 이렇습니다.

자바스크립트로 웹 페이지를 살아있게 만드는 방법을 익혔습니다. 이제 여러분은 진짜 개발자의 첫 걸음을 내딛었습니다.

이 과정에서 배운 것들은 React를 배우든, TypeScript를 배우든, Node.js를 배우든 평생 써먹을 기반입니다. 변수, 함수, 객체, 배열, 비동기, 이벤트 — 어떤 프레임워크를 사용해도 이 개념들은 그대로입니다.

감사합니다. 그리고 다음 여정에서도 함께하겠습니다!