안녕하세요 🙌🏻 프론트엔드 운영진 장창훈입니다.
이번 미션은 개발 환경 구축과 스터디 진행 방식에 익숙해지실 수 있도록 간단한 to-do list 미션으로 준비했습니다. 무작정 첫 스터디부터 리액트를 다루는 것보다 왜 리액트가 필요한지, 리액트가 없으면 무엇이 불편한지를 알고 본격적인 스터디에 들어가는 것이 리액트를 이해하는 데 있어서 도움이 될 것이고, 아직 Javascript에 익숙하지 않은 분들이 공부 할 수 있는 주차가 되도록 하고 싶다고 생각했습니다.
비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 창의성을 충분히 발휘해보시기 바랍니다. 작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다. 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 것입니다.
막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널에 질문을 남겨 주세요!
- VSCode, Prettier를 이용하여 개발환경을 관리합니다.
- HTML/CSS의 기초를 이해합니다.
- JavaScript를 이용한 DOM 조작을 이해합니다.
- Vanilla.js를 이용한 어플리케이션 상태 관리 방법을 이해합니다.
- 2021년 3월 19일(금)까지
- DOM은 무엇인가요?
- HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
- DOM에서 발생하는 Event는 방법에는 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
- Flexbox Layout은 무엇이며, 어떻게 사용하나요?
- JavaScript가 다른 언어들에 비해 주목할만한 점에는 어떤 것들이 있나요?
- 코드에서 주석을 다는 바람직한 방법은 무엇일까요?
- Vanilla-Todo(결과 화면)을 구현합니다.
- 결과 링크의 화면 디자인 그대로 구현합니다. (CSS 배끼기 🙅🏻♂️)
- CSS의 Flexbox를 이용하여 레이아웃을 구성합니다.
- JQuery, React, Bootstrap 등 외부 라이브러리를 사용하지 않습니다.
- 함수와 변수의 이름은 lowerCamelCase로 짓습니다.
- 코딩의 단위를 기능별로 나누어 Commit 메세지를 작성합니다.
- 외부 폰트(눈누 상업용 무료폰트)로 입맛에 맞게 꾸밉니다.
- 브라우저의
localStorage혹은sessionStorage를 이용하여 다음 번 접속 시에 기존 투두 데이터를 불러옵니다.