저Do (Spring Boot Team Project)

🙋 저Do (Spring Boot Team Project)

약 보름간의 프로젝트가 또 끝이 났다.
저번 프로젝트때 프로젝트를 모두 마무리 하고 밀린 블로그를 작성하려고 하니 꽤 힘이 들었던 기억이 있어서 이번엔 프로젝트 중간중간 기록을 남겨야겠다는 생각을 했었는데 또 남기지 못하고 프로젝트에만 열중하게 됐다 😅
그럼,
이번 프로젝트는 어떻게 진행 되었는지, 어떤 새로운 걸 얻었는지 알아보도록 하자!! 🔥

---

프로젝트 소개

📌 깃허브 : 저Do (GitHub)

📌 프로젝트 시연 영상 : 저Do (Youtube)

프로젝트 주제 : Talent For Sale ( 멘토 멘티 서비스 )
참여 인원 : 6인
개발 기간 : 12/12 ~ 12/26
사용 기술 : ↓

내가 맡은 역할 : ↘

---

Time Table

---

Flow Chart & ERD

---

😎 내가 맡은 역할

가장 먼저, 이번 우리 프로젝트의 로그인 단은 카카오 로그인과 일반 로그인으로 나눠 작업하게 되었다.
여기서 카카오 로그인은 카카오에서 제공하는 REST API를 사용하기로 했고 , 일반 로그인은 JWT와 Spring Security를 사용해 구현하기로 약속하고 개발을 진행하게 되었다.

결론부터 말하자면 카카오 로그인으로 받아온 유저 정보와, 일반 회원가입으로 회원가입한 유저의 정보를 일치시켜 DB의 credential 테이블에 동일하게 넣어줬고, LoginMethod라는 테이블로 카카오 로그인 , 일반 로그인을 구분 해 주었다.

일반 로그인 ( jwt , spring security ) 은 내가 구현하진 않았지만 로그인 단 작업을 함께 하면서 어느정도 jwt와 spring security도 경험하고, 공부하게된 좋은 시간이었다.

자 그럼 카카오 로그인을 어떻게 구현하였는지, 또 내가 작업 한 나머지 기능들은 어떻게 구현했는지 알아보도록 하자!

---

카카오 로그인 ( REST API 사용 ) 구현

가장 먼저 카카오 API를 사용하기위해 카카오 Developers에서 내 애플리케이션 (우리 프로젝트)을 추가해야 한다.

👉 카카오에 내 애플리케이션 추가

양식을 따라 애플리케이션을 추가하면 아래와 같이 내 애플리케이션이 만들어지고 클릭해 들어가서 관리 할 수 있게 된다.

저번 프로젝트에서 사용했던 TMDB rest api처럼 api키가 주어지고, 이 api를 사용해서 우린 카카오에 원하는 정보를 제공해주는 요청 url를 보내주면 된다.

카카오 로그인 탭에 들어가면 활성화 설정 , OpenID Connect 활성화 설정등의 옵션이 있는데 사용자 필요에 따라 On , Off 하면 되고, 중요한건 Redirect URI 이다.
우리의 Redirect URI는 localhost:9090/kakao/login로 설정되어 있다. 카카오에 원하는 요청을 보내고 , 응답을 받는 주소이다.

카카오 로그인을 이용하려면 먼저 인가코드를 받아야 하고, 받은 인가코드를 이용해 토큰을 받을 수 있다. 또, 토큰을 이용해 로그인한 유저의 정보 , 토큰의 정보 등을 받을 수 있다. 우린 이걸 이용해 우리 사이트에서 카카오 로그인을 구현하면 된다.

요청 url에 대한 자세한 내용은 카카오 문서에 나와있다.

👉 카카오 rest api 로그인 문서

인가 코드를 받는 url을 어떤 버튼의 onclick 메서드에 담아 보내게 되면, 카카오는 우리가 정해놓은 redirect uri에 파라미터로 인가코드를 담아 넘겨준다. (우린 컨트롤러에서 받아 원하는 작업을 진행하면 된다.)

이런식으로 카카오는 인가코드를 뱉어주며 이 코드를 이용해 토큰을 받을 수 있다!

getToken 메소드 ↓

이제 이 토큰을 또 url에 태워 카카오로 원하는 요청을 보내면 원하는 응답을 받을 수 있다. 유저 정보도 위와 같이 제이슨형식의 데이터로 주기때문에 요청 보내고, 받아서 JSONparsing 하면된다. tmdb때도 그렇고 위 코드도 그렇고 형식이 동일하기 때문에 코드는 따로 올리진 않겠다.

카카오에서 유저 정보를 받아 프로젝트에 사용한 모습

---

JSON file을 이용한 카테고리 구현

우리 사이트의 메인 페이지이다.
메인 페이지는 구글처럼 최대한 깔끔하게 하며 주 기능만 넣고 싶어서 위와 같이 설계하게 됐다.
메인페이지에서 원하는 카테고리를 클릭하여 유저가 원하는 수업들로 갈 수 있도록, 아주 직관적으로 만들고 싶어서 위와 같이 만들게 되었는데, 카테고리를 불러오는걸 처음엔 DB에서 조회하는걸로 설계를 했다가 이와 같이 하면 수많은 유저가 저 캐릭터들을 클릭 할때마다 또한 클릭 후 중 , 소분류 선택시 마저도 DB를 갔다 와야 한다는 아주 큰 단점이 있었기에 JSON file을 따로 만들어서 기능이 구현되도록 프로젝트 중간에 바꾸게 되었다.

원하는 카테고리의 캐릭터를 클릭하면

중분류가 나오며, 중분류를 클릭하면

소분류가 나오게 된다. 소분류를 클릭하면

해당 주제의 수업들을 나열해주는 썸네일 페이지로 이동하게 된다.

위에서 말했듯 간단하고 고정된 기능을 DB연결까지 하며 구현하니 너무나 비효율적이었고, JSON file을 이용해 아주 간단하게 해결 할 수 있었다.

먼저 위와 같은 정적인 카테고리 json file을 손수 만들어 주었고,

이렇게 java script로 간단하게 구현해 줬다.

---

JPA를 이용한 여러 페이지 (검색, 클래스 리스트, 마이페이지 등) 구현

우리 프로젝트에선 JpaRepository interface를 이용했다.

JpaRespository를 이용해서 Jpql문을 사용한건 이번 프로젝트때 처음 해본거였는데, 생각보다 너무 편해서 놀랐다. 이전에 배운걸 까먹을 정도였다.

@Query 어노테이션에 원하는 쿼리문 (jpql)을 작성하고 추상메서드만 만들고 Service단에서 사용만 하면 된다.

클래스 관련 코드들이다. 어려웠던점은 jqpl문이 아직 익숙하지 않고, 조금이라도 틀리면 (오타나 표현식이 틀린경우) 런타임에러가 나는데, 생각보다 찾기 어려웠다.

---

이번 프로젝트를 하며 배운점과 느낀점

프로젝트가 끝날때마다 하는말이지만 또 한단계 성장한걸 느꼈다.
이제는 기능 구현뿐만이 아닌 전반적인 코드에 대해 고민하게 되었고, 간단한 기능에도 더 시간을 쏟게 된 것 같다. 한껏 자신감이 차있었는데, 배움은 끝이 없다는걸 느꼈고 뭔가 욕심이 더 생기게 되었다.
하지만 저번 프로젝트때와 같이 이젠 진짜 못만들건 없을 것 같다라는 생각이 들었다. 만들 순 있지만 이제 중요한건 얼마나 잘 만드냐의 문제인 것 같다.

앞으로 또 어떤 벽?을 마주할지 조금 두려우면서 기대도 되는 것 같다.