최근 MERN 스택으로 Todo 프로젝트를 진행하면서 클라이언트에서 데이터를 효율적으로 가져오기 위해 useSWR을 사용했습니다.이 글에서는 useSWR을 활용하여 데이터를 패칭하는 방법과 mutate를 이용한 데이터 조작을 다뤘습니다.1. useSWR이란?useSWR은 SWR 라이브러리의 React 훅으로, 클라이언트에서 데이터를 패칭하고 관리하는 데 유용했습니다.주요 특징은 다음과 같습니다.자동 데이터 갱신 (revalidation)캐싱을 활용한 성능 최적화데이터 요청을 최소화하는 deduplicationmutate를 통한 로컬 상태 업데이트2. useSWR 기본 사용법useSWR을 사용하면 쉽게 데이터를 가져올 수 있습니다.import useSWR from 'swr';import { API_BASE..

포트폴리오 사이트를 768px 이하의 화면에서는 사이드바에 있던 프로필을 화면 상단으로 이동시키고, 탭 메뉴를 가운데로 배치했습니다. 그러나 탭을 전환할 때마다 탭 메뉴로 다시 스크롤해야 하는 불편함이 있었습니다.이를 해결하기 위해 탭 메뉴를 고정(sticky)하고, 탭 클릭 시 자동으로 탭 메뉴 위치로 스크롤이 이동하도록 구현했습니다.스크롤 로직 구현React의 useRef와 useEffect를 활용해 스크롤 동작을 제어했고, useNavigationType을 사용하여 PUSH 방식의 네비게이션에서만 스크롤이 동작하도록 설정했습니다.즉, 페이지 새로고침이나 첫 진입 시에는 스크롤이 발생하지 않도록 했습니다.const navigationType = useNavigationType();const ref =..

포트폴리오의 레이아웃은 이제 마무리 단계인데, 아무래도 카드 형태의 디자인을 많이 사용하다 보니 사이트 디자인이 많이 단조로워 보였습니다.그래서 사이트가 처음 열릴 때 제일 먼저 보여지는 Home 컴포넌트에 동적인 애니메이션을 주어, 조금이라도 인상을 주기로 했습니다.타이핑 효과 구현 원리먼저, 저는 주요 기술 스택인 Javascript, TypeScript, React, Next.js를 동적으로 표시하고자 했습니다.아직 Next.js는 다루지 못하지만, 포트폴리오 작업이 끝난 후 배우고 학습 할 예정이기 때문에 일단 넣어뒀습니다.이 기술 이름들이 화면에 타이핑되었다가, 다시 지워지고, 다시 타이핑되는 패턴을 반복하게 만들었습니다.아래 코드를 통해 각 텍스트가 타이핑되고, 삭제되는 과정을 단계별로 관리했..

포트폴리오에 티스토리 블로그 글을 가져와서 Blog 컴포넌트를 꾸미려고 했습니다.예전에 Tistory Open API를 사용해 구현한 사례를 본 적이 있어, 이를 활용하려고 했는데 검색해보니 Tistory Open API가 서비스 종료되었다는 소식을 접하게 됐습니다.그래서 다른 방법을 찾아보다가 RSS를 통해 블로그 글을 가져오는 방법을 알게 되었습니다. 하지만 RSS를 사용하여 구현을 진행했을 때 RSSTOJSON의 제한으로 인해 한 번에 10개의 데이터만 가져올 수 있었습니다.원래는 페이지네이션 기능도 넣으려 했으나, 이 제한 때문에 구현하지 못한 것이 아쉬웠습니다.앞으로 Next.js를 학습하여 RSSTOJSON을 사용하지 않고, RSS를 직접 파싱해서 페이지네이션까지 완벽하게 구현해보고 싶습니다...

포트폴리오를 만드는 중, 페이지 이동을 위한 탭 메뉴에서 현재 경로에 맞는 메뉴에만 다른 스타일을 적용하려고 했습니다.처음에는 location.pathname을 사용해 각 경로에 맞춰 active 클래스를 추가하려 했었습니다.그러나 이렇게 하면 경로를 추가하거나 변경할 때마다 해당 경로가 맞는지 일일이 확인해야 하는 번거로움이 있었습니다.예를 들어 /home 경로로 이동할 때는 pathname에 'home'이 포함되어 있는지를 확인하는 조건문을 넣고, 또 다른 경로가 추가되면 그에 맞춰 코드를 수정해야 했습니다.그러다가  React Router에서 제공하는 NavLink 컴포넌트를 알게 되었습니다.이 컴포넌트를 사용하면 현재 경로에 맞는 메뉴에 자동으로 스타일을 적용할 수 있었습니다.NavLink는 내..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/weather GitHub - GangHyun95/weather: OpenWeather ApiOpenWeather Api. Contribute to GangHyun95/weather development by creating an account on GitHub.github.com 저번 포스팅에서 프로젝트를 마무리하려 했지만, Vercel로 배포한 후 이미지 관련 문제가 발생해서 이번에 추가로 작성하게 되었습니다.프로젝트를 Vercel로 배포한 후, 데스크탑에서는 아이콘이 정상적으로 보였지만, 모바일 기기에서는 아이콘이 뜨지 않고 alt 텍스트만 출력되는 문제가 발생했습니다..