time to wander

Today I Learned 📌 차트 라이브러리 사용해보기 지난 주에 있었던 프로젝트 중간발표 후 기능을 추가하게 되었는데, 기존에 있었던 밈 사전 페이지를 강화하는 쪽으로 결정이 돼서 내가 수치 관련 탭 화면을 담당하게 되었다. 사실 차트 라이브러리 사용해보고 싶어서 내가 하고 싶다고 먼저 얘기했다. ㅎㅎ 리액트에서 사용할 수 있는 차트 라이브러리를 알아보던 중 nivo를 알게 되었는데 처음에는 nivo가 커스텀의 끝판왕이라는 후기가 많이 보여서 사용해보려 했다. https://nivo.rocks/ Home | nivo nivo.rocks 라이브러리를 설치하고 적용해보는데, 오히려 커스텀할 수 있는 범위가 너무 방대하다보니 초심자의 입장에서는 이 장점을 잘 활용하기 어려웠다. 하나부터 열까지 모두 커스..

Today I Learned 오늘은 기존에 레이어 팝업으로 만들었던 소셜 공유하기 시트를 아래에서 위로 올라오는 바텀팝업으로 수정하고, 자주 사용하는 flex div 태그를 컴포넌트화하여 리팩토링했다. 📌 아래에서 위로 올라오는 바텀 팝업 이 블로그에서 많이 참고했다! https://velog.io/@peacesong/BottomPopup 혼자서 이 팝업을 만들겠다고 삽질할 때 react-spring 라이브러리를 설치해놨었는데 참고한 블로그에서도 같은 라이브러리를 사용해서 설치해 둔 라이브러리를 잘 활용할 수 있었다. 바텀팝업뿐만 아니라 useCallback 과 이벤트 버블링을 막는 stopPropagation을 사용하여 백드롭 영역을 클릭하면 팝업이 내려가게 하는 방법도 알 수 있어서 좋았다. 📌 Fl..

Today I Learned 📌 짤방 페이지 Masonry 레이아웃 적용 완료 결국 무한스크롤 했을 때의 이미지 순서가 뒤바뀌는 문제를 해결하지 못한 채 문명의 이기를 이기지 못하고 react-masonry-css 라이브러리를 사용했다. 신기하게도 이전에 CSS로 했던 방법과 원리는 비슷한데 각 페이지마다의 이미지 순서가 유지되었다. 📌 명예의 밈짤 반응형 원래 height를 고정으로 해놨는데 모바일 기종이 se일 때 영역을 너무 많이 차지해서 넓이에 따라 높이도 유연하게 바뀌도록 해야 했다. 명예의 밈짤 레이아웃은 grid를 이용했기 때문에 grid 아이템의 높이는 minmax로 수정했다. 📌 Github Action 으로 클라이언트 자동 배포하기 자동배포를 생각해두고는 있었는데 지난 주 중간발표에서 ..

Today I Learned 오늘은 정기 회의가 있는 날이었는데, 디자인을 크게 수정해야 하는 상황이 됐다. 디자이너분들이 열심히 만들어주셨지만, 모두 적용하고 보니 처음에 기대했던 라인 아트워크와는 거리가 멀어 보였다. 그래서 디자인 수정본이 나오기 전까지 할 수 있는 것들을 하고 있다. 📌 서버에 퀴즈 결과 및 메인/퀴즈 인트로 페이지 랜딩 방문자 전송하기 백엔드 분들로부터 통계를 위한 추가 정보 요청이 있어서 간단하게 구현했다. axios api 인덱스 파일에 파라미터와 메소드, 경로를 작성한 후 전송할 컴포넌트 안에 임포트하여 연결하였다. 방문자 정보는 백에서 받을 때 ip 중복 처리가 되게끔 해주셔서 파라미터나 리퀘스트 바디로 보내는 데이터가 없었고, 퀴즈 결과도 url에 퀴즈 주제와 스코어를 ..

Today I Learned 오늘은 전체적으로 폰트를 수정하고 퀴즈 문제에 이미지를 주입한 후 오후 5시쯤 에 배포해서 새벽 6시까지 버그를 수정했다. 폰트 설정 index.css에서 웹폰트로 사용할 폰트를 @font-face로 설정한다. GlobalStyle에는 가장 많이 쓰이는 Pretendard의 weight 300을 적용시켰다. 이번에 시멘틱 태그를 거의 사용하지 않았는데, 시멘틱 태그를 잘 사용하면 폰트를 적용하는 데 걸리는 시간도 단축할 수 있을 것 같다. 배포 후 버그 수정 역시나 이번에도 여러 버그들이 발견됐다. 다행히 내가 담당했던 페이지에서는 그렇게 많은 버그들이 있지는 않았다. 1. 퀴즈 문제를 풀 때 10번 문제의 답이 리덕스에 저장되지 않고 있었다. 퀴즈 문제 리스트의 인덱스를 이..

Today I Learned 오늘도 수정할 게 많았다. 소셜 공유하기 레이어 팝업 원래는 아래에서 위로 올라오는 바텀 시트를 만들고 싶었는데, 참고하려는 코드를 보니 우리의 프로젝트 규모에 적용하기에는 오버스팩이라 레이어팝업으로 만드는 것으로 변경했다. 모달 래퍼는 컴포넌트로 만들어둔 게 있어서 그걸 사용하려다가 이미 다른 곳에서 사용하려고 mui 패키지가 설치되어 있었기 때문에 mui의 백드롭을 사용하기로 했다. 팝업은 esc 키를 누르거나 닫기를 눌렀을 때만 닫히도록 만들었고, 소셜 공유하기는 세 개의 페이지에서 사용되기 때문에 컴포넌트화 하였다. 퀴즈 결과 화면 출력 로직 추가 퀴즈 10개 문제 중 맞힌 개수에 따라 특정 텍스트가 출력되도록 수정했다. 0-3개 : 아주 작은 기적..."밈기적". 4..