프론트엔드 - 개발자 송진현

개발 환경

📘 Front-End : React, Typescript, Redux, Webpack & Babel

디렉토리 구조

📁Frontend 
├── 📁public
│   ├── 📁images    
│   └── index.html
└── 📁src
    ├── 📁@types
    ├── 📁api
    ├── 📁assets
    ├── 📁components  
    │   ├── 📁Common 
    ├── 📁hooks
    ├── 📁pages
    │   ├── LoginPage
    │          ├── index.tsx
    │          ├── style.ts
    └── 📁tests
    └── 📁utils

Page

• LoginPage

How to Install?

• Frontend

   cd Frontend
   npm install
   npm run start

How to Settings

• .env.development : Frontend 디렉토리 바로 밑에 추가

REACT_APP_GET_OAUTH_TOKEN=
REACT_APP_GET_JWT_TOKEN=
REACT_APP_API_ADDRESS=
REACT_APP_FRONT_ADDRESS=

Pre Requirement

• docker
• docker-compose

1. Build

   git clone https://github.com/programmer-ground/ProgrammerGround
   cd ProgrammerGround
   docker-compose build

2. Run

  docker-compose up -d

3. Check Container process

  docker-compose ps

4. Logs

  docker logs <container_ip>

5. Shutdown all container

  docker-compose down

백엔드 환경 구성

초기 개발 환경 세팅

• 오른쪽 상단의 application -> edit configuration을 클릭한다.

• 설정할 어플리케이션을 왼쪽 탭에서 클릭하여 수정한다.

• 수정할 내용은 Active Profile, Environment variables 탭이다.
• 없을 경우에는 아래의 이미지처럼 Modify options을 통해서 찾을 수 있다.

해당 환경 설정 샘플은 다음과 같다.

• AuthApplication

MYSQL_USER=root;MYSQL_USER_PASS=test;GITHUB_APP_CLIENT_ID=test;GITHUB_APP_CLIENT_SECRET=test;JWT_SECRET_KEY=test;GITHUB_APP_SCOPE=public_repo,read:user

• ProgrammerGroundApplication

MYSQL_USER=root;MYSQL_USER_PASS=test