# Week5 피어 세션
> 참여자 : J019 권오민 | J071 문혜라 | J186 정수원 | J083 박인서
>
## 활동 목적
- 한 주 되돌아보기
- 배울 만한 점 배우기

## 진행 순서
- 커밋 브리핑
- 코드 리뷰

## 커밋 브리핑 / 시연
> 순서 : 정수원, 박인서, 권오민, 문혜라

## 코드 리뷰
### J019 권오민
- (정수원)
- api 요청부랑 옵저버블(발행자)을 통합하셨군요..!
- 저는 api 요청부랑 옵저버블(발행자)을 구분해야한다는 생각에 데이터를 로컬스토리지에 저장하는 보안에 안좋은 방법을 사용했는데, 이 방법도 새롭네요.
- 혹시 통합한 특별한 이유가 있을까요?
- 오민님 옵저버 패턴을 보니까 제가 한참 잘못 작성했다는 느낌이 드네요..😂
- 컨트롤러가 MV를 커넥트 해주고 M은 구독자 리스트를 갖고 V는 notify를 들고 있네요
- 저는 M이 구독자의 모듈을 들고있고, M이 motify하면 해당 모듈이 실행되도록 했슴다 ㅠㅠ
- MVC 패턴과 흐름을 미리 그려보셔서 그런지 코드가 전체적으로 깔끔하고 잘 구조화 되어있는 느낌이 듭니다
- 많이 배웠어요!
- 그런데 V는 notify시 공통적으로 erase() 만 실행하는데, 옵저버 패턴(구독,발행)으로 실행되는 모듈을 erase()만 적용하신게 맞나요?
- (박인서)
- ListController 14번째 줄에서 { data } 로 값을 받으시면 data.data라고 하지않고 바로 data로 값을 사용하실 수 있을것같아요.
- ListView에서 27번째줄에 자기자신을 호출했는데 this.getDate(item)와 다른점이 무엇인지 궁금합니다
- controller에서 notify를 하고있는게 인상적이네요. 전 controller를 따로 사용하지 않았는데, 사용했을때의 이점이 있을까요?
- (문혜라)
- 파일이름이나 변수 이름이 규칙적이고 직관적이어서 코드 읽기 편했습니다.
- 컨트롤러에서 뷰와 모델을 불러오시네용!! 뷰 <- 컨트롤러 -> 모델 이런 구조로 코드를 구현하신 게 맞을까용? 컨트롤러의 역할을 잘 몰랐는데 이런식으로 구현할 수도 있구나 하고 알아갑니당

### J071 문혜라
- (정수원)
- 어맛..커밋메세지가 꽃밭이네요🌝 이모지가 추가되는줄은 몰랐는데 이뻐요..🥰
- 정리가 잘 된 뭔가 피라미드 형태(?)의 계층 구조네요
- 이벤트 콜렉터의 정체와 역할을 설명해주세요!
- component_core.js 에서 forEach를 도는걸 보니
- 콜렉터 요소마다 cb(matchedTarget) 메소드를 가지는 것 같은데 그 메소드도 함께 설명해주세요!
- models/login_model.js : `const localStorage = window.localStorage;`에서 window빼고 그냥 쓸 수 있지 않나요?
- 이건 모두에게 질문하고 싶은 부분이에요! 옵저버or이벤트리스너(or조건부실행)를 채택하는 기준이 뭘까요?
- 혜라님 같은 경우, 로그인/로그아웃 옵저버패턴을 적용하셨는데
- 저는 이벤트리스너로 가능한 부분은 웬만하면 이벤트리스너로 처리하려고 했던것같아요
- (박인서)
- commit을 작업별로 잘 구분하신것같아요. 특히 이모지로 commit의 역할?이 한눈에 보여서 좋은것같습니다
- 저는 dist폴더는 빌드의 결과물이기 때문에 git에 직접올리는것보단 ignore하는게 좋다고 생각해서 ignore했는데, 올리신 이유를 알수있을까요?
- public/index.html 에서 script를 넣어주고 계신데, 이미 webpack이 자동으로 script를 주입해주기 때문에 직접 script를 넣으시면 같은 js파일이 두번 실행되는걸로 알고있습니다. script를 넣지 않았을 때 잘 동작하는지 확인부탁드립니다!
- global 폴더에 있는 파일들은 어떤 역할을 하는걸까요?
- (권오민)
- 각 파일 이름이 좀 더 명확하면 구분하기 쉬울 거 같아요! (index.js나 view or controller 등)
- 컴포넌트가 제가 한 것보다 작은 단위로 구성하신 것 같은데 이게 더 이벤트 처리할 때 관리가 편할 것 같네요.(추가, 수정, 삭제 등...) 그런데 컴포넌트가 많아진다는 부작용? 마스터님이 말씀해주신 것 같긴한데 장단이 있는 것 같습니다. 배우고 가요.
- 내역 리스트를 어디서 렌더하는지 못찾았아요 ㅠㅠ

### J186 정수원
- (박인서)
- commie message를 영어로 작성하시다니.. 대단하십니다! 전 영어를 못해서 엄두가 안나더라고요
- 템플릿엔진을 사용해도 SPA를 구현할 수가 있나요?
- view/transaction.js 8번째줄이 위에서 선언한 transDiv를 바로 다른 값으로 변경해주셨는데 이유가 있을까요?
- view/transaction.js 19번째줄에 trans가 변경되는 코드가 없는데 let으로 선언하신 이유가 있을까요?
- view/transaction.js 에서 valObj라는 변수명이 어떤 의미를 띄고있는지 모르겠습니다!
- axios는 async await를 사용하면 response data를 쉽게 받아올 수 있는데, then을 사용했을 때의 장점이 있을까요?
- observer가 notify되는 부분을 찾지못했는데 누가 notify를 발생시키나요?
- (권오민)
- Observer 클래스에서 구독과 취소 등에 예외 처리가 있으면 좀 더 좋을 거 같아요. 이미 구독 중인데 한 번 더 구독하면 중복 처리가 되거나 데이터가 의도하지 않게 변화할 수 있으니까요.
- localStorage라고 쓰셨던데 이 녀석이 어떤 녀석인지 궁금합니다!
- parentNode.lastChild.dataset.values에 입력 데이터를 할당하시던데 나중에 다른 곳에서 사용하는 건가요?(수정? 삭제?)

- (문혜라)
- 전체적으로 구조가 깔끔해서 코드를 쉽게 읽었습니다!! 많이 배워가요 ㅎㅎ
- 혹시 views 폴더는 어떤 일을 하는 녀석인지 알 수 있을까요?
- transactionAxios.js 의 create 함수에서만 결과값을 log 찍는 이유가 있을까용??
- 혹시 다른 특별한 이유가 없으시다면 함수 선언 형식을 화살표 형식과 function 형식 중 하나로 통일하면 더 좋을 거 같아요!!

### J083 박인서
- (정수원)
- 인서님 코드로 클라이언트에서 라우터처리하는 방식을 처음 접했습니다.
- 메인컨트롤러와 뷰에게 두었던 역할을 라우터가 깔끔하게 제 역할을 해주네요
- 라우터 방식은 SPA에서 사용하는 보통의 방식인가요? 간략한 설명 부탁드립니다.
- 이부분은 다같이 이야기해보고 싶은 부분인데, 옵저버블이 갖고있는 옵저버리스트에 담기는 객체와, 노티파이의 역할을 짚고 넘어가고 싶어요!
- 인서님은 저와 같이 생각하시고 활용하신 것 같은데 : 리스트에는 구독자의 함수가, 노티파이는 함수 실행 역할
- 오민님은 조금 다른것 같아서요! : 리스트에는 구독자가, 발행자의 노티파이는 구독자가 갖고있는 노티파이를 실행
- 컨트롤러부를 아예 없애셨네요! 뷰/컴포넌트에서 컨트롤러(서비스 로직) 역할을 하고 있는 것 같은데, 이런 패턴을 적용하신 이유가 있을까요?
- (권오민)
- url로 라우팅하는 부분 배우고 갑니다ㅎ 뒤로가기랑 앞으로 가기도 정상적으로 작동하나요? (히스토리에 저장되는지 궁금하네요.)
- (정수원) 히스토리 부분 그냥 거래내역 페이지 렌더하신게 아닌가요? 저도 처음에 페이지 히스토리인줄알았는데(pages/TransactionHistoryPage.js), 다른 부분에서 히스토리 관리를 하셨는데 제가 못찾은건가요?? 궁금👀
- view(page라고 표현하신 부분)에서 리턴하실 때 바로 리턴하지 않으시고 렌더 함수로 리턴하시는 이유가 궁금합니다.
- document.querySelector로 바로 사용하지 않으시고 함수로 만들어서 사용하시는데 이유가 있을까요?

- (문혜라)
- router <- pages <- component 구조로 렌더링 하는 게 인상 깊었습니다. 엄청 깔끔하고 직관적인 거 같습니다.
- html 템플릿을 함수에서 바로 넣지 않고 getTemplate로 넣었떤 부분이 좋았던 거 같습니다.
- pages 폴더의 파일 들에서 render 함수를 따로 만들어 주는 이유가 있을까요??

## 회고
- (권오민)
- 캠퍼분들마다 구조가 전부 다르고 컴포넌트의 개수, 기능 등도 다양해서 정말 많이 배운 것 같습니다.
- 시간이 부족해서 아쉬워요.
- 개인 코드를 리뷰하는 시간이 더 있었으면, 자신의 코드를 더 자세하게 소개하는 시간이 있었으면 좋았을 텐데!!
- (잡담) 수원님 목소리가 유튜버랑 똑같아서 유튜브 보는 느낌..ㅋㅋㅋㅋㅋㅋㅋ 뭉땡뭉땡
- 구독하러갑니다 ㅋㅋㅋ

- (문혜라)
- 이번 피어세션에서 정말 많이 배운 거 같습니다. 각자 코드 읽을 수 있는 시간이 있어서 좋았네요
- (완료)

- (정수원)
- (잡답) 뭉땡뭉땡이요?ㅋㅋ
- 옵저버 패턴에 대해서 더 다양하게 잘 이해할 수 있어서 좋았습니다.
- 같은 MVC패턴이라도 아주 다양한 폴더구조, 객체 구조를 볼 수 있어서 좋았어요
- 더럽고 혼란스러운 제 코드를 읽어주신 여러분 수고하셨고 감사합니다 😌

- (박인서)
- 다른 캠퍼들의 코드를 통해 많이 배울 수 있는 유익한 시간이었습니다.
- (완료)