# 📕 J4 Week3 피어세션

### 👨‍👧‍👦 참가자

| J157 | J081 | J103 | J155 | J102 | J212 | J018 | J140 |
| :------: | :------: | :------: | :------: | :------: | :------: | :------: | :------: |
| 이재영 | 박가연 | 성기혁 | 이인송 | 설민욱 | 표석훈 | 김나정 | 이동현 |

### 👨‍👧‍👦 자기소개

다들 만나서 반갑습니다🙌🙌🙌🙌 와우~

## 👨‍👧‍👦 개인별 미션 내용 공유

### 🐥 J157 이재영

첫날엔 문서를 작성하고 계획을 세우는데 힘을 썼습니다.

webpack을 먼저 설치했고 script 태그에서 모달창을 띄울 수 있도록 구현하였습니다.

캘린더 부분을 구현 완료하였고 state를 조작해주면서 달력 선택 기능을 구현했습니다.

spa로 구현하도록 path에 따라 화면 렌더링하도록 구현했습니다.

❓ **질문**

1. 이번 프로젝트를 진행하면서 패턴을 적용시킨 것이 있으신가요?

아직 디비를 적용하지 않아서 아직 사용하지 않았습니다.

2. 스크립트 태그 안에 모달 기능을 넣으신 이유가 있나요?

스크립트 태그 안에서 직접적으로 모달 기능을 넣은 것이 아닌 모달을 넣을 구역을 정의했습니다. 모달창 사이즈 조정이나 위치 지정이 용이할 것 같았습니다.

자바스크립트로 나누지 않은 이유 ->
(1)가장 큰 틀은 html에 작성하는게 js로 나누는 것보다 편하다 생각했습니다.
(2)리뷰어님이 알려주신 방법이라 적용해보았습니다.

</br>

### 🐥 J103 성기혁

Github를 적극적으로 사용해보았습니다.(이슈, 프로젝트, 위키)

바닐라 자바스크립트로 작성할 때 규칙이 없어서 패턴 적용에 어려움을 느꼈습니다.

webpack 설정을 개발 / 배포 버전을 나누어서 설정하였습니다. (현재 nCloud 사용 배포 중)

Component Class를 작성해 이를 기준으로 프론트엔드 개발을 진행 중입니다.

각 클래스는 container라는 엘리먼트를 가지고 조작을 하는데 이벤트 관련 작업을 할 때 한 단계의 부모/자식만을 조작할 수 있기 때문에 어려움을 많이 겪고 있습니다.

또한 Rendering Flow가 부모 -> 자식 으로 이루어지는데 자식이 부모의 이벤트나 상태 값을 변경시키기 위한 고민을 해야할 것 같습니다.

❓ **질문**

1. 스프링 구조를 사용하셨다고 하셨는데 어떤 부분인지 알려주세요

3 layer architecture를 사용해서 서비스, 레퍼지토리, 컨트롤러를 만들어서 구현하였습니다. 지금 도메인 로직이 없어서 직접 라우터를 사용해서 구현하였습니다.
👍

2. Observer 패턴을 프론트엔드에서 어떤 방식으로 사용할 수 있을까요

observable에 변화가 생기면 observer 에게 message를 보낼 수 있는데, calendar modal이 열리고 해당 obserbable에 변화가 생기면 observer가 그것을 관측할 수 있을 거라 생각합니다.

View에서 값을 바꾸는 행위를 이벤트를 통해서 변경을 감지하고 다른 컴포넌트에 전달할 수 있을 것입니다.

추가 : 검색하는 버튼을 subscriber로 하고 입력하는 기능들을 publisher로 만들려고 했는데 publisher 수가 많아지는 것이 옳지 않다고 생각해서 event manager를 만들고 store를 변경해주는 방식으로 구현했습니다. 의존성을 어느 범위까지 주어도 될지 고민입니다. -> 같이 고민 중

3. mode를 production, development를 나누는 이유는?

production <-> devtool: "source-map"

development <-> devtool: "inline-source-map"

으로 설정해서 프로젝트와 번들링된 파일의 연관관계를 따로 설정해야 합니다.

CI/CD, 자동 배포 등과 관련이 있습니다.

</br>

### 🐥 J081 박가연

달력 구현과 라우터 기능까지 구현을 완료하였습니다.

하나의 컴포넌트에 view와 controller의 기능이 같이들어가있습니다. (후에 나눌지는 미정)

model을 만들어 그부분에서는 데이터를 저장하고 가져오는 역할만 넣을 예정입니다.
(달력모델은 체크인, 체크아웃 상태를 저장, 후에 숙소 데이터 가져오는 모델 추가예정)

SPA는 history api를 이용하여 구현

❓ **질문**

1. CalenderModel에서 static instance로 구현하셨는데 이유는?

싱글톤 패턴을 사용하고 싶어서 이렇게 구현하였습니다.

싱글톤 패턴로 상태를 저장하면 별로 장점이 없습니다.

싱글톤 패턴으로 사용하는 변수는 전역 변수와 비슷하다고 생각합니다.

싱글톤으로 한 이유는 하나의 클래스에서 변수가 변화하는 것이기 때문입니다.

2. 인스턴스화하는 이유는?

하나의 객체로 선언해서 사용하는 것과 싱글톤으로 구현하는 것은 별로 차이가 없다고 생각합니다.

싱글톤 패턴을 사용하는 이유는 클로저처럼 사용하기 위해서 아닐까 생각합니다.

java에서 싱글톤을 사용하는 경우는 상태가 없는 클래스에서 사용합니다.

3. class를 사용하는 이유는 재사용성을 위해서인가?

객체에게 일을 시킬 수 있고 하나의 클래스(=A)엔 상태만 가지고 다른 하나의 클래스(=B)엔 동작만 담아서 A가 B에게 객체를 시킬 수 있다는 장점을 가지고 있습니다.

4. 달력모델에서 체크를 한 부분에 대한 데이터를 input 태그에 넣는 것은 어떤가요?

좋은 아이디어인거 같습니다.

입력한 데이터를 input bar에만 존재하는 것이 아니라 최상위 태그인 App에서 관리해주면 좋을 거 같습니다.

</br>

### 🐥 J155 이인송

프론트에서 하면에 나와야 하는 부분을 각각 컴포넌트로 설정해 구현하였고 컴포넌트마다 클래스를 만들어 태그와 이벤트를 추가해주었습니다.

SearchBar 의 상태를 관리하기 위해 고민을 했습니다.

4가지 항목 모두 만족되는 경우에 SearchButton 을 활성화하고, 데이터를 Backend 로 넘겨주기 위해서는 상태관리가 필요하다고 생각했기 때문입니다.

이를 관리하기 위해 EventManager 와 Store Class 를 만들었습니다.

분리는 했지만, 이번 코드 리뷰간에 리뷰어 분이 Presenter-Container Pattern 을 추천해주셨습니다.

각 컴포넌트의 책임과 역할에 따라 분배하는 디자인 패턴인데, 어느 정도 해결해줄 것이라고 생각합니다.

❓ **질문**

1. 혹시 모달창 이외 부분 클릭시 꺼지는 것은 구현하셨나요?

아직 안 했습니다.

2. store가 전역 스토어의 느낌이 강하다고 하는데, 어떠신가요?

store를 가지고 있는 객체를 접근하는 부분을 제한적으로 해야 한다는 의미인거 같습니다.

store 라는 상태를 가진 클래스를 만든 이후에 이에 대해 접근하는 메서드를 따로 구성하려고 합니다.

</br>

### 🐥 J102 설민욱

모달창 보여지도록 구현하고 라우팅

탬플릿 엔진으로 jade를 사용하여 body header footer 등을 정의하고 사용 <- 고칠 예정

view에는 main하고 map 디렉토리를 구성 (index.js에는 각각의 뷰를 만들 수 있도록 구성)

mysql로 api 구성

controller에서 얻어온 데이터를 뷰에서 사용하려고 했는데 이슈가 발생

라우터가 많은 기능을 담고있어서 수정할 예정

Presenter - Container 사용 예정

깃허브 프로젝트 탭을 이용하여 관리

❓ **질문**
1. view template 안지우나요?
- 바로 지우겠습니다 (에러 파일 볼려고 남겼음)
- 만들 때 (--no-view 옵션)주면 template 안생김👍

2. 인텔리제이 ultimate 가격
- 12만원 -> 8만원 가격이 떨어지고있음 (1년)
- 자동화 기능이 많음! 👍
- Spring 사용하시는 분들에게 추천합니다!

</br>

### 🐥 J212 표석훈

1. Github Issue 와 Project를 잘 사용하는 것을 목표로함.

2. SearchBar 클릭 시 모달창이 뜰 수 있게까지 함
* 모달 창을 On/Off 할 수 있는 컴포넌트 클래스를 작성하고 내부의 자식 컴포넌트만 변경하여 사용하기 위해 상속을 이용

3. Component 클래스를 작성하고 이를 상속받아 프론트엔드를 구현
* View와 Control을 Component 클래스에서 하고 있고 전체 State 기능 구현을 개발할 생각입니다.
* Component 구성
- _target_ : 컴포넌트의 최상위 `element`를 객체로 갖고 있음 => 이벤트 설정용
- _props_ : 상위 컴포넌트에게 전달받은 데이터
- _state_ : 다시 렌더링하는 것에 영향을 주는 데이터

4. innerHTML과 querySelector를 사용하여 하위 컴포넌트를 렌더링 해가므로 성능에 대한 고민이 필요하다.

> 자동 배포는 추후 구현할 예정입니다.

❓ **질문**

1. 모든 컴포넌트에 querySelector를 사용하는 것에 대해 어떻게 생각하시나요?

querySelector를 많이 사용하는 건 맞습니다.
리뷰를 받았을 때 이에 대한 연산을 줄이는 방법을 고려해보는게 좋다고 들었습니다!

</br>

### 🐥 J018 김나정

Input 바에서 달력, 인원 파트 부분 전부 구현을 완료하였습니다.

state로 search bar에 입력하는 부분이 바뀌면서 데이터를 저장할 수 있도록 만들었습니다.

검색바에서 값이 바뀌면 다시 한번 렌더링될 수 있도록 만들었습니다.

태그를 만드는 함수, 속성을 넣어주는 함수를 따로 구현해서 전체화면에 띄울 태그를 구성해줍니다.

❓ **질문**

1. state를 변화하는 것을 감지하여 다시 렌더링해주는 컨트롤러를 컴포넌트별로 만드는 것이 효율적인가요?

최상위 컨트롤러를 만들어서 state 변화에 해당하는 컴포넌트를 다시 렌더링하는 방법이 제일 좋은 것 같습니다.

</br>

### 🐥 J140 이동현

계획은 짰지만 너무 무리하게 짜서 달성을 많이 못했습니다.
다시 한번 계획을 잘 짜서 실행 가능한 계획을 짤 생각입니다.

css에 대한 개선의 필요성을 느꼈습니다.

Component 방식으로 짜서 extends를 사용할 수 있도록 만들었습니다.

모달창 구현을 아직 안 했는데 데이터 이동 구현 방식에 대한 아이디어 얻어갑니다!

❓ **질문**

1. mount의 의미가 무엇인가요?

상위 컴포넌트 아래 태크를 추가해줄 수 있도록 만들어 주는 의미입니다.

리엑트에선 virtual DOM을 비교하는 과정에서 mount과 rendering의 차이가 있다고 생각합니다.

메인 페이지에 필요한 데이터를 렌더링을 한 후, 화면을 구상하는 것이 보편적입니다.

2. 상위 태그에서 하위태그로 내려가면서 화면 구성을 효율적으로 하는 방식은?

react에서 지원해주는 라이브러리가 있는데, react와 같은 방식으로 하는 것이 효율적이라고 생각합니다.