nonfiction 클론 프로젝트
널픽션(NULLFICTION)
프론트 - 🧑🏼💻김동휘, 👩🏼💻김수민, 🧑🏽💻이선호, 🧑🏻💻정찬영
백엔드 - 👨💻문승준, 👩🏻💻이정아
2021.10.5 ~ 2021.10.15
- front-end : React, JSX, SCSS
- back-end : Python, Django, MySQL, CORS headers
- 심플하고 모던한 웹사이트에서 정성과 품질에 타협하지 않는 고유한 향을 판매합니다.
- 다양한 카테고리의 향수와 바디케어 제품을 판매합니다.
- fetch API를 활용한 데이터 렌더링
- Path parameter 및 query string을 활용한 동적 라우팅 구현
- Query string 활용한 동적 라우팅 구현
- Life Cycle 메소드를 활용하여 상품 리스트 페이지 렌더링 구현
- State 상태관리로 모달창 UI 구현
- 로그인페이지 레이아웃 구현
- input의 벨류값을 이벤트를 통해 값을 저장하는 기능
- 유효성검사를 통과하면 백엔드와 통신할 수 있는 기능
- 링크를 통해 회원가입페이지로 이동
- 회원가입 페이지 레이아웃 구현
- input의 벨류값을 이벤트를 통해 값을 저장하는 기능
- 필수 항목과 규정 체크박스 다 동의해야지만 백엔드와 통신하여 회원가입 진행
- 아이디 중복x , 정규식표현으로 영문자 + 숫자 + 특수문자 포함시에 이메일 비밀번호 가입되는 로직구현
- 버튼에 이벤트를 이용해서 조건 충족시 회원가입 완료 -> 로그인페이지로 이동
- Link 컴포넌트를 통한 페이지 이동 구현
- 조건부 렌더링으로 토글메뉴 구현
- 카테고리 클릭시 해당 URL로 이동
- React 생명주기 메서드를 통한 스크롤 rotate 애니메이션 구현
- 백엔드와 통신을 통한 상품 검색 기능 구현
- Nav, Menu, Footer 구현
- 상품 상세 페이지, 장바구니 페이지 작업
- 이미지 슬라이드 (캐러셀) 구현
- 동적 라우팅
- 카테고리 토글 기능 구현
- fetch를 통해 백엔드의 상품 가져오기, 추가, 삭제 api 활용
- 이 프로젝트는 NONFICTION 사이트를 참조하여 학습목적으로 만들었습니다.
- 실무 수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제가 될 수 있습니다.