JavaScript 배워서 어디에 쓸까?

JavaScript를 배우면 무엇을 만들 수 있을까요? 이 챕터에서는 JS로 만들 수 있는 것들을 레벨별로 정리하고, 어디에 활용할 수 있는지, 어떻게 시작하는지 한눈에 보여드립니다.

🚀 JavaScript로 만들 수 있는 것들 — 레벨별

🟢 레벨 1: 입문 (브라우저 안에서 동작)

• 버튼 클릭 동작 (addEventListener)
• 폼 입력 검증 (이메일 형식, 비밀번호 길이)
• 이미지 슬라이더 / 다크 모드 토글 / 계산기
• 로컬 스토리지 활용 메모장

핵심 API: document.querySelector, addEventListener, localStorage, 조건문/반복문

🟡 레벨 2: 중급 (외부 데이터 연동)

• Todo 앱 (CRUD + 로컬 저장)
• 실시간 검색 / 무한 스크롤
• API 호출 (날씨/영화/뉴스 데이터)
• 드래그 앤 드롭 / 이미지 업로드 미리보기

핵심 API: fetch, async/await, IntersectionObserver, Drag and Drop API

🔵 레벨 3: 고급 (프레임워크 + 풀스택)

• React/Vue로 SPA(Single Page App) 제작
• Node.js + Express 서버
• Next.js 풀스택 앱 (SSR/SSG)
• WebSocket 실시간 채팅 / PWA / 크롬 확장 프로그램

핵심 도구: React, Next.js, Node.js, WebSocket, Service Worker

🟣 레벨 4: 전문가

• AI 챗봇 (LangChain.js + OpenAI API)
• 웹 스크래핑 (Puppeteer / Playwright)
• 데스크톱 앱 (Electron — VS Code, Slack도 이걸로 만들어짐)
• 모바일 앱 (React Native)
• 3D 그래픽/게임 (Three.js)

💼 JavaScript로 할 수 있는 일

취업

• 프론트엔드 개발자 (React + TS): 가장 큰 채용 시장
• 풀스택 개발자 (Node.js + Next.js): 한 언어로 프론트+백엔드
• 모바일 앱 개발자 (React Native): iOS/Android 동시 개발

프리랜싱

• 웹 앱 제작: 100~1,000만원 / 프로젝트
• 크롬 확장 프로그램, Shopify 커스텀
• 자동화 스크립트 / 봇 개발

1인 창업 & 사이드 프로젝트

• SaaS 서비스 (Next.js + Supabase 한 명이서 가능)
• 자동화 도구 (Notion API + 스크립트)
• AI 서비스 (LangChain.js로 챗봇·요약·번역 자동화)

JavaScript의 독보적 장점

1. 유일한 브라우저 언어 — 웹 프론트엔드는 JS 또는 JS로 컴파일되는 언어만 가능
2. 풀스택 가능 — Node.js로 서버까지 같은 언어로
3. npm 200만+ 패키지 — 세계 최대 라이브러리 생태계
4. AI 시대 강점 — LangChain.js, Vercel AI SDK 등 AI 도구가 JS 우선 지원

🛠️ 시작 방법 (환경별)

🌐 공용 컴퓨터 / 설치 불가 환경

• OHS 실습 페이지 (각 챕터 하단 '실습 페이지로 이동')
• CodePen (https://codepen.io)
• StackBlitz (https://stackblitz.com) — 전체 프로젝트 가능
• 브라우저 콘솔 (F12 → Console 탭) — 별도 설치 없이 즉시 실험

🪟 Windows / 🍎 macOS

1. VS Code 설치 (https://code.visualstudio.com)
2. Node.js LTS 설치 (https://nodejs.org)
3. 추천 확장: ESLint, Prettier, Live Server, Quokka.js (인라인 평가)
4. 터미널: node --version → 18.x 이상 확인

☁️ GitHub Codespaces

• GitHub 저장소에서 . 키 → 브라우저 VS Code
• Node.js 사전 설치 환경, 컴퓨터 무관 동일 환경

📝 JS 학습용 AI 프롬프트

🟢 기초

JS의 var, let, const 차이를
실생활 비유 + 표 + 코드 예시로
한 번에 정리해줘.
어떤 상황에 무엇을 써야 하는지 추천도 포함.

🟡 중급

fetch로 OpenWeather API에서 날씨 데이터를 받고
도시명을 입력하면 화면에 결과를 표시하는 코드를
async/await + 에러 처리(try/catch) + 로딩 상태로 만들어줘.

🔵 심화

Next.js 14(App Router) + Supabase + TypeScript로
Todo SaaS의 풀스택 아키텍처를 설계해줘.
포함: 인증 / RLS / 서버 컴포넌트 / 캐싱 / 실시간 구독.

다음 챕터에서 30개 본편 챕터 전체 로드맵을 확인하세요!

💻 JS 레벨별 데모 코드

/* JavaScript 레벨별 데모 — 핵심 개념 한 파일 */

// 🟢 레벨 1: DOM 조작 + 이벤트
const btn = document.querySelector('#counter-btn');
let count = 0;
btn?.addEventListener('click', () => {
  count += 1;
  btn.textContent = `Clicked ${count} times`;
});

// 🟡 레벨 2: fetch + async/await + 에러 처리
async function loadUser(id) {
  try {
    const res = await fetch(`https://api.github.com/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const user = await res.json();
    console.log(user.name, user.public_repos);
    return user;
  } catch (err) {
    console.error('Failed to load user:', err);
    return null;
  }
}

// 🔵 레벨 3: 모듈 + 디자인 패턴(Observer)
class EventBus {
  constructor() { this.events = {}; }
  on(event, handler) {
    (this.events[event] ??= []).push(handler);
  }
  emit(event, payload) {
    (this.events[event] || []).forEach(h => h(payload));
  }
}
// export default new EventBus();  // 모듈로 분리 가능

// 🟣 레벨 4: 성능 최적화 (debounce)
function debounce(fn, ms = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}
// const onSearch = debounce((q) => fetchResults(q), 250);

/*
  💡 한 파일에 4단계가 모두 들어있습니다.
  레벨 1: querySelector, addEventListener
  레벨 2: fetch, async/await, try/catch
  레벨 3: class, ??=, Observer 패턴
  레벨 4: closure, setTimeout 기반 debounce
  → 다음 챕터에서 기업들이 이 기술을 어떻게 사용하는지 봅니다!
*/