COM,MA(컴공-호크마) 프론트엔드 스터디 첫번째 과제입니다
안녕하세요🙂 호크마-컴공 스터디 기획 겸 프론트엔드 스터디 멘토를 맡은 함초롬입니다.
첫번째 과제는 프론트엔드 웹 개발 공부의 클래식한 과제 To do 앱 만들기를 준비했습니다.
시험기간이고, 첫 과제다 보니 난이도를 하향 조정했습니다. 그래도 처음 개발하시는 것이니 어려울 수 있습니다. 전혀 문제되지 않습니다❗ 처음은 원래 다 막막하고 어렵습니다. 이 스터디 후반부에는 혼자서도 프로젝트를 진행할 수 있도록 최대한 돕겠습니다.👏
리액트를 본격적으로 다루기 전에 천천히 html, css, js에 익숙해지는 시간을 가지면 좋겠다고 생각해 첫번째와 두번째 과제는 바닐라 자바스크립트를 이용한 투 두 앱 구현으로 결정했습니다.
개발에는 정답이 없습니다. 각자 고민하고 각자가 생각하는 가장 좋은 방식으로 본 과제를 구현해주시기 바랍니다.
모르는 게 생기면 먼저 고민하고 공부해 본 다음 이후에도 잘 모르겠으면 디스코드 질문방에 질문합니다. 모르는 내용을 정리해 스터디 시간에 공유하고 같이 답을 찾아갑니다.
VSCode코드 에디터 사용에 익숙해집니다.- 코드 포매터가 무엇인지 알고,
Prettier를 도입해 사용합니다. (참고자료) - git을 사용한 버전 관리에 익숙해집니다.
- html, css, 바닐라 js의 기초와 DOM, DOM 조작을 이해합니다.
- html, css, 바닐라 js를 사용해 요구사항에 맞춰 개발합니다.
vercel을 사용한 배포 방법을 알아보고 배포합니다.
- 외부 라이브러리(JQuery 등) 사용 없이 바닐라 자바스크립트를 사용해 To Do App을 위와 같이 구현합니다. (결과화면)
- 할 일을 입력한 뒤 추가 버튼을 클릭하거나, 엔터를 눌렀을 때 아래에 할 일이 추가되도록 구현합니다.
- 할 일을 눌렀을 때 완료되었다는 의미로 글 중간에 줄이 그어집니다. 할 일 텍스트를 클릭했을 때, 텍스트 중간에 그어진 줄 여부가 토글되도록 구현합니다.
- 할 일 텍스트 옆의 X버튼을 눌렀을 때 할 일이 삭제되도록 구현합니다.
- 기본 포맷은 지켜주시되, 스타일링은 자유롭게 해도 좋습니다. (색, 폰트 등)
- 주어진 파일 이외에 새 파일을 만들지 않습니다.
- 개발을 하다 기억이 안 나거나 잘 모르겠는 부분은 추가로 공부하고 정리합니다.
- git commit 할 때 한번에 하는 것이 아니라 기능별로 commit 합니다.
VSCode와Prettier을 사용합니다. (저장 시 format 되도록 설정합니다.)vercel을 사용해 배포합니다.
- DOM은 무엇이고, DOM 조작은 어떻게 하는 것일까요?
- 변수명은 어떻게 짓는 것이 좋을까요?
- git commit 단위를 기능별로 쪼개는 이유는 무엇일까요?
- 코드 포매터를 사용하는 이유는 무엇일까요?
- 본 레포지토리를 fork합니다.
- fork된 레포지토리를
git clone을 통해 로컬에 다운받습니다. - 코드 에디터는
VSCode를 사용해 작업합니다. - 브랜치를 자기 이름으로 판 다음 해당 브랜치에서 작업합니다. (예:
git checkout -b chorom) - 로컬에서 개발한 작업물을 원격 레포지토리에
push합니다. - 완성한 결과물을 본 레포지토리에
pull request로 보냅니다. - 코드 리뷰를 받고 수정합니다.
제목: [과제 {과제번호}] {이름} 과제 제출합니다
내용:
배포한 링크를 첨부합니다.
과제를 하며 배운 내용, 고민한 내용, 어려웠던 내용, 추가로 구현하고 싶은 내용 등을 정리합니다.
생각해 볼 질문에 대한 답도 생각해봅니다.
2021년 5월 4일 화요일 저녁 7시