ijooha 님의 블로그

동적 라우팅 구현 이슈 동적 라우팅을 구현할 때 URL 파라미터를 받아서 해당 파라미터에 맞는 페이지를 동적으로 렌더링하고자 했으나,params가 제대로 동작하지 않아 문제가 발생했다.        해결 과정 처음에는 params.id가 undefined로 출력되는 문제를 겪었고, 이를 해결하기 위해 여러 가지 방법을 시도했다.폴더 구조나 파일 구성, 링크 설정 등에서 문제가 있을 수 있기 때문에 하나씩 차근차근 점검했다. 우선 Next.js에서 동적 라우팅을 사용하려면 [id]와 같은 폴더 이름을 사용해야 한다는 점을 다시 확인하고, 이 구조로 맞게 설정했는지 다시 보니 문제가 없었다.그 다음 파일 구성을 계속 살펴봤는데, 동적 페이지를 구현하기 위해 [id] 폴더를 만든 후, 해당 폴더에 파일을 생성..

Pagination 이란? Pagination은 데이터를 여러 페이지로 나누어 보여주기 위한 기법으로, 아래와 같은 예시들이 있다.(각 사진별 링크를 걸어두었다!) Pagination  컴포넌트 개발 목표접근성이 높고 재사용 가능한 Pagination 컴포넌트 구현하기! Pagination 컴포넌트에서 고려해야할 기능Pagination 컴포넌트를 제작하기 앞서 고려해야할 기능들을 정리해보았다.기본 기능 외에도 추가할 수 있는 기능들이 더러 있었고, 차근차근 추가해볼 예정! 1 기본 기능• 페이지 번호 표시• '이전', '다음' 버튼• '처음', '마지막' 버튼 (사용자가 해당 기능 사용할지 선택)• 페이지 버튼을 클릭하면 해당 페이지로 이동• 총 페이지수와 현재 페이지 표시 (사용자가 해당 기능 사용할지..

Headless UI 라이브러리란? Headless는 오직 기능만을 제공해주는 ui 라이브러리이다.일반 ui 라이브러리와는 다르게 Headless는 사용자가 원하는대로 커스터마이징 하여 사용할 수 있어 효율적이다.따라서 진행하고 있는 프로젝트의 디자인을 적용시켜 디자인의 통일성을 지킬 수 있다!  어떤 경우에 Headless UI를 사용할까?기본으로 제공되는 디자인이 없기 때문에, 디자인 시스템이 없는 경우 오히려 불편할 수 있고,커스터마이징을 하기 위한 시간을 더 많이 투자해야하는 단점이 있다.따라서 Headless ui는 ui의 스타일보단 로직이나 기능에 집중해야 하거나,프로젝터에서 특정한 디자인 요구사항이 있을 때 사용하는 게 적합하다.         storybook 이란? UI 컴포넌트를 독립적..

Judie Movie : Movie Search PageJudie Movie 바로가기github 바로가기  다양한 영화를 검색하고, 관심 있는 영화를 북마크에 저장해 확인할 수 있는 사이트입니다.지금 가장 뜨고 있는 영화들을 실시간으로 확인할 수 있고, 모달을 통해 개봉일자, 내용 및 평점 확인이 가능합니다.         🎙️ Project Introduction Development Period2025/01/08 ~ 2025/01/17 (10 days) Tech Stack바닐라 JavaScript만 사용하여 만들어진 프로젝트입니다.   HTML5      CSS3      JAVASCRIPT            ✨🪄 Project Features UXUI사용성을 고려한 사용자 위주의 페이지를 구..