(# 9월 23일 부터 작성을 시작하였고 그동안의 개발 진행을 차례대로 포스팅할 예정)
진행 상황
개별로 작업중이였던 프론트엔드(react), 백엔드(spring+mysql)를 연동함.
버전 관리
java, 개발툴
java: openjdk 17.0.12 2024-07-16 LTS
ide: IntelliJ IDEA Community Edition 2024.2.0.1
android studio: Koala 2024.11 Patch 1(AI-241.18034.62.2411.12071903)
react
react-native-masked-view/masked-view: 0.3.1
react-navigation/drawer: 6.7.2
react-navigation/native: 6.1.18
react-navigation/stack: 6.4.1
tanstack/react-query": 5.51.21
axios: 1.7.3
react: 18.2.0
react-native: 0.72.6
react-native-encrypted-storage: 4.0.3
react-native-gesture-handler: 2.17.1
react-native-reanimated": 3.14.0
react-native-safe-area-context: 4.10.8
react-native-screens: 3.32.0
babel/core: 7.20.0
babel/preset-env: 7.20.0
babel/runtime: 7.20.0
react-native/eslint-config: 0.72.2
react-native/metro-config: 0.72.11
tsconfig/react-native: 3.0.0
types/react: 18.0.24
types/react-test-renderer: 18.0.0
babel-jest: 29.2.1
eslint: 8.19.0
jest: 29.2.1
metro-react-native-babel-preset: 0.76.8
prettier: 2.4.1
react-test-renderer: 18.2.0
typescript: 4.8.4
spirng 버전
springboot:3.3.1
mysql 버전
mysql community: 8.0.39
개발 중 발생한 이슈/고민 그리고 해결
1. 프론트에서는 인증 방식으로 Token을 백엔드에서는 Session을 사용하고 있었다.
- 백엔드에서 기존에 Session 방식으로 구현한 회원관리 기능을 JWT 방식으로 수정하기로 결정하였다.
2. 리액트 환경과 스프링 환경을 연동하기 위해서 무엇이 필요한가?
- 리액트와 스프링의 연동을 위해서 JavaScript 라이브러리인 Axios를 사용하였다.
- 인증 및 회원관리와 관련된 클라이언트 API 유틸리티는 프론트를 담당하고있는 팀원이 작성하였고 백엔드에서는 값이 잘 반환되는지 등의 연동과 관련된 테스트 위주로 작업을 하였다.
3. 로컬의 MYSQL에서 AWS를 사용한 공통의 MYSQL 데이터베이스 사용
- 연동 이전에 각자 로컬 환경에서 MYSQL를 이용한 데이터베이스를 구축하여 개발을 하고 있었다 하지만 개발을 진행함에 따라 같은 값을 유지해야하는 번거로움이 있었고 다른 백엔드 팀원이 AWS로 MYSQL 서버를 열어서 같은 데이터베이스를 사용하기로 했다. Spring과 Mysql의 연동은 이미 각자 연동하여 로컬환경에서 작업을 하고 있어서 application.properties의 db 설정을 수정하는것으로 연동을 마쳤다.
당연히 리액트 -> spring -> mysql로 값이 문제없이 저장되는것도 확인하였다.
추후에 할일
- 리액트의 스크린에서 값을 주어 spring으로 넘기고 mysql의 db로 넘기는 것은 확인했다.
이제 토큰 인증/인가 로직과 차례대로 세션 인증방식으로 구현되었던 로그인, 정보조회, 로그아웃, 회원탈퇴, 정보수정 등의 코드를 체크하여 천천히 토큰 방식으로 넘어가야한다.
