메인 기능 구현 완료

바뀐 부분

 

 사실 메인 기능 자체는 작년에 전부 구현했었는데  포스팅을 올리지 않다가 이왕 시작한 로그니 끝까지 써보자 해서 늦게나마 올리게 되었다.

바뀐 부분이 몇몇 있다. 첫 번째로는 식당들을 크롤링하여 사용할 것이라는 당초의 계획과는 달리, 카카오에서 제공해주는 API의 기능들을 사용하기로 했다. 

 

https://developers.kakao.com/docs/latest/ko/local/dev-guide#search-by-keyword

Kakao Developers

 

 HTTP를 통해 근처 위도의 식당을 몇개 가져오고, 그 뒤에 랜덤을 돌려 클라이언트에게 다시 돌려주는 방식으로 구현해냈고, 일단은 잘 돌아가는 것처럼 보인다. 다만 문제점이 하나 있는데, 예약기능이나 댓글남기기, 메뉴등의 정보를 따로 가져오는게 불가능해 내가 원하는 기능들을 전부 구현하려면 결국 처음에 생각했던 크롤링을 통해 내가 DB를 전부 구축하는 방식으로 진행하는 것이 맞을 듯 하다.

 

구현한 기능들을 정리해보자면 다음과 같다.

1. 회원가입
2. 로그인
3. 식당추천
4. 회원 정보 수정

하나 하나 정리해보자.

 

 

---

1. 회원가입

 

1.1 회원가입 백앤드 구현

스프링 - WebSecurity Config 

 

BcryptEncoder 사용

 백앤드쪽에서 스프링 시큐리티를 통해 구현했다. reservation을 구현할 것으로 생각하고 따로 url 처리를 해줬지만 아직 구현하지 못해서, 미래에나 활용 할 수 있을듯 하다. 암호화는 BcryptEncoder를 사용했고, 세션으로 로그인 처리를 해주는 방식으로 구현했다. 

 

 

1.2 회원가입 시연

 

웹에서의 회원가입 UI

  프론트쪽은 Redux와 Redux-saga를 통해 구현했다. 위의 회원가입 버튼을 누르면 Redux-saga를 통해 비동기적으로 백앤드쪽으로 해당 데이터들을 날려서 마리아DB에 저장하도록 만들었다. 

회원가입시 백앤드 로그

SQL에 저장된 모습

 

 

 

---

2. 로그인

위의 폼에 회원가입했던 유저의 아이디와 패스워드를 넣고 로그인을 누르면, 백쪽으로 데이터를 날려 유효한지 확인한다. 이후 유효하다면 백에서 Response에 JSessionID 쿠키를 보내 프론트쪽에 세팅하게 한다.

 

브라우저에 저장된 JSESSION 쿠키

 

 

이후 세션덕에 로그인이 유지되는 모습을 볼 수 있다.

 

 

---

3. 식당 추천

 

식당 추천 화면이다. 다음과 같은 순서로 진행된다.

1. 프론트쪽에서 범위와 카테고리를 지정한 후 버튼을 누른다.
2. 백쪽에서 해당 데이터를 받고 카카오 API로 보낸다
3. 카카오쪽에서 데이터를 받고나서 식당을 선정한다
4. 백쪽에서 프론트쪽으로 데이터를 보낸다.

데이터를 보내고 난 뒤 프론트쪽에서 추천된 식당을 출력해주고 끝난다.

 

 개인적으로 아쉬운 기능이다. API를 사용했기에 주어진 정보들만으로는 할 수 있는게 많지 않았다. 다음에 DB를 직접 만드는 방식으로 바꿔서 예약, 댓글 등 기능을 추가해나갈 예정이다.

 

 

 

---

4. 회원 정보 수정

 유저의 데이터를 Update해주는 과정이다. 수정 후에 DB에서 데이터가 변하는 것을 확인 할 수 있다.

 

수정 전

수정 후

 

이후 UI도 바꾼 유저의 정보에 따라 바뀌는 것을 볼 수 있다.

 

 

 

---

이후의 일정.

 

기능 추가는 크게 네 가지 정도로 생각해봤다.

1. AWS에 해당 앱을 올려서 다른 사람들도 쓸 수 있게 하기

2. 자체 DB 구축하기

3. '2'번을 통해 구축한 DB로 예약기능, 댓글기능, 메뉴보기 기능 만들기

4. 웹 뿐만 아니라 접근 할 수 있는 통로 늘리기(ex. 채팅봇)

 

일단 생각 나는 것들은 이정도이다. 중간중간 리팩토링도 진행하면서 만들어나가보자