• ncnc 프로젝트의 준비 과정, 프로젝트 도중 어려웠던 부분, 새롭게 알게된 점 등을 회고하고 숙지하기 위해 만든 개인 페이지입니다.

프로젝트 보러가기

🔗 소스 코드 확인하기

🔗 웹사이트 확인하기

🔗 간단하게 gif로 보기 👇

[개인 선행학습]

• TypeScript
• Next.js

[팀워크]

• 새롭게 추가된 컨벤션 정리

  • 컴포넌트 만들기 : arrow functions를 통일

  • scss 변수명 : underscore대신 hyphen으로 통일

  • API 호출 방식, 폴더로 모으기

    • lib/api

      import axios from 'axios';
      import { ProductDatilType } from '@/types/productDetail'
      
      const API = axios.create({ baseURL:'<https://api2.ncnc.app/con-items>' });
      
      export const getProductDetail = () => API.get<ProductDetailType[]>(`${conItemId}`);
      ~~~
      api 계속 추가
      ~~~
      

  • themes

    $highlight: #ff5757;
    $black: #000000;
    $white: #ffffff;
    $gray: #808080;
    

  • constants는 lib/data

  • 웹사이즈랑 피그마사이즈랑 다를땐 피그마를 따라간다.

  • interface 이름 짓기

    

    • props에 전해지는 것은 interface, 나머지는 type

  • 리액트 함수 : 화살표 함수로 통일

[팀원들의 피드백]

• 3 * 3 그리드를 만들 때, max-width 인 375px보다 작아져도 그리드 내부가 잘 유지될 수 있도록 css 속성인 grid를 사용하는 것을 추천받았다.
  • (참고) 375px보다 작을 수 있는가? 갤럭시 폴더 닫았을 때 작은화면이 280px이다.

[궁금증]

[새롭게 알게 된 것 ]

• 가운데 점 찍는 방법 : Alt + 1, 8, 3

• Next.js + 타입 스크립트일 때, NextPage를 활용해야 한다.

  import { NextPage } from 'next'
  
  const Page: NextPage<Props> = ({ userAgent }) => (
    <main>Your user agent: {userAgent}</main>
  )