프론트엔드 +클론코딩 정리

김현주·2022년 9월 1일

블록체인

목록 보기

2/3

프론트엔드 구현해보고 싶은 것들:
필수제한 - 하나씩 일주일이라는 시간을 둘 것

1. TODO List

제한사항

순수 자바스크립트로만 구현
SPA 로 구현하기
SCSS 전처리기 사용
Babel 과 Webpack 으로 환경 세팅
Prettier & ESLint 적용

필수구현

입력폼 구현

입력에는 제목과 내용을 입력할 수 있다.
둘중 하나라도 값이 없는경우 사용자에게 알려줘야 한다.
alert 또는 입력창 하단에 문구 노출 방식
첫 페이지가 렌더링 되었을때 제목에 포커스가 맞춰져야 한다.
제출은 키보드의 Enter 를 누르거나 입력 버튼을 누르면 제출이 되어야 한다.
제출 후에는 입력값들이 초기화 되어야 한다.
제출 후 할일 목록에 티켓이 생성되고 티켓에는 제목, 내용, 제출 시간이 표시되어야 한다.

목록 구현

목록은 총 세가지필드가 존재한다. 할일 / 진행중 / 종료
할일 / 진행중 에 등록된 티켓은 수정 및 삭제가 가능하다.
할일 / 진행중 / 종료 로 서로간에 이동이 가능하다.
각 티켓에는 제목, 내용, 제출 또는 수정날짜가 나타나야 한다.
수정버튼을 눌렀을때 수정모달이 띄워져야 한다.

모달 구현

할일 / 진행중에 수정버튼 또는 아이콘을 누르면 모달창이 떠야한다.
모달창은 X 버튼을 누르거나 모달 바깥영역을 선택하거나 키보드의 ESC 를 누르면 닫혀야 한다.
모달창은 입력폼과 동일하게 제목과 내용이 입력가능하다.
각 입력창에는 수정하기 이전의 티켓 내용이 입력되어 있어야 한다.
validator 나 시간은 입력폼과 동일한 스펙을 갖는다.

선택구현

티켓을 드래그 & 드롭으로 이동 가능하다.
수정을 클릭하면 모달이 아닌 현재 티켓내에서 입력폼이 나타나고 수정 가능하다.
순수 자바스크립트로 구현할때 각각 객체지향과 함수지향 형태로 만들어 본다.
리액트의 클래스컴포넌트와 함수형 컴포넌트로 각각 다시 구현해본다.
삭제할때 여러 티켓을 한꺼번에 삭제할 수 있다. (교차 삭제가 아닌 선택한 목록필드 내에서만)
할일 목록을 생성할때 태그를 입력하여 생성할 수 있다.
입력한 태그만 따로 모아보기를 할 수 있다.
타입스크립트 적용
테스트코드작성
여러 구성원의 투두리스트를 관리할 수 있도록 개발

2. 쇼핑몰 장바구니 구현

제한사항

클래스형태로 구현
순수 자바스크립트만 사용
SPA 처럼 구현
page 이동 구현
반응형
SCSS 전처리기 사용
Babel 과 Webpack 으로 환경 세팅
Prettier & ESLint 적용

구현사항

쇼핑 아이템 목록 페이지 구현
아이템의 상세페이지 구현
상세페이지 내에서 옵션, 갯수 선택가능
옵션과 아이템 선택 갯수에 따라 상품의 총액 계산 노출
장바구니 담기 구현
아이템 상세에서 장바구니에 담기를 클릭하면 상단에 구현된 장바구니 아이콘옆에 담긴 상품 갯수 노출
장바구니 목록 페이지 구현
장바구니 목록에는 아이템명과 아이템의 옵션 , 수량, 개별금액, 총 금액 노출
총 3개의 페이지 구현. 목록 / 상세 / 장바구니
금액은 노출될때 천원단위 콤마 표시
상세페이지에서 담기 버튼은 옵션과 수량이 선택되지않으면 비활성화

선택사항

상품목록 필터기능 구현
상품목록 정렬기능 구현
전 페이지에 걸쳐서 사용해야할 상태유지 데이터를 옵저버 패턴으로 구현
타입스크립트적용
테스트코드작성

3. 영화정보 검색 사이트

제한사항

React 로 구현
영화진흥위원회 API 활용
네이버 영화검색 API 로 영화 포스터 이미지 활용
class 컴포넌트로 구현

구현내용

초기화면은 검색창만 존재
검색을 수행하면 API 를 요청하여 검색한 영화 목록을 받아옴
검색창을 선택하면 최근 검색한 목록 하단에 노출
영화목록을 선택하면 상세 모달창을 띄움
모달창에는 네이버 영화검색 API 에서 받아온 포스터와 함께 영화의 상세정보 노출
스크롤을 내리면 검색창 최상단에 고정

선택사항

함수형 컴포넌트로 hook 을 사용하여 다시 구현