프론트엔드 개발자가 구현해보면 좋을것들

웹개발중에 프론트엔드 개발자가 되기위해 독학을 진행하다보면 어느순간 탁 막힐때가 있습니다. 

이제 뭘 해야하지?

뭔가 하긴 해야겠는지 뭘 해야할지 막막할때가있습니다. 클론코딩 강의도봤고 따라도 해봤고 이론공부도했는데 근데 실제 코드작성과 이론이 매칭도 잘 안되고 잘하고있는건가싶고 막연합니다. 그렇다고 누가 기획이나 디자인을 던져주고 한번 해봐라 하는것도 아니라서 막막하기도하고 추진력도 떨어질때가 있습니다.

 

그래서 한번쯤은 구현해보면 좋을것을에 대한 내용을 정리하려고 합니다. 그리고 그 구현에 대한 상세 요구사항에 대한 내용도 같이 정리해보려고 합니다.

 

TODO List

워낙 유명한 프로젝트죠 하지만 만약 강의나 블로그를 보고 따라만 했던 구현이라면 지금부턴 달라야합니다. 어떤 튜토리얼도 따라하는것이 아니라 정해진 요구사항에 맞춰서 필요한부분은 검색해보면서 다양한 방법으로 구현하는겁니다. 거의 입문에 가까운 프로젝트이긴하지만 지금부턴 다를겁니다.

 

요구사항 보기

제한사항 (필수제한)

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

구현사항 (필수구현)

입력폼 구현

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

 

목록 구현

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

 

모달 구현

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

 

추가사항 (선택구현)

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

---

쇼핑몰 장바구니 구현

쇼핑몰이 어떤 기능을 갖고있는지 모르는 사람은 없을거라 생각합니다. 전체 페이지를 구현하거나 특정 사이트를 클론하는게 아닙니다. 필요한건 쇼핑목록화면과 상품상세보기 그리고 장바구니 기능 구현 이렇게만 충족하면 됩니다.

 

요구사항 보기

제한사항

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

구현사항

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

선택사항

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

 

 

영화정보 검색 사이트

위의 두 구현은 그래도 아직까지 할만할 수 있습니다. 영화정보검색사이트는 Open API 를 활용하여 데이터를 요청하고 받아와 처리해야합니다.  두가지의 서로 다른 Open API 를 활용해서 구현해야합니다.

 

요구사항 보기

제한사항

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

구현내용

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

선택사항

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

 

 

예약사이트

어떤 예약이던 상관없습니다. 숙박, 항공, 렌트, 회의실, 스터디룸 등 이번엔 특정 예약 사이트를 클론해도 상관없습니다. 다만 예약과 관련된 주요 기능들은 직접 스스로 라이브러리없이 구현해야합니다. 여기선 json-server 를 활용해서 mock 데이터를 만들고 진행해보면 좋을것같습니다.

 

예약은 대한항공, 에어비앤비, 제주렌트카 등을 클론하는데 이때 본인이 할 수 있는 모든 역량과 하고싶은거 다 때려박아보는겁니다. 

순수자바스크립트로 구현해도 좋고 그러면서 라우터나 상태관리등 모든걸 순수하게 작성해보는것도좋고

리액트나 뷰같은 프레임워크 또는 라이브러리와 상태관리 라이브러리인 vuex, MobX, redux, recoil 도 세팅하고 사용해보고 SSR 을 지원하는 NEXT.js 나 서버쪽은 express 또는 Nest.js 등 모든걸 총 망라해서 구성해보길 추천합니다.

 

(기타 또 다른거 뭐 추가할만한거 생각나면 구현내용과 함께 추가하도록 하겠습니다.)