Facts
- 코드 리뷰 받은 것을 반영했다.
- 서버리스로 api key를 숨겼다.
- 블로그 스터디에 참여했다.
Feelings & Findings
코드 리뷰 받은 것을 반영했다.
어제 하루종일 고민하던 Service Layer에 대해서 페어와 함께 고민해 본 결과 고민만 하지 말고 우선 구현을 해보자고 생각을 했고, 구현을 시작했다.
우리는 Service Layer가 기존의 모델과 역할이 비슷하다고 생각했다. 그리고 기존의 모델은 LocalStorage를 알고 있도록 바꿨다.
Service Layer에서는 컨트롤러로부터 이러한 요청이 사용자로부터 들어왔는데, 알아서 처리해달라는 요청을 받는다. 즉, 컨트롤러에서는 요청이 들어왔다는 것만 알고 있고, 나머지 처리는 위임하는 것이다.
예를 들어 설명해보겠다.
사용자가 키워드를 입력하고 검색 버튼을 눌렀을 때, 컨트롤러에 요청이 들어가고, 컨트롤러는 받은 키워드를 서비스에게 준다. 서비스 내부에서는 키워드를 받아서 멤버변수에 할당하고, nextPageToken을 초기화하고, searchResult를 초기화하는 등 여러가지 일을 하지만 컨트롤러가 상관할 바가 아니다.
단지 서비스에게 검색을 했다는 것만 알려줄 뿐이다.
그리고 검색을 했으니 추가로 서비스에게 데이터를 달라고 요청한다. 요청한 데이터가 들어오면 컨트롤러는 받은 데이터를 뷰에게 뿌려주면서 뷰는 검색한 키워드에 대한 결과를 랜더링한다.
만약, 저장 버튼을 눌렀을 땐 버튼 id를 알고 있는 컨트롤러가 서비스에게 전달해주고, 서비스는 searchResult에서 버튼 id와 같은 videoId가 있는지 찾아서 있다면 그것을 model에게 저장하라고 넘겨준다. 여기에서 중요한 것이 모델에게 저장하라고 넘겨줄 때, 모델이 어디에 저장하는지는 서비스의 관심사가 아니라는 것이다.
즉, this.model.setVideo(video)로만 요청할 수 있고, 모델에서 로컬스토리지에 저장할지 쿠키에 저장할지를 정하는 것이다.
하지만 지금은 모델 자체가 로컬 스토리지라서 어떻게 보면 로컬 스토리지에 저장하라고 명령하는 것처럼 보일 수 있다. 왜냐하면 this.model.setVideo(video)가 아닌 this.model.setVideo('videoToWatch', video)라고 전달해주고 있는데, videoToWatch라는 key를 전달해주기 때문이다. 이게 어떻게 보면 맞고 어떻게 보면 틀린 것 같은데, 리뷰를 받아봐야 할 것 같다.
지금은 페어와 의견이 다르기 때문에 현재 this.model.setVideo('videoToWatch', video)로 사용하고 있다.
어쨋든 서비스에 대한 감이 잡히질 않던 어제와 다르게 어느정도 성과가 있었다고 볼 수 있다. 모델 - 서비스 - 컨트롤러 - 뷰의 형태로 이어지고, 코드도 정리되어서 보기에도 깔끔한 것이 느껴진다.
정리를 하다보니 컨트롤러에서 굉장히 많은 일을 하고 있었다는 것을 알 수 있었다.
우선, 컨트롤러에서 뷰나 모델에 어떤 요청 하나하나를 모두 하는 것 자체가 컨트롤러에서 해야된다고 생각했었는데, 그것이 아니라 큰 요청을 모델에 하나, 큰 요청을 뷰에 하나 이런식으로 하는 것이 좋다는 생각을 했다.
이것도 예를 들면 알기 쉬울 것 같다.
만약 키워드로 검색을 했을 때, 기존에는 모델아 키워드 저장해, 모델아 검색 결과 초기화 해, 모델아 맞는 데이터 줘, 뷰야 innerHTML 초기화 해, 뷰야 스켈레톤 랜더해, 뷰야 데이터 왔으니 이걸로 화면 렌더링해 이런식으로 모든 것을 하나하나 명령했다.
하지만 이렇게 세세하기 컨트롤러가 모든 것을 알 필요가 없었던 것이었다.
지금은 키워드로 검색을 했을 때, 서비스야 검색 요청이 왔어 데이터 줘, 뷰야 서비스에서 데이터를 줬어 화면 렌더링해줘 이렇게 두 단계로 이루어진다.
내부 구현은 뷰와 서비스가 알아서 할 뿐..
서버리스로 api key를 숨겼다.
배포를 도와주는 netlify를 사용해 깃 허브에 serverless function을 만들어두고, 이것을 배포해서 api key를 숨길 수 있게 되었다.
만드는 것은 한 크루가(@하루) 세세하게 블로그에 정리를 해두어서 쉽게 만들 수 있었다.
netlify로 10분 만에 API 키 숨기기
하지만 아직 serverless function에 대한 이해가 부족한 것 같아서 공부를 더 해야할 것 같다는 생각을 했다.
블로그 스터디에 참여했다.
매주 월요일마다 하는 블로그 스터디에 참여했는데, 30분이면 끝날줄 알았지만 1시간 30분이 걸려서 끝났다. 총 14명의 사람들이 있었고, 각각 자신이 작성한 글을 왜 작성하게 되었고, 무슨 내용인지 설명하는 시간을 가졌는데, 모두 말을 너무 잘해서 조금 당황했다.
게다가 난 늦게 참여한 나머지 앞에 한 4명~5명 정도를 듣지 못했다. 늦게 참여한 이유는 줌 주소가 어디에 있는지 몰랐고, 그래서 줌을 안하나보네? 라는 생각에 그냥 멍때리고 있다가 한 크루가 들어오라며 줌 주소를 알려줘서 들어가게 되었는데, 그게 이미 20분 정도 지난 시점이었다.
난 항상 이런 스터디와 같은 곳에서 다른 사람들의 발표를 들으면서 대단한 사람들밖에 없다는 생각을 한다. 모두가 준비되지 않은 똑같은 상황에서 말을 어떻게 저렇게 잘하는지 모르겠다.
나는 준비를 해도 잘 못하는데...ㅠㅠ
그래도 요즘은 데일리 미팅도 하고, 회고도 작성하고, 불편한 15분도 하고, 페어 프로그래밍도 하다보니 예전보다는 나아진 것 같다. 말할 때 긴장되는 것도 많이 사라졌고, 생각하면서 말하는 능력이 살짝 생겼다.
예전에는 그냥 무턱대고 뇌를 거치지 않고 아무 말이나 던져서 수습하는 것이 힘들었는데, 이제는 말을 천천히 하면서 생각하려는 노력을 해서 그런지 몰라도 뇌를 거치지 않는 부분이 많이 사라진 것을 느낀다. 아예 사라진 것은 아니다... 오늘도 몇 번은 당황했다.😭😭
그래도 한 달만에 조금 변한 것을 보니 몇 달 후면 완전히 다른 사람이 되어 있을지도 모른다는 희망이 생겼다!! 앞으로 이런 스터디를 많이 참여해야겠다는 생각을 하게 되는 하루였다.
Plans
- 다른 사람의 pr을 보면서 공부하기
- 유튜브 강의실 미션 피드백대로 코드 수정하기
- 서버리스 함수에 대해 더 공부해보기
- 시간이 나면 꼭 리팩토링 2권을 공부하기!!
