12월 4일 피어세션

3주차 피어세션 20조 (20.12.04)

인원

• J032 : 김동현
• J041 : 김석중
• J073 : 박기호
• J099 : 송진현
• J161 : 이지은
• J179 : 전병재

질의응답

A조

https://github.com/boostcamp-2020/project15-a-Client-Based-Formula-Editor 배포 : http://49.50.167.109/

• Q. 추후에 그래프 기능도 구현을 하실건가요?
• A. 라이브러리를 먼저 써보고 구현이 완료되면 한땀한땀 구현할 예정입니다!
• Q. Export시, HTML과 CSS 속성들을 저장하는 이유?
• A. 요구사항을 참고 하였습니다.
• 아이디어 추가!!
  • 원하는 화면 잘라서 캡쳐
  • gif/png 확장자명 선택
  • 감사합니다 ㅠㅠ ^-- 꼭 구현해주세요

B조

https://github.com/boostcamp-2020/project15-b-Client-Based-Formula-Editor 배포: https://feditor.netlify.app/

• Q. 로컬 스토리지에 저장 타이밍은 언제인가요?
  • 저희는 LaTeX 수식 입력 부분에서 입력이 멈췄을 때, 자세하게는 디바운스를 적용해서 입력할 때마다 10초 뒤에 저장하게 시키는데, 그 전에 입력이 다시 이루어지면 타임아웃을 초기화시킵니다. 그래서 setTimeout의 콜백함수가 실행되면 그 때 임시 저장을 시키고, 아니면 유저가 수식 저장 버튼을 눌렀을 때 저장 시킵니다.
• Q. 알람 메세지 어떻게 구현하셨나요?
  • 알람 팝업에 대한 상태를 가지고 boolean값으로 열었다 닫아주는데, 열렸을 때 타임아웃 걸어서 몇 초 뒤에 팝업이 닫히는 걸로 구현했습니다.
• Q. 지난 주에는 ncloud object storage 쓰시다가 이번 주에는 배포 서버를 바꾸신 이유가 있나요?
  • nCloud를 쓰니 일단 파일 올린 뒤에 수작업으로 index.html의 공개 설정을 해야하는 것도 귀찮은 일이었습니다. 그리고 링크 복사 기능을 할 때 주소 뒤에 /{라텍 문법} 식으로 링크를 줬었는데, 일단 object storage이다 보니 ncloud의 배포 주소 뒤에 붙는 걸 단순 텍스트가 아니라 파일 이름으로 찾아서 없다고 나오고, 설정하기도 어려워서 포기하고 더 간단한 무료 정적 호스팅 서비스 netlify로 갈아탔습니다.
• Q. 버튼 메뉴 외부 클릭하면 닫히게 하는거 어떻게 하셨나요?
  • 버튼 메뉴 컨테이너가 있어서 그 컨테이너 안의 컴포넌트가 클릭되는 거면 안 닫히고 외부가 클릭되면 닫히게 했습니다.
  • 사이드 바는 메인에 useRef를 써서 메인이 클릭되면 닫히게 했습니다.
• 아이디어 추가!!!
  • 우리도 이미지 저장 누르면 파일 이름과 확장자 설정할 수 있게 하면 어떨까요?
• 꿀팁 공개!
  • 슬랙에 GitHub 앱을 등록하면 팀원들의 Issue, PR, Merge등의 알림을 받을 수 있어 굉장히 편했습니다.

C조

https://github.com/boostcamp-2020/project15-c-Client-Based-Formula-Editor

• Q. 크롬 익스텐션 배포 언제하실거에요? 직접 두들겨보고싶어요 ㅠㅠ
• 진짜 대박입니다.. npm 배포 꿀팁 감사합니다.

안녕하세요 21조

안녕하세요 수-하!222 하이용

진행 어떻게 할까요?

어떤거 삽질 하셨나요?

A

• 클리어가 잘안되었던 문제 해결
• 사이드탭 나오는 것

B

• 쿼리 스트링에 대한 삽질 내용
  • 쿼리 스트링이 없으면 굳이 encode, decode를 안 사용하면 좋을 것 같다.
• 사이드 바
  • 사이드 바 내부의 아이템을 클릭 했을 때 안닫히면 좋을 것 같다.
• Styled-components
  • 왜 VSCode Extension 안쓰냐, 써라. (네.. 쓰겠습니다... 오!! 좋다!!)
• custom 명령어 로직 상태 캡쳐링 문제 이유 => 라이브러리에서 useEffect 내부에서 호출
• 이미지 컴포넌트 테스트 실패
  • babel-jest 사용

C

• 쓰로틀링 로직에 대한 내용
• 이전 값을 기억하기 위해 useRef와 전역 변수를 사용하는 것의 차이
• 디바운스 로직에 대한 내용
• 시멘틱UI 라이브러리를 사용하다가 힘들었던 부분