포트폴리오 사이트를 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는 내..