전체 글

개발을 하다 보면 일반적인 세로 방향 스크롤이 아닌 아래의 그림처럼 가로 방향으로 넘어가는 스크롤이 필요한 경우가 있습니다.따라서 이번 글에서 가로 스크롤에 필요한 코드를 정리해보겠습니다. 🐝 전체 코드아래의 코드는 'useHorizontalScroll.ts'라는 이름의 커스텀 훅으로, 원하는 요소에 가로 스크롤을 적용합니다.import { useRef, useEffect, useCallback } from 'react';export const useHorizontalScroll = () => { const listWrapperRef = useRef(null); const handleWheel = useCallback((e: WheelEvent) => { const container = lis..

🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') //  🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..

🖼️ 문제 상황React와 Next.js, 그리고 Typescript을 기반으로 한 프로젝트입니다.마이 페이지의 프로필 편집 기능에서 서버에 patch 요청을 보낼 때, body에 소개글을 제외한 프로필 이미지와 닉네임 값이 필수로 들어가야 했습니다.그리고 api는 이미지 파일을 미리 서버에 업로드하여 url을 응답으로 받고, 해당 url을 닉네임 및 소개글과 함께 담아 최종적인 프로필 편집 patch 요청을 보내는 방식이었습니다.사용자가 프로필 사진을 따로 지정하지 않은 경우도 있기 때문에 이미지 파일이 선택되지 않았다면 로컬에서 임포트 해 온 'defaultProfileImage'를 담아 요청을 보낼 계획이었습니다. 그러나 생각했던 것보다 다양한 이미지의 타입으로 인해 타입 오류가 발생하였습니다.로..

🌵 문제 상황next.js를 활용하여 유용한 링크를 모아두는 웹사이트(like 북마크)를 구현하는 프로젝트에서공유된 링크를 클릭하면 보이게 될, 공유된 폴더만을 위한 공유 페이지가 필요했습니다. 예를 들어 "유용한 링크"라는 이름을 가진 폴더를 공유하면https://l1 nkbrary.netlify.app/shared/463 와 같이 폴더의 아이디가 들어간 고유한 링크가 생성되고,해당 링크로 들어가면 아래와 같은 페이지를 볼 수 있습니다.next.js로 구현 중이었기 때문에 페이지 렌더링 시 SSG / SSR / ISR을 활용하고 싶었습니다.해당 페이지는 저장된 링크 목록이 실시간으로 업데이트될 필요가 없었으므로SSG를 사용하여 생성되어 있는 모든 폴더별 페이지를 빌드 시에 미리 렌더링하려고 하였습니다..

📖 테스트란소프트웨어 테스트란 개발한 소프트웨어의 기능 및 동작을 검증하여 결함을 찾아내고 수정하는 과정입니다.이때 테스트를 위해 작성하는 코드가 테스트 코드이고, 테스트 코드를 수행함으로써 개발자가 예상한 결과가 나오는지 확인합니다.대표적인 테스트의 종류는 다음과 같습니다.정적 테스트(static test): 코드를 실행하지 않고 테스트합니다. 기능이 구현되기 전과 같이 개발 프로세스 초기에 결함을 발견하기 위한 목적으로 수행합니다. 타입스크립트로 함수의 파라미터 타입을 검사하는 것도 정적 테스트에 해당합니다.단위 테스트(unit test): 개별적인 코드 단위가 의도한 대로 동작하는지 테스트합니다. 보통 함수나 메서드가 알맞은 입력값과 출력값을 반환하는지 확인합니다. 그 밖에도 유틸성 함수, 커스텀..

📖 스토리북이란스토리북이란 UI 구성 요소(컴포넌트)를 독립적으로 개발/테스트/문서화하기 위한 도구입니다.전체 애플리케이션을 실행하지 않고도, 각각의 컴포넌트가 특정 상태나 실행 시나리오별로 어떻게 렌더링 되는지 테스트할 수 있습니다. 애플리케이션에 오류가 발생해 UI를 확인할 수 없는 상황이어도,기존 웹 사이트에 영향을 주지 않고 독립적인 포트 번호를 가진 스토리북 웹 사이트에서 컴포넌트를 체험할 수 있습니다. 스토리북에는 각 컴포넌트별로 '스토리(story)'라는 단위가 있습니다.예를 들어, 버튼 컴포넌트에는 작은 사이즈/큰 사이즈/활성화된/비활성화된 버튼 등의 다양한 종류의 버튼이 존재합니다.이때 컴포넌트의 각 버전이 하나의 스토리가 되는 것입니다. 따라서 위와 같은 스토리를 모아 관리하는 도구가..