dlgustn555 / next-bnb

디자인 시스템

• 디자인 시스템이란 서비스를 만드는 데 사용할 색깔, 서체, 컴포넌트 및 규칙을 정리해놓은 것으로 서비스에 일관된 디자인을 줄 수 있고, 브랜딩할 수 있다.
• 만들어둔 컴포넌트를 재사용하게 됨으로써 개발 속도와 효율성도 높아지게 된다.
• ※※ 재사용하게 될 컴포넌트를 다지인 시스템을 따르는 공통 컴포넌트로 만들어서 사용!! ※※
• 공통 컴포넌트를 만들어서 사용하면 매번 컴포넌트를 새로 만들지 않아도 되고, 일관된 스타일과 기능을 가지게 되는 장점이 있음.

next-bnb's Issues

2. 공통 헤더 만들기

React Potal

• 3d39902

useHooks

• a2471f3

3. 회원가입과 로그인

♣ 작업브랜치: feature/3_singUp_login

API-GW 셋팅

• Typescript 로 Koa 서버구축(api-gw)

npm i koa koa-router koa-logger koa-mongon koa-bodyparser mongoose

※ 타입스크립트로 구현시,,

npm i -D ts-node nodemon @types/koa @types/node @types/koa-bodyparser

1. 넥스트 BNB프로젝트 생성 및 셋팅

타입스크립트를 사용하는 넥스트BNB 프로젝트에 필요한 라이브러리 설치

npm install next  react react-dom
npm install -D typescript @types/react @types/node @types/react-dom

package.json 에scripts 추가

{
   ....
  "scripts": {
      "build": "next build",
      "dev": "next dev",
      "start": "next start"
  },
  ...
}

.gitignore 설정

node_modules

.next

eslint 설정 및 eslintrc.json 파엘 rules 및 settiongs 수정

eslint --init

pages 폴더와 간단한 루트 페이지

ㄴ pages/index.tsx 파일 생성

npm run dev 실행하면 자동으로 tsconfig.json파일이 생성된다. 엄격한 타입을 위하여 strict: true 로 수정

스타일링 설정하기 (styled-components 구성)

npm install styled-components babel-plugin-styled-components
npm install -D @types/styled-components -D

ㄴ pages/_document.tsx 파일 생성 (서버사이드랜더링시 스타일적용)
ㄴ .babelrc
{
    "presets": ["next/babel"],
    "plugins": [["styled-components", {"ssr": true}]]
}

svg를 import 하여 사용하기 위한 설정

npm install babel-plugin-inline-react-svg

ㄴtypes/image.d.ts

declare module "*.svg"

ㄴ .babelrc

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", {"ssr": true}], "inline-react-svg"]
}

글로벌 스타일 설정하기

861580b