TIL - 2022.01.25 화요일

오늘 배운 것

---

• 오늘의 제일 큰 성과! 유튜브 동영상을 리액트에 쉽게 넣을 수 있도록 도와주는 React-player를 반응형으로 코딩해서 자유게시판에 넣었다. 알고보니 간단한데, 스스로는 생각해내지 못했을 것 같은 기발한 방법이라 무릎을 탁 쳤다. Position이랑 padding을 활용하면 된다. 역시 세상에는 고수가 많구나.
• 그 방법을 내가 이해한대로 구체적으로 적어보자면..
  우선 React-player를 감싸고 있는 div에 relative를 주고 react-player에 absolute를 줘서 부모 div의 height 값을 제로로 만든다. 그리고 padding-bottom 혹은 top에 원하는 비율을 퍼센테이지로 환산해서 입력하면 일정한 비율로 유튜브 플레이어가 들어간다. 앱솔루트의 새로운 활용. 코드도 함께 기록해둔다. 참고한 링크는 여기. (https://github.com/CookPete/react-player/issues/145)

// presenter
<ContentYoutube>
  <ReactPlayerCustom
    url={props.data?.fetchBoard?.youtubeUrl}
    width="100%"
    height="100%"
  />
</ContentYoutube>

// emotion (CSS-IN-JS)
export const ContentYoutube = styled.div`
  padding-bottom: 56.8%;
  position: relative;
`;

export const ReactPlayerCustom = styled(ReactPlayer)`
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
`;

* 알아보기 편하도록 React player 커스텀에 필요한 부분만 골라서 적어두었다. 

 

• 저번주에 주소 툴팁을 직접 만들어서 넣었는데 뻘짓이었더라. 더 깔끔한 코드의 툴팁이 라이브러리에 떡하니 있네. 그래도 만든게 아까우니 난 내가 만든 툴팁 쓰기로 했다.  내가 만드는 쪽이 디자인 수정하기도 더 쉽고.
• react-daum-postcode 를 사용해서 게시글 등록시 주소를 입력할 수 있도록 만들었다. 게시글 등록과 상세페이지에서 불러오기는 구현 완료했지만, 왜인지 게시글 수정이 넘어가지 않는다. 어딘가 오타가 나거나 놓친 게 있는 것 같은데 도저히 찾을 수 없어서 일단 지금까지 완료한 작업 먼저 커밋하고 기록해두었다.
• 자유게시판에 들어있는 모든 alert과 prompt를 ant-design에서 제공하는 모달으로 변경해서 넣었다. 단순 alert를 변경하는 작업은 금방 끝났지만 댓글 삭제시 비밀번호를 입력하는 모달 만드는 작업에 시간이 꽤 걸렸다. 그래도 성공적으로 구현해냈다. 한 모달 안에 들어있는 함수 각각의 기능을 잘 구분해 넣어주는 것이 중요하더라.

 

앞으로 할 것

---

• 게시글 수정 페이지에서 변경한 주소가 무사히 API로 넘어가도록 하기.
• BoardWrite / BoardList css 수정 및 타입스크립트 타입 지정
• BoardWrite / BoardList 코드 정리 및 리팩토링
• 댓글 수정 기능 구현하기