오늘도 이렇게 하루가 갔습니다.

 

1. 어려웠던 부분 

  • 없다 ! 오늘은 프론트엔드분들과 디자이너님의 UI변경을 제외한곤 백엔드 팀은 급하게 처리해야할 일은 없었다.  ( 뭔가 한가한게 싸늘하다. 쉴새없이 달려왔는데, 이렇게 갑자기 하루가 여유가 있으니까 이상하다. )

 

2. 느낀 점 : 

  • 오늘은 여유가 있어서 유튜브로 개발자 브이로그, 개발자 면접, 개발자 현실 등 다양한 컨텐츠들을 찾아봤다. 
  • 수료를 코앞에 두고 요즘들어 정말 내가 개발자가 될 수 있는 사람인가에 대한 고민이 많아졌다. 그래서 자꾸만 위와 같은 영상을 찾아보면서 스스로를 객관적으로 판단해 보려 한다. 항해를 하면서 아 이사람은 진짜 개발 머리가 타고났다 라고 생각드는 사람도 있는데, 일단 나는 아니다. 언젠가 같은반 팀원분이 나는 '노력형 천재'라고 정말 기분좋은 칭찬을 해주신 적이 있는데, 진짜 쥐어짜내면서 노력해야 그나마 따라가는 사람이다. 
  • 빨리 부트 캠프가 끝나기만을 기다렸는데, 진짜 일주일도 안남은 오늘 ! 가끔 급격하게 블로그 방문자 수가 느는 날이 있는데 오늘도 갑자기 방문자 수가 100명을 돌파했다. 아마 항해99 키워드로 검색하신 분들인 것 같은데, 다음주에 수료를 마치면 항해99 리얼 후기를 남겨야 겠다. 

 

4. 셀프칭찬 (오늘 잘한 일) 

  • 오늘 PM직무로 한 군데 지원서를 넣었다. 스스로를 의심하지 말자

 

5. 내일 할 일 : 내일은 오후에 만나기로 해서 아침에 운동갔다가 오후에 발표관련 공부를 할 예정 ! 예상 질문을 좀 작성해봐야 겠다.

놀러와주셔서 감사합니다 ㅎㅎ

 

1. 어려웠던 부분 

  • 리프레시 토큰을 이용해 액세스 토큰 재발급을 하는 api가 이상하게 게임룸페이지 안에서는 정상 작동하지 않았다. 로비페이지 랜딩페이지, 커뮤니티 페이지에서는 문제없이 토큰 재발급이 되고 로그인이 순조롭게 연장이 되는데 확실하진 않지만 WebRTC 때문인지 WebSocket 때문인지 뭔가 충돌이 있는 듯 하다. 
  • 처음에 의심한 부분은 아래 사진과 같이 다른 페이지들에서는 Request Header 부분에 키값이 accesstoken 으로 그리고 밸류가 토큰값으로 잘 들어가는데  게임룸에서는 cookie 라는 키값에 밸류로 액세스토큰 값과 닉네임 값이 같이 들어가 있는 부분이었다. 결론적으로 이 부분은 상관이 없던 문제 였던 것 같다.

좌측이 게임룸일때 우측이 로비페이지일때

  • 프론트엔드 팀원분과 오랜 삽질 끝에 문제의 해결책을 발견할 수 있었다. 일단 프론트엔드에서 액세스토큰 발급을 일정 시간이 지나면 setTimeout() 으로 토큰 재발급 api 요청을 하도록  하고 있는데, 이 코드가 전역적으로 반영이 되는 구조였다. 그런데 이상하게 WebRTC 코드가 있는 GameRoomRTC 컴포넌트에는 반영이 되지 않았다. 
  • 그래서 아래와 같이 [ GameRoomRTC ] - [ WebRTC signaling ] 이 처음 시작되는 [ useEffect ] 안에서 액세스 토큰을 만드는 setAccessToken() 함수를 호출하여 유저이 토큰정보를 담아서 보내주도록 코드를 수정하였다. 이렇게 일부러 함수를 따로 선언하고 호출했더니 게임룸에서도 제대로 토큰 재발급 api가 작동했다.
  // WebRTC signaling section
  useEffect(() => {
    setAccessToken(getAccessToken('AccessToken'));
    if (!sessionStorage.getItem('normalEnter')) {
      useToast('정상적인 접근이 아닙니다', 'warning');
      navigate('/rooms');
    }
    connect();
    socketRef.current = new SockJS(`${process.env.REACT_APP_SIGNAL_URL}`);

 

2. 느낀 점 : 

  • 이제 프로젝트도 마무리 단계이다. 프론트엔드팀은 유저 피드백을 반영해서 UX/UI 수정하느라 바쁘고 백엔드는 그동안 구현한 개념 공부를 하고 있다. 이제 진짜 일주일 남았다는 사실이 믿기지가 않는다. 오늘도 새벽 3시가 넘은 시간까지 같이 버그를 수정하고 브로셔 작업, 영상촬영 스크립트 작업을 했다. 우리 팀원들은 다 좋은 개발자가 될 것 같다.

 

3. 새로 알게 된 내용 :

  • 새로 알게 된 내용은 아닌데 오늘 트러블 슈팅을 비롯해 웹소켓 동시성 제어도 그렇고 일단 뭔가 해결은 됐는데 왜 어떤 이유로 트러블이 발생했는지 원인을 모르는 경우가 꽤 있다. 
  • 시니어님이 일단 원인부터 알아야 된다고 하셨는데, 원인 그거 어떻게 알 수 있나요 ㅜ ? ㅎㅎ 

 

4. 셀프칭찬 (오늘 잘한 일) 

  • 오늘도 잘 버텼따 아 . 깊게 파고드는 것은 정말 힘들지만 해결하고 나면 뿌듯하다 ! 

5. 내일 할 일 : 영상 제출 및 개념 정리 공부 / 코드 리팩토링 

 


[ 오늘 한 일 ] 

  • 리프레시토큰 버그 수정
  • 브로셔 작성
  • 깃허브 리드미 작성
  • 설문 이벤트 당첨자 발표

 

[ 나몰닭 FE Github 주소 ] 

https://github.com/namoldak/Frontend/blob/dev/src/components/GameRoom/GameRoomRTC.jsx

 

GitHub - namoldak/Frontend

Contribute to namoldak/Frontend development by creating an account on GitHub.

github.com

https://www.notion.so/802c9f1f4fce4ed29557a7ea2768fd6b

 

[나만 모른 닭] 실시간 화상 채팅으로 즐기는 퀴즈 게임

0️⃣ 탄생 배경

www.notion.so

 

 

이제 진짜 일주일 남았다!

 

1. 어려웠던 부분 :

  • 이번주에 드디어 준비한 서비스 배포를 했다. 그런데 하자마자 큰 이슈가 발생했다. 바로 웹소켓 연결이 게임을 끝내고 게임방을 나가도 끊어지지 않아서 계속 채팅이 콘솔로그로 확인했을 때 보이는 문제였다. 이 부분을 프론트엔드 코드에서 웹소켓 연결을 끊어주는 부분을 추가하여 해결 할 수 있었다.
  • 리프레시 토큰의 경우에도 처음에 액세스 토큰을 이용하여 토큰 재발행 api 호출을 어떻게 해야할지 몰라 에러 코드로 프론트엔드와 맞춰보기도하고 별짓 다 해보면서 많이 헤맸다. 그러다 프론트에서 setTimeout()을 이용하여 토큰 만료 일정 시간 전 요청이 가도록 수정하여 해결 할 수 있었다.
  • 이미지 파일을 저장하고 있는 S3의 엔드포인트 주소가 이미지 url에 그대로 노출되고 있었는데, 이 부분도 CloudFront와 Route53을 이용한 서브 도메인 적용하여 해결하였다. AWS에서 설정해줘야할 부분이 많아서 헤맸지만 결국 해냄 ! 
  • 유저 테스트를 하면서 간혹 카카오로그인으로 서비스 이용시 에러가 발생하는 이슈가 있었다. 알고보니 카카오 로그인 옵션 중 이메일 허용이 선택사항으로 되어 있었는데, 이 부분을 체크하지 않고 로그인한 경우 원활한 서비스 이용이 불가능 했다. kakao developers에서 이메일 체크를 필수사항으로 변경 후 에러 해결 ! 
  • 이밖에 일주일 동안 유저 피드백을 토대로 다양한 UX수정이 있었다. 나름 잘 준비했다고 생각했는데, 배포 첫날부터 여러 이슈가 있어서 정신없이 보낸 한 주였다.

 

2. 느낀 점 : 

  • 서비스 배포후 추가기능 구현과 유저 피드백 반영을 하느라 정신이 없는 한 주를 보냈다.
  • 그래도 짧은 시간 내에 다양한 트러블 슈팅을 해결해서 뿌듯하다.
  • 다시한번 느끼지만, 혼자 였으면 하지 못했거나 포기했을 많은 부분들을 팀원들과 같이 했기 때문에 헤쳐나갈 수 있었다.
  • 지금은 이렇게 서로 도와주는 분위기고 물어보는 분위기라 해결을 하는데, 만약에 현업에서 일을 하는 상황이라면 어떻게 혼자 잘 극복할 수 있을까 라는 생각이 든다.

 

3. 새로 알게 된 내용 :

  • S3 엔드포인트 주소는 노출되면 안된다.
  • 리프레시 토큰은 클라이언트 쿠키로 노출되면 안된다. 서버에만 저장하자! 
  • 웹소켓 연결이 불안정한 이유를 synchronized 키워드로 잡는 것은 지양해야 한다. (여러 방법 시도했지만 이 방법 외에 먹히는게 없어서 일단 적용)
  • 카카오톡 회원탈퇴는 일반 탈퇴와 달리 카카오에 별도의 redirect url을 요청해야한다. 
  • 기능뿐만 아니라 UX적인 측면에서 유저 피드백을 반영해서 빠르게 서비스를 개선시키는 경험을 했다.

 

4. 셀프칭찬 

  • 실제로 서비스를 배포해보면서 다양한 경험을 할 수 있는 뜻깊은 주차였다. 
  • 좋은 개발자가 될지 아니면 다른 길을 걷게 될지 모르겠다. 그렇지만 이 경험이 내 인생에 분명 플러스가 될 것 같다. 
  • 이제 진짜 일주일 남았다. 지금까지 잘 버텨온 내 자신이 대견하다 ㅎ _ ㅎ ... ! 
  • 제로베이스 비전공자가 호기롭게 Spring 을 기술스택으로 선택해서 참 용캐도 살아남았다. 잘했숴 

 

5. 다음주 할 일 : 최종 발표회 준비 ! 


[ 이번주 공부한 부분]

 

노션 : https://www.notion.so/ad96dfad0856455c922e9d0f756a7f60

 

나만 모른 닭

프로젝트 계획

www.notion.so

 

[27] 5주차 기술멘토링 피드백 정리

 

[27] 5주차 기술멘토링 피드백 정리

최종발표회 준비에 많은 시간을 쏟기 보다 그 이후에 면접을 보고 개발자로 커리어를 시작하는게 중요 따라서 추가기능이나 구현을 먼저 하는 방향으로 그리고 이력서를 미리 준비할 것 ! ( 포

leejincha.tistory.com

[26] Refresh Token with Redis final! 최종 버전 :)

 

[26] Refresh Token with Redis final! 최종 버전 :)

토큰 생명주기 관리를 위해 Redis TTL(Time To Live) 기능을 사용하는 방향으로 수정해 보았다. TTL기능을 사용하기 위해선 CrudRepository를 상속받아야 한다. 그래서 수정된 코드는 아래와 같다! 1. RefreshTo

leejincha.tistory.com

 

 

 

수정 전
수정 후

 

 

1. 어려웠던 부분 

  • 오늘도 돌아온 토요일 답게 시니어님께 피드백을 듣는 시간을 가졌다. 리프레시 토큰과 관련해서 어디에 저장하고 어떻게 관리하는가에 대한 질문을 주셨는데, 현재 우리는 서버에도 저장하고 클라이언트 헤더에도 리프레시토큰을 저장하고 있었다. 처음 리프레시 토큰 레퍼런스 깃헙 자료를 참고로 구현하다보니 구현 후에 이 부분이 궁금했는데, 멘토링 덕분에 궁금증이 해결되었다. 클라이언트에는 리프레시 토큰을 저장하지 않는게 맞다. 그래서 액세스 토큰은 클라이언트 쿠키에 저장하고 리프레시 토큰은 서버에만 저장하는 방식으로 수정했다.

 

2. 느낀 점 : 

  • 확실히 멘토링 할때마다 시니어님의 조언으로 궁금증이 해소되는 부분이 많다. 우리가 헷갈려하고 궁금했던 부분들을 스스로 찾아 볼 수 있도록 키워드를 던져주시고 알려주시는데, 실제로 내가 다니는 회사에 이런 시니어분이 있다면 정말 좋을 것 같다는 생각을 했다.

 

3. 새로 알게 된 내용 :

  • 리프레시 토큰은 클라이언트에 노출되어선 안된다 !! 명심 하자 !! 
  • 지금 수정된 방식이라면 확실히 보안적으로 좋을 것 같다.

 

4. 셀프칭찬 (오늘 잘한 일) 

  • 받았던 피드백을 바로 반영해서 수정했다! 

 

5. 내일 할 일 : WIL 작성

 

 

 

1. 어려웠던 부분 

  • 서비스 배포 후 몇몇 유저들이 카카오로그인을 하면 'JWT토큰이 만료되었습니다.' 라는 오류 메세지와 함께 계속해서 튕기는 오류가 있었다. 왜 우리 팀원들이 할 때는 잘 되는데 안되지?라고 다시 카카오 로그인을 하나씩 뜯어보니 로그인 시 이메일 허용이 선택사항으로 되어있었는데, 이 부분을 체크하지 않으면 위와 같은 오류가 떴던 것이었다. 
  • 이를 해결하기 위해 Kakao Developers 의 내 애플리케이션 - 카카오로그인 - 동의항목 에서 이메일이 선택동의로 되어있었다. 이 부분을 필수동의로 바꿔주니 해당 오류가 해결 되었다! 호 ~ 

 

2. 느낀 점 : 

  • 서비스 배포를 통해 코드만 잘 짜서 되는게 아니라 환경설정이 참 중요하다는 것을 배우고 있다. AWS, 소셜로그인, 깃헙액션 등 설정을 잘 해줘야 한다. 그리고 구글 설문폼이나 서비스 내부에 플러그인으로 넣어주는 고객서비스 개념의 채팅 서비스 같은 부수적인 부분, UX적인 부분 등 많은 부분들이 잘 갖춰져야 하나의 완성된 서비스가 된다. 

 

3. 새로 알게 된 내용 :

  • 서비스 배포를 통해 코드만 잘 짜서 되는게 아니라 환경설정이 참 중요하다는 것을 배우고 있다. AWS, 소셜로그인, 깃헙액션 등 설정을 잘 해줘야 한다. 그리고 구글 설문폼이나 서비스 내부에 플러그인으로 넣어주는 고객서비스 개념의 채팅 서비스 같은 부수적인 부분, UX적인 부분 등 많은 부분들이 잘 갖춰져야 하나의 완성된 서비스가 된다. 
 

4. 셀프칭찬 (오늘 잘한 일) 

  • 이번 프로젝트에 내가 담당한 부분이 많지 않아서 그래도 담당한 부분이라도 잘 처리하고 싶었는데, 어느정도 마무리가 잘 된 것 같다.
  • 내일 있을 멘토링 자료를 준비하면서 다시한번 우리 서비스에서 사용된 기술들과 의사결정 과정들을 정리했다. 

 

5. 내일 할 일 : 기술멘토링 ! 멘토링 후 피드백 반영하기.

+ Recent posts