TIL - 2022.01.25 월요일

오늘 배운 것

---

• 오늘은 코드 정리하는데에 많은 시간을 썼다. 하나의 페이지 컴포넌트 안에 덩어리째 묶어두었던 [ 게시글 보기 / 댓글 입력 / 댓글 보기 ] 를 세 개의 컴포넌트로 쪼개서 보기 편하게 만들었고, 타입스크립트로 마이그레이션하면서 미처 다 지정해주지 못한 요소들의 타입을 정리해주었다. 근데 워낙 코드가 섞여있어서 전부 끝내지는 못했음. 일단 상세페이지만 완료했다.

 

• 내일 코드리뷰라 코드를 공유할만한게 뭐가 있나 하다가, 그동안 생각만 하고 작업은 안했던 css 수정 작업을 진행했다. 넷플릭스 리뷰 게시판을 테마로 잡았다. 촉박하게 한 것 치고는 그럭저럭 마음에 들게 나왔다. 일단 내일 코드리뷰를 끝내고 차근차근 디테일을 손보자..
• 작성자 부분에 들어간 linear-gradient 에도 트랜지션을 주고싶은데 전처리기를 따로 안쓰면 무척 번거로웠던 것으로 기억한다.. 그만한 수고를 들일 만큼 중요한 부분은 아니니까 아쉽지만 포기.

 

오늘은 자잘한 기능을 많이 구현했다. 쭉 나열해보겠음.

• 어제 미처 구현 못했던 댓글 삭제 기능을 구현했다. 비밀번호는 임시로 프롬프트에 입력하는 형태로 만들었다. 추후 모달 입력창을 만들어서 띄울 예정.
• 리액트 라이브러리인 Ant-design을 이용해서 별점 rating 기능을 구현했다. 별 아이콘을 클릭하면 해당 값이 0~5의 숫자로 반환되어 API로 들어가는 형태이다.
• API를 이용해 좋아요, 싫어요 기능을 구현했다.
• react-player 라는 라이브러리를 이용해서 게시판에 유튜브 동영상도 올릴 수 있도록 했다. 동영상 규격은 일단 다 동일하게 올라가도록 코딩해두었다.

 

• 내가 지금까지 써본 라이브러리.. 슬릭처럼 부분부분 끌어다 쓰는 것을 제외하면 제대로 써본 것은 부트스트랩 뿐인데, 개인적으로 디자인이 별로라 안 좋아했다. 그렇다고 편리한 것도 아니라 쓸 이유가 없었음. 그런데 Ant-design이나 Material-UI는 좋은 것 같다. 가져올 수 있는 컴포넌트의 종류도 다양하고 편리한데다가 예쁘다. 많이들 사용하는 라이브러리니까 디자인에 개성이 좀 없어지기는 하겠지만,  이 정도면 몹시 괜찮다고 생각함.

 

앞으로 할 것

---

• CSS 디테일 손보기
• 글쓰기 페이지와 목록 페이지 CSS 수정하기
• global style에 있는 놈들 다 원래 컴포넌트로 돌려놓기. global style에는 reset과 웹폰트에 해당하는 코드만 넣어놓자.
• 유튜브 동영상의 가로값은 100%로, 세로값은 그에 대한 일정 비율로 지정하고 싶은데 react-player에서 가능할까? 내일 방법이 있나 찾아보자. 공식 문서 뒤져보고 사람들이 정리한 블로그 글도 찾아 볼 것.
• 슬슬? 손목이? 다시? 아프다...? 한동안 쉬어서 괜찮았는데 귀신같이 반응온다. 테이핑하고 코딩해야겠다.
• 원래 체크박스를 완성해서 코드리뷰때 보여줄 생각이었는데, 그것보다 이게 더 중요한 것 같아서 잠시 보류했다. 곧 설도 있으니 무조건! 스스로의 힘으로! 끝은 보고 말겠다.