Giter Club home page Giter Club logo

studywithkookmin's Introduction

Study With Kookmin

국민대학교 2023-1 웹클라이언트컴퓨팅 프로젝트 과제입니다.

React로 프론트엔드를 구성하고 Spring Boot로 REST API 서버를 구성했습니다.

DBMS는 로컬 개발환경 구성에 편리한 H2를 선택했습니다.

시작하기

사전 준비사항

Google OAuth 2.0 API 설정이 필요합니다.

Google OAuth Credentials 참고 바랍니다.

(!) 중요 참고사항: '승인된 자바스크립트 원본' 설정 시 http://localhosthttp://localhost:3000 모두 등록해야 합니다.

Spring boot

  1. application-oauth.properties 파일을 만들거나, application.properties 파일에 아래 정보를 추가해야 합니다.
app.jwtSecret="256 bits 이상의 문자열"
app.googleClientId="google 클라이언트 ID"

spring.security.oauth2.client.registration.google.client-id="google 클라이언트 ID"
spring.security.oauth2.client.registration.google.client-secret="google 클라이언트 비밀번호"
spring.security.oauth2.client.registration.google.scope=profile,email
spring.security.oauth2.client.registration.google.redirect-uri=http://localhost:3000
  1. 터미널에서 아래 명령어를 실행합니다.
cd StudyWithKookmin

./gradlew build

cd build/libs

java -jar studywithkookmin-0.0.1-SNAPSHOT.jar

REACT

  1. .env 파일에 아래 형식의 값을 추가하거나 수정해야 합니다.
REACT_APP_API_URL="http://localhost:8080"
REACT_APP_GOOGLE_CLIENT_ID="google 클라이언트 ID"
  1. 터미널에서 아래 명령어를 실행합니다. (경로에 주의합니다.)
cd StudyWithKookmin\src\reactFront\swk-react

npm install

npm start

참고사항: npm install 실행 중 버전 충돌 문제 발생 시, npm install --force 명령어로 강제 설치하세요.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.