🏡 프로젝트 시작 _ welcoming

프로젝트 개요

• welcoming(feat. 어서와 우리집) 프로젝트는 쇼핑몰의 주요 기능을 구현해보는 프로젝트 입니다.
• 배포 링크
• Github link
• 프로젝트 기간 : 2022.01 ~ 진행중

---

기술 스택

Next.js

• 리액트 프레임워크

• 서버 사이드 렌더링(SSR) 지원

  • 클라이언트 사이드 렌더링(CSR) : 초기에 페이지가 렌더된 후, 클라이언트에서 데이터를 불러오며 다시 렌더링
  • SSR : 처음 렌더 될 때 서버 측에서 데이터도 함께 가져와서 그려준다.
    ⇒ 한 번에 렌더링이 되기 때문에 초기 로딩 속도가 빠르지만 페이지를 넘길 때 마다 중복되는 데이터도 서버측에서 다시 불러오기 때문에 페이지 과부하의 위험성이 CSR에 비해 크다.
    ⇒ 그럼에도 불구하고, SSR를 사용하는 이유는 페이지가 로딩될 때 데이터도 동시에 로드되며 검색엔진에 해당 데이터들이 걸리기 때문이다.
    ⇒ 초기 페이지가 비어있는 상태인 CSR과 달리 검색 엔진 최적화(SEO)에 효과적

• 참고 링크 : Next.js 100% 활용하기

TypeScript

TypeScript는 JavaScript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어

• JavaScript : 동적 타입의 인터프리터 언어
  ⇒ 런타임에서 오류를 발견할 수 있다.

• TypeScript : 정적 타입의 컴파일 언어

  • 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환
  • 코드 작성 단계에서 타입을 체크해 오류를 확인
  • 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다.
  • 단점 : 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다.

• 참고 링크 : 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript)

SWR

• 데이터를 가져오는 데(get) 특화되어 있는 라이브러리/React Hooks
  ⇒ 데이터를 가져오는 데 특화되어 있으므로 'post' 등의 동작에 있어서는 이점이 없다.(불가능한 것은 아님)

• 참고 링크 : axios 외길인생, swr을 만나다.
  

Emotion

• CSS in JS 라이브러리

• 참고 링크

  • Thinking about emotion js vs styled component
  • 웹 컴포넌트 스타일링 관리 : CSS-in-JS vs CSS-in-CSS
  • CSS-in-JS 가 좋은 이유

ESLint, Prettier

코딩 컨벤션을 준수하면 가독성이 좋아지고 안티패턴의 코드를 예방할 수 있다. 하지만 개발자가 코딩 컨벤션을 잘 따르고 있는지 확인하기 어려우므로 정적 분석을 이용하여 코딩 컨벤션을 자동으로 검증하고 잠재에러를 찾아낸다.

정적 분석 : 코드의 일관성을 유지하고 버그를 피하기 위해 실행 전에 미리 코드를 분석하는 방법

• ESLint

  • 코드의 잠재적 에러나 오류 탐지
  • Airbnb Style Guid를 많이 사용
    ⇒ 규칙이 엄격하기 때문에 프로젝트의 특성에 따라 다양한 방식으로 커스터마이징하여 사용

• Prettier

  • 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구
  • 포맷팅과 관련된 부분만 도움이 되므로 코드 품질 규칙과 관련해서는 ESLint와 같은 도구와 함께 사용하는 것이 좋다.

• 참고 링크

  • 리액트 프로젝트에 ESLint 와 Prettier 끼얹기
  • 정적 분석 - TOAST UI

Apollo

GraphQL이 적용된 프로젝트를 쉽게 만들 수 있게 해주는 Node.js 패키지

• Apollo Client : GraphQL을 통해, 클라이언트상의 LocalState를 이용할 수 있게 만들어줌
• Apollo Server : GraphQL이 적용된 서버를 쉽게 만들어줌

GraphQL

Facebook에서 개발한 쿼리 언어

• 클라이언트가 필요한 데이터 형식을 정확히 요청할 수 있다.
  ⇒ Rest API는 일반적으로 클라이언트에 필요하지 않은 중복 데이터를 포함하는 고정 데이터 형식을 반환하여 GraphQL에 비해 유연성이 떨어진다.

• 참고 링크

  • Apollo Client GraphQL & React.js 함께 사용하기(한국어)
  • GraphQL, ApolloServer 란?
  • Apollo Client (React)로 GraphQL 클라이언트 개발하기

---

요구사항 명세

상품 등록

• 특정 권한 (Admin)을 가진 유저는 상품 등록이 가능해야 합니다.
• 상품 등록에는 Editor를 붙입니다.(CKEditor 등)
• 상품을 등록하면 바로 목록에 노출됩니다.

상품 목록 노출

• 상품은 카테고리별 필터가 가능해야 합니다.
  • 상품의 카테고리는 20가지 정도로 구성 (세부 카테고리 포함)
  • 카테고리를 조합했을 때 조회가 가능해야 합니다.
• 상품은 검색이 가능해야 합니다.
  • 검색했을 때 검색 결과에 맞는 아이템만 보여져야 합니다.
  • 검색어에 맞는 아이템을 강조해주세요.
• 상품은 25개씩 한번에 보여주며 페이지네이션을 지원해야 합니다.
  • (가능하다면) 상품 목록을 무한 스크롤로 구현해주세요.

상품 상세 노출

상품별 댓글 노출

• 댓글은 25개씩 한번에 보여주며 페이지네이션을 지원해야 합니다.
• 댓글에는 대댓글이 가능하며, 대댓글은 최대 1번까지만 depth를 지원합니다.
• 댓글에는 이미지 삽입이 가능해야 합니다.

회원

• 로그인🔥 / 로그아웃🔥
• 회원가입🔥 / 회원탈퇴
• 아이디 찾기 / 비밀번호 찾기 ⇒ 가입한 이메일로 비밀번호 재설정하기🔥

위시리스트

• 상품 위시리스트가 존재하여 등록할 수 있어야 합니다.
• 위시리스트에 등록 가능한 갯수에 제한은 없습니다.

장바구니

• 장바구니에 아이템을 25개까지 담을 수 있습니다.
• 해당 계정과 장바구니는 연동되어야 합니다.

결제

• 주소 등을 입력받아 결제받는 페이지를 구현합니다.
  • 주소 검색에는 주소 검색 API(다음)를 사용해주세요.
• 지역별로 배송비 주문 로직을 추가해주세요.
  • 일반 배송비 : 2,500원
  • 도서산간지방(제주, 울릉도) : 10,000원
  • 장바구니가 특정 금액(50,000원)을 넘는 경우, 무료배송
• 결제가 이루어지지 않을 경우, 장바구니를 초기화하지 않습니다.
• 결제 버튼을 눌렀을 때, 결제에 포함된 데이터만 보여줄 수 있어야 합니다.

(공통) 네비게이션

• 네비게이션에는 페이지간 이동, 유저 정보 노출 등이 가능해야 합니다.

기획전

• 쇼핑몰에서 자주 쓰이는 기획전 페이지를 구현해주세요.
• 기획전은 최대 갯수가 존재하지 않으며, 공유하기가 가능해야 합니다.
  (카카오톡 공유하기, 페이스북 공유하기, 네이버 공유하기 등)

기술 요구사항

• 모든 페이지는 공유하기가 가능해야 합니다.
• 로그인은 유저가 브라우저를 종료해도 유지되어야 합니다.🔥
• 모든 페이지는 반응형을 지원해야 합니다.
• 모든 페이지는 접근성을 준수해야 합니다.
• 모든 페이지는 검색이 가능하여야 합니다.(SEO)
• 모든 Form은 유효성 검사가 되어야 합니다.🔥
• 백엔드는 strapi를 사용해서 환경을 설정해주시면 됩니다.
• 로컬에서만 동작해도 괜찮습니다.

챌린지

• AWS를 이용해서 배포해주세요.
  (Azure나 GCP를 이용해도 됩니다.)
• 팀 프로젝트로 해보세요.🔥
• 운영 모드(유지보수 정책)을 고민해주세요
  • Admin을 만들어보면 어떨까요?(=== 백오피스)
  • CS를 받을 창구를 마련해주세요.
  • GitHub 배포 전략을 잡아주세요.
  • GitHub Actions를 활용해 CI / CD를 구축해주세요.
  • ESLint 등과 관련된 내용을 추가해주세요.🔥
• 테스트 주도 개발로 짜주세요.
  • Jest를 이용해 테스트를 구축해주세요.

---

덧붙이기

• 조은님 스터디의 마지막 과제... 입니다. 헤헤
• 프로젝트를 시작했으나 그 과정은 전혀 작성하지 않고 있었습니다.
  ⇒ 그.. 나름의 핑계를 말하자면.. 프로젝트를 하면서 부족함을 느껴 공부를 하고 싶었으나 여유롭게 공부할 수 없었고(왜냐면 오래걸리기 때문), 나의 부족함이 자꾸 느껴져서 불안했고 조급했다.
  ⇒ 그래서 미룰 수 있는 것은 모두 미뤄버리기를 시전했고 미룰 수 있는 것 중에 블로그 글 작성이 포함되어 있었다.
• 늦게나마 프로젝트를 하면서 다루고 싶었던 주제들에 대해 글을 작성하려고 합니다.

---

• 위의 내용은 이 전에 임시저장 해놓은지 꽤 오래되었습니다.
• 내용을 더 추가해서 글을 올리고 싶었는데.. 마음처럼 작성이 어렵길래 일단 올리고 나중에 추가하겠습니다..?!
• 그 동안 많은 페이지를 만든건 아니지만 차근차근 프로젝트를 진행하고 있었고, 랜딩페이지를 완성하면 배포 후 개발을 진행하기로 하였습니다.
• 그리고 배포가 된 상태지만 비어있는 페이지가 많습니다.
• 링크에 접속해서 수정사항이 보인다면 알려주세요!