4주차 피어세션

피어세션

참여 인원

Web11

• J077 문혜현
• J107 송명회
• J218 홍승용
• J219 홍종우

Web29

• J002 강민지
• J141 이명재
• J151 이원주
• J177 장수용

Donggle

배포 깃허브

Q&A

• 사진 어디에 저장하셨나요

  • 오브젝트 스토리지에 저장하였으며, 해당 스토리지는 ncloud에서 생성 시 bucket 형태로 사용할 수 있고 URL을 통해 접근할 수 있는 구조로 사용할 수 있습니다.
  • 저희는 Image를 multer를 통해 업로드하고 해당 URL을 DB에 저장하여 사용하는 방식으로 이용하고 있습니다.

• 경기도 왼쪽 아래는 어디인가요 비어있어요..

  • 통계청 API를 기반으로 가져온 좌표로 폴리곤을 표시하고 있고, 성능상의 유리함을 위해서 좌표 크기를 줄이는 작업을 했기 때문입니다.(simplify-js 라이브러리)
  • simplify.js
  • 최초 페이지 렌더링 시에는 Map 정보를 호출하지만, 이후 움직임의 정도에 따라서 상태를 관리하여 필요에 따라 Fetch요청을 하는 방식으로 동작합니다.
  • 캐싱도 하고, 디바운싱에서 드래그앤드랍 방식으로 변경

• 동네 정렬 기준이 뭔가요? 별점이 같으면 어떻게 돼요? 리뷰 많은 순도 되나요?

  • 별점이 같으면 가나다순
  • Tie-breaker가 있으면 좋겠다(별점 수 등..)
  • 별점이 같으면 공동순위도 나쁘지 않은 것 같다

• 지역 모양 레이아웃 어떻게 따셨나요?

  • 점을 모으면 선이 되듯이 점을 모두 찍는 방식입니다

• 가운데 위치 이모지? 는 왜 있는건가요?

  • 지도 중앙이 정확히 어딘지 표시하기 위한 마커입니다
  • 화살표가 아닌 십자가 형태 등이 더 좋을 것으로 보임

• 도커 공부 어떻게 하셨나요?

  • 할 예정입니다 ㅎㅎ

• 폴더 구조와 사용하시면서 느낀 장단점 궁금합니다

  • 프론트는 CRA 기반으로 진행했으며, component, page, hooks 등 유사 구조의 코드를 분리하는 형태로 진행했습니다.
  • 백엔드는 3 layer 구조로 사용하였습니다.
  • 위는 코드가 명확히 분리된다는 점에서 이점이 있는 것 같지만 구조가 약간 복잡해지는 듯한 단점이 있는 것 같습니다.

• 색깔 칠하는 로직 궁금합니다 ㅎㅎ 확통(확률과 통계) 때 본 것 같기도... 통계학과... 죄송합니다...

  • color-hash 라이브러리 사용해서 <주소> => <#컬러값>으로 변환해서 칠합니다

• 지역 정보는 어디서 받아오신건가요? 카카오맵에서 제공해 주나요?

  • 통계지리정보서비스 API
  • https://sgis.kostat.go.kr/developer/html/openApi/api/data.html#54
  • 처음엔 광역시/도 -> 시/군/구 -> 읍/면/동으로 재귀적으로(DFS) 가져옵니다..

• 몽고디비를 선택하신 이유가 궁금합니다

  • 지도 대용량 데이터를 빠르게 가져올 수 있어야 한다
  • 지도의 행정동 경계가 변하는 주기가 최소 한달일 정도로 업데이트가 적다
  • 지도는 서비스 특성 상 많이 필요하지만 후기글을 업데이트하는 것은 그 정도로 많이 쓰이는 서비스가 아니다
  • 후기글의 확장을 생각했을 때 mongoDB가 좋은 선택이라 생각했다
  • MongoDB는 객체 기반으로 NodeJS에서 테이블 기반의 MySQL보다 더 적합하게 사용할 수 있다
  • MongoDB에서 지원하는 Text index가 필요한 기능이 있었다

• 여기 왜 안나오지... 했는데 북한이었군요 ㅎㅎ

  • ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  • ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 몰라뵜습니다. 동무.

• 혹시 server 폴더 안에 api 폴더에 s 붙이실 의향 없으신가요

  • 죄송합니다. 붙이겠습니다.

BoostTeams

배포 깃허브

Q&A

• input(textarea?)에 뱃지 어떻게 생성하셨나요?

  • 입력이 된 후 유저 선택 시, DIV가 늘어나는 형태로 진행, 기존 input은 오른쪽으로 지속적으로 밀려남(div는 상태로 관리)

• recoil에 어떤값을 저장하셨나요?

  • 페이지에서 공통적으로 사용하는 값을 저장하였고(ex 유저정보, 팀 정보), 그 외 props drilling이 심각할 때 사용하였습니다.

• 역할분담 어떻게 하셨나요?

  • 기능 단위로 나눔, Back - Front 나눌 수 있으면 최대한 Conflict 발생하지 않도록 하며 공통으로 고치면 Live Share를 통해 진행

• storybook에 대해서 잘 모르는데, 간단하게 소개한번만 해주세요ㅜ

• Passport와 TypeORM을 선정하신 이유가 있나요?

  • 타스엔 typeorm이 근본이 아니겠습니까
  • typeORM한테 크게 물려서 그 뒤로 피하고 있네요..근본을 몰라보고..ㅎㅎ
  • Typesript 기반으로 작업을 하다보니 그에 맞는 TypeORM 사용하게 되었고, 학습을 하자는 목적 또한 있었습니다.
  • TypeORM 사용하니 관계 설정 등 매우 직관적이라고 느꼈습니다.

• 채팅 기능은 DB 연동을 한다고 하셨는데 DB 구조는 어떻게 설계하셨을까요?

  • User - Chatroom 을 연동하고 Chatroom에서 message, reaction 등을 관리하는 방식으로 설계하였습니다.

• 화이트보드 드래그해서 움직이는 것 어떻게 구현하셨고 DB에는 어떤 형태로 저장하시나요?

  • react-konva 라이브러리를 설치해서 사용하였고, Stage / Layer 라는 Component를 통해 Canvas를 손쉽게 사용할 수 있는 형태로 구현하였습니다.
  • Layer에 Postit 배열로 그려주고 있고 Custom 시에는 Konva에서 지원하는 Component를 사용하였습니다.
  • Drag - And - Drop은 draggable property를 통해 사용할 수 있도록 구현하였습니다.
  • DB는 아직 붙이지 않았는데 Socket에 객체를 저장하여 특정 이벤트가 발생했을 때, DB와 동기화를 하는 방식으로 설계할 예정입니다.

• socket 사용하시면서 고려하신 점이나 힘들었던 점은 무엇인가요?

  • dynamic namespace
  • team path가 들어간 페이지에서 team namespace 소켓 연결 어려움 => custom route TeamRoute에서 연결하는 것으로 해결

• 자동로그인(로그인 유지?) 어떻게 구현하셨는지 궁금합니다. 로컬 스토리지에 JWT가 있고, 새로고침해도 사용자 정보를 한번 요청하는 것 같은데 자세하게 들어보고싶습니다.

  • PrivateRoute 진입할 때 사용자 정보를 fetch (새로고침하면 렌더링되면서 fetch)
  • Recoil에 사용자 정보만 있다면 진짜 그냥 세션 스토리지에 저장하면 맘 편하지 않을까?
  • 앱 초기 렌더링때마다 fetch하는 옵션도 괜찮을 것 같다 (seamless를 고려하지 않는다면)

• 오른쪽 위에 있는 유저 정보에서 github link usrname이 아니라 이름으로 되있는건지 404로 가네요ㅜ

  • DB 연동을 진행하면서 사소한 버그들을 해소해 나갈 예정입니다.

• 앞으로 어떻게 개발하실 생각인가요? 기능을 더 구현하실 건가요, 성능을 개선하실 건가요?

  • 마지막 주차 빼고는 기능을 지속 개발할 것으로 보이며, 미완성인 부분을 보완하는 것으로 할 예정입니다.
  • 마지막 주차에 리팩토링을 진행할 예정입니다.