프로토타입 제작

 

프론트앤드 구현과 아키텍쳐에 대한 고민

 

프론트앤드 프로토타입

 

https://github.com/KwangJongJeon/whatIShouldEatTodayFrontProto

GitHub - KwangJongJeon/whatIShouldEatTodayFrontProto

https://github.com/KwangJongJeon/whatShouldIEatTodayBackProto

GitHub - KwangJongJeon/whatShouldIEatTodayBackProto

 

 

프론트앤드 프로토타입을 만들었다. 저번에 말했던대로 타입스크립트와 리액트를 통해서 만들었다. 막히는 부분도 많았고 포기할까도 싶었는데 결국엔 만들어냈다! 

 

 

이번에 구현해본 기능은 다음과 같다.

• 거리 선택 후 카테고리 선택
• 이 후 식사 추첨 버튼을 누르면 해당 값들을 백앤드 서버(spring)으로 전송

 

 

 간단한 기능들을 구현했음에도 불구하고 고민할 거리가 있었다. 그 중 하나는 아키텍쳐에 대한 고민이였다. 기존 포스팅을 보면 Layered Architecture를 사용한다고 했었다. 그런데 이게 백앤드인 프로토타입에는 맞는 아키텍쳐인데 프론트앤드인 리액트에 적용하기에는 조금 애매한 부분이 많았다. View 어디에다 나눠야할지도 고민이였고, 어거지로 dto를 사용해 state를 지정했었는데 이게 계속해서 경고가 떴었다.

 

setState를 사용하지 않고 state 변경한 코드

콘솔창에서의 에러

 

 아무래도 Layered Architecture 패턴을 어거지로 적용하기보단 리액트에 맞는 아키텍쳐를 찾아 적용해야겠다는 생각이 들었고, 구글링을 시작했다. 그랬더니 리액트에서는 FLUX라는 아키텍쳐를 사용한다고 한다. 이건 보통 REDUX를 이용해서 구현되는 경우가 많다는데 한번 공부해봐야 할듯하다. 리액트에 대한 기초가 좀 모자란거 같아서 '리액트를 다루는 기술'이라는 책도 샀다!

 

 

WebPack등의 알고싶은 라이브러리도 많이 수록되어 있어서 구매했다. 아마 이번주는 이 책을 읽는데 시간을 보내게 될 듯 하다.

 

---

개선할 점 및 추가 요구사항 아이디어

• 프로토타입을 만들다보니 개선할점 및 요구사항등이 생각나는게 몇가지가 있었다. 내용은 다음과 같다.
• 만약 User가 Permission 권한을 주지 않는다면 어떻게 할 것인가? 
• 유저가 움직일 때는 GPS를 어떻게 설정할 것인가?
• 기능 추가를 위해 User Database를 만드는 것이 바람직하지 않겠는가? ex) 유저가 이전에 먹은 식당을 기억, 추천, 예약
• 유저가 거리를 선택할 때 아래와 같은 UI를 제공하는 것이 어떤가? (이럴경우 프론트와 네이버 클라우드간 API 연동 필요)

 

 

 

위의 내용이 생각해본 내용들인데 어떻게 풀어낼지 고민해봐야겠다.

 

---

백앤드 프로토타입에서 어떻게 값을 계산해야할까?

내 프로젝트의 워크플로우 중 일부는 다음과 같다.

유저가 정보를 입력하고 프론트에 보낸다 -> 프론트는 백앤드에 값을 보낸다 -> 백앤드는 값을 통해 근방의 좌표를 구하고, 네이버 클라우드 API에 보낸다.

 

이중에 '백앤드는 값을 통에 근방의 좌표를 구하고'를 어찌 계산해야할지 고민이다. 그래도 고난의 구글링 끝에 다음과 같은 수식을 찾아내서 이제 이걸 어찌 활용할지만 생각해보면 될 것 같다.

 

https://en.wikipedia.org/wiki/Geographical_distance#:~:text=Geographical%20distance%20is%20the%20distance,second%20(inverse)%20geodetic%20problem. 

Geographical distance - Wikipedia