문제상황회사 프로젝트를 진행하며 한 페이지에서 하나의 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 파일이 아예 표출되지 않..
목표recoil default로 설정한 API가 호출되는 시점에 대해 이해하기next 최적화로 pre-fetch 되는 시점 이해하기 내용- 발생한 문제recoil Atom에 default로 설정한 API가 사용하지 않는 페이지에서도 호출되는 이슈가 발생 - 예상한 원인recoil 은 전역상태관리를 하니까 모든 페이지에서 해당 데이터의 사용 여부와 관계 없이 설정해둔 API가 호출될 거라 예상❌ 그러나 로컬 서버에서 테스트 시 동일한 에러가 발생하지 않음.💡이유는 모든 페이지에서 상태 관리를 위해 API를 호출한 것이 아니라, NextJS 에서 최적화를 위해 링크에 대한 prefetching 을 진행하면서 DB 페이지 링크 노출 시 API 호출이 발생하는 것이었음. pre fetch로 Recoil API..
오랜만에 TIL! 과제 테스트를 진행하면서 suspanse를 도입하였는데 처음으로 사용해본 suspanse는 나에게 의문점을 주었다. suspanse의 경우 로딩 중일 땐 fallback 으로 설정해둔 컴포넌트가 보여지게 되는데 이 때 기존 페이지는 black 된 상태이기 때문에 정말 로딩 컴포넌트만 보여지게 된다. 하지만 나는 기존 페이지를 유지하면서 위에 로딩 스피너를 띄우고 싶었기 때문에 이러한 로직이 난감했다.. 그 때 구글링하면서 찾은 것이 바로 useTransition! useTransition은 react18에서 동시성을 위해 추가된 훅으로 설정한 state의 값이 변경될 때까지 리렌더링을 유예할 수 있다고 한다! 그래서 useTransition을 사용함으로써 state가 변경될 때까지 fa..
⚠️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..
Softeer라는 사이트에서 코테준비를 하다가 거의 하루종일 삽질을 했다! https://softeer.ai/practice/info.do?idx=1&eid=409 Softeer 연습문제를 담을 Set을 선택해주세요. 취소 확인 softeer.ai BFS/DFS를 이용해서 풀 수 있는 기본 문제였다. 개념만 알고 문제를 혼자서 제대로 풀어본 적이 없어서 공부하기 적절한 문제라고 생각했다. 이전에 공부한 문제랑 풀이 방법이 비슷할 것 같아서 예제를 해결하고 된건가 하고 있었는데 웬걸 제출해보니 테스트 케이스가 3개 빼고 다 오답이었다... const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split(..
❗문제상황 프로젝트를 진행하면서 디자인 시안에 따라 스타일을 구현했어야 했는데 온보딩의 캐러셀에서 마지막 슬라이드가 되면 보이던 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가지의 방법이 있었는데 로딩 시간 동..
지인의 소개로 원티드 프리온보딩을 알 게 되어 4월 챌린지에 참여하였었다. https://www.wanted.co.kr/events/pre_challenge_fe_8 프리온보딩 프론트엔드 챌린지 4월 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 챌린지가 매 월 진행되는 것 같은데 항상 주제는 다르다. 그래서 4월 주제가 때마침 관심있던 주제들이라 바로 신청했다! 챌린지 일정 챌린지 일정은 위의 사진처럼 진행되었다. 기술 역량 향상 기간에는 공지되어 있는 커리큘럼에 있는 내용으로 세션이 진행되었고, 취업 챌린지 기간에는 챌린저들의 지원을 독려하기 위한 지원 현황 공유, 채용 큐레이션 페이지 제공 등이 이..
