dev-hpk 님의 블로그

Zustand와 sessionStorage로 데이터를 캐싱하게 된 계기 맛길을 배포 후 지인들에게 피드백을 요청했습니다. 가장 많이 받은 피드백이 페이지를 이동할 때마다 이전 데이터가 사라져 불편하다는 내용이었습니다.피드백을 바탕으로 생각해보니 아래와 같은 문제가 있을 수 있을 것 같습니다.페이지 전환이나 새로고침 시 기존 데이터를 다시 불러오기 위해 불필요한 API 요청이 발생API 응답이 길어질 경우, UX(사용자 경험) 저하길 찾기 기능에서 prop drilling 발생이 문제를 해결하기 위해 Zustand를 도입해 맛집 리스트와 위치 정보를 전역으로 관리하고, 맛집 리스트를 sessionStorage에 저장해 불필요한 API 호출을 줄이기로 했습니다.Zustand를 선택한 이유 : 상태 관리 라이..

최근 프로젝트에서 모달 컴포넌트를 사용하는데 많은 불편함을 느껴 React Portal을 사용하게 되었습니다. 제가 프로젝트를 진행하면서 겪은 불편함을 간단하게 정리했으니 필요하신 분들은 아래 예시를 확인해 주세요😊더보기어떤 불편함이 있었냐고요🤔아래 사진은 chrome의 개발자 도구를 통해 확인한 모달입니다. 단순히 detph가 깊어지는데 무슨 불편함이 있는지 궁금하실 수 있겠네요❗ 위 예시를 보시면 DOM의 계층 구조에 의해 모달의 z-index에 문제가 생긴 경우입니다.import styled from "styled-components";function PortalExample() { const Title = styled.h1` position: fixed; top: 0; lef..

Emotion🤔Emotion은 리액트에서 스타일을 관리하기 위한 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 직접 CSS를 작성하고 적용할 수 있게 해 줍니다. Emotion 외에도 Styled-Components가 주로 사용됩니다. 2024 css-in-js 사용 추세 지난 2년간 npm 다운로드 기록Styled-Components 대신 Emotion을 선택한 이유🤔Emotion을 선택한 첫 번째 이유는 styled-components는 이전 미션과 프로젝트를 통해 많이 경험해 봤기 때문에 새로운 라이브러리를 경험해 보고 싶어서입니다. 트렌드를 따라가는 것도 좋지만 여러 라이브러리를 사용해 보면 왜 특정 라이브러리가 많이 사용되는지 비교해 볼 수 있을 것 같습니다😊 두 번째 이유는 자..

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다. 목차 1. 리액트의 라이프사이클 단계 2. 함수형 컴포넌트와 useEffect 3. useEffect 사용 시 주의할 점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 리액트의 라이프사이클 단계위 사진은 Class 방식의 라이프 사이클입니다.함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.1. 마운트 (Mount)정의: 컴포넌트가 생성되고 DOM에 추가되는 단계주요 메서드: componentDidMount (클래스 컴포넌트 기준)..

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다.🌈 개선 사항 : select 메뉴 버튼이나 옵션 바깥 부분을 클릭했을 때 select 메뉴가 닫히면 좋을 것 같다.멘토님께 피드백을 받고 구글, 네이버 같은 사이트들을 확인해 봤는데 모두 select 메뉴 바깥 부분을 클릭하면 닫히도록 동작하네요👀💡 수정 코드 및 결과/* import, type 등 생략... */function Dropdown({ children, menus, onMenuClick,}: PropsWithChildren) { const { isOpen, toggleDropdown, closeDropdown } = useDropdown(); const ref = useRef(); const hand..

멘토님과 1차 배포 테스트를 진행했습니다. 버그를 하나씩 찾아내시는데 제가 작업한 페이지도 버그가 많네요😭테스트하면서 나온 이슈들을 정리해 보면 아래와 같습니다.버그를 하나씩 살펴보면서 수정해 보겠습니다!🚫 문제 상황 : Todo 상세 모달의 타이틀이 길어지면 메뉴를 버튼 영역을 침범하고 UI가 깨짐 타이틀이 길어지는 경우 버튼 영역을 침범할 뿐 아니라, UI 적으로도 모달 헤더가 너무 길어 보여서 어색해 보입니다.모달 타이틀이 저렇게 긴 경우가 있을까 싶지만... 모든 상황을 고려해야겠죠🤔Figma, 기획서에 타이틀이 길어지는 경우에 관련된 정의가 없어 고민해 본 결과 타이틀을 1줄만 노출하고 길어지면 말 줄임(...) 처리하는 게 가장 자연스러운 것 같습니다.팀원분들도 모두 말 줄임 처리가 좋다..

카드의 태그 관련 이슈가 발생했습니다.카드 생성 POST API에 태그 색상과 관련된 속성이 없어서 생긴 문제인데 확인해 보겠습니다. 🚫 문제 상황화면이 리렌더링 될 때마다 태그의 색상이 랜덤 하게 변경됩니다. 카드를 생성하는 POST API에 태그 색상에 대한 옵션이 없어서 발생한 문제입니다.처음 작업할 때 태그 컴포넌트가 렌더링 될 때 정해진 5개 색상 중 랜덤하게 설정되도록 만들었거든요...😅const getTagColor = (styles: Record): string => { if (!bgTag || bgTag.length === 0) return ''; const idx = Math.floor(Math.random() * bgTag.length); return styles[bgTag[..

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다. 담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다.  제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠😊   🚫 문제 상황 이미지를 등록한 상태로 카드를 생성했지만, 화면에 보이는 카드는 이미지가 없이 렌더링 됩니다. 💡 해결 방법에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗테스트해 보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다. 결과를 확인해 보겠습니다.깔끔하게 해결이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..🤔한 번 눌러봐야겠죠?슬픈 예감은 항상 틀린 적이 없네요. 사용자가 파일 ..

오늘은 대시보드 상세에서 카드의 상세 모달을 작업해 봤습니다! 우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!(컴포넌트 구조보다 기능적인 부분을 보고 싶으시다면 아래 링크를 눌러주세요↓)기능 코드 DetailCardModal.tsx (할 일 카드 모달)기능이 많아 컴포넌트는 아직 분리하지 못했습니다... import 부분은 생략했으니 이해해 주세요😭빠른 시일 내로 리팩토링 할 예정이니 코드 블록이 불편하시다면 아래 Github PR을 확인해 주세요!! #92 모달 할 일 카드 by hpk5802 · Pull Request #98 · codeit-sprint-part3-6team/project이슈 번호 close #92 변경 사항 요약 공통 dropd..

무한 스크롤 관련된 문제로 라이브러리를 사용해야 하나 고민이 많았습니다. 우선 문제 상황과 지금까지 시도한 방법들을 간단하게 소개해보겠습니다.문제 상황PC로 확인했을 때는 잘 동작하던 Intersection Observer API가 13인치 노트북으로 확인했더니 작동하지 않는다.브라우저의 크기를 변경한 상태(확대 및 축소)에서 Intersection Observer API가 작동하지 않는다.(브라우저의 확대 및 축소 기능을 사용하는 경우까지는 고려하지 않아도 된다고 피드백 받음!!)특정 사이즈에서 Intersection Observer API가 의도한 대로 동작하지 않아 무한 스크롤을 마음대로 동작시킨다.시도한 방법 resize 이벤트를 추가해서 브라우저 사이즈가 변경될 때마다 IntersectionOb..