사전 필요 지식 조사 및 계획, 일정

[hochan222]

계획

• 8월 20일 금요일
  • 기본 환경 설정 및 Home 화면 구현
• 8월 21일 토요일
  • Alarm 화면, memo 화면 구현
• 8월 22일 일요일
  • Photo 화면 구현
• 8월 23일 월요일
  • 문서 작성 및 테스트 코드 작성

일정

• 8월 20일 금요일
  • 13시 30분 ~ 14시 00분: 👀 subject 이해
  • 14시 00분 ~ 14시 40분: 📘 REQUIREMENTS.md 작성
  • 14시 40분 ~ 14시 50분: 🚀 웹 개발 환경 구축
    • Package Manager
    • Code Formatter & Linter
    • Typescript basic template 만들기
    • tsconfig.json을 설정해보자
    • 웹팩 관련 정리 필요
    • TOAST UI 코딩 컨벤션
    • Google JavaScript Style Guide
  • 14시 50분 ~ 15시 20분
  • 16시 10분 ~ 17시 40분
    • 기본 틀 만들기
    • SPA 란?
  • 17시 40분 ~ 20시 30분 🏡홈 화면 구현
    • Navigation, Storage, 아래 3개의 앱 렌더링
  • 21시 30분 ~ 22시 00분: Drag and Drop
• 8월 22일 토요일
  • 11시 00분 ~ 12시 30분
  • 15시 00분 ~ 16시 00분: 👆Drag and Drop
  • 16시 00분 ~ 18시 15분: 🕵️‍♂️ SPA Route (History API) ~ Reload
  • 19시 00분 ~ 19시 20분: 🕵️‍♂️ SPA Route (History Back)
  • 20시 00분 ~ 23시 10분: 🔔 Alarm Input
  • 23시 10분 ~ 00시 00분: 🔔 Alarm
• 8월 23일 일요일
  • 00시 00분 ~ 3시 30분: 🔔 Alarm
  • 12시 40분 ~ 14시 40분: 📋 Memo
  • 14시 40분 ~ 15시 50분 : 🏙 Photo
  • 17시 40분 ~ 20시 30분: 🏙 Photo 가로 스크롤 구현 및 사진 비율 맞추기
    • Typescript padStart polyfill
    • [Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations.
    • 가로 스크롤 앨범을 만들어보자.
  • 21시 30분 ~ 22시 00분: 🏙 Photo 사진 클릭시, 해당 사진 렌더링
    • box-sizing: border-box;을 설정하면, border 두께가 box 크기 안쪽으로 포함된다.
    • position 속성을 fixed 또는 absoute로 값을 주면 지정된 노드는 전체 노드에서 분리된다. 즉, 전체 노드에 걸쳐 Reflow 비용이 들지 않으며, 해당 노드의 Repaint 비용만 들어가게 된다.
  • 22시 00분 ~ 24시 00분: 🧐 Semantic Tags 적용
    • DOCTYPE은 무엇을 하나요?
    • HTML5 Tags
    • smartphone emulation
• 8월 24일 월요일
  • 00시 00분 ~ 00시 45분: 📝 문서 작성
  • 01시 30분 ~ 01시 45분: 📋 Memo 이벤트 미등록 버그 해결
  • 01시 45분 ~ 02시 30분: 🕷 점검 및 webpack 공부, 🏙 Photo 기능 추가
  • 02시 30분 ~ 04시 00분 : 🔍 cypress
  • 12시 30분 ~ 15시 00분: 📝 문서 작성
  • 18시 00분 ~ 19시 50분: 📝 문서 작성 및 refactoring

참고

• flexbox로 만들 수 있는 10가지 레이아웃
• inline vs inline-block vs block
• google chrome p tag source