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] 웹소켓 강의 추천 - 우아한테크 영상

 

 

1. 어려웠던 부분 : 백엔드 팀원들과 음성채팅과 화상채팅 기능에 대해 알아보다 메시지브로커/ Openvidu 에 대한 의문이 생겼다. 먼저 메시지 브로커의 경우, 왜 굳이 Stomp 프로토콜 In Memory Broker가 아니라 RabbitMQ, ActiveMQ 와 같은 외부 브로커를 사용하는 걸까? - 이부분은 오늘 공부한 부분에 담아놓았다 (맨 아래 링크 참조) 그리고 몇몇 레퍼런스를 찾아보니 Openvidu 라는 것을 사용하던데 백엔드 쪽에선 어떻게 사용하는건지 자세히 나와있는 예제가 별로 없어서 https://docs.openvidu.io/en/2.25.0/ 이렇게 공식 사이트까지 들어가서 찾아보게 되었다. 알고보니 프론트엔드쪽에서 사용하는 기술이라는 것을 알 수 있었다. 배워본적 없는 새로운 기술을 사용하려다보니 여러모로 시작이 쉽지는 않은 것 같다.

 

[ 참고 자료 ] - Openvidu vs Kurento

 

화상 미팅을 간단하게 구현할 수 있는 Kurento와 Openvidu 프레임워크

https://2jinishappy.tistory.com/248?category=948597 WebRTC - 웹 브라우저 간 실시간 미디어 통신 기술 WebRTC: Web Real-Time Communication 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API 2020

2jinishappy.tistory.com

 

2. 느낀 점 : 막막하긴 하지만 팀원들과 서로 이해한 부분을 공유하고 다시 개념을 잡아보는 과정이 힘들면서 재밌기도 하다. 이번에도 얼마나 성장할 수 있을지 기대가 된다.

 

3. 새로 알게 된 내용 : 팀원들과 이번에 사용할 WebSoket, WebRTC, Redis, RabbitMQ, SOCKJS + STOMP 에 대한 자료를 서로 공유하면서 공부하는 시간을 가졌다. 특히 유튜브 노마드코더의 웹소켓 관련 강의와 우아한테크 아론님의 웹소켓 강의가 개념을 이해하는데 큰 도움이 된 것 같다. 사실 오픈채팅 화상채팅과 관련해선 생각보다 백엔드에서 크게 어려운 부분이 없을 것 같아 다음주 부턴 게임의 알고리즘을 짜는데 더 시간을 투자해야 할 것 같다.

https://www.notion.so/Backend-Key-Features-Technical-Stack-1cfdea06bb2f433592d688d79dfc309e

 

4. 셀프칭찬 (오늘 잘한 일) : 막막하지만 그래도 차근차근 개념을 공부하고 비슷한 프로젝트 레퍼런스를 깃헙에서 찾아 공부하고 있는 나를 칭찬한다! 

 

5. 내일 할 일 (일요일) : 일주일 공부 정리하기 

 


[오늘 공부한 부분] 

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

 

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

실전프로젝트에 실시간 채팅과 음성 채팅 기능을 구현해야 한다. Spring 채팅기능에 관련해 찾아보니 WebSocket과 WebRTC 두가지 키워드가 등장했다. 다음은 WebSoket과 WebRTC에 대한 간략한 정리이다. Web

leejincha.tistory.com

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

 

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

WebSocket은 클라이언트 서버간 양방향 통신이 가능하지만, 다음과 같은 이슈가 있다. 1. websocket미지원 웹 브라우저가 있다는 점 2. 웹 브라우저 이외의 클라이언트 지원(서버 입장에서는 클라이언

leejincha.tistory.com

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

 

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

Message Broker란? Publisher로부터 전달받은 메세지를 Subscriber로 전달해줄 때 중간에서 메세지를 주고 받게 해주는 중간 역할 https://docs.spring.io/spring-framework/docs/4.3.x/spring-framework-reference/html/websocket.html

leejincha.tistory.com

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

 

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

1. 웹소켓 기술 전이중 통신 - 실시간성 보장하는 서비스 (채팅, 게임, 주식거래 사이트 등)에 주로 사용 HTTP에도 실시간성 보장하는 기법이 존재하지만, 서버에 부하가 많이 가기 때문에 웹소켓

leejincha.tistory.com

 

 

1. 어려웠던 부분 :

드디어 오늘 나의 취업이 달린 실전프로젝트가 시작되었다. 오늘은 새로운 팀원들과 인사하고 기획하는 시간을 가졌다. 사실 서비스 기획이 가장 어려운 부부인 것 같다. 나는 공공 API를 이용해 약정보를 알려주는 ( 약의 기능, 부작용, 같이먹으면 안되는 음식 등등) 서비스와 스무고개 (게임) 아이디어를 제안했고 다른 분들은 반려견 돌봄 서비스, 건강관리 서비스, 마피아게임 등의 의견을 주셨다. 

 

오랜 회의 끝에 런닝맨에서 나왔던 양세찬게임, 이른바 "콜마이게임"을 기획하였다. 하루종일 몇시간씩 기획회의를 하고, 와이어프레임을 짜고, 디자이너님을 위한 캐릭터 레퍼런스까지 찾아보고, 담당 디자이너님을 만나 회의를 진행하다 보니 진이 다 빠지는 하루였다. 그래도 팀원 모두가 만족한 기획안이 나온 것 같아 기분이 좋다.

 

2. 느낀 점 : 

이번엔 일주일이 아니라 6주 동안 함께하는 팀인 만큼, 그라운드 룰을 정하는 시간을 가졌다. 그 중 짜증내면 반성의자로 추방, 힘들단 말 대신 아자아자 화이팅 외치기가 아주 마음에 든다 ㅎㅎ 새로운 기술을 사용하게 되는 만큼 걱정도 되지만, 그만큼 기대도 되고 재밌는 프로젝트가 될 것 같다 ! 

 

 

3. 새로 알게 된 내용 : 

오늘 기획 회의를 마치고, 우리가 이번 프로젝트에서 깊게 파보고 사용하게 될 음성채팅기능에 대해 찾아보았다. 큰 키워드로 WebSoket, WebRTC, Openvidu, Redis, RabbitMQ 등의 자료들을 볼 수있었는데 내일 더 자세히 공부해 봐야할 것 같다.

 

4. 셀프칭찬 (오늘 잘한 일) : 새로운 기술에 도전하는 나를 칭찬한다 ! ㅎㅎ 

 

5. 내일 할 일 : 실전 프로젝트에 필요한 기술 공부하기


[오늘 공부한 부분] 

 

+ Recent posts