time to wander

Today I Learned 오늘은 axios로 서버에서 데이터를 받아와서 통계 탭에 출력해주는 작업과 프로그래머스 알고리즘 문제를 풀었다. 비록 레벨 1이지만 카카오 문제를 내 힘으로 풀었다! 머릿속으로는 접근 방법이 안 떠올라서 손으로 그림을 그리면서 풀었더니 순서에 대한 감이 잡혔고, 스터디 시작 1분 남은 시점에서 다행히 모두 통과할 수 있었다. 그리고 서버에서 데이터 받아 온 데이터 중 랭킹 데이터가 있는데, 어차피 등록한 사전 수를 기준으로 내림차순으로 정렬한 리스트로 받는 거라 순위는 안 받고 리스트의 index에 +1을 연산해서 화면에 출력하려고 했는데 작은 문제가 생겼다. 부모 컴포넌트에서 리스트에 map 메소드를 사용해서 자식 컴포넌트에 하나의 랭크에 대한 데이터를 넘겨주는데, inde..

Today I Learned 📌 swiper.js로 간단한 가로 슬라이드 만들기 내가 작업하고 있는 사전 통계 탭에 단어 등록을 많이 한 유저 랭킹이 들어가는데, 세 명까지만 나와서 세로로 늘어놓는 것 보다는 가로로 순서대로 보이는 게 모바일 환경에서 더 좋을 것 같았다. onMouse 이벤트로 이렇게 저렇게 해보다가 시간이 없어서 결국 또 라이브러리를 사용하기로 했다. swiper.js는 이미 다른 페이지에서도 많이 사용되고 있어서 설치할 필요는 없었고, 필요한 것만 컴포넌트에 import 해서 사용하면 됐는데 나는 페이지네이션도, 내비게이션도 필요하지 않고 간단한 가로 슬라이드만 구현할 거라서 Swiper와 SwiperSlide만 import해서 사용했다. /* DictStat.js */ /* 라이브..

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에 퀴즈 주제와 스코어를 ..