1주차 미션: Vanilla-Todo

서론

안녕하세요 🙌🏻 프론트엔드 운영진 김선종입니다.

이번 미션은 개발 환경 구축과 스터디 진행 방식에 익숙해지실 수 있도록 간단한 to-do list 미션으로 준비했습니다. 무작정 첫 스터디부터 리액트를 다루는 것보다 왜 리액트가 필요한지, 리액트가 없으면 무엇이 불편한지를 알고 본격적인 스터디에 들어가는 것이 리액트를 이해하는 데 있어서 도움이 될 것이고, 아직 Javascript에 익숙하지 않은 분들이 공부 할 수 있는 주차가 되도록 하고 싶다고 생각했습니다.

비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 창의성을 충분히 발휘해보시기 바랍니다. 작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다. 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 것입니다.

막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널에 질문을 남겨 주세요!

미션

미션 목표

• VSCode, Prettier를 이용하여 개발환경을 관리합니다.
• HTML/CSS의 기초를 이해합니다.
• JavaScript를 이용한 DOM 조작을 이해합니다.
• Vanilla.js를 이용한 어플리케이션 상태 관리 방법을 이해합니다.

기한

• 2021년 9월 24일(금)까지

Key Questions

• DOM은 무엇인가요?
• HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
• <input>태그에서 발생하는 Event에는 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
• Flexbox Layout은 무엇이며, 어떻게 사용하나요?
• JavaScript가 다른 언어들에 비해 주목할만한 점에는 어떤 것들이 있나요?
• 코드에서 주석을 다는 바람직한 방법은 무엇일까요?

필수 요건

• Vanilla-Todo(결과 화면)을 구현합니다.
• 결과 링크의 화면 디자인 그대로 구현해도 좋고, 자신만의 디자인을 적용해도 좋습니다. (CSS 배끼기 🙅🏻‍♂️)
• CSS의 Flexbox를 이용하여 레이아웃을 구성합니다.
• JQuery, React, Bootstrap 등 외부 라이브러리를 사용하지 않습니다.
• 함수와 변수의 이름은 lowerCamelCase로 짓습니다.
• 코딩의 단위를 기능별로 나누어 Commit 메세지를 작성합니다.

선택 요건

• 외부 폰트(눈누 상업용 무료폰트)로 입맛에 맞게 꾸밉니다.
• 브라우저의 localStorage 혹은 sessionStorage를 이용하여 다음 번 접속 시에 기존 투두 데이터를 불러옵니다.

링크 및 참고자료

공부 자료

• HTML/CSS 기초
• HTML 태그
• FlexBox 가이드
• JS를 통한 DOM 조작
• localStorage, sessionStorage에 대해