dev-hpk 님의 블로그

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

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

라이브러리 없이 무한 스크롤 구현하기!!!어떤 방식으로 구현할까 고민하다가 Intersection Observer API라는 좋은 기능을 찾았습니다. Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다. 기본 사용법let options = { root: document.querySelector("#scrollArea"), rootMargin: "0px", threshold: 1.0,};let observer = new IntersectionObserver(callback, options); 컬럼과 댓글을 불러오는데 모두 사용하기 위해 커스텀 훅으로 관리하도록 만들어 보겠습니다.impo..

오늘은 대시보드 페이지를 개발해 봤습니다.우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요! GET Columnsimport axios from '@/lib/instance';import { GetColumnParams, GetColumnsResponse } from '@/type/column';const getColumns = async ({ teamId, dashboardId,}: GetColumnParams): Promise => { try { const response = await axios.get(`/${teamId}/columns/`, { params: { dashboardId, }, }); ..

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.// Chip.tsimport { ReactNode } from 'react';type ChipType = 'tag' | 'status' | 'status-option';export interface ChipProps { children: ReactNode; chipType: ChipType;}export const bgTag = ['orange', 'green', 'pink', 'blue'];// Chip.tsximport clsx from 'clsx';import { ChipProps } from '@/type/chip';import { PropsWithChildren } from 'react';import styles from './Chip.mo..

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// Button.tsximport styles from "./Button.module.css";import { PropsWithChildren, ReactNode } from "react";import clsx from "clsx";interface ButtonProps { children: ReactNode; classes?: string | string[]; disabled?: boolean; handler: () => void;}function Button({ children, classes, disabled, handler,}: Pr..

드디어 중급 프로젝트 시작이다!!지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다. 중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨ 기술 스택Next...

타입스크립트를 사용하다 보면 종종 변수나 객체가 null 또는 undefined일 가능성을 처리해야 하는 상황을 마주하게 됩니다. 이때 non-null assertion (!) 연산자를 활용하면 코드의 가독성을 유지하면서 특정 값이 반드시 null 또는 undefined가 아님을 컴파일러에게 확신시킬 수 있습니다. 목차 1. Non-Null Assertion(!)이란? 2. Non-Null Assertion(!) 적용 3. Non-Null Assertion(!) 주의점 4. Non-Null Assertion을 대체할 방법 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. non-null assertion이란?Non-Null Assertion(!)은 TypeScript에서 사용되는 특별한 연산..

any 타입은 TypeScript에서 가장 강력하면서도 동시에 논란이 많은 타입 중 하나입니다. 편리할 수 있지만, 잘못 사용하면 코드의 안정성과 가독성을 크게 떨어뜨릴 수 있습니다. any 타입의 역할과 왜 최대한 사용을 지양해야 하는지에 대해 알아보겠습니다. 목차 1. any 타입이란? 2. any 타입의 장점 3. any 타입 사용해도 될까? 4. any 타입 대체하는 방법추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. any 타입이란?any는 TypeScript의 최상위 super(모든 것을 허용하는) 타입입니다. 변수를 any 타입으로 지정하면 그 변수는 모든 타입을 허용하고, 타입 검사를 건너뛰기 때문에 자바스크립트와 동일하게 작동하게 됩니다. 이는 TypeScript가 엄격한 ..

타입스크립트(TypeScript)는 정적 타입 시스템을 통해 코드의 안전성을 높이고, 버그를 줄이는 데 유용한 언어입니다. 그중에서도 타입 추론과 타입 단언은 TypeScript의 강력한 기능입니다. 목차 1. 타입 추론 (Type Inference) 2. 타입 단언 (Type Assertion) 3. 타입 추론과 단언의 차이 4. 타입 추론과 단언 혼합 사용추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 추론  (Type Inference)타입 추론은 변수나 함수의 타입을 명시적으로 지정하지 않아도, TypeScript가 자동으로 타입을 결정하는 기능입니다. TypeScript는 코드 작성 시에 데이터의 초기 값을 기반으로 타입을 추론해 변수의 타입을 설정합니다. 이 기능 덕분에..