Menu
Coddy logo textTech
학습 경로

자바스크립트 개발자 로드맵

JavaScript 개발자로 일하려면 무엇을 배워야 하는지, 순서대로 담았습니다. 언어와 TypeScript, 커맨드 라인, Git과 SQL, 이어서 면접에서 시험하는 자료구조와 알고리즘, 마지막으로 팀이 유지보수할 수 있는 코드. 같은 기초가 프론트엔드, 백엔드, 풀스택 일 모두에 쓰입니다. 무료이고, 직접 해보며, 브라우저 안에서 끝납니다.

503,064+ 명의 codders가 이 코스들에 등록함

651 개 강의577 챌린지2,785 퀴즈 문제

JavaScript 개발자 로드맵, 단계별로

17 개 강의7 섹션651 개 강의577 챌린지2,785 퀴즈 문제

각 단계는 이미 존재하는 Coddy 코스들로 이루어져 있고, 모든 ‘시작’ 버튼은 코스를 JavaScript로 엽니다. 단계를 순서대로 따라가도 되고, 부족한 단계부터 시작해도 됩니다. 진행 상황은 코스별로 저장됩니다.

  1. 1
    이 단계 시작시작섹션은 네 개입니다. 기초 섹션은 변수, 엄격한 동등 비교와 느슨한 동등 비교, 타입 강제 변환, 함수와 화살표 함수, 배열을 다루고, 논리 & 흐름 섹션은 문자열, JSON과 객체, 스프레드 연산자, Set, 그리고 배열 메서드 map, filter, reduce, sort를 다룹니다. TypeScript 소개 섹션은 핵심 타입, 튜플, 유니언, 인터페이스, 열거형, 제네릭, 타입 가드를, 객체 지향 프로그래밍 섹션은 this, 모듈, 클래스, private 필드, 상속, 합성을 다룹니다. 깊이 배우세요. 나중에 만나는 모든 프레임워크도 속은 JavaScript이며, === 옆의 ==, 소리 없는 타입 변환 같은 느슨한 규칙은 알기 전까지만 함정입니다.시작전용 페이지
  2. 2
    이 단계 시작시작경로와 파일, 와일드카드, grep, 파이프와 리다이렉션, 권한, 환경 변수, 셸 스크립트. JavaScript 개발 도구는 터미널에서 움직입니다. npm install, npx, 개발 서버, 빌드, 테스트 러너는 모두 명령이고, package.json의 스크립트는 셸 명령이며, 비밀 값은 process.env를 거쳐 환경 변수로 Node.js 앱에 전달됩니다.시작전용 페이지
  3. 3
    이 단계 시작시작스테이징, 커밋, .gitignore, 브랜치, 머지와 충돌, 실수 되돌리기, 원격 저장소. JavaScript 프로젝트에서는 첫 커밋부터 node_modules/를 무시하고 package-lock.json은 커밋하며, 변경이 잦은 락 파일은 병렬로 작업하는 브랜치들이 흔히 충돌하는 곳입니다. Vercel과 Netlify 같은 호스팅 서비스는 푸시할 때마다 배포하므로, 많은 웹 팀에서는 main에 머지하는 것이 곧 릴리스입니다.시작전용 페이지
  4. 4
    이 단계 시작시작필터링, 정렬, 조인, 그룹화, 집계, 서브쿼리, WITH 절, 윈도우 함수를 실제 테이블로 연습합니다. 풀스택 JavaScript라면 API 뒤에 데이터베이스가 있고, 흔히 PostgreSQL이나 MySQL을 Prisma 같은 ORM이나 쿼리 빌더로 다룹니다. 엔드포인트가 왜 느린지 알아내는 방법은 그 도구가 보내는 SQL을 읽는 것입니다.시작전용 페이지
  5. 5
    이 단계 시작시작스택, 큐, 연결 리스트, 이진 트리, 해시 테이블을 각각 JavaScript로 바닥부터 만든 뒤 문제에 적용합니다. 모두 JavaScript 애플리케이션이 이미 그 위에서 돌아가는 형태입니다. 실행 취소 기록은 스택이고, 이벤트 루프는 큐를 따라 일을 처리하며, 중첩된 메뉴나 JSON 문서는 트리입니다.시작
  6. 6
    이 단계 시작시작먼저 재귀 챌린지, 그다음 버블, 선택, 삽입, 병합, 퀵 정렬을 JavaScript로 다루며, 정렬마다 Coddy의 알고리즘 시각화 도구가 짝을 이룹니다. 중첩된 객체나 컴포넌트 트리를 순회하는 재귀는 JavaScript에서 일상이지만 한계가 있습니다. 너무 깊이 들어가면 Chrome과 Node.js의 엔진인 V8이 RangeError: Maximum call stack size exceeded를 던집니다. 이 단계에서는 그런 상황이 오는 것을 미리 알아보는 법을 배웁니다.시작
  7. 7
    이 단계 시작시작처음부터 끝까지 만드는 객체 지향 프로젝트와 코딩 문제 모음. 둘 다 JavaScript로 진행됩니다. 포매팅은 Prettier가 정리하고 일부 실수는 ESLint가 잡아 주지만, 이름 짓기, 함수 크기, 책임을 어디에 둘지는 여러분의 몫이며, 리뷰어가 코멘트를 다는 곳도 바로 거기입니다.시작
제공되는 것
코딩을 배우기 위해 사용할 모든 것

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
python iconPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

이 JavaScript 로드맵을 Coddy에서 따라가야 하는 이유

  • 웹 전체를 아우르는 하나의 언어. JavaScript는 모든 브라우저에서 실행되고, Node.js와 함께라면 서버, 빌드 도구, 스크립트까지 실행합니다. 그래서 프론트엔드, 백엔드, 풀스택 일자리는 서로 갈라지기 전에 모두 이 로드맵이 쌓는 기초에서 출발합니다.
  • 첫 단계에 들어 있는 TypeScript. JavaScript 코스에는 핵심 타입과 유니언부터 인터페이스, 열거형, 제네릭까지 다루는 완전한 TypeScript 섹션이 있습니다. 그래서 많은 현업 팀이 쓰는, 타입을 붙인 JavaScript가 첫 직장에서 놀랄 거리가 아니라, 배우는 언어의 일부가 됩니다.
  • JavaScript로 하는 면접 연습. 자료구조, 재귀 챌린지, 다섯 가지 정렬이 모두 JavaScript로 진행되므로, 면접에서 실제로 쓰라고 할 언어로 연습합니다.
  • 채점과 힌트는 있고, 설치할 것은 없습니다. 모든 레슨은 테스트 케이스로 채점되는 JavaScript 챌린지로 끝나고, AI 튜터 Bugsy가 수정 코드를 대신 쓰지 않고 무엇이 잘못됐는지 짚어 줍니다. 대부분의 코스는 무료 수료증으로 마무리되며, 설정할 Node.js나 에디터도 없습니다. 모든 것이 브라우저에서 실행됩니다.

JavaScript 개발자가 되는 것에 대해 자주 묻는 질문

JavaScript 개발자가 되는 데 얼마나 걸리나요?

하루 한 시간 정도라면, 처음 시작해서 주니어 면접을 보기까지 6개월에서 12개월이 적당한 범위입니다. 이 로드맵에서 JavaScript 코스는 TypeScript 섹션을 포함해 8~10주, 커맨드 라인, Git, SQL이 합쳐서 한 달 정도, 자료구조와 정렬 단계가 두 달 더 걸립니다. 그다음은 전문 분야입니다. React 같은 프레임워크나 Node.js 백엔드를 익혀, 보여 줄 수 있는 프로젝트 한두 개로 완성합니다.

JavaScript는 소프트웨어 엔지니어의 첫 언어로 좋은가요?

네, 다만 한 가지 주의할 점이 있습니다. 어디서나 실행되고, 브라우저에서 결과를 바로 보여 주며, 웹에서 보수를 받는 일로 곧장 이어집니다. 주의할 점은 JavaScript가 다른 언어라면 거부할 실수를 너그럽게 넘어간다는 것입니다. == 연산자는 비교하기 전에 타입을 변환하고, 없는 속성은 에러가 아니라 undefined가 됩니다. 이 로드맵의 첫 단계에 TypeScript가 들어 있고, 자료구조 단계에서 각 구조를 직접 만들게 하는 이유가 바로 그것입니다.

JavaScript 개발자는 JavaScript 말고 무엇을 알아야 하나요?

이 로드맵이 다루는 커맨드 라인, Git, SQL, 그리고 이 로드맵이 다루지 않는 대상 플랫폼입니다. 브라우저라면 HTML, CSS, DOM, React 같은 프레임워크, 서버라면 Node.js, npm, HTTP입니다. Coddy의 프론트엔드 경로가 React를 포함한 브라우저 쪽을 다루며, 이 페이지가 끝나는 곳에서 이어집니다.

TypeScript와 JavaScript 중 무엇을 먼저 배워야 하나요?

JavaScript를 먼저, 그리고 곧이어 TypeScript를 배우세요. TypeScript는 JavaScript에 타입을 더한 것이고, 그 에러는 아래에 있는 JavaScript가 무엇을 하는지 알아야 비로소 이해가 됩니다. JavaScript 코스도 그 순서로 되어 있습니다. 순수 JavaScript 섹션 두 개, 그다음 TypeScript 섹션, 그다음 객체 지향 프로그래밍입니다.

이 로드맵에서 JavaScript로 진행되지 않는 코스는 무엇인가요?

하나입니다. 클린 코드는 아직 Python으로만 진행되기 때문에, 7단계 안이 아니라 단계 목록 뒤에 따로 나와 있습니다. 그 주제인 이름 짓기, 함수 크기, 구조는 어느 언어에서나 똑같이 읽히고, ESLint 같은 린터는 그중 일부만 잡아냅니다. 객체 지향 프로젝트와 코딩 문제를 포함해 모든 단계가 JavaScript로 진행됩니다.

이 JavaScript 로드맵은 무료인가요?

네. 이 로드맵의 모든 코스가 무료입니다. 레슨, 브라우저 안의 에디터와 Linux 터미널, 테스트로 채점되는 챌린지, Bugsy의 힌트, 수료증까지 전부입니다. Pro는 하루 에너지 제한을 없애고 AI 도움을 무제한으로 열어 주지만, 이 로드맵의 어떤 것도 Pro를 필요로 하지 않습니다.

다른 학습 경로

같은 코스를 다른 직무에 맞게 배열한 경로입니다. 진행 상황은 이어집니다. 한 경로에서 마친 코스는 그 코스를 포함한 모든 경로에서 인정됩니다.

모든 학습 경로
Coddy programming languages illustration

소프트웨어 엔지니어 경로를 무료로 시작하세요

학습 시작