자바스크립트 튜토리얼을 읽는 것과 실제로 끝마치는 것은 완전히 다른 경험입니다.
첫 번째는 생산적이라는 느낌을 주지만, 진짜 배움이 일어나는 곳은 두 번째입니다. 오랫동안 JS 강의를 붙잡고 씨름해 왔는데도 여전히 내 코드가 다른 사람의 연습 문제 속에만 갇혀 있나요? 이제 그 굴레에서 벗어날 때가 되었습니다.
무언가를 작동시키기 위해 직접 사용해 보기 전까지는 반복문(loop)에 대해 아는 것이 아무런 소용이 없습니다. 튜토리얼은 단어를 가르쳐 주지만, 프로젝트는 그 언어로 말할 수 있게 해줍니다.
그래서 준비했습니다. 시작하는 데 도움이 되는 간단한 가이드가 포함된 입문자를 위한 자바스크립트 프로젝트 18가지입니다. 마음에 드는 것을 골라 만들고, 그다음 프로젝트로 넘어가 보세요.
지루하지만 정말 중요한 한 가지: 바로 기본기입니다. 기본기를 탄탄히 다져두어야 프로젝트를 진행할 때 스택 오버플로우(Stack Overflow) 탭만 수십 개씩 띄워놓고 헤매는 일을 막을 수 있습니다!
자바스크립트 기본기부터 탄탄하게
모든 초급 JS 프로젝트는 변수, 함수, 조건문, 반복문, 배열, 객체, 그리고 몇 가지 DOM 메서드를 기반으로 합니다. 이 개념들이 아직 손에 익지 않았다면, 무언가를 만드는 시간보다 문법과 싸우는 시간이 더 길어질 것입니다.
Coddy의 자바스크립트 코스는 바로 이를 위해 설계되었습니다. 핵심 언어 개념을 단계별로 짚어주는 5분짜리 레슨으로 구성되어 있습니다. 브라우저에서 바로 코드를 작성하고 실행해 볼 수 있어, 복잡한 설치나 환경 설정, "Node부터 설치하세요" 같은 번거로운 과정이 전혀 필요 없습니다.
이해가 잘 안 되는 부분이 있을 때는 내장 AI 어시스턴트인 Bugsy가 언제든 도와줍니다.
다음 개념들을 막힘없이 읽고, 쓰고, 설명할 수 있다면 준비가 된 것입니다. 그렇지 않다면 Coddy에서 JS 기초를 먼저 확실히 다지고 오세요.
- 변수와 원시 타입 (string, number, boolean)
- if/else 및 switch 조건문
- for, while, for...of 반복문
- 함수 및 화살표 함수 (arrow functions)
- 배열과 자주 쓰이는 메서드 (push, pop, map, filter, find)
- 객체와 마침표/대괄호 표기법 (dot/bracket notation)
- 기본적인 DOM 접근 (querySelector, addEventListener, textContent)
준비되셨나요? 좋습니다. 이제 직접 만들어 봅시다!
Coddy는 브라우저에서 진행되는 5분 레슨을 통해 기본기를 다질 수 있도록 도와주며, 막히는 순간마다 Bugsy가 바로 곁에서 도와줍니다.
초급 프로젝트: DOM과 친해지기
이 프로젝트들은 의도적으로 규모를 작게 유지합니다. 한두 가지 개념에만 집중하므로, 에러가 발생하더라도 원인을 빠르게 찾을 수 있습니다. 그리고 너무 간단해 보인다고 해서 그냥 건너뛰지 마세요!
1. 클래식 카운터 (Counter)
어떤 프로젝트인가요: 화면에 숫자가 표시되고, 플러스(+) 버튼과 마이너스(-) 버튼으로 숫자를 조절하는 앱입니다.
추천하는 이유: HTML, CSS 그리고 JavaScript를 함께 사용하는 가장 작은 규모의 앱입니다. 상태(값이 변하는 변수), DOM 업데이트, 이벤트 리스너를 직접 다뤄볼 수 있습니다. 코드 길이는 대략 20줄 안팎입니다.
만드는 방법: 숫자를 표시할 span 태그 하나와 버튼 두 개를 만듭니다. let count = 0을 선언합니다. 각 버튼에 클릭 리스너를 연결하여 count 값을 올리거나 내린 다음, span의 textContent를 업데이트합니다. 도전 과제: 리셋 버튼을 추가하고, 0 이하로 내려가지 않도록 제한해 보세요.
2. 팁 계산기 (Tip Calculator)
어떤 프로젝트인가요: 청구 금액과 팁 비율을 입력하면 팁 금액과 총 결제 금액을 보여주는 계산기입니다.
추천하는 이유: 처음 접할 때 대부분 헤매는 폼 입력값(input) 처리와 parseFloat 개념을 배울 수 있습니다. 또한 NaN(Not a Number)을 고려하지 않으면 수학적 계산이 얼마나 쉽게 망가지는지 깨닫게 됩니다.
만드는 방법: 숫자 입력창 두 개(금액, 팁 비율), 버튼 하나, 결과 출력용 span 두 개를 만듭니다. 버튼을 클릭하면 두 입력값을 파싱하여 계산하고, .toFixed(2)를 사용해 소수점 둘째 자리까지 반올림하여 화면에 표시합니다. 도전 과제: 인원수대로 나누어 내는 더치페이(split) 옵션을 추가해 보세요.
3. 색상 팔레트 생성기
어떤 프로젝트인가요: 버튼을 클릭할 때마다 무작위로 새로운 색상이 생성되어 화면에 색상 샘플과 헥스(Hex) 코드로 표시됩니다.
추천하는 이유: 난수 생성, 템플릿 리터럴(template literals), 인라인 스타일 지정을 하나의 작은 앱에서 모두 연습할 수 있습니다. 시각적인 결과물이 바로 보여서 만드는 재미가 있습니다.
만드는 방법: 0에서 255 사이의 무작위 정수를 세 번 반환하는 함수를 만들고, 이를 rgb(${r}, ${g}, ${b}) 형태의 문자열로 구성합니다. 이 값을 샘플 요소의 배경색(backgroundColor)으로 지정합니다. 도전 과제: 단일 색상 대신 5가지 색상으로 이루어진 전체 팔레트를 생성해 보세요.
4. 명언 제조기 (Random Quote Generator)
어떤 프로젝트인가요: 버튼을 누르면 미리 준비해 둔 배열에서 무작위로 명언을 가져와 화면에 보여줍니다.
추천하는 이유: 배열과 Math.random을 연습하기에 좋으며, 실제로 주변 사람들과 공유하기에도 좋은 유용한 프로젝트입니다.
만드는 방법: text와 author 속성을 가진 명언 객체 배열을 정의합니다. 버튼을 클릭하면 무작위 인덱스를 선택하여 두 개의 HTML 요소를 업데이트합니다. 도전 과제: 트위터에 바로 공유할 수 있는 "트윗하기" 링크를 추가해 보세요.
5. 디지털시계 (Digital Clock)
어떤 프로젝트인가요: 화면에 현재 시간이 표시되며, 1초마다 실시간으로 업데이트됩니다.
추천하는 이유: 앞으로 개발하면서 평생 쓰게 될 setInterval과 Date 객체를 처음 접하게 됩니다. 한 자리 숫자인 분과 초 앞에 '0'을 붙여 두 자리로 맞추는 과정은 그 자체로 쏠쏠한 재미를 주는 미니 퍼즐입니다.
만드는 방법: new Date()를 읽어와 시, 분, 초를 포맷팅한 뒤 span에 작성하는 함수를 만듭니다. 이 함수를 setInterval(updateClock, 1000)으로 감싸 실행합니다. 도전 과제: 12시간제와 24시간제 표시를 전환할 수 있는 토글 버튼을 만들어 보세요.
6. BMI 계산기 (BMI Calculator)
어떤 프로젝트인가요: 키와 몸무게를 입력하면 BMI 수치와 함께 비만도 판정 결과를 보여줍니다.
추천하는 이유: 조건문(if/else)을 사용해 결과에 따라 다른 라벨을 보여주는 실무적인 예제입니다. 깔끔한 폼 레이아웃을 디자인해 볼 좋은 기회이기도 합니다.
만드는 방법: 키(cm)와 몸무게(kg)를 입력받는 숫자 입력창을 만듭니다. 제출(submit) 시 표준 공식을 사용해 BMI를 계산하고, if/else 조건문으로 비만도를 판정하여 두 값을 모두 화면에 보여줍니다. 도전 과제: 파운드(lb)와 인치(in) 단위를 사용할 수 있는 토글 기능을 추가해 보세요.
중급 프로젝트: 더 유기적으로 움직이는 앱 만들기
몇 가지 프로젝트를 직접 만들어 보다 보면 일정한 패턴이 반복된다는 것을 눈치채셨을 것입니다. 버튼을 클릭하면 변수가 바뀌고, 함수가 그 변수를 바탕으로 UI를 업데이트하는 과정의 반복입니다. 이것이 바로 프론트엔드 개발의 핵심입니다. 이번 단계의 프로젝트들은 한 번에 조금 더 많은 상태(state)를 다뤄야 합니다.
7. 투두 리스트 (To-do List)
어떤 프로젝트인가요: 할 일을 입력하고 엔터를 누르면 목록에 추가됩니다. 항목을 클릭하면 완료 표시가 되고, X 버튼을 누르면 삭제됩니다.
추천하는 이유: 프론트엔드 프레임워크의 'Hello World'로 불리는 데는 다 이유가 있습니다. 배열을 다루고, 이를 DOM에 렌더링하며, 두세 가지 이벤트를 동시에 처리해야 합니다. 도움 없이 투두 리스트를 처음부터 끝까지 만들 수 있다면, 이제 완전한 초보 단계는 벗어난 것입니다.
만드는 방법: id, text, done 속성을 가진 할 일 객체 배열을 유지합니다. 변화가 생길 때마다 <ul> 태그로 다시 렌더링합니다. 엔터를 누르면 새 할 일을 배열에 추가(push)하고, 클릭 시 완료 상태를 토글하거나 배열에서 삭제(splice)합니다. 도전 과제: 새로고침을 해도 목록이 유지되도록 localStorage에 데이터를 저장해 보세요.
8. 랩 타임 기능이 있는 스톱워치 (Stopwatch with Lap Times)
어떤 프로젝트인가요: 시작, 정지, 초기화 기능과 함께 구간 기록(랩 타임)을 측정할 수 있는 스톱워치입니다.
추천하는 이유: 시스템 시간을 단순히 가져오는 시계보다 까다롭습니다. 시스템에 시간을 묻는 대신 경과 시간 변수를 직접 관리해야 하기 때문입니다. Date.now(), 인터벌(interval), 일시정지 로직을 다루게 됩니다.
만드는 방법: startTime과 누적 경과 시간인 elapsed 변수를 저장합니다. 시작 시 startTime = Date.now()를 설정하고 인터벌을 실행합니다. 정지 시 elapsed += Date.now() - startTime을 계산합니다. 랩 타임 버튼을 누르면 현재 기록을 배열에 추가하고 화면에 렌더링합니다. 도전 과제: 밀리초(ms) 단위까지 깔끔하게 포맷팅해 보세요.
9. 뽀모도로 타이머 (Pomodoro Timer)
어떤 프로젝트인가요: 25분 집중 근무, 5분 휴식을 반복하는 타이머입니다. 시간이 다 되면 알림음이 울립니다.
추천하는 이유: 초보자를 위한 상태 머신(state machine) 연습으로 제격입니다. '집중', '휴식', '일시정지' 상태를 관리하며, 현재 모드에 따라 UI가 유기적으로 변화합니다.
만드는 방법: 스톱워치와 유사한 인터벌 패턴을 사용하되, 시간이 줄어드는 카운트다운 방식으로 구현합니다. 현재 어떤 모드인지 추적하고, 타이머가 0에 도달하면 모드를 전환한 뒤 new Audio('beep.mp3').play()를 사용해 짧은 알림음을 재생합니다. 도전 과제: 오늘 완료한 집중 세션 횟수를 기록하는 카운터를 추가해 보세요.
Coddy는 짧은 일일 레슨과 연속 학습(streak)을 통해 기본기를 탄탄하게 다져주므로, 어렵게 느껴지던 프로젝트도 어느새 쉽게 해결할 수 있게 됩니다.
10. 퀴즈 앱 (Quiz App)
어떤 프로젝트인가요: 객관식 퀴즈를 풀고 마지막에 최종 점수를 확인하는 앱입니다.
추천하는 이유: 배열 순회, 조건문, 그리고 간단한 '화면 상태'(현재 질문 화면, 결과 화면) 전환 개념을 한데 묶어 연습할 수 있습니다.
만드는 방법: text, options, correctIndex 속성을 가진 질문 객체 배열을 정의합니다. 한 번에 한 질문씩 보여주고, 답변을 클릭하면 correctIndex와 비교하여 점수를 올린 뒤 다음 질문으로 넘어갑니다. 모든 질문이 끝나면 결과 화면을 보여줍니다. 도전 과제: 질문당 제한 시간 타이머를 추가해 보세요.
11. 비밀번호 생성기
어떤 프로젝트인가요: 원하는 길이와 포함할 문자 유형을 선택하면 무작위로 안전한 비밀번호를 생성해 줍니다.
추천하는 이유: 문자열 조작, 난수 생성, 체크박스 입력 처리를 동시에 다룹니다. 연습용 프로젝트치고는 실제로도 매우 유용하다는 장점이 있습니다.
만드는 방법: 소문자, 대문자, 숫자, 특수문자로 구성된 네 가지 문자 풀(pool)을 만듭니다. 체크된 박스에 따라 활성화된 풀들을 하나로 합칩니다. 합쳐진 풀에서 무작위 문자를 선택하는 과정을 n번 반복합니다. 도전 과제: 생성된 비밀번호의 안전도를 평가해 주는 강도 표시기(strength indicator)를 추가해 보세요.
12. 폼 유효성 검사기 (Form Validator)
어떤 프로젝트인가요: 회원가입 폼에서 잘못 입력된 필드를 빨간색으로 강조하고, 그 아래에 에러 메시지를 표시합니다.
추천하는 이유: 실제 실무 자바스크립트 개발에서 가장 많이 하는 작업 중 하나입니다. 정규표현식(Regex), 포커스 이벤트, DOM 조작을 익숙한 폼 레이아웃 안에서 연습할 수 있습니다.
만드는 방법: 각 필드별로 간단한 유효성 검사 함수(이메일 형식, 비밀번호 길이, 비밀번호 일치 여부 등)를 만듭니다. 입력창에서 포커스가 벗어날 때(blur 이벤트) 검사 함수를 실행하여 입력창의 클래스를 토글하고 에러 메시지를 업데이트합니다. 제출 시에는 모든 검사를 통과했을 때만 진행되도록 합니다. 도전 과제: 첫 번째 blur 이벤트 이후에는 실시간으로 유효성을 검사하도록 개선해 보세요.
미니 게임: 코딩이 즐거워지는 순간
게임은 지속적인 상태 관리, 타이밍, 상호작용이 필요하기 때문에 실력을 한 단계 더 끌어올려 줍니다. 캔버스(canvas) 위에서 픽셀이 움직이는 것을 처음 구현하는 순간, 자바스크립트가 실제로 무엇을 할 수 있는지 깊이 깨닫게 될 것입니다.
13. 가위바위보 (Rock Paper Scissors)
어떤 프로젝트인가요: 가위, 바위, 보 중 하나를 선택하면 컴퓨터도 무작위로 하나를 선택하여 승패를 겨룹니다.
추천하는 이유: 조건문과 난수 생성을 깔끔하게 연습할 수 있으며, 승패가 명확하여 성취감이 큽니다.
만드는 방법: 플레이어의 선택을 위한 버튼 세 개를 만듭니다. 클릭 시 컴퓨터가 동일한 세 가지 옵션 중 하나를 무작위로 선택하게 합니다. 간단한 매핑 테이블(또는 중첩 if/else문)을 사용해 결과를 판정합니다. 매 판의 승패를 기록합니다. 도전 과제: 5판 3선승제 규칙과 최종 승리 화면을 추가해 보세요.
14. 틱택토 (Tic-Tac-Toe)
어떤 프로젝트인가요: 한 화면에서 두 명의 플레이어가 번갈아 가며 돌을 놓는 클래식한 3x3 격자 게임입니다.
추천하는 이유: 길이가 9인 1차원 배열을 평면 2D 격자로 다루는 방법과 승리 조건을 체크하는 로직을 배울 수 있습니다. 이 상징적인 게임을 직접 완성해 보는 것은 매우 뜻깊은 경험입니다.
만드는 방법: 9개의 칸을 렌더링합니다. 누구의 차례인지 추적합니다. 칸을 클릭하면 현재 플레이어의 표식을 남기고, 8가지 승리 라인 중 일치하는 것이 있는지 확인합니다. 승자가 나오면 안내 배너를 띄웁니다. 도전 과제: 빈 칸 중 하나를 무작위로 선택해 돌을 놓는 간단한 컴퓨터 AI를 만들어 보세요.
15. 카드 뒤집기 메모리 게임 (Memory Match)
어떤 프로젝트인가요: 뒤집혀 있는 카드 격자에서 카드 두 장을 클릭합니다. 두 카드가 일치하면 그대로 열려 있고, 다르면 다시 뒤집힙니다.
추천하는 이유: 배열 섞기(shuffling), 타이머 처리, 명확한 승리 조건을 다룹니다. "1초 후에 다시 뒤집기" 로직을 직접 구현해 보면 setTimeout의 작동 원리를 확실히 이해하게 됩니다.
만드는 방법: 카드 쌍을 만들기 위해 값 배열을 복사해 두 배로 늘린 뒤, 피셔-예이츠(Fisher-Yates) 셔플 알고리즘으로 섞습니다. 카드를 뒤집어 놓은 상태로 렌더링합니다. 클릭 시 카드를 공개하고, 두 장이 공개되면 비교합니다. 일치하면 그대로 두고, 다르면 약간의 지연 시간 후에 다시 뒤집습니다. 모든 쌍을 맞추면 게임이 끝납니다. 도전 과제: 시도 횟수 카운터와 localStorage를 활용한 최고 기록 저장 기능을 추가해 보세요.
16. 숫자 맞추기 게임 (Number Guessing Game)
어떤 프로젝트인가요: 컴퓨터가 1에서 100 사이의 숫자를 무작위로 지정하면, 플레이어가 숫자를 맞추는 게임입니다. 맞출 때까지 컴퓨터가 "더 높게(Up)" 또는 "더 낮게(Down)"라고 힌트를 줍니다.
추천하는 이유: 직관적이지만 입력값 처리, 비교 연산, 그리고 개발 전반에서 자주 쓰이는 '정답을 맞출 때까지 반복하는' 패턴을 배울 수 있습니다.
만드는 방법: 정답 숫자를 한 번 생성합니다. 플레이어의 추측 횟수를 기록합니다. 숫자를 입력할 때마다 정답과 비교하여 피드백 메시지를 업데이트합니다. 정답을 맞추면 입력을 중단합니다. 도전 과제: 기회를 7번으로 제한하고, 기회를 모두 소진하면 게임 오버 화면을 보여주도록 만들어 보세요.
17. 행맨 (Hangman)
어떤 프로젝트인가요: 컴퓨터가 단어를 선택하면 플레이어가 알파벳을 하나씩 맞춥니다. 틀릴 때마다 행맨 그림이 조금씩 완성됩니다.
추천하는 이유: 문자열 조작에 대한 두려움을 없애주는 프로젝트입니다. "맞춘 글자"를 화면에 표시하는 로직을 짜면서 split, map, join을 한 번에 마스터할 수 있습니다.
만드는 방법: 배열에서 단어 하나를 임의로 선택합니다. 단어의 글자 수만큼 밑줄(_)을 표시합니다. 플레이어가 글자를 선택하면 일치하는 위치의 밑줄을 글자로 바꾸거나, 틀린 경우 오답으로 기록합니다. CSS나 캔버스를 사용해 단계별로 행맨 그림을 그립니다(보통 6번의 기회 제공). 도전 과제: 공개 단어 사전 API를 연동해 단어를 불러와 보세요.
18. 스네이크 게임 (Snake)
어떤 프로젝트인가요: 먹이를 먹으면 몸길이가 늘어나고, 벽이나 자신의 몸에 부딪히면 게임 오버가 되는 클래식 스네이크 게임입니다.
추천하는 이유: 입문 단계의 최종 보스 격 프로젝트입니다. 격자(canvas 또는 CSS), 키보드 이벤트, 게임 루프, 충돌 감지, 그리고 뱀의 성장 메커니즘까지 모두 다루게 됩니다.
만드는 방법: CSS나 <canvas>를 사용해 격자를 렌더링합니다. 뱀의 몸통을 좌표 객체 배열로 저장합니다. 매 프레임마다 뱀을 현재 방향으로 한 칸씩 이동시킵니다. 새로 이동한 머리 좌표가 먹이 위치와 일치하면 뱀의 길이를 늘리고 새로운 먹이를 생성합니다. 머리가 벽이나 자신의 몸통과 부딪히면 게임 오버 처리합니다. 방향키 입력을 감지해 이동 방향을 바꿉니다. 도전 과제: 점수가 높아질수록 게임 속도가 빨라지도록 구현해 보세요.
보너스: 날씨 앱 (Weather App)
어떤 프로젝트인가요: 도시 이름을 입력하면 현재 기온과 날씨 상태를 가져와 보여주는 앱입니다.
추천하는 이유: 외부 공개 API와 비동기(async) 코드를 처음으로 제대로 경험해 볼 수 있습니다. 무료 날씨 API를 활용하면 쉽게 구현할 수 있습니다.
만드는 방법: 무료 API 키를 발급받습니다. 폼을 제출하면 URL에 도시 이름을 넣어 fetch를 호출합니다. 응답을 기다린(await) 후 JSON 데이터를 파싱하여 필요한 정보를 DOM에 업데이트합니다. 잘못된 도시 이름을 입력했을 때 UI가 멈추지 않도록 try/catch 문으로 감싸줍니다. 도전 과제: 5일간의 일기예보를 보여주는 뷰를 추가해 보세요.
시작한 프로젝트를 끝까지 완성하는 방법
위의 목록을 보고 절반만 만들다 포기한다면 아무런 의미가 없습니다. 끝까지 완성하는 데 도움이 되는 몇 가지 팁을 소개합니다.
- 가장 흥미로우면서도 가장 작은 프로젝트부터 시작하세요. 흥미는 시작하게 만들고, 작은 규모는 끝마치게 만듭니다. 그리고 이 과정을 반복하세요.
- 범위가 아니라 시간을 제한하세요. 입문 프로젝트에는 집중해서 1~2시간 정도만 투자해 보세요. 시간 내에 끝내지 못했더라도 그것은 실패가 아니라, 내가 어느 부분에서 막히는지 파악할 수 있는 좋은 데이터가 됩니다.
- 먼저 작동하게 만들고, 꾸미는 것은 나중에 하세요. CSS를 만지기 전에 투박하더라도 제대로 작동하는 버전부터 완성해야 합니다. 디자인만 예쁘고 작동하지 않는 코드보다는, 투박해도 잘 작동하는 코드가 훨씬 낫습니다.
- 튜토리얼 유목민이 되지 마세요. 같은 프로젝트를 위해 서로 다른 튜토리얼 3개를 보는 것은 직접 코드를 한 줄도 쓰지 않고 시간만 낭비하는 것과 같습니다. 완벽하지 않더라도 일단 직접 만들어 보고, 모르는 부분만 콕 집어 찾아보세요.
- 직접 무언가를 만들기 힘든 날에는 기본기를 연습하세요. 버스 안에서 Coddy로 5분 동안 학습하는 것도 훌륭한 공부입니다. 매일 쌓이는 연속 학습 기록(streak)이 큰 힘이 될 것입니다.
마지막 팁이 이 모든 목록을 하나로 묶어줍니다. 프로젝트는 배운 것을 내 것으로 만들어 주지만, 결국 그 바탕에는 기본기가 있어야 합니다. 매일 짧게 학습하는 습관이 까다로운 프로젝트도 어렵지 않게 느껴지도록 만들어 줍니다.
Coddy가 도와드릴 수 있는 부분
이 글은 특정 도구를 사용해 프로젝트를 만들라고 강요하는 것이 아닙니다. 마음에 드는 에디터를 사용하고, 브라우저에서 실행하며, 원하는 곳에 호스팅하시면 됩니다.
Coddy가 책임지는 부분은 그보다 앞선 단계입니다. 바로 자바스크립트 기본기를 탄탄하게 다져서 "퀴즈 앱 만들기"를 시작할 때 ".map이 뭐였지?" 하며 구글링하는 데 두 시간을 허비하지 않도록 돕는 것입니다.
Coddy는 웹, iOS, Android를 통해 수백만 명의 학습자에게 자바스크립트를 가르쳐 왔습니다. 어디서 접속하든 동일한 레슨, 동일한 진도, 그리고 동일한 Bugsy를 만날 수 있습니다.
무료 플랜에서도 별도의 설정 없이 모든 JS 레슨을 학습할 수 있습니다. 몇 시간마다 충전되는 에너지 시스템 외에는 아무런 제한이 없습니다.
무제한 세션과 모든 질문에 답변해 주는 Bugsy를 원하신다면, 다른 플랫폼의 절반 가격 수준인 유료 플랜을 이용하실 수 있습니다. 어떤 방식을 선택하든 기억하세요. 기본기가 먼저고, 프로젝트는 그다음입니다.
Coddy는 브라우저 기반의 짧은 레슨, 경험치(XP), 그리고 연속 학습 기록을 통해 일상 속 틈새시간에 자바스크립트 공부를 녹여낼 수 있도록 도와줍니다.
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
아무것도 만들어본 적이 없는 사람에게 가장 좋은 첫 JavaScript 프로젝트는 무엇인가요?
카운터(counter)입니다. 유치하게 들릴지 모르겠지만, 20줄의 코드로 HTML, CSS, JS의 전체 루프를 다룹니다. 복사-붙여넣기 없이 이 프로젝트를 직접 만들 수 있게 되면, 이 목록에 있는 다른 모든 프로젝트는 동일한 패턴의 변형일 뿐입니다.
이 프로젝트들을 만들기 전에 HTML과 CSS를 알아야 하나요?
각각 조금씩은 알아야 합니다. 작동하는 카운터나 todo 리스트를 만들기 위해 CSS를 아주 잘할 필요는 없습니다. 하지만 기본적인 HTML(divs, buttons, inputs)을 알아야 하고, JS가 요소를 찾을 수 있도록 IDs와 classes를 사용해야 합니다. 나머지는 진행하면서 자연스럽게 배우게 됩니다.
초보자용 JavaScript 프로젝트는 시간이 얼마나 걸려야 하나요?
카운터나 팁 계산기 같은 시작 단계의 프로젝트는 한두 저녁 정도 걸립니다. todo 리스트나 pomodoro 같은 중간 단계의 프로젝트는 주말 정도 걸릴 수 있습니다. 시작 단계의 프로젝트 하나에 일주일 이상 걸린다면 보통 기본기(fundamentals)에서 무언가 빠진 부분이 있다는 뜻입니다.
프로젝트에 도전하기 전에 JavaScript 기본기를 어디서 배울 수 있나요?
Coddy의 JavaScript 코스가 바로 이를 위해 만들어졌습니다. variables와 loops부터 arrays, objects, 그리고 DOM 기본기까지 다루는 5분짜리 레슨들로 구성되어 있습니다. 무료 플랜이 제공되며, 별도의 설정이 필요 없고, 브라우저 내 플레이그라운드를 지원합니다. 이 레슨들과 이 목록에 있는 프로젝트 하나를 병행하면 어느 하나만 하는 것보다 훨씬 빠르게 성장할 수 있습니다.
플랫폼에서 연습하는 것과 프로젝트를 직접 만드는 것의 차이점은 무엇인가요?
연습은 syntax, patterns, common methods 같은 기본기를 빠르게 다져줍니다. 반면 프로젝트는 이러한 조각들을 하나로 연결하고 실제 앱의 복잡한 현실을 다루도록 강제합니다. 가장 빠른 길은 두 가지를 병행하는 것입니다.
프로젝트를 시작만 하고 끝내지 못하고 있습니다. 제가 무엇을 잘못하고 있는 걸까요?
거의 확실하게 주어진 시간에 비해 너무 큰 프로젝트를 선택하고 있기 때문입니다. 단계를 한 단계 낮춰보세요. 만약 todo 앱을 세 개나 중도 포기했다면, 먼저 카운터나 color palette를 시도해 보세요. 작은 것 두 개를 완성하는 것이 큰 것 하나를 흐지부지 만드는 것보다 훨씬 더 큰 원동력을 만들어 줍니다. 그리고 프로젝트를 만들지 않는 날에도 기본기를 리프레시하여, 다시 자리에 앉았을 때 syntax를 처음부터 다시 배우지 않도록 하세요.
