전체 글

🌵 모달이란모달이란 현재 열려있는 페이지에 포함된 창으로, 페이지 위에 일종의 '레이어(층)'을 까는 것을 말합니다.현재 페이지를 '부모', 현재 페이지에서 열린 모달을 '자식'으로 생각할 수 있습니다.- 출처 블로그모달에 대한 더 자세한 내용 및 모달과 팝업의 차이점은 다음 블로그를 참고해주세요. 이번 글에서는 웹 서비스에서 많이 사용되는 모달 구현에 필요한 코드를 정리해보겠습니다. 🌵 전체 코드아래의 코드는 'Modal.tsx'라는 이름의 컴포넌트 파일로,사진에서 초록색 선으로 둘러싸인 부분과 같이 내용을 제외한 모달의 기본 틀을 제공합니다.import { ComponentPropsWithoutRef } from 'react';import closeIcon from '@icons/close_ico..

개발을 하다 보면 일반적인 세로 방향 스크롤이 아닌 아래의 그림처럼 가로 방향으로 넘어가는 스크롤이 필요한 경우가 있습니다.따라서 이번 글에서 가로 스크롤에 필요한 코드를 정리해보겠습니다. 🐝 전체 코드아래의 코드는 '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 와 같이 폴더의 아이디가 들어간 고유한 링크가 생성되고,해당 링크로 들어가면 아래와 같은 페이지를 볼 수 있습니다.CSR으로도 클라이언트에서 토큰을 활용해 데이터를 받아올 수 있었지만,공유된 링크로 접속한 사용자에게 페이지 진입과 동시에 콘텐츠가 바로 보이는 초기 사용자 경험이 중요했습니다.또한 해당 페이지는 사용자와의 상호작용이 적고 도메인 내에서의 이동이 없었기 때문에SSG와 ..

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