문제상황회사 프로젝트를 진행하며 한 페이지에서 하나의 svg icon을 여러 번 호출하는 경우가 많이 있었다. 평소에는 잘 보이던 이미지가 해상도마다 다른 컴포넌트를 보여주기 위해 media query를 이용해서 display: none 설정을 해주는 부분에서 svg가 정상적으로 표출되지 않는 문제가 발생하였다. See the Pen Untitled by 유지영 (@hagfyiyi-the-sans) on CodePen.예시로 작성한 코드처럼 동일한 svg 파일로 fisrt, second, third를 만들어주고 first에만 해상도에 따라 display: none 을 설정해주었는데 second, third의 svg 파일도 깨지는 것을 확인할 수 있다. 실제 프로젝트에서는 svg 파일이 아예 표출되지 않..
⚠️nextjs에서 만난 hydration 에러 Text content does not match server-rendered HTML. 프로젝트 개발 중에 심심치 않게 마주쳤던 문구인데 이는 공식문서에서도 언급하고 있는 hydration 에러이다. https://nextjs.org/docs/messages/react-hydration-error Text content does not match server-rendered HTML Using App Router Features available in /app nextjs.org 📃Hydarion 에러란? 공식문서에서는 이 에러에 대해 이렇게 설명하고 있다. While rendering your application, there was a differen..
❗문제상황 프로젝트를 진행하면서 디자인 시안에 따라 스타일을 구현했어야 했는데 온보딩의 캐러셀에서 마지막 슬라이드가 되면 보이던 dots를 없애고 버튼을 띄워야 하는 상황이었다. 캐러셀을 react slick이라는 라이브러리를 사용하여 이미지가 슬라이드되고 dots, skip 버튼은 이미지와 별도로 존재하는 것이었기 때문에 처음 시안을 봤을 땐 구현이 가능할지 확신이 서지 않았었다. 디자이너님께 최대한 구현해 보겠지만 만약 어려운 경우 다시 말씀드리겠다고 했었다. 최대한 구현하고 싶었기에 공식문서를 열심히 찾아봤다. https://react-slick.neostack.com/docs/api Neostack The last react carousel you will ever need react-slick...
💪메인페이지 최적화하기 현재 진행 중인 프로젝트 메인페이지 작업을 하고 나서 성능 검사를 하니 이미지가 많아서 그런지 좋지 않은 점수를 받고 있었다. LCP에서 좋지 않은 점수를 받고 있었고, TBT와 SI 역시 빠른 속도는 아니었다. 이에 대해 개선을 위한 최적화 작업을 진행해 보았다. lighthouse 측정 항목 FCP(First Contentful Paint): 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링 하는 데 걸리는 시간. LCP(Largest Contenful Paint): 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간 TBT(Total Blocking Time): 웹 페이지가 사용자의 입력에 응답하지 못하도록 차단된 시간 SI(Speed Index): 콘텐츠가 시..
❗문제상황 프로젝트에서 페이지 이동 시 로딩 스피너로 로딩처리를 해주었다. 하지만 로딩이 오래걸리지 않는 경우에는 로딩스피너가 잠깐 보였다가 없어지면서 깜빡이는 것 같은 느낌을 주고 실제로 로딩 시간이 길지 않았음에도 사용자에게 로딩이 있었다라는 인식을 주는 것이 좋지 않다고 생각했다. 따라서 특정 시간 이상 로딩이 걸리는 경우에만 보여주기로 결정하였다. ⌛라우터 로딩 적용하기 먼저 페이지 이동 로딩은 라우터 이벤트를 사용하여 적용해줄 수 있다. import Router from 'next/router'; import { useEffect, useState } from 'react'; export const useRouterLoading = () => { const [nowLoading, setNowLo..
❗문제상황 프로젝트를 진행하면서 사용자 경험을 개선하면 좋을 것 같다는 의견을 받을 부분이 있었다. 프로젝트에서 모임의 모집여부를 변경할 때 선택 모달을 띄워서 변경할 수 있게 하는데 네트워크 환경에 따라 로딩이 생기는 경우 별도의 처리가 없어서 로딩 중인지, 선택이 안된 건지 사용자가 알 수 없고 로딩 동안 여러 번 누를 수 있어서 서버에 불필요한 api가 호출될 수 있었다. 따라서 이 문제를 해결하기 위해 2가지의 해결방법이 떠올랐다. 1. 모달에서 모집 여부를 변경한 경우 로딩 동안 '닫기' 버튼을 스피너로 변경하고 로딩동안 버튼을 클릭 할 수 없도록 비활성화하는 방법 2. 버튼을 클릭하면 로딩 여부와 상관없이 ui를 업데이트하는 낙관적 업데이트를 적용 이렇게 2가지의 방법이 있었는데 로딩 시간 동..
❗문제상황 메인페이지에서 무한스크롤로 독서기록 피드를 보다가 특정 기록을 보고 다시 뒤로가기로 이동하면 메인페이지의 최상단으로 이동한다. 이는 사용자가 기존의 기록을 계속 볼 수 없고 다시 스크롤을 해야 하는 상황이어서 사용자 경험에 좋지 않아 개선되어야할 것 같다는 팀원들의 공통적인 의견이 있어 이를 해결해야할 필요가 있었다. 👩💻로컬스토리지에 스크롤 위치 저장하기 스크롤 위치를 저장하는 방법으로 리코일과 로컬 스토리지 중 고민하다가 로컬스토리지를 선택하였다. 로컬스토리지를 선택한 이유 사용자가 임의로 값을 변경하는 등의 경우를 최소화하기 위해서는 리코일이 좋지만 새로고침 시에도 다시 뒤로 돌아가면 스크롤 위치를 기억하게 하고 싶었다. 그래서 새로고침과 상관없이 데이터를 저장할 수 있는 로컬스토리지를..
color-thief 라이브러리 도입 프로젝트에서 이미지의 메인 색을 추출해서 배경색을 지정해 주는 디자인 구현이 필요해서 관련 라이브러리로 color-thief를 도입하기로 결정하였다. https://lokeshdhakar.com/projects/color-thief/ Color Thief Examples Try it yourself Drag an image here Drop it! Getting started The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the /dist fo..
wumo 프로젝트를 진행하면서 고민했던 부분을 기록하고자 한다. wumo 서비스(06.23 현재 서버 종료): https://5yes-wumo.vercel.app/ wumo 깃헙: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE wumo 회고: https://yj-zero.tistory.com/176 react hook form에 가격 formetter 적용하기 사용금액 입력하는 부분에서 입력 즉시 포맷터를 적용해야 했다. 기존에 진행했던 방법은 react-hook-form고 별개로 state로 input을 관리하였다. 포맷터를 별도의 라이브러리가 아니라 자바스크립트에 내장되어 있는 Intl을 사용하였다. 따라서 포맷터를 적용한 입력값을 input의..
모임 일정 관리 서비스 프로젝트를 진행하면서 겪었던 어려움, 고민 과정을 기록하고자 한다. 깃허브 주소: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE 배포 주소: https://5yes-wumo.vercel.app/ (회고 주소 추가 예정) 프로젝트를 진행하면서 댓글을 생성/수정에서 이미지 업로드 기능을 구현해야 했다. 이미지를 서버에 등록하는 api와 댓글 생성 api가 나뉘어 있어서 댓글을 작성할 때 글과 이미지를 선택해서 댓글 생성 버튼 클릭 하면 이미지 등록 api 호출 -> 이미지 url 반환 -> 반환된 이미지 url로 댓글 생성 api 호출 이런 순서로 진행되어야 했기 때문에 이미지 등록 api가 완료될 때까지 기다린 후에 댓글 ap..
