/FE-AppYouMustCreate

프론트엔드 개발자라면 만들어야 하는 앱 8선:white_check_mark:

Primary LanguageJavaScriptMIT LicenseMIT

App you must be created 8

App 1. Trello Clone

  • 라우팅 이해하기 1
  • 드래그 & 드랍 API 이해하기 1
  • 새로운 객체 만들기(게시판, 목록들, 카드들)
  • 입력 데이터에 대한 유효성 검사하기 1
  • 로컬 스토리지에 데이터를 저장하거나 가져오기 1
  • 데이터베이스 사용하기 : 생성 및 조회, 수정, 삭제하기 1



App 2. User Admin Dashboard

  • 사용자를 생성하고 관리하기
  • 데이터베이스 사용하기 : 생성 및 조회, 수정, 삭제하기 2
  • 입력 데이터에 대한 유효성 검사하기 2 & form 다루기



App 3. Cryptocurrency Tracker (Native Mobile App)

  • 네이티브 앱의 작동 방식 이해 1
  • API로 데이터 가져오기
  • 기본적인 레이아웃의 작동 방식 이해 1
  • 모바일 시뮬레이터의 작동 방식 이해



App 4. Setup Your Very Own Webpack Config From Scratch

  • ES7을 ES5로 컴파일하기
  • .jsx, .js, .vue 확장자의 컴파일을 통해 로더를 이해하기
  • 웹팩 개발 서버를 설정하고 및 핫 모듈 리로드하기
    • vue-cli와 create-react-app까지 모두 사용해보기
  • 웹팩 프로젝트를 배포하기
    • 프로덕션을 위한 빌드를 생성
    • Heroku, now.sh 또는 Github Pages 등을 사용하여 배포하기
  • 선호하는 전처리기(SCSS, Less, Stylus 등)로 순수 CSS 컴파일 설정하기
  • 웹팩으로 이미지 및 SVG 사용하기



App 5. Hacker News Clone

  • Hacker News API를 활용하기
  • SPA(Single-Page App) 개발하기
  • 댓글 및 프로필에 대한 작성, 조회 기능 구현하기
  • 라우팅 이해하기 2



App 6. To-do App

  • 자바스크립트 기초 이해하기
  • 할 일들(To-do Tasks)을 생성할 수 있게 개발하기
  • 입력 데이터에 대한 유효성 검사하기 3
  • 할 일들에 대한 필터링(완료, 진행중, 전체 등) 기능 개발하기
  • 로컬 스토리지에 데이터를 저장하거나 가져오기 2



App 7. A Sortable Drag and Drop List

  • 드래그 & 드랍 API 이해하기 2
  • 풍부한 사용자 인터페이스(Rich UI) 개발하기
    • 페이지마다 다른 수준의 상호작용과 사용자에게 대화형, 스타일링, 가용성이 뛰어난 인터페이스를 제공하기



App 8. A Messenger Clone (Native App)

  • 웹 소켓 사용하기(실시간 메세지 전송)
  • 네이티브 앱의 작동 방식 이해 2
  • 기본적인 레이아웃의 작동 방식 이해 2
  • 네이티브 앱에서의 라우팅 이해하기



References

Page