CWN(CHANGE WITH NEWS) - 당신의 자바스크립트 실력을 한 단계 성장시킬 10가지 프로젝트 아이디어

자바스크립트는 웹 브라우저 개발에 널리 사용되는 객체 기반 스크립트 언어이다. 구글에서 얼마나 자주 언어 자습서를 검색하는지 나타내는 지표인 PyPL(PopularitY of Programming Language) ) 인기도순에서 2021년 10월 기준 3위를 기록할 정도로 중요한 프로그래밍 언어이다.

자바스크립트는 웹 개발에 많이 사용되는데, 수많은 기존의 프론트엔드 프레임워크와 결합된 자바스크립트의 백엔드 스택인 익스프레스.js(Express.js)의 등장으로 자바스크립트는 웹 프로그래밍을 계속해서 혁신적으로 변화시킬 것으로 기대된다.

자바스크립트를 학습하는 사람들이 많은데, 자신의 실력을 향상하기 위해 어떤 프로젝트를 진행할지 고민이라면 Make Use Of가 소개한 10가지 프로젝트 아이디어를 참고해보자. 자바스크립트 프로젝트를 진행하며 기술을 향상하고 기본 개념에 익숙하게 될 것이다.

1. 간단한 할 일 목록(to-do list) 앱
자바스크립트를 이용한 할 일 목록을 만들며 CRUD 동작의 기본 논리와 자바스크립트의 이벤트 처리 기능을 학습한다. 기본적으로 태스크를 만들고, 읽고, 업데이트한 다음 삭제하도록 스크립트를 만든다.

이벤트 핸들러를 사용해 모든 태스크를 입력하기 위해 양식을 인스턴스화하고 제출할 때 표시한다. 앱의 기능을 제어하는 자바스크립트 코드가 작동하면 CSS 그리드 표시 방법을 통해 각 작업을 구성할 수 있다. 그런 다음 자바스크립트 조건문과 데이트 메소드를 사용해 우선순위를 지정한다.

필수 사항은 아니지만, 태스크를 로컬 데이터베이스에 저장해 추가 작업을 수행할 수 있다. 예를 들어 각 입력을 로컬 컴퓨터의 JSON 파일에 저장하면 실제 JSON 개체, 배열 또는 NoSQL 데이터베이스를 처리할 때 CRUD 작업을 수행하는 방법을 학습할 수 있다.

2. 심플 타이머
타이머는 자바스크립트를 사용해 빠르게 실행할 수 있는 가장 쉬운 프로젝트 중 하나이다. 매우 기본적인 프로젝트로 들리지만, 이를 통해 자바스크립트를 사용해 일정 시간마다 요소의 상태를 자동으로 변경하는 방법을 학습할 수 있다.

더 특별하게 만들기 위해 스톱워치 기능을 추가할 수 있다. 사용자가 원하는 대로 수정할 수 있는 인스턴스이므로 데이터베이스나 JSON 개체에 항목을 저장할 필요는 없다.

타이머를 코딩하는 동안 자바스크립트 함수에 익숙해지고, 일부 시간 매개 변수를 변환하며 기본적인 수학 변환을 위한 자바스크립트 코드 작성법에 대해 학습한다.

3. 이미지 슬라이드
이미지 슬라이드는 웹사이트의 UI에 시각적으로 가장 매력적인 추가 기능 중 하나이다. 뛰어난 UX와 결합하면 UI에 날렵한 효과를 더하고, 한 이미지 또는 항목을 독특하게 표시할 수 있다.

기능적이고 반응형의 이미지 슬라이드를 만들려면 자바스크립트 루프를 사용해야 한다. DOM에서 이미지를 가져와 빈 자바스크립트 배열에 밀어 넣고, 다음/이전 버튼에 클릭 이벤트를 추가해 이미지를 오른쪽 또는 왼쪽에 연속적으로 표시한다.

이는 유일한 접근법이 아니며, 자신에게 가장 적합한 다양한 방법을 사용할 수 있다. 또 화면에 애니메이션을 추가해 보다 사실적이고 사용하기 쉽게 만들 수도 있다.

4. 웹 계산기
자바스크립트도 다른 프로그래밍 언어와 마찬가지로 수많은 수학적 연산을 지원한다. 웹 계산기를 만들며 사용자 지정 버튼이나 div에 클릭 이벤트를 추가하고 브라우저에 표시되는 응답형 계산기가 되도록 구성하는 방법에 대해 배우게 된다.

아직 익숙하지 않은 경우 자바스크립트 연산자를 사용해 시작할 수 있다. 이후 이벤트 핸들러를 감싸면서 개념을 더 잘 이해할 수 있다.

스크립트를 절차적으로 작성하는 것으로 시작할 수 있는데, 이는 좀 더 장황하다. 계산기가 작동하기 시작하면 이를 함수로 다시 변환하는 것을 고려해라. CSS flexbox로 이 문제를 해결할 수 있다. 그런 다음 HTML을 사용해 값과 연산자를 지정한다. 이후 자바스크립트 루프를 사용해 flexbox의 각 요소에 대한 이벤트 처리 함수를 호출할 수 있다.

5. 이력서 작성기
자바스크립트를 이용해 새로운 정보를 받아 기존 정보를 삭제 또는 업데이트할 수 있는 재사용 가능한 이력서 작성기를 만들 수 있다.

기본적인 논리를 이해하고 나면 이력서 템플릿을 추가로 만드는 것은 어렵지 않다. 따라서 단일 템플릿으로 시작해 이후 눈에 띄는 디자인으로 확장할 수 있다. 물론 다운로드 버튼을 추가해 이력서를 PDF로 받아볼 수도 있다.

이력서 작성 프로젝트는 기본 자바스크립트 CRUD 작업을 이해하는 데 도움이 된다. 루프, 이벤트 핸들러, 조건문 및 자바스크립트 내장 기능의 사용법을 배울 수 있다. 또 사용자 정보를 JSON 객체에 저장해 프로그램이 나중에 참조할 수 있다.

6. 브라우저 확장 기능
시작 프로젝트로 브라우저 확장 기능을 구축하는 것은 복잡해 보일 수 있다. 하지만 기능적인 것을 코딩하기 위한 요구사항을 이해하고 나면 그렇지 않다. 특히 이미 자바스크립트에 대한 기본 지식을 갖추고 있고 어려운 프로젝트를 진행하고자 하는 경우 이 작업을 수행할 가치가 있다.

여러 브라우저에서 작동하도록 확장을 최적화하는 데엔 다소 무리가 있을 수 있지만, 특정 브라우저에 맞는 확장 기능기능부터 시작할 수 있다. 복잡한 것을 만들 필요는 없으며, 간단한 파일 다운로드기나 이미지 크기 조절기 등을 만들 수 있다.

확장 기능을 구축하며 브라우저에서도 설치할 수 있도록 설정해야 한다. 여기에 브라우저가 앱 정보를 인식하고 수락할 수 있도록 mainfest.json 파일에 앱 정보를 지정한다.

7. 예산 관리 애플리케이션
자바스크립트로 DIY 예산 관리 앱을 만들며 DOM 렌더링에 대한 지식과 자바스크립트 연산자를 적용해 실제 문제를 해결하는 방법을 배울 수 있다. 코드를 작성하는 동안 양식 입력을 수집하고 예산에서 비용을 제한다. 코드를 작성해 사용자가 예산을 초과하려고 할 때마다 동으로 경고하도록 설정할 수 있다.

8. 단위 변환기
자바스크립트의 기본 연산자와 조건문을 활용해보고 싶은가? 그런 다음 단위 변환기를 만들면 유연성을 확보할 수 있다.

다양한 단위를 앞뒤로 변환하기 위한 수학 공식을 작성하는 것 외에도, 자바스크립트에서 수학 출력을 조정하고 클라이언트 측에서 렌더링하는 방법을 배울 수 있다. 앱에서 다중 변환을 처리할 가능성이 높으므로, 사용자가 단위를 선택할 수 있는 드롭다운을 만들 수 있다.

그런 다음 논리 구문은 스크립트가 사용자의 선택에 따라 매개 변수를 변환하도록 한다. 단위 변환기는 프로젝트 아이디어 중 가장 쉬운 프로젝트 중 하나이다.

9. 다이어리 앱
자바스크립트를 탑재한 다이어리 앱은 초보자용으로 간단한 프로젝트이다. 노트 작성 앱이므로 활동에 따라 날짜를 지정한다. 따라서 입력 내용을 JSON 객체로 저장한 다음 기록 및 저장된 입력을 추적해야 할 때 참조한다.

다소 복잡할 수 있지만 자동으로 시간을 저장하도록 해 사용자가 수동으로 시간을 선택해야 하는 부담을 줄일 수 있다. 할 일 목록 앱과 마찬가지로 프로젝트를 통해 자바스크립트를 사용해 CRUD 애플리케이션을 제작하는 방법을 배울 수 있다.

10. 벽돌 깨기 게임
바닐라 자바스크립트를 사용해 간단한 게임을 만들 수도 있다. 2D 게임에 익숙하다면 벽돌 깨기 게임을 해본 적이 있거나 본 적이 있을 것이다.

이는 게임 개발로 가는 확실한 방법은 아니지만, 자바스크립트의 많은 기능을 배울 수 있다. 목표는 기능성을 구현하는 것이다. 하지만 블록을 균등하게 정렬하려면 CSS와 자바스크립트를 결합해야 할 수도 있다. 궁극적으로 플레이어의 승패와 그 이후 어떤 일어나는지에 대해 프로그램이 좌우한다.

[저작권자ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]