[구름톤] 자:몽 IDE 프로젝트 회고_02

☁️ 구름톤 첫 프로젝트 JA:MONG IDE 회고_02 ☁️

---

기획 발표가 끝나고, 본격적으로 코드 구현의 시간이다.

Git 공부

• Branch 쪼개기
  구름톤을 진행하면서 Git을 배우는 시간을 가졌지만, 팀 단위로 Git을 쓰는 것은 처음이었다. Repo를 나눠서 진행할지 등에 대해서도 이야기하는 시간을 가졌고, 우리는 한 Repo 안에 브랜치를 잘게 쪼개 진행하기로 결정했다.
  Main > Develop > FE, BE > 기능별 Branch
  로 쪼개 충돌을 최대한 방지하는 것이 목표였다.

• Git Convention을 작업한 뒤, 다 같이 모여 Git을 연습하는 시간을 가졌다.
  이 부분은 내가 담당했는데, 의외의 복병은 Mac이었다.. 나는 Mac 설정에 아주 취약했다.
  Window기반으로는 git bash를 쓴다면, 보통 mac은 terminal을 열어 사용했기 때문이다.
  그래도 열심히 찾아 기본적인 pull, push를 연습하며 git 기초를 다졌다.

믿었던 Spring의.... Version...

자몽 컨셉의 귀여운 회원가입 Page

• Social Login 등 로그인 부분에서 가장 대표적으로 사용하는 기술은 Spring Security와 Oauth 2.0 일 것이다. 나 역시 과거 프로젝트에서는 사용하지 않았던 기술이라 여러 자료들을 분석하고, 그대로 도입했으나, 계속해서 오류가 났다. 왜지?

• 거기다 Spring Security를 적용해놓으니 Log도 찍히지가 않았다. Log가 찍히긴 찍히는데 분석이 너무나 어려웠다. 원래 Log는 어느 부분에서 오류가 났는지 알 수 있으나 이 부분의 오류는 Spring Security에서 제공하는 부분에서 오류가 났기 때문에 파악이 너무 어려웠다. 살짝.. 눈물이 났다😂😂

• 끈질기게 계속 매달린 결과, 아주 간단한 원인이었다. Spring의 version이 달라진것이다. 기존 2버전에서 3버전으로 바뀌며 문법들이 바뀐 코드들이 더러 있었다. 나는 아주 생초보였기 때문에 이런 부분들마저도 간과하고 있었던 것이다. 많이 부끄러웠다. 바뀐 문법에 맞춰 하나씩 코드들을 수정했다. 그 중에서는 단순히 코드의 순서만 달라진 것도 있었다. 아찔하지만, 많이 배웠다. 그렇게 Google, Kakao, Naver를 포함한 일반 회원가입까지 로그인 기능을 무사히 끝낼 수 있었다.

• 소셜 로그인의 문제점은 url이 총 3번 리다이렉트 되는 과정을 제대로 이해하지 못해서 생긴 오류였다. 해당 코드들을 수정하며 보완했다. 또한 Spring Security에서 돌아가기 때문에 JPA Repository가 작동이 되지 않아 DB에 값이 들어오지 않았다. 이 부분은 3버전에 맞춰 수정했다. 그 외에도 자잘한 수정이 참 많았다.

• 다른 오류로는 JWT문제가 있었다. 토큰을 암호화하는 과정에서 스프링 3버전에서는 원래 쓰던 코드들을 더 이상 사용하지 않는다는 오류 메시지였다. 해당 부분은 HS256방식을 적용함으로써 해결할 수 있었다.

멘토링

• 구름톤은 프로젝트가 시작되면 기획 멘토링을 비롯해서 FE, BE 멘토링을 함께 진행한다.
  우리 역시 각각 멘토님을 배정받았고, 정말 많은 가르침을 받았다. 처음에는 딱히 고려하지 않았던 것 같다. 당장 오류가 생기면 즉각적으로 피드백을 받을 수 없기 때문이었는데, 계속해서 시도했는데도 오류가 계속 생기거나 하는 부분들은 멘토링을 통해 피드백을 받고 보완할 수 있었다.

• 백엔드 멘토링의 경우, 멘토님께서 내 코드를 보시고 좀 친다면서 칭찬을 해주셔서 아~ 어깨가 하늘로 솟는 이 기분~~~😁 백엔드 멘토님께서는 정말 쉽고 자세하게 설명해주셨다. 따로 로그인 부분에서 오류가 나서 여쭤보며 상담을 받았는데, 해당 방식에 대해서 자세하게 설명해주시고 같이 고민해주셔서 정말 감사했다. 백엔드 멘토링은 나보다는 다른 팀원이 CI/CD 부분으로 대부분의 멘토링을 받았는데 정말 감사했다.

• 프론트엔드 멘토님께서는 개발자로써 성장하기 위해 어떤 방법으로 공부하면 좋을지에 대해서도 알려주셨다. 인사쪽도 같이 담당하고 계시다고 말씀해주셨는데, 취업 준비를 어떻게 하면 좋을지, 어떤 책을 읽으면 좋을지에 대해서 시간을 내서 자세히 알려주셨다. 네트워크와 CS에 관련된 책을 추천해주셨고, 알고리즘 공부법에 대해서도 각 사이트별로 비교하며 설명해주셨다. 나도 현재 HTTP 관련 책을 사서 읽고 있다.

• 그 외에도 프론트 코드에 관련해서는 심플하게 원인을 바로 찾아서 어떤 식으로 보완하거나 수정해야하는지 바로 설명해주셨는데 질투날정도로 좀 멋있었다. 해당 방식에 대해서 A라는 문제점이 생긴다면 A-1 방식으로 보완했던 사례도 함께 설명해주셔서 리팩토링에 대한 방향성도 함께 제시해주셨다.

우당탕탕 프로젝트

• 그럼에도 프로젝트는 참 우당탕탕 굴러갔다. 특히, CI/CD를 담당했던 팀원이 많이 힘들어했다. 가장 믿고있었던 팀원이었는데, 아무래도 첫 프로젝트이다보니 팀원도 많이 헤맸다. 결론적으로 우리는 배포에 실패했다.

• 서버가 없으니 가장 힘든건 Front 팀원들이었다. Back코드들을 테스트해야 했기 때문이다. 결국 Intellij부터 관련 프로그램을 전부 깔고, 일일이 테스트하며 진행해야했다. 참 미안하고, 미안했다. 내가 더 능력이 있었더라면 내가 나서서 해결해야했는데, 변명이지만 그 당시 나는 여전히 오류를 해결하느라 정신이 없었기 때문이다. 오류 해결 후에는 계속해서 일이 늘어났다.

• 결론적으로 모두 힘들게 성장하는 시간이었다. 24시간 내내 Zep에 상주하며 계속해서 코드를 구현해야했다. 여담이지만 개인적인 일까지 겹치며 학원을 그만둬야 할 수도 있는 상황이었다. 모두 파이널까지 같이 가기로 했는데 많이 복잡한 심정이었다. 그래도 일단 내가 할 수 있는걸 계속 했다. 코드를 보완하고, 팀 일정을 관리하고 등.. 그렇게 1차 프로젝트가 마무리 되었다.

Login 기획 보완

• 일반 로그인과 소셜 로그인을 모두 진행했고, 모든 코드가 구현된 상태에서 테스트를 진행하다보니 치명적인 문제점을 발견했다.

• 일반 로그인과 소셜 로그인 모두 mail 형식 ID를 사용했는데, social Type으로만 구분하면 될 수 있을 것이라 판단했으나 ID 컬럼에 unique를 적용해 같은 메일의 다른 타입(일반/소셜)로는 로그인이 불가능했다. 컨테이너 초대, 강퇴 기능이 있었기 때문에 고유 데이터를 조회해야했으므로 unique를 적용한 것인데.. 아차 싶었다. 해당 기능을 수정하려면 기획을 새로 해야했다.

• 소셜 로그인의 경우, 해당 플랫폼에서 제공하는 정보도 모두 달랐다. naver에서 제공하는 mail값은 로그인 시 사용되는 mail이 아닌, 회원 가입 시 적는 mail이었다. 결국 이 부분은 멘토링을 통해 다음 프로젝트 때에는 디스코드 등과 같은 방법으로 닉네임+랜덤태그 번호를 통해 고유 데이터 조회 방식으로 기획 보완을 택했다.

• 다른 문제점으로는 이메일이 null값이 아니라 빈칸으로 DB에 입력되었다. 이럼 무슨 문제가 생기느냐.. 중복이 된다. naver로 두 명부터는 로그인이 안되는 것이다. uique 오류였으므로 naver만 null이 들어가게 수정했다.

Bcrypt와 프로필 편집

자:몽 IDE 로그인 후, 메인 페이지 화면이다. 좌측 프로필 편집이 가능하다.

• 로그인 시, 비밀번호 보완을 위해 Bcrypt 방식을 선택했다. mail이 unique이기 때문에 where문에 mail만 넣어 비교했다.(비밀번호 비교X) 이 코드를 뽑아내서 bcrypt 체크 후 비밀번호가 같으면 로그인이 성공하게끔 구현했다.

• 처음에는 Bcrypt가 어려워 일시적으로 Converter 방식으로 구현해놨는데.. 해킹맛집이라고 팀원들이 나를 강하게 키웠다.. 덕분에 Bcrypt로 재적용했다🤣

• 프로필 편집 시, 직전에 사용했던 비밀번호로는 변경이 불가능하게끔 기획을 했었다. 그리고 이 부분을 코드로 직접 구현하면서 순서가 헷갈렸다.

  • 첫 번째로 현재 비밀번호를 바꿀 때에는 이전 비밀번호로 이동하면 안된다.
    (직전 비밀번호를 기록하는 column에 값이 들어가면 X)

    ex. 이전 null 현재 123 이라는 password 사용
    → 프로필 편집(비밀번호가 아닌 다른 데이터 수정)
    → 이 때 passHistory에 123이 들어가버림 → 그럼 지금 비밀번호 사용 불가능

    뭐가 문제냐면, 비밀번호가 아닌 다른 데이터를 수정하는데 비밀번호를 계속 바꿔줘야 했던 것이다. 해결은 생각보다 간단하게 조건문을 넣어 보완했다.
    현재 비밀번호가 고객이 입력한 값과 같다면 무시할 수 있게끔 했다.

SSE 기법을 통한 채팅

• 추가 기능으로는 SSE기능을 활용한 채팅을 구현했다. 보통 채팅 하면 WebSocket이나 Kafka를 생각했겠지만, WebSocket은 과거 구현 경험이 있었고, Kafka는 너무 어렵다 판단했다. 보통 SSE 방식으로는 알림 기능을 구현하지만, 해당 방식으로 채팅을 구현해보고자 했다.

그 결과

• 결론적으로, 이번 프로젝트는 실패한 프로젝트로 쓰리게 끝이 났다. 코드 편집 부분의 백엔드 코드가 나오지 않았기 때문이다.
• 발표 직전까지도 PPT와 코드를 계속해서 수정해야했다. 발표는 늘 떨리지만, 이번은 특히 더 떨렸다. 계속해서 내용이 바뀌고 보완하고 있었기 때문이다.

아래 까만 화면은 가린게 아닙니다.. 컴파일 화면(터미널)입니다😅

• 다행히 컴파일 하는 부분을 제외한 모든 코드들은 정상적으로 돌아갔으므로, 더미 값을 넣어 시현할 수 있었다. 해당 부분에 힘써준 팀원들에게 진심으로 감사하다.
  특히, 테마를 3가지로 변경해야했는데 우리 팀 만의 테마를 넣었는데 발표로 빛을 볼 수 있어 기뻤다.

• 자세한 문서 작업이나 Jira 등 처음 시도해보는 작업이 많았던 프로젝트였다. 말도 많고 탈도 많았지만, 좋은 팀원들 덕분에 포기하지 않고 끝까지 완수할 수 있었다.
  이번 프로젝트를 통해 처음으로 팀원들을 만났는데, 좀 떨리기도 하고 설레기도 했다.
  마지막 순간에 다 같이 모여서 최선을 다한 덕분에 잘 마무리할 수 있었다.

• 포기했다면 실패한 기억만 가지고 있었을 것이다. 나는 이번에 좋은 실패를 했다고 생각한다. 이 프로젝트는 미완성이지만 리팩토링 등을 거쳐 충분히 성공할 밑거름이 되는 좋은 경험이었다.

귀여운 자몽 안녕~~