Original article: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
프로그래밍 언어를 공부하기 가장 좋은 방법은 프로젝트를 해보는 것입니다.
누구나 쉽게 해볼 수 있는 40가지의 바닐라 자바스크립트, 리액트, 타입스크립트 프로젝트 튜토리얼을 만들었습니다.
먼저 영상을 보고 프로젝트를 만든 뒤 이를 자신만의 방법으로 다시 만들어보는 걸 추천합니다. 새로운 기능을 추가해 보거나 다른 방법을 사용해서 구현해 보세요.
이렇게 함으로써 개념을 잘 이해했는지 확인할 수 있을 것입니다.
아래의 리스트에서 프로젝트 이름을 클릭하면 해당 섹션으로 이동합니다.
바닐라 자바스크립트 프로젝트
- Color Flipper 만들기
- 카운터 만들기
- 리뷰 캐러셀 만들기
- 반응형 내비게이션 바 만들기
- 사이드바 만들기
- 모달 만들기
- FAQ 페이지 만들기
- 식당 메뉴판 만들기
- 비디오 배경 만들가
- 스크롤바를 따라 움직이는 내비게이션 바 만들기
- 서로 다른 내용을 보여주는 탭 만들기
- 카운트다운 시계 만들기
- 나만의 Lorem ipsum 만들기
- 식료품 리스트 만들기
- 이미지 슬라이더 만들기
- 가위바위보 게임 만들기
- 사이먼 게임 만들기
- 플랫포머 게임 만들기
- 두들 점프 만들기
- 플래피 버드 만들기
- 메모리 게임 만들기
- 두더지 잡기 게임 만들기
- 커넥트 포 게임 만들기
- 뱀 게임 만들기
- 스페이스 인베이더 게임 만들기
- 프로거 게임 만들기
- 테트리스 게임 만들기
리액트 프로젝트
- 리액트 훅을 사용해 틱택토 게임 만들기
- 리액트 훅을 사용해 테트리스 게임 만들기
- 생일 알림 앱 만들기
- 여행 페이지 만들기
- 아코디언 메뉴 만들기
- 포트폴리오 만들기
- 리뷰 슬라이더 만들기
- 컬러 제너레이터 만들기
- Stripe 결제 페이지 만들기
- 장바구니 페이지 만들기
- 칵테일 검색 페이지 만들기
타입스크립트 프로젝트
바닐라 자바스크립트 프로젝트
아직 자바스크립트 기초 내용이 낯설다면, 프로젝트를 진행하기 전 이 강의를 먼저 보는 것을 추천드립니다.
아래 대부분의 스크린샷은 이곳에서 확인 가능합니다.
Color Flipper 만들기
John Smilga의 튜토리얼에서는 랜덤으로 배경색을 바꿀 수 있는 Color Flipper를 어떻게 만드는지 설명하고 있습니다. Color Flipper는 DOM을 처음 연습하기에 좋은 프로젝트입니다.
DOM을 공부해야 하는 이유에 대해 Leonardo Maldonado의 글에서는 이렇게 설명하고 있습니다.
DOM을 다루는 방법을 알게 되는 순간 무한한 가능성이 열립니다. 새로고침을 하지 않아도 페이지에서 데이터를 업데이트해 주는 애플리케이션을 만들 수 있습니다. 사용자가 커스터마이즈 할 수 있는 애플리케이션을 만들 수도 있고, 새로고침 없이 페이지의 레이아웃을 변경할 수도 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- arrays
- document.getElementById()
- document.querySelector()
- addEventListener()
- document.body.style.backgroundColor
- Math.floor()
- Math.random()
- array.length
시작하기 앞서 John이 모든 프로젝트의 기본 파일에 액세스하는 방법을 설명해 주는 이 영상을 먼저 보는 걸 추천합니다.
카운터 만들기
John Smilga의 튜토리얼에서는 양수인지 음수인지에 따라 색상이 바뀌는 카운터를 만드는 방법에 대해 설명하고 있습니다.
이 프로젝트를 통해 DOM을 더 연습해 볼 수 있으며, 뽀모도로 시계와 같은 다른 프로젝트에서도 이 간단한 카운터를 사용할 수 있을 것입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelectorAll()
- forEach()
- addEventListener()
- currentTarget 속성
- classList
- textContent
리뷰 캐러셀 만들기
이 튜토리얼에서는 버튼을 누르면 랜덤으로 리뷰를 보여주는 리뷰 캐러셀을 만드는 방법에 대해 설명합니다.
이 기능은 고객 후기를 보여주는 전자 상거래 사이트나 개인 포트폴리오에서 유용하게 쓰일 수 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 객체
- DOMContentLoaded
- addEventListener()
- array.length
- textContent
반응형 내비게이션 바 만들기
이 튜토리얼에서는 작은 전자 기기에서 햄버거 메뉴로 바뀌는 반응형 내비게이션 바를 만드는 법에 대해 소개하고 있습니다.
웹 개발자에게 반응형 웹 사이트를 만들 줄 아는 것은 무척 중요합니다. 이 기능은 많은 웹 사이트에서 사용되고 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelector()
- addEventListener()
- classList.toggle()
사이드바 만들기
이 튜토리얼에서는 애니메이션과 함께 사이드바를 만드는 방법에 대해 소개하고 있습니다.
개인 웹 사이트에 추가할 수 있는 아주 멋진 기능입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelector()
- addEventListener()
- classList.toggle()
- classList.remove()
모달 만들기
이 튜토리얼에서는 사용자들이 웹 사이트에서 특정한 무언가를 하거나 볼 때 사용되는 모달창을 만드는 법에 대해 소개합니다.
모달 창이 사용되는 좋은 예시는 사용자가 사이트에서 무언가를 변경하고 저장하지 않은 채 다른 페이지로 이동할 때의 경우입니다. 변경 사항을 저장하지 않으면 정보가 삭제될 수 있다고 경고하는 모달 창을 만들 수 있는 것이죠.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelector()
- addEventListener()
- classList.add()
- classList.remove()
FAQ 페이지 만들기
이 튜토리얼에서는 FAQ(자주 묻는 질문) 페이지를 만드는 방법에 대해 소개합니다. 사용자들에게 사업 내용을 알려주고 유기적인 검색 결과를 통해 웹 사이트로 유입시키고자 할 때 사용됩니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelectorAll()
- addEventListener()
- forEach()
- classList.remove()
- classList.toggle()
식당 메뉴판 만들기
이 튜토리얼에서는 레스토랑의 메뉴를 필터링해주는 페이지를 만드는 법에 대해 소개합니다. 재미있는 이 프로젝트를 통해 map, reduce, filter와 같은 고차 함수에 대해서도 학습할 수 있습니다.
Yazeed Bzadough는 이 글에서 고차 함수를 다음과 같이 언급하고 있습니다.
고차 함수의 가장 큰 이점은 엄청난 재사용성에 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 배열
- 객체
- forEach()
- DOMContentLoaded
- map, reduce, filter
- innerHTML
- includes 메서드
비디오 배경 만들기
이 튜토리얼에서는 play, pause 기능을 이용해 영상 배경을 만드는 방법에 대해서 소개하고 있습니다. 많은 웹 사이트에서 찾아볼 수 있는 기능이죠.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.querySelector()
- addEventListener()
- classList.contains()
- classList.add()
- classList.remove()
- play()
- pause()
스크롤바를 따라 움직이는 내비게이션 바 만들기
이번 튜토리얼에서는 스크롤 할 때 내려가다가 특정 높이에서 멈추는 내비게이션 바를 구현하고 있습니다.
많은 전문 웹 사이트에서 사용하고 있는 인기 기능입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- document.getElementById()
- getFullYear()
- getBoundingClientRect()
- slice 메서드
- window.scrollTo()
서로 다른 내용을 보여주는 탭 만들기
이 튜토리얼은 서로 다른 내용을 보여주는 탭을 만드는 방법에 대해 소개하고 있습니다. 싱글 페이지 애플리케이션(SPA)을 만들 때 유용한 기능이죠.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- classList.add()
- classList.remove()
- forEach()
- addEventListener()
카운트다운 시계 만들기
이번 튜토리얼은 카운트다운 시계를 만드는 방법에 대해 소개합니다. 전자 상거래 사이트에서 새로운 제품이 출시되거나 할인이 종료될 때 사용될 수 있는 기능이죠.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- getFullYear()
- getMonth()
- getDate()
- Math.floor()
- setInterval()
- clearInterval()
나만의 Lorem ipsum 만들기
이번 튜토리얼에서는 나만의 Lorem ipsum을 만드는 방법에 대해 배울 수 있습니다.
Lorem ipsum은 웹 사이트에서 사용할 수 있는 더미 텍스트입니다. 이 프로젝트를 통해 여러분의 창의성을 뽐내고 자신만의 더미 텍스트를 만들어 보세요.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- parseInt()
- Math.floor()
- Math.random()
- isNaN()
- slice 메서드
- event.preventDefault()
식료품 리스트 만들기
이 튜토리얼에서는 장바구니 리스트에서 아이템을 추가하고 삭제할 수 있는 방법과 간단한 CRUD(Create, Read, Update, Delete) 앱을 만드는 방법에 대해 소개합니다.
CRUD는 풀스택 애플리케이션에서 굉장히 중요한 부분을 차지합니다. 이 기능이 없으면 여러분은 SNS에서 게시글을 수정하거나 삭제하는 것과 같은 일을 할 수 없을 것입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- DOMContentLoaded
- new Date()
- createAttribute()
- setAttribute()
- appendChild()
- filter()
- map()
이미지 슬라이더 만들기
이번 튜토리얼에서는 어떤 사이트에도 추가 가능한 이미지 슬라이더를 만드는 방법에 대해 소개합니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- querySelectorAll()
- addEventListener()
- forEach()
- if/else statements
가위바위보 게임 만들기
이 튜토리얼에서는 Tenzin이 가위바위보 게임을 만드는 방법을 소개합니다. DOM 연습을 추가적으로 해볼 수 있는 재미있는 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- addEventListener()
- Math.floor()
- Math.random()
- switch문
사이먼 게임 만들기
이 튜토리얼에서는 Beau Carnes가 사이먼 게임을 만드는 방법에 대해 소개합니다. 게임 속 다양한 요소들과 각각의 기능을 구현하는 방법에 대해 생각해 볼 수 있는 좋은 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- querySelector()
- addEventListener()
- setInterval()
- clearInterval()
- setTimeout()
- play()
- Math.floor()
- Math.random()
플랫포머 게임 만들기
이 튜토리얼에서는 Frank Poth가 플랫포머 게임을 만드는 방법에 대해 소개합니다. 이번 프로젝트를 통해 객체 지향 프로그래밍의 원칙과 모델, 뷰, 컨트롤러로 구성된 소프트웨어 패턴(MVC Pattern)에 대해 학습할 수 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- this 키워드
- for 반복문
- switch문
- OOP 원칙
- MVC 패턴
- 캔버스 API
두들 점프와 플래피 버드 게임 만들기
Ania Kubox는 이 영상 시리즈에서 두들 점프와 플래피 버드 게임을 만드는 방법에 대해 소개합니다.
게임을 만들어보면 자바스크립트를 재미있게 학습하면서 자주 쓰이는 자바스크립트 메서드를 연습할 수 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- createElement()
- forEach()
- setInterval()
- clearInterval()
- removeChild()
- appendChild()
- addEventListener()
- removeEventListener()
Ania Kubow와 7개의 자바스크립트 게임 만들기
Ania Kybow는 이 강의에서 재미있는 게임 일곱가지를 소개하고 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- for 반복문
- onclick 이벤트
- 화살표 함수
- sort()
- pop()
- unshift()
- push()
- indexOf()
- includes()
- splice()
- concat()
리액트 프로젝트
아직 리액트 기초 내용이 익숙하지 않다면 프로젝트를 진행하기 전에 이 강의를 먼저 듣는 것을 추천합니다.
리액트 훅을 사용해 틱택토 게임 만들기
Per Harald Borgen는 이 프리코드캠프 글에서 Thomas Weibenfalk가 제공한 틱택토 게임 튜토리얼에 대해 설명하고 있습니다. Scrimba의 유튜브 채널에서 영상 강의를 확인해보세요.
리액트 기초를 익히고 훅을 연습하기에 좋은 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- useState()
- import / export
- JSX
리액트 훅을 사용해 테트리스 만들기
이번 튜토리얼에서는 Thomas Weibenfalk가 리액트 훅과 styled components를 사용해 테트리스 게임을 구현합니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- useState()
- useEffect()
- useRef()
- useCallback()
- styled components
생일 알림 앱 만들기
John Smilga의 강의에서는 생일 알림 앱을 만드는 방법에 대해 학습할 수 있습니다. 리액트 기초를 학습하고 훅을 연습하기에 좋은 프로젝트입니다.
프로젝트 파일 설정을 위해 먼저 John의 영상을 보는 것을 추천합니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- useState()
- import / export
- JSX
- map()
여행 페이지 만들기
이 튜토리얼에서는 사용자가 관심 없는 여행지를 삭제할 수 있는 여행 사이트를 만드는 방법에 대해 소개합니다.
이 프로젝트를 통해 리액트 훅과 async/await 문법을 연습할 수 있습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- try...catch문
- async/await
- useEffect()
- useState()
아코디언 메뉴 만들기
이번 튜토리얼에서는 Q&A 아코디언을 만드는 방법에 대해 설명합니다. 사용자에게 혁신적인 방법으로 콘텐츠를 보여줄 때 유용한 방식입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 리액트 아이콘
- useState()
- map()
포트폴리오 만들기
이번 튜토리얼에서는 가짜 포트폴리오 웹 페이지에서 탭을 만드는 방법에 대해 설명합니다. 탭은 싱글 페이지 애플리케이션에서 서로 다른 내용을 보여줄 때 유용하게 사용됩니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- async/await
- 리액트 아이콘
- useEffect()
- useState()
리뷰 슬라이더 만들기
이번 튜토리얼에서는 몇 초마다 새로운 리뷰를 보여주는 리뷰 슬라이더를 만드는 법에 대해 설명합니다.
리뷰 슬라이더는 전자 상거래 사이트나 포트폴리오에 넣을 수 있는 훌륭한 기능입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 리액트 아이콘
- useEffect()
- useState()
- map()
컬러 제너레이터 만들기
이 튜토리얼을 통해 컬러 제너레이터를 만드는 방법에 대해서 학습할 수 있습니다. 훅과 setTimeout 함수를 연습하기에 좋은 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- setTimeout()
- clearTimeout()
- useEffect()
- useState()
- try...catch문
- event.preventDefault()
Stripe 결제 페이지 만들기
이 튜토리얼에서는 Stripe 사의 결제 페이지를 구현하는 방법에 대해 설명합니다. 리액트 컴포넌트를 사용해 상품 랜딩 페이지를 디자인하는 방법을 연습해보기 좋은 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 리액트 아이콘
- useRef()
- useEffect()
- useState()
- useContext()
장바구니 페이지 만들기
이 튜토리얼에서는 상품을 추가하고 삭제할 수 있는 장바구니 페이지를 구현합니다. useReducer 훅을 맛보기에 좋은 프로젝트가 될 것입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- map()
- filter()
<svg>요소- useReducer()
- useContext()
칵테일 검색 페이지 만들기
이 튜토리얼에서는 칵테일 검색 페이지를 구현합니다. 이 프로젝트를 통해 리액트 라우터 사용 방법에 대해 익힐 수 있습니다.
리액트 라우터는 웹 사이트 내에서 이동하고 소개 페이지 혹은 연락 페이지와 같은 다른 컴포넌트를 보여줄 수 있도록 해주는 기능입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
<Router><Switch>- useCallback()
- useContext()
- useEffect()
- useState()
타입스크립트 프로젝트
리액트와 타입스크립트로 퀴즈 앱 만들기
Thomas Weibenfalk는 이 튜토리얼에서 리액트와 타입스크립트로 퀴즈 앱을 만드는 방법에 대해 소개합니다. 타입스크립트의 기본 내용을 학습하기에 좋은 프로젝트입니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- React.FC
- styled components
- dangerouslySetInnerHTML
타입스크립트로 알카노이드 게임 만들기
이번 튜토리얼에서는 타입스크립트로 클래식 게임인 알카노이드 게임을 만드는 방법에 대해 설명합니다. 이번 프로젝트 역시 타입스크립트의 기본 내용을 학습하기에 좋습니다.
이 프로젝트에서 다루는 주요 개념은 다음과 같습니다:
- 타입
- 클래스
- 모듈
- HTMLCanvasElement
지금까지 바닐라 자바스크립트, 리액트, 타입스크립트로 해볼 수 있는 40가지의 프로젝트를 소개해 보았습니다. 도움이 되었길!
즐거운 코딩하세요!