1. 어려웠던 부분 : 오늘 프론트엔드와 웹소캣 연결에 성공했다. 아직 고쳐야할 부분은 있지만, 그래도 5일 만에 뭔가 연결이 됐다는게 너무 감동스러웠다. 근데 중요한 건, 어떻게 왜 연결이 되었는지는 아직도 잘 모르겠다는 것이다 ... ㅎㅎ 백엔드에서는 프론트분이 요청한 대로 값을 전달하기만하고 딱히 한 일이 없는데 일단 연결이 되었다. 어떤 동작 원리로 돌아간 걸까? 일단 사소한 오류가 해결이 되면 구현된 코드를 뜯어보며 다시 공부해야 겠다.

 

 

2. 느낀 점 : 스프링공부를 시작하면서 지금까진 게시판 CRUD 구현만 해보다 처음으로 게임 로직을 짜보게 되었다. 생각보다 어렵지만, 또 생각보다 재미있다. 이게 될까? 라고 생각하고 구현하고 PostMan으로 테스트를 했을 때 원하는 값이 나오는게 신기하다. 백엔드 팀원분들 모두 너무 뚝딱뚝딱 기능 구현을 잘 해 주시고, 내가 막히는 부분을 잘 도와주셔서 덕분에 너무 많이 배운 하루였다.

 

3. 새로 알게 된 내용 :

1. 오늘 팀원분에게 터진 에러를 같이 해결하다 알게된 사실. GameRoonRequestDto 부분 이었는데, 아래와 같이 @AllArgsConstructor 어노테이션만 붙이면 원하는 값에 null값이 들어갔는데, 이 부분에 기본 생성자를 만들어 주는 어노테이션인 @NoArgsConstructor를 추가해주었더니 해결되었다. 예전에 기술매니저님이 보통 Dto에는 두 어노테이션 모두 붙여주신다고 했었는데, 앞으로 오늘과 같은 상황을 대비 그렇게 해야겠다.

 

 

2. 오늘 Redis를 설치하고 처음으로 사용해 보았다. 아직 웹소켓부분 구현이 완성된게 아니라 더 공부해봐야겠지만, 일단 코드부분에 Redis 사용이 추가되어서 그런지 이젠 테스트를 할때 Redis 서버도 같이 실행시켜야 오류없이 돌아간다. 여전히 터미널창을 사용해 명령어로 프로그램을 굴리는건 어렵지만, 그래도 또 하나 새로운 걸 배워서 뿌듯하다.

 

4. 셀프칭찬 (오늘 잘한 일) : 팀원분의 에러를 해결한 나 칭찬한다 ㅎㅎ 그리고 처음으로  Redis 사용을 시도한 오늘의 나 칭찬해애 ~_~

 

5. 내일 할 일 : 게임시작 API 카테고리/키워드 랜덤조회해서 뿌려주는 부분 수정하기! 


[오늘 공부한 부분] 

 

- Redis 설치 / 명령어

- 게임시작 API 키워드 랜덤조회 제외하고 구현 완료

※ 오늘 발생한 문제 : 카카오 회원가입이 되지 않고, redirect 되지 않는 문제

 

BE 코드 수정 부분

redirect_uri 주소가 localhost:8080으로 시작되는 백엔드 사용 로컬테스트 서버로 되어있었는데 (주석처리 된 부분), 그 부분을 프론트엔드 사용 로컬테스트 서버인 localhost:3000번으로 변경해 주었다.

 

 

FE 코드 수정 부분

 

 

문제가 발생했을 때 위의 사진과 같이 instance.post(`auth/kakao/callbak`,code)로 잘못 작성되어 있었다.

 

 

위와 같이 post('auth/kakao/callbak',code) -> get(`auth/kakao/callback?code=${code}`) 로 수정

 

 

그리고 원래 REACT_APP_BASE_URL에 백엔드에서 배포한 서버주소가 들어가 있었는데, 그 부분에 프론트엔드에서 사용하는 로컬테스트 서버인 localhost:3000을 넣고, REACT_APP_API_URL 부분에 백엔드 배포 서버를 넣어주니 정상 작동 되었다.

 

 


[ 참고 자료 ]

https://data-jj.tistory.com/53

 

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

프로젝트를 진행하면서 소셜 로그인 구현을 맡게 되었다. 다들 프론트엔드는 소셜 로그인에서 할게 많이 없다 쉽다~, 그중에서 카카오가 가장 쉽다~ 이렇게 얘기해서 방심했다. 그렇게 6일간의

data-jj.tistory.com

 

 

 

1조 3조  ㅎ_ㅎ 우리다 잘됐으면 좋겠다

 

 

1. 어려웠던 부분 : 오늘 어제 구현했던 카카오로그인 기능과 로그인 회원가입 기능을 프론트엔드와 맞춰보았다. 역시나 여러군에데서 오류가 났는데 역시나 구글링을 통해 해결할 수 있었다. 그 중 카카오로그인과 관련된 오류는 redirect uri 설정을 맞춰주지 않아서 발생한 문제였다. 백엔드 코드에서  redirect 주소를 프론트 로컬서버로 바꿔주고 프론트엔드에서도 auth/kakao/callback?code=${code} 형식으로 백엔드 코드에 맞게 변경해 주니 해결이 되었다. 역시 구글링이 쵝오야 ! 

 

2. 느낀 점 : 클론프로젝트때 페이징처리와 검색기능을 구현본 경험이 있다보니 확실히 수월하게 맡은 부분을 끝낼 수 있었다. 처음 시도하는 것들은 항상 머리가 깨지지만, 그 과정 덕분에 다음이 수월해 지는 걸 다시한번 느낄 수 있는 하루였다. 그리고 오늘 아침 전체회의에서 디자이너분이 캐릭터 디자인을 몇개 보여주셨는데 귀여운데 멍청한게 딱 우리 프로젝트랑 맞는 이미지인 것 같아 기분 좋게 하루를 시작할 수 있었다. 모두가 열심히하는 팀을 만나서 감사하다 : )

 

3. 새로 알게 된 내용 : 웹소켓을 이용한 채팅기능 구현은 사실 백엔드에서 많이 해줄 부분이 없었다. 생각보다 스프링부트와 웹소켓 연결부분에 관련된 자료가 별로 없어서 많이 헤맸는데, WebSocketConfig 파일으 포함한 몇가지 파일만 추가해주면 프론트엔드에서 대부분의 기능을 구현해 주셨다. 이부분은 백엔드 파트를 다시 정리해서 블로그에 포스팅해야겠다! 

 

4. 셀프칭찬 (오늘 잘한 일) : 지난주에 했던 기능구현과 겹치는 부분이긴 했지만, 복습한다는 마음으로 다시 한번 기능구현에 성공한 나를 칭찬한다 ! 그리고 팀원들과 협업하는게 이렇게 수월할 줄이야 !! 우리 팀원들 다 칭찬합니다 ㅎㅎㅎ

 

5. 내일 할 일 : 현재 토큰만 리턴하고 있는 카카오로그인 반환타입에 유저 nickname 추가하기, 게임시작 API 구현


[오늘 공부한 부분] 

 

- 카카오로그인 오류해결

- 게임방 리스트 전체조회 페이징 처리 / 검색 기능 구현

- 웹소켓관련 공부

 

우리팀 아자아자 화잇팅

 

1. 어려웠던 부분 : 오늘은 지난주에 기획한 프로젝트 API 명세를 작성하고 ERD를 설계하고, 각자 맡을 기능을 분배했다. 모든게 순조롭게 진행되는 듯 했다. 일단 작업을 시작하기전에 로그인 회원가입 기능과 엔티티 그리고 util 부분을 담은 기초 뼈대 코드를 깃헙에 업로드 했는데, 초기에 gitignore 설정이 뭐가 잘 안되었는지 clone을 받을때마다 문제가 발생했다. 결국 다시 repo를 만들고 새로운 gitignore 파일로 재시작을 해야했다. 깃허브는 정말 알다가도 모르겠다 ~_~ 나중에 회사가서도 이렇게 뚝딱되면 안되는데, 이번 프로젝트때 깃허브 사용을 더 많이 연습해야 할 것 같다.

 

2. 느낀 점 : gitignore 파일을 만들 때 아래의 링크를 이용해 작성했는데, 무조건 아래 사이트를 믿지말고 이전 프로젝트의 gitignore 파일과 비교해서 사용해야 했다. 항상 꼼꼼히 더블쳌 하는 습관을 들이자 ! 

https://www.toptal.com/developers/gitignore

 

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

 

3. 새로 알게 된 내용 : 오늘 카카오 로그인을 구현하면서 PostMan으로 어떻게 테스트를 해야하는지 배웠다. 그리고 카카오디벨로퍼 사이트에서 새로 구현하는 서비스에 맞게 내애플리케이션 설정을 바꿔주었다. 지난주 클론프로젝트땐 내가 맡았던 부분이 아니라 가볍게 코드만 쓱 보고 넘어갔는데, 이번 기회에 직접 설정도 하고 코드도 구현하다보니 좀 더 이해가 된 것 같다.

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

 

4. 셀프칭찬 (오늘 잘한 일) : 오늘 우리팀 노션을 가꾸고 ^__^ 내가 1차로 맡은 부분인 카카오로그인과 스웨거 부분을 잘 마무리 했다! 프로젝트에서 1인분 할 수 있는 사람이 되자 ! ! 

 

5. 내일 할 일 : 게임 API 파트 나누고 구현하기 + 웹소켓 계속해서 공부해보기 ! 


[오늘 공부한 부분] 

 

- 카카오톡 로그인 구현 + 포스트맨 테스트

- Swagger 파일 추가

- WebSocket vs WebRTC 의 차이!

- 미디어 서버 Spring boot 사용 예시 찾아보기 ( OpenVidu / Kurento) / 꼭 사용해야 하는지 

1월 1일도 젭출근

 

1. 어려웠던 부분 : 에어비엔비 클론프로젝트를 진행하며 새롭게 몇가지 기능을 추가로 배울 수 있었다. 추가 기능을 정리해보면 페이징/ 필터링 / 검색어/ S3 다중업로드/ OAuth 2.0 소셜로그인/ 이메일인증/ Swagger 이다. 이 기능들 중 필터링의 경우 Spirng JPA Data 기본 기능만으론 구현이 어려워 native query를 사용해야 했는데 구현을 하면서도 팀원들과 이게 최선인가? 이게 맞는건가?하는 의문을 가지고 있었다. 이 부분에 대해 기술매니저님이 QueryDSL 사용을 추천해 주셔서 사용법을 공부해 봐야 할 것 같다. 그리고 OAuth 2.0(카카오 로그인)과 이메일 인증의 경우 내가 맡은 부분이 아니라 다른 팀원분의 코드를 뜯어보는 시간을 가졌는데, 사실 이해가 잘 되지 않아 그냥 넘겨야만 했다. 이 부분을 실전프로젝트 때 가능하다면 복습하도록 해야겠다.

 

  • QueryDSL 사용
  • S3 사진 개별수정을 어떻게 구현해야 좋을까?

 

2. 느낀 점 : 프론트엔드와 두번째로 협업을 해보는 주차였다. 백엔드에 비해 프론트엔드 인원이 부족해서 부담이 많이 되실까봐 걱정했는데, 서로 배려하면서 작업하다보니 좋은 결과물을 만들 수 있었던 것 같다. 끝까지 최선을 다해서 백엔드에서 추가로 구현한 기능들을 반영해 주려고 해주신 프론트엔드 팀원분들께 감사했고, 각자 새롭게 맡은 부분을 그때그때 코드리뷰를 통해 설명해주신 백엔드 팀원분들에게도 감사한 주차였다.

 

3. 새로 알게 된 내용 : 페이징 처리 (Pageable) / 필터링 (@Param + 쿼리사용) / 검색어 (findByTitleContaining) / S3 다중업로드 List<> 사용 / OAuth 2.0 소셜로그인 / 이메일인증 / Swagger + 이번 프로젝트때 최대한 깃헙 컨벤션을 지키면서 진행을 했는데, 이 연습이 다음 프로젝트때 유용할 것 같다.

 

4. 이번주 잘한 일 : 팀프로젝트이다 보니 내가 맡지 않은 공부할 기회가 많지 않을 것 같다는 생각에 팀원들의 코드도 참고하고 구글링을 하면서 추가적인 공부를 병행하였다. 100% 이해했다고 할 순 없지만 그래도 모든 기능을 찍먹해본 것 같아 다음번에 같은 기능을 구현해야 한다면 좀 더 수월하게 접근할 수 있지 않을까 생각된다. 

 

5. 다음주 할 일 : 실전프로젝트 시작! API 명세/ ERD 설계 및 역할 분담해서 작업 시작하기 ! 


[ 이번주 공부한 부분] 

 

< 클론 프로젝트 >

[01] WebSecurityConfig

[02] Airbnb Clone Coding (Main CRUD)

[03] S3 이미지파일 다중업로드

[04] OAuth 2.0 카카오 로그인 구현

[05] Spring 페이징처리 + 키워드 검색기능 구현

[06] Spring 이메일 인증 구현

[07] Swagger

[09] 트러블 슈팅

[10] 프로젝트 정리

 

<JAVA>

[32] JAVA 입출력 스트림

 

< Spring >

[32] 이번주에 궁금했던 부분 정리

[33] 실전 프로젝트 기술 개념이해(1) WebSocket/WebRTC

[34] 실전 프로젝트 기술 개념이해(2) SockJS / Stomp /Redis

[36] WebSocket - In Memory 대신 외부 브로커 사용하는 이유

[37] 웹소켓 강의 추천 - 우아한테크 영상

 

+ Recent posts