Frontend Portal

Next.js + Typescript 활용한 React 기반 프론트엔드.

Getting Started

First, run the development server:

npm install

# 기본 소규모 모드
npm run dev

# 소규모 모드 for Windows
npm run dev:smWin
# 소규모 모드 for others
npm run dev:sm

# 대규모 모드 for Windows
npm run dev:lgWin
# 대규모 모드 for others
npm run dev:lg

run the local to production mode:

npm install
npm run build
npm run start

환경변수

.env.local.sample 파일처럼 .env.local 파일을 생성하여 필요한 환경변수를 세팅한다.
사용하고 있는 환경변수는 ./src/constants/env.ts, ./next.config.js 파일을 확인한다.

소셜 로그인

소셜 로그인이 필요한 경우 SOCIAL_LOGIN_ENABLED 환경변수를 true 로 설정한다. (기본값: false) 아래를 참고하여 각 소셜 로그인의 key를 환경변수로 등록한다.

// @constants/env.ts
export const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID
export const KAKAO_JAVASCRIPT_KEY = process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY
export const NAVER_CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_CLIENT_ID
export const NAVER_CALLBACK_URL = process.env.NEXT_PUBLIC_NAVER_CALLBACK_URL

SOCIAL_LOGIN_ENABLED=true이고 각 key의 값이 존재하는 경우 각 소셜로그인의 버튼이 활성화 된다.

e.g. SOCIAL_LOGIN_ENABLED=true NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY=kakao

위 처럼 환경변수를 설정한 경우 카카오 로그인 버튼만 활성화 된다. user-service 에서 backend 설정(application.yml)도 해주어야 한다.

폴더 구조

├─public                 # static resource root
│  ├─locales             # 다국어 message.json
│  └─styles				 # css + images
│
├─server                 # custom server
│  └─index.ts
│
├─src                   # source root
│   ├─@types                # type declaration
│   ├─components            # components
│   ├─constants             # 상수
│   ├─hooks                 # custom hooks
│   ├─libs                  # deps library custom
│   ├─pages                 # next.js page routing
│   │   ├─api               # next.js api routing
│   │   └─auth              # 로그인 관련
│   ├─service               # API 호출
│   ├─stores                # recoil 상태관리
│   ├─styles                # material ui theme 관리
│   └─utils                 # utils
│
├─test                      # test 관련
│
│ .babelrc              # babel config
│ .dockerignore         # docker ignore
│ .env.local            # environment variables
│ .eslintrc.js          # eslint config
│ .gitignore            # git ignore
│ .prettierrc.js        # prettier config
│ Dockerfile            # Docker 배포 시
│ jest.config.js        # jest config
│ jest.setup.ts         # jest에서 testing-library 사용하기 위한 설정(그외 jest에 필요한 외부 라이브러리 설정)
│ manifest.yml          # cf 배포 시
│ next-env.d.ts         # next.js type declare
│ next.config.js        # next.js 설정
│ package.json.
│ README.md
│ tsconfig.json          # typescirpt config
└ tsconfig.server.json   # custom server 사용 시 typescript config

3.7 KiB Raw Blame History

Frontend Portal

Getting Started

환경변수

소셜 로그인

폴더 구조

Tech stack

3.7 KiB

Raw Blame History