[Todo list] 01. 요구사항 확인
프론트엔드 +클론코딩 정리
프론트엔드 구현해보고 싶은 것들:필수제한 - 하나씩 일주일이라는 시간을 둘 것1\. TODO List제한사항순수 자바스크립트로만 구현SPA 로 구현하기SCSS 전처리기 사용Babel 과 Webpack 으로 환경 세팅Pret
velog.io
필수제한 - 하나씩 일주일이라는 시간을 둘 것...?
1. TODO List
제한사항
1. 순수 자바스크립트로만 구현
-> 리액트는 순수 자바스크립트일까?
-> 리액트는 자바스크립트 라이브러리로 jsx 문법을 사용하기 때문에 아님 !
-> vanilla js 만 사용하여 외부라이브러리 없이
2. SPA 로 구현하기
-> 한 페이지로 구현?
-> History API 를 사용하여 라우팅 처리를 하는 방식을 사용. (새로고침 없게 하기 위해서)
---> "순수 자바스크립트"로 SPA를 구현하려면 리액트나 다른 프레임워크를 사용하지 않고, 바닐라 자바스크립트와 DOM API를 활용하여 SPA를 구축해야 합니다.
https://velog.io/@hozzijeong/Vanilla-JS%EB%A1%9C-SPA-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
https://github.com/f-lab-edu/spa-with-vanillaJS
3. SCSS 전처리기 사용
-> 웹 페이지가 커지면서 css 도 복잡해짐
-> css전처리기 -> Sass , Sassy CSS, SCSS
https://chanhuiseok.github.io/posts/web-5/
4. Babel 과 Webpack 으로 환경 세팅
-> 번들러? 였던거같은데 (파일을 합치는거)
5. Prettier & ESLint 적용
-> 코드 형식 이쁘게 만드는거랑 , 문법 오류 찾아주는거
필수구현
입력폼 구현
입력에는 제목과 내용을 입력할 수 있다.
둘중 하나라도 값이 없는경우 사용자에게 알려줘야 한다.
alert 또는 입력창 하단에 문구 노출 방식
첫 페이지가 렌더링 되었을때 제목에 포커스가 맞춰져야 한다.
제출은 키보드의 Enter 를 누르거나 입력 버튼을 누르면 제출이 되어야 한다.
제출 후에는 입력값들이 초기화 되어야 한다.
제출 후 할일 목록에 티켓이 생성되고 티켓에는 제목, 내용, 제출 시간이 표시되어야 한다.
목록 구현
목록은 총 세가지필드가 존재한다. 할일 / 진행중 / 종료
할일 / 진행중 에 등록된 티켓은 수정 및 삭제가 가능하다.
할일 / 진행중 / 종료 로 서로간에 이동이 가능하다.
각 티켓에는 제목, 내용, 제출 또는 수정날짜가 나타나야 한다.
수정버튼을 눌렀을때 수정모달이 띄워져야 한다.
모달 구현
할일 / 진행중에 수정버튼 또는 아이콘을 누르면 모달창이 떠야한다.
모달창은 X 버튼을 누르거나 모달 바깥영역을 선택하거나 키보드의 ESC 를 누르면 닫혀야 한다.
모달창은 입력폼과 동일하게 제목과 내용이 입력가능하다.
각 입력창에는 수정하기 이전의 티켓 내용이 입력되어 있어야 한다.
validator 나 시간은 입력폼과 동일한 스펙을 갖는다.
선택구현
티켓을 드래그 & 드롭으로 이동 가능하다.
수정을 클릭하면 모달이 아닌 현재 티켓내에서 입력폼이 나타나고 수정 가능하다.
순수 자바스크립트로 구현할때 각각 객체지향과 함수지향 형태로 만들어 본다.
리액트의 클래스컴포넌트와 함수형 컴포넌트로 각각 다시 구현해본다.
삭제할때 여러 티켓을 한꺼번에 삭제할 수 있다. (교차 삭제가 아닌 선택한 목록필드 내에서만)
할일 목록을 생성할때 태그를 입력하여 생성할 수 있다.
입력한 태그만 따로 모아보기를 할 수 있다.
타입스크립트 적용
테스트코드작성
여러 구성원의 투두리스트를 관리할 수 있도록 개발
8/7 : 요구사항 확인 / scss 공부
8/8 : js 로 spa 구현 /
8/10 : js 로 spa 구현 - 컴포넌트
8/11 : babel / webpack 공부 및 개발 환경 세팅
8/12 : + Prettier / ESLint 공부 및 개발 환경 세팅
8/13 : babel webpack sass img html prettier eslint 진짜진짜 최종 세팅
8/16 : todolist 개발시작 ...
8/17 : 필수 구현 완료
8/18 : 목록 구현