💻 초기 프로젝트 개발설정

새로운 시리즈로 찾아뵙는 React와 Spring Boot를 이용하여 소셜 로그인을 구현하기입니다! 이번 포스팅은 프로젝트를 개발할때 초기 프로젝트 세팅하는 방법입니다. 처음 프로젝트를 만들어보려는 분이시나거나 저처럼 만들어 보신 적은 있어도 자꾸 까먹으시는분을 위한 글입니다ㅎㅎ. 이번 시간을 통해 프로젝트의 개발 세팅, 이후에는 각 라이브러리의 장단점과 쓰이는 역할을 하나씩 집어보고 일반로그인, Kakao나 Google 소셜 로그인까지 구현해보는 것을 목표로 해보겠습니다. 화이팅!

운영체제

• OS:Mac OS
• IDE:IntelliJ
• Shell: Zsh

Spring Boot 프로젝트 생성

• IntelliJ에서 New Projrct 클릭!

• 클릭 후 Generators에서 Spring Initializr 선택

• Name: 본인이 개발하려는 프로젝트의 방향에 대한 이름으로 지어주면 됩니다
• Language: Java로 세팅해둡시다.
• Type: Gradle로 설정합니다.
• JDK: 21 말고 무조건 17!! 로 설정해둡시다. 17이 없을경우 JDK 17을 다운받으셔야 합니다.
• Java: 이 역시 JDK 버전과 맞는 17로 설정합시다.

의존성 설치 단계

• Spring 이 처음 나올때는 의존성을 일일이 다 잡아서 설치해야합니다만, Spring Boot는 여러 의존성들을 프로젝트 생성 단계에서 설치할 수 있습니다!
• Spring Boot Initializr에서 제공하지 않는 의존성도 있기 때문에 프로젝트를 개발하면서 의존성을 추가해야되는 경우도 있습니다! 그러나 Spring Boot에서 의존성을 추가하는 작업은 아주 간단하기 때문에 걱정은 안하셔도 됩니다! 🦾

추가한 초기 의존성

• 저는 일단 소셜 로그인을 구현해보기 위해서 이렇게 의존성을 추가했습니다!
• 각 의존성에 대한 설명을 조금 해보겠습니다

  • Spring Web:
    • RESTful API 및 HTTP 요청/응답 처리를 위한 기본 모듈입니다.
    • 클라이언트(React)와 통신할 백엔드 개발에 필수입니다!!
  • Lombok:
    • Getter/Setter, 생성자 등 반복적인 코드를 줄여주는 편리한 도구.
  • Spring Boot DevTools:
    • 코드 변경 시 애플리케이션을 자동으로 리로드하여 개발 속도 향상.
  • Spring Web Services:
    • SOAP 기반 웹 서비스를 구현하거나 사용할 때 필요.
    • 현재 프로젝트에서는 소셜 로그인에는 직접적으로 필요하지 않을 수 있음.
  • Spring Security:
    • 인증 및 권한 관리를 위한 기본 프레임워크.
    • OAuth2와 연동하여 로그인 처리 가능.
  • OAuth2 Client:
    • 소셜 로그인을 구현하기 위한 필수 의존성.
    • Google, Facebook, GitHub 등의 OAuth2 인증 처리 가능.
  • Spring Data JPA:
    • 데이터베이스 연동 및 ORM(Object-Relational Mapping)을 지원.
    • MySQL과 함께 사용할 경우 적합.
  • H2 Database:
    • 테스트용으로 내장형 데이터베이스를 사용.
    • 개발 초기 단계에서 빠르게 데이터베이스를 구축하고 테스트 가능.
  • Validation:
    • 사용자 입력 값 검증에 사용.
    • 소셜 로그인과 더불어 폼 데이터(예: 프로필 정보, 추가 입력 값 등) 검증에 유용.
  • MySQL Driver:
    • MySQL 데이터베이스와 연결하기 위해 필요.
    • 프로덕션 데이터베이스로 MySQL을 사용할 때 필수.

초기 프로젝트 생성 후 화면

• create를 누르신 분이라면 이제 이렇게 화면이 뜨실 겁니다! 영어도 많고 조잡해 보이지만 천천히 저희의 목표를 달성하기위해 차근차근 진행해보자구요!

Spring Boot 실행

이제 백엔드의 초기설정은 어느정도 되었으니 서버 실행을 통해 문제없이 돌아가는지 확인해볼까요?

./gradlew bootRun

• 위 명령어를 터미널에 쳐서 서버를 실행시키거나 intellij 오른쪽 상당에 화살표 모양을 클릭해 서버를 실행시킵니다!
  

→ 정상적으로 서버가 실행이 되었으면 8080포트에 실행이 되고, 위 이미지와 같은 화면이 나오실껍니다. 여기까지 따라오셨나요?

이제 백엔드 프로젝트 초기 설정은 어느정도 되었으니 React 프론트엔드 프로젝트를 생성할 차례입니다. 따라오세요!

React 프로젝트 생성

터미널을 찾아라!

• 일단, 왼쪽 아래를 보시면 터미널이라는 메뉴가 보이실겁니다. 이걸 Click! 해주세요. 앞으로 저희가 프로젝트에 React를 설치하기 위해 명령어를 입력할 프롬프트입니다.

• 터미널을 누르면, 이렇게 나오텐데 본인 프로젝트를 설정해둔 경로에 따라 저와는 조금 다를 수 있다는 점 인지해주시면 감사하겠습니다!

리액트 프로젝트 생성

npx create-react-app frontend

• React 프로젝트 생성: Spring Boot 프로젝트 폴더와 별도로 React 프로젝트 폴더를 생성해야 합니다! 위에 명령어를 그대로 입력하시면 됩니다.

• 시간이 조금 소요될 수 있다는 점 !!!! 잊지마세요
• 설치가 완료되었다면, 리액트 프로젝트를 생성하기 전과 구조가 약간 다른것을 확인할수 있어요!

리액트 프로젝트 설치 후 전체 프로젝트 구조 변화

• Frontend라는 폴더가 생겨났고 앞으로 프론트엔드 쪽 코드를 개발하거나 수정할때는 거의 모든 코드가 저 폴더 안에서 이루어집니다.

frontend 폴더로 이동

cd frontend

• cd 명령어로 frontend 폴더로 이동합니다!

React 의존성 설치

• 아까 스프링 부트 초기 설정에서 의존성을 설치하는 부분이 있었죠? 리액트 역시 의존성을 초기에 설치를 하는데요(이후에 의존성 추가해도 큰 문제는 없습니다).

• 프로젝트에 필요한 라이브러리를 설치하는 과정입니다.

npm install react-router-dom axios @mui/material @emotion/react @emotion/styled

• 우선적으로, 저는 React Router, axios, Material-ui(MUI)를 설치하였습니다.
  • React Router: 페이지 이동을 위한 라우터입니다.
  • axios: 백엔드와 프론트엔드를 HTTP통신으로 이어주는 라이브러리입니다.
  • Material-UI (MUI): 간단한 UI 구성.
• 저는 더 다양한 리액트의 라이브러리를 경험해보고자 추가적으로 라이브러리를 설치 하였습니다! 저와 같이 함께 하실 분은 따라와 주세요😃

상태관리 관련

• Redux
  • 에플리케이션의 전역 상태 관리를 합니다.
  • 로그인 관리, 사용자 세션, 테마 또는 복잡한 상태 관리를 효율적으로 처리합니다.

npm install @reduxjs/toolkit react-redux

• Zustand
  • Redux보다 더 가벼운 상태관리 도구입니다.

npm install zustand

스타일링 관련

• Styled-components
  • CSS-in-JS 방식으로 컴포넌트를 스타일링합니다.
  • CSS 와 JavaScript를 통합하여 React 컴포넌트 스타일링을 효율적으로 관리가 가능합니다.

npm install styled-components

• Tailwind CSS
  • 유틸리티 기반의 CSS 프레임워크입니다.
  • 빠르고 일관된 스타일링을 적용할 수 있습니다

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

HTTP 요청 관리

• React Query (TanStack Query)
  • 서버 상태 관리 및 캐싱 역할을 합니다.
  • Axios보다 더 효율적으로 API 데이터를 관리하며, 캐싱 및 리패칭 기능을 제공합니다.

npm install @tanstack/react-query

폼 관리

• React Hook Form
  • 폼 상태와 유효성 검사 관리를 합니다.
  • 로그인, 회원가입 같은 폼 처리를 간단한 API로 폼 관리를 쉽게 배울 수 있습니다.

npm install react-hook-form

아이콘 및 유틸리티

• React Icons
  • 다양한 아이콘을 쉽게 추가할 수 있습니다

npm install react-icons

• Moment.js 또는 Day.js
  • 날짜와 시간을 관리하는 역할을 합니다.
  • 시간 기반 데이터(예: 게시글 작성 시간)를 다룰 때 유용합니다.

npm install dayjs

테스트

• Jest + Testing Library
  • React 컴포넌트와 API의 단위 및 통합 테스트 작성에 용이합니다.

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

애니메이션

• Framer Motion
  • 애니메이션 및 전환 효과 구현에 용이합니다.

npm install framer-motion

리액트 실행

이제 필요한 라이브러리 설치가 끝났으면 리액트가 정상적으로 돌아가는지 확인을 해봐야겠죠??

npm start

이 명령어를 통해 리액트를 실행하면, 프론트엔드를 담당하는 리액트의 포트가 정상적이고, 리액트가 정상적으로 돌아가기 위한 필수적인 라이브러리가 설치되었다면 정상적으로 밑에 이미지 화면이 나와야합니다.

여기까지 진행이 완료되었다면 Spring Boot와 React의 초기 설정과 실행은 완료되었고, 다음 포스팅에서 Spring Boot와 React의 연동 준비 과정에 대해 포스팅 해보겠습니다! 긴 글 읽어주셔서 감사합니다. 다음 포스팅에서 뵙겠습니다 ❣️