volunteer_client

About

장애인을 위한 직장 소개 앱 프론트엔드 코드

• Notion

Keywords

• Seeker: 구직자를 의미
• Company: 회사를 의미
• User = Seeker (원래는 구직자, 회사 둘 다를 의미했던거 같으나 서버 상에서 현재 구직자에게만 적용됨)

How to run

필요 라이브러리 설치

• Node.js 설치
• corepack 활성화 (자세한 내용: 참고)
  • Node.js 버전 16.10 이상: corepack enable
  • Node.js 버전 16.10 미만: npm i -g corepack
  • 권한 문제가 발생할 경우 윈도우에서는 관리자 명령 프롬프트에서 위 스크립트 실행, 그 외에서는 sudo 붙여서 위 스크립트 실행
• 필요 라이브러리들 설치: yarn 또는 yarn install 실행

설치 추천하는 도구들

• React devtools
• Redux devtools
• VSCode 사용할 경우 yarn dlx @yarnpkg/sdks vscode 실행 추천

개발 모드 빌드 & 실행

• yarn dev로 개발 모드 빌드 & 개발 서버 실행
• 웹 브라우저에서 http://localhost:3000으로 접속하세요.
• 접속한 상태에서 코드를 변경하고 저장하면 웹페이지가 자동으로 업데이트됩니다.

배포 모드 빌드 & 실행

• yarn build로 배포 모드 빌드
• yarn start로 배포 서버 실행

정적 사이트 생성

• yarn build로 배포 모드 빌드
• yarn export로 정적 사이트 생성 (Static Site Generation)
• 현재 사이트 실행에 Next.js 서버가 필수이므로 이 기능은 사용하지 않습니다.

코드 스타일 체크

• yarn lint로 JS/TS 코드 스타일 체크
• yarn lint:fix를 하면 체크뿐만 아니라 수정까지 이루어집니다.

How to deploy

Serverless 이용한 배포

(1) .env 파일 생성

• 형식: .env.example 참고
• 링크 참고하여 AWS access key 얻기

(2) 배포

• yarn deploy 실행
• 시간이 좀 오래 걸립니다... (몇분 정도 걸림)

Heroku 이용한 배포 (포트 고정이 불가능하여 현재는 사용 X)

(1) 필요 도구들 설치

• Heroku CLI 설치

(2) Heroku app 생성

• Heroku 가입 후 app 생성

(3) git과 연결

• heroku git:remote -a (앱 이름)

(4) 배포

• git push heroku master

Pages

페이지 목록은 src/constants/Routes.ts를 참고해주세요.

Project structure

• public
  • assets: Static assets (ex. 이미지, 비디오, ...)
• src
  • constants: 공통 상수들 모음
  • types: 공통 자료형 모음
  • utils: 유틸성 로직들
  • api: 요청 관련 로직 모음
  • states: 전역 상태 (Redux)
  • components: 공통 component (Menu, Button, ...)
  • containers: 큰 단위의 component (Header, footer, 각 section, ...)
  • styles: 공통 스타일 코드(SCSS) 모음
  • pages: 각 페이지(URL)를 나타내는 component

Architecture

Screenshots