# 6주차 피어세션 J7

## 참여자 목록

| J024 | J045 | J062 | J075 | J125 | J137 | J202 |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| 김미정 | 김웅일 | 김채범 | 문상혁 | 오석호 | 윤해수 | 차재명 |

## 주제

### 백엔드 폴더구조
- 컴포넌트 방식으로 만들었습니다.
- 가독성이 좋아진다.
- 프론트엔드의 컴포넌트와 다른 부분? : 기능위주로 컴포넌트가 나뉜다.
- [참고링크](https://github.com/goldbergyoni/nodebestpractices/blob/master/README.korean.md)
- 단점 : 서로 다른 컴포넌트에 대한 접근
- 필요한 모델들을 인자로 넘겨줘서 해결했다.
- 백과 프론트를 별도로 나눈 부분 없이 만들고있어서 models가 중심이 되어서 만든 것 같습니다
- 백엔드는 소홀히 했는데 반성합니다.
- 프론트랑 백은 나눴습니다.
- 라우트랑 내부 로직? 정도 나눴습니다.
- 기능별로 나누고 그 다음에 3 layer architecture 적용했습니다.
- 컨트롤러, 비즈니스로직(service), 데이터베이스 접근(model)으로 구분
- 서비스 + 라우터 + 모델 폴더 이렇게 나눴습니다.

### 이미지 처리
- 사용자로부터 파일을 받아서 서버에 저장하는 방식으로 구현하려고 했습니다
- 이미지 클릭시 먼저 서버에 보내서 multer로 처리하고, 제출시에는 해당 파일명만 받아서 처리합니다.
- 저두요!
- base64를 서버에 보내서 txt로 저장하고 저장한 경로만 디비에 저장했습니다.
- 글 작성 뷰 state에 현재 업로드한 파일 목록을 저장하고 글쓰기 insert할 때 서버로 전송합니다.
- [참고링크](https://devcloset.tistory.com/48)
- FileReader / URL.createObjectURL

### TypeScript
- 써보신분 있나요?
- 이번 주 주말에 공부할거에영
- 22
- 공부는 하고 있는데 아직 사용해보지는 못했습니다 ㅠ
- 저도 아직 자바스크립트로 했습니다!
- 타입스크립트 사용했지만, 거의 자바스크립트 처럼 사용하고 있습니다 ㅎ
- 장점 :
- ts는 js와 달리 컴파일 타임에서 타입을 결정하며 오류를 검사함.
- 객체지향에서 사용되던 키워드들을 사용할 수 있다.
- 유지보수에 매우 유리하다.
- vscode에서도 문제를 잘 잡아준다.
- 단점 :
- 코드가 길어진다...
- 공부해야한다...

### 함수형 프로그래밍
- 모나드 이해하신분..?
- 생각도 못했습니다 ㅠㅠ 구현에 급급했네요..
- 전혀 못 한 것 같네요ㅜㅜ 클래스 남발..
- 장점
- OOP의 단점인 coupling을 해결할 수 있다.
- 유지보수가 매우매우 편안해진다.
- 적응만 된다면 국문 읽듯이 코드가 읽힌다.
- OOP나 명령형 코드와 시간복잡도에서 차이가 없다.
- 단점
- 진입장벽이 높다.

### 프론트 상태관리
- 옵저버 패턴
- store에 필요한 자료들을 넣어서 꺼내쓰는 방식으로 구현하고 있습니다
- flux 패턴 적용하려고 했으나 약간 꼬인 것 같아요

### Promise
- ..ㅠㅠ
- 프로미스 직접 만들고 붙여보신분..?
- 다른 캠퍼분이 만든거 보기만 했습니다..
- 역시나 생각도 못했네요..
- 제 능력 밖의 작업이라고 생각돼서 손대지도 못했어요...
- 절반정도는 만들었는데 비동기 체이닝부터 안돼서 다른 캠퍼분꺼 ~~참고~~배꼈습니다.
- 굳....

---

## 질문

### 클라이언트 라우팅 + 뒤로가기 버튼 누를 때 이전 페이지를 다시 렌더링하지 않고 보여주기(?) 어떻게 하면 좋을까요
- 렌더링을 하지 않고 보여주는 것이 가능할까요..?
- 페이지를 덮어쓰는 방법

### 글쓰기 기능 구현할 때 순서 어떤 식으로 진행하셨나요?
- 저는 1. 아이템 테이블에 아이템 정보 저장 -> 2. 업로드한 이미지 저장 -> 3. 아이템 이미지 테이블에 이미지 정보 저장 이렇게 했습니다.
- 이미지 서버에 저장 -> 해당 이미지의 경로와 함께 DB 에 저장 -> 저장된 아이템의 id 응답
- 이미지는 `FileReader` 사용해 로컬에서 다루고 FormData로 함께 서버로 보냈습니다. 서버로 가면 multer가 알아서 저장해주고, 파일명을 db랑 맞춰야 해서 fs모듈로 rename 했습니다.

### 채팅기능 구현하신 분 어떻게 하셨나요
- socket.io 썼어요!
- 근데 socket.io 말고 다른 방식으로 구현하신 분 계신가요?
- 웹소켓 안쓰면 graphql 써야됩니다..
- 오.... graphql 이름만 들어봤는데 어떤 건가요...? 쉽나요??
-
- [Node.js와 Socket.io를 이용한 채팅 구현 시리즈](https://berkbach.com/node-js%EC%99%80-socket-io%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84-1-cb215954847b)

### 세션 관리 어떻게 하셨는지.. 패스포트 후기좀 들려주세요
- 패스포트 만만세입니다.

### 다들 ORM 어떤 거 쓰셨나요?? 다들 시퀄라이즈인가요
- sequelize-auto 완전 잘썼습니다
- 뿌듯
- 오토 안쓰고 해서 힘들었습니다 ㅠㅠ
- 존경합니다!!!

### ((황준일님 블로그 참고해서 store 구현하신 분들 답변 부탁드려요!))

### 저번 주 리뷰어님 피드백에서 들었던 질문인데, 블로그 글 보면 proxy를 적용하는 방법이랑 안적용하고 구현하는 방법 2가지가 있는데 proxy를 적용하면 얻을 수 있는 장점이 있을까요?
- 프록시는 써볼까 생각만 했는데 말았습니다. 코드 있으면 보여주시면 좋을것 같아요.
- 저는 Proxy 썼는데 그냥 편하다는 정도..? 잘 모르겠네요
- 장점 : 가독성이 높음

### 이벤트를 컴포넌트별로 관리하셨는지, 아니면 전체 이벤트를 관리하는 중앙 컨트롤러를 만들어서 관리하셨는지 궁금합니다.
- 각각 어떤 장점이 있는지 잘 모르겠어서 막 섞어쓰기도 했어요... 하다보니 app.js에 대부분의 이벤트용 메서드가 들어가서 파일이 너무 커지더라구요...
- 저는 쓰까서... 여러 군데에서 사용하는 메소드는 app.js에 선언해서 props로 전달하고, 해당 뷰에서만 사용하는 메소드는 그 뷰 안에서 만들어 줬어요.
- 코드 중복은 없어지는데 의존성이 생길 수 있다.

### TypeScript에서 다형성 지원 어떻게 하셨나요?
- 일단 unknown으로 적고 타입가드..?