React Router <BrowserRouter>사용시 서브페이지 404 페이지가 뜨는 경우 Vercel에 React로 만든 사이트를 배포할 때 서브페이지로 직접 접속 시 404 에러가 발생하는 문제가 있습니다. vercel.json 파일을 통해 Browser Router에서 서브페이지 라우팅을 처리할 수 있습니다.
Javascript - 그리드 레이아웃 이미지 교체 효과 핀터레스트에서 영감을 받아 3x3 그리드 레이아웃에서 이미지를 순차적으로 교체하는 웹 효과를 자바스크립트로 구현한 예시입니다. 더미 데이터는 photo.json에 저장되어 있습니다.자바스크립트에서는 이미지를 순차적으로 교체하는 스크립트를 구현했습니다.
가상 JSON 데이터가 필요할 때 - Fake REST API 서비스 가상 데이터가 필요할 때 요긴한 Fake REST API 서비스들을 소개합니다. Dummy JSON, JSONPlaceholder, Korean JSON, Random User Generator는 각각 다양한 데이터를 제공하여 손쉽게 활용할 수 있습니다.
Bento Grid Layout - css로 벤토 그리드를 만들어보자 Bento(도시락) 레이아웃 예제는 HTML의 간단한 구조로, display: grid와 grid-row, grid-column을 이용하여 화면을 배치합니다. JavaScript를 사용하여 순차적인 애니메이션을 추가하였으며,CodePen에서 확인 가능합니다.
HTML, CSS로 간단하게 구현하는 Sticky Header Sticky Header는 스크롤 시 특정 요소가 화면 상단에 고정되는 기능을 말합니다. CSS의 추가된 기능으로 간편하게 구현 가능합니다. 카페24 쇼핑몰의 상세페이지에서 활용하여 사용자에게 더 편의를 제공하는 예시로 소개되었습니다.
Radix-UI Select + React Hook Form 사용시 ref 전달 처리 에러 대응 Radix UI의 Select 컴포넌트와 React-Hook-Form을 이용해서 처리할때 ref 전달시 문제가 생기는 경우가 있습니다. React-hook-form의 Controller와 forwardRef를 활용한 방법으로 이 문제를 해결할 수 있습니다.
teleport HQ - 프롬프트 한 줄로 디자인과 리액트 코드까지 완성 teleport HQ는 간단한 프롬프트 입력만으로 웹사이트를 빠르게 작성해줍니다. 반응형 디자인과 프론트엔드 코드 생성도 해줍니다만, 실무에 바로 적용하기엔 아쉬운 부분도 있습니다. 빠른 프로토타이핑이 가능하다는 점에서 꽤 편리하다는 인상을 줍니다.