[프로젝트 추천 #1] Todo 앱 만들기는 그만! 재미있고 효과적으로 학습할 수 있는 프로젝트 NOTES APP

 

HTML, JavaScript, CSS 부터 React, Angular, Vue까지 프론트엔드 공부를 할 때 보면 튜토리얼처럼 Todo App을 만드는 일이 많습니다. 

하지만 Todo App이 어렵다! 혹은 지겹다! 하는 분들에게 좀 더 재밌고 점진적으로 학습할 수 있는 15개의 App Ideas를 소개합니다.

 

이 앱은 :

• 코딩 스킬을 향상시키기에 효과적입니다.
• 새로운 기술을 경험하기에 좋습니다.
• 취업/이직을 고려중이라면 포트폴리오로 쓰기에 좋습니다.
• 튜토리얼의 예제로 사용하기에 좋습니다.
• 비교적 쉽게 완성할 수 있고, 새로운 기능을 붙일수도 있습니다.

각 프로젝트의 스펙은 다음을 포함하고 있습니다.

• 분명한 목적이 있습니다.
• To-Do앱과 같이 틀에 갇힌 가이드라인이 아니라, 보다 자유롭습니다.
• 기초 프로젝트를 심화시키고, 코딩스킬 또한 향상시킬 수 있는 추가할만한 기능들
• 프로젝트를 완성시키기 위해 도움되는 자료들을 제공합니다.

난이도

- 모든 프로젝트들은 프로젝트를 완성시키기 위한 지식과 경험에 따라 3개의 레벨로 나눠져 있습니다.

• 초급
  - 학습 초기단계에 있는 개발자들.
  - 일반적으로 user-facing application을 만드는데 중점을 둡니다.
  
  
• 중급
  - 기본기를 어느정도 익힌 분들
  - UI/UX에 익숙하신 분들
  - 개발 도구를 사용하는데 익숙하신 분들
  - API 서비스를 사용하여 앱을 만들 줄 아시는 분들
  
  
• 고급
  - 위의 모든 것을 갖추신 분
  - Backend application과 Database 서비스 구현과 같은 고급 기술을 배우고 있으신 분

---

프로젝트

1. NOTES APP [초급]

설명

• 노트 생성 및 저장할 수 있는 앱

기능

• 사용자는 노트를 생성할 수 있습니다.
• 사용자는 노트를 수정할 수 있습니다.
• 사용자는 노트를 삭제할 수 있습니다.
• 브라우저 창을 닫을 때 노트는 저장되고, 브라우저를 다시 켜면 데이터가 복구됩니다.

추가할만한 기능들

• 사용자는 Markdown 포맷으로 노트를 생성하거나 수정할 수 있고, 저장할 때 HTML로 변환됩니다.
• 노트를 생성한 날짜를 확인하는 기능

도움될만한 자료들

1. localStorage
2. Markdown Guide
3. Marked - A markdown parser

예제 프로젝트

Markdown Notes built with Angular on Codepen