해당 적용해 보기 시리즈는 12 버전을 기준으로 변경/추가된 부분에 대해 설명하고 있기 때문에 이전 버전을 사용하지 않으셨던 분들은 모르는 기능이 나왔다고 해서 당황하지 마시고 최신 버전에서는 이렇게 쓰면 되는구나 하고 넘어가시거나 필자가 이전에 작성했던 글들을 12 기준으로 작성되었기 때문에 해당 글들을 한번 보시기를 권장드립니다. [NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering 예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하 mingeesuh.tistory.com 우선 Next JS 13 버전의 주요 업..

배워보기 시리즈는 필자도 많이 써보지 않은 스택들을 사용하면서 공식문서 바탕으로 이해한 내용들을 정리하는 시리즈이기 때문에 잘못된 부분이 있을 수 있습니다. 잘못된 부분을 발견하신다면 댓글로 남겨주시면 수정하도록 하겠습니다. 스토리북이란? 스토리북은 컴포넌트 개발을 좀 더 효율적으로 할 수 있도록 도와주고, 유지 보수 및 테스트를 보다 손쉽게 할 수 있도록 해주는 도구입니다. 타입스크립트를 쓰면 개발자의 의도가 좀 더 명확하게 기술되어 좀 더 예측 가능한 코드를 작성할 수 있듯이, 스토리북이라는 도구를 사용하면 팀원들이 각 다른 컴포넌트를 개발한다 해도 해당 컴포넌트의 사용 예제 라던지 전달받는 prop 등을 상세히 명시할 수가 있기 때문에 유용합니다. 만약 팀원들이 만든 컴포넌트를 테스트해보기 위해 매..

Framer-motion을 통해서 컴포넌트에 등장 애니메이션 적용한 저번 포스트에 이어서 이번 포스트에서는 페이지 이동시 자연스럽게 전환되도록 애니메이션 효과를 적용해보도록 하겠습니다. react-transition-group 같은 패키지를 사용해도 무방하지만 저번 포스트에서 framer-motion으로 진행했기 때문에 같은 라이브러리를 사용해서 진행해 보겠습니다. 우선 framer-motion이 설치되있지 않은 분들은 아래 명령어를 통해 설치해주시길 바랍니다. npm i framer-motion // 또는 yarn Animate Presence 로 애니메이션 적용하기 페이지간의 자연스러운 이동을 위해서는 Framer에서 제공하는 AnimatePresence라는 컴포넌트를 사용해야합니다. 해당 컴포넌트를..

오늘은 얼마 전 커밋 메시지에 오타가 나서 수정을 하기 위해 검색하면서 알게 된 커밋 메시지 수정 방법을 공유해보도록 하겠습니다. 크게 3가지 상황이 있을수 있는데 하나씩 전부 살펴보도록 하겠습니다. 1. 마지막으로 작성한 커밋 메시지에 수정사항이 있을 경우 (아직 push하지 않음) 2. 마지막 커밋 기준 n번째로 작성한 커밋 메시지에 수정사항이 있을 경우 (아직 push하지 않음) 3. 이미 커밋이 리모트 저장소에 push된 상태일 경우 1. 마지막으로 작성한 커밋 메세지에 수정사항이 있을 경우 아직 원격 저장소에 push하기 전이라면 amend(수정) 명령어를 입력해 간단하게 수정할 수 있습니다. git commit --amend -m "수정된 커밋 메세지" // 또는 --amend만 입력후 설정해..

이번 포스트에서는 스크롤을 내려 특정 요소가 화면에 보일 때 자연스러운 애니메이션 효과가 날 수 있도록 구현해보도록 하겠습니다. 사용할 패키지는 애니메이션을 선언형으로 손쉽게, 그리고 직관적으로 구성할 수 있도록 해주는 framer-motion 그리고 특정 요소가 화면에 들어왔는지 감지할 수 있도록 해주는 react-intersection-observer 입니다. react-intersection-observer는 아래 포스트에서 무한 스크롤을 구현하기 위해 사용했던 intersection observer의 api를 react에서 훅 형태로 쉽게 관리하고 사용할 수 있도록 만든 패키지이기 때문에 그냥 직접 구현해서 사용해도 되지만 최대한 효율적이면서 손쉽게 구현하기 위해 사용해보도록 하겠습니다. [Fir..

이번 포스트에서는 이미지 특정 부분이 반사된 그림자 효과를 만들어 보도록 하겠습니다. 필자는 원래 box-shadow 속성을 사용해 그림자를 줬지만 이번 홈페이지 리뉴얼 작업으로 인해 좀 더 사실적인 그림자를 구현하기 위해 해당 방법을 사용하게 되었습니다. 언뜻 보면 티가 안 날 수도 있지만 위와 같이 캐러셀 슬라이드 같은 곳에 적절히 적용해주면 좀 더 입체적이고 현실적인 그림자 효과를 낼 수 있습니다. HTML 마크업은 그림자 효과를 줄 이미지 태그를 두 개 넣어주시거나 div태그에 background 속성으로 이미지를 불러오시면 됩니다. 본 포스트에서는 img 클래스를 가진 div와 해당 div의 ::after 가상 요소에 background 속성을 사용해보도록 하겠습니다. CSS 해당 효과를 위해 ..