dev-hpk 님의 블로그

오늘 작업에는 클립보드를 이용하는 부분이 있습니다❗ 멤버 초대 모달의 '링크 복사하기' 버튼을 클릭하면 URL을 클립보드에 복사하고, 유저 정보 모달의 '이메일 복사하기' 버튼을 클릭하면 유저의 이메일을 복사해요✨ 클립보드를 어떻게 구현해야 할까요🤔 라이브러리를 찾아보기 전에 저의 해답지인 MDN을 찾아볼게요! Clipboard API의 writeText() 메서드를 사용하면 특정 text를 클립보드에 저장하고 Promise를 반환한다고 하네요😀Clipboard API - writeText 사용법async function writeClipboardText(text) { try { await navigator.clipboard.writeText(text); } catch (error) { ..

이미지 업로드 작업에서 너무 많은 시간을 써버렸네요..😅 이미지 업로드 문제를 해결하기 위해 React Hook Form을 정독했으니 팀 생성은 이제 아무것도 아닙니다! 우선 팀 생성 API를 먼저 작업해 볼게요.팀 생성 APIimport axios from '@/app/lib/instance';export interface PostGroupData { profile?: string; // 프로필 이미지는 선택 사항 name: string;}const postGroup = async (data: PostGroupData) => { const res = await axios.post('groups', data, { headers: { Authorization: `Bearer ${pro..

공통 컴포넌트 작업을 마무리하고, 오늘부터는 페이지 작업 시작입니다. 팀 생성 페이지를 먼저 작업해 보겠습니다!작업 목표 작업에 앞서 피그마 디자인을 먼저 확인해 볼게요👀 팀 이름 Input이 팀원분이 공통으로 작업해 주신 Input 컴포넌트와 유사하게 생겼으니 공통 Input을 사용하면 되겠네요👍 공통 Input 코드더보기 import { MouseEvent, ReactNode, useState } from 'react';import { useFormContext, RegisterOptions } from 'react-hook-form';import IconVisibility from '@/app/components/icons/IconVisibility';import IconInVisibility ..

고급 프로젝트 Coworkers의 시작입니다. 저는 Modal 공통 컴포넌트를 맡게 되었습니다.작업을 시작하기 전에 지난 프로젝트에서 팀원분께서 만들어주신 Modal 컴포넌트를 사용할 때 좋았던 점들과 불편했던 점들을 생각해 봤어요🤔좋은 점Modal의 Container만 만들어두고 Content는 children으로 받아 사용할 수 있어 편했음Modal의 dim 영역을 클릭했을 때 닫히는 기능이 있어 편했음불편한 점Modal 컴포넌트를 사용하는 페이지에서 모달의 open 관련 State를 선언하고 관리해야 해서 불편했음DOM 계층의 Depth가 깊어지면 z-index 관련해서 신경 쓸 부분이 많아 불편했음Modal의 dim과 컨텐츠가 각각 Dim, Modal 컴포넌트로 분리되어 있어 불편했음위 내용을 ..

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

오늘은 대시보드 페이지를 개발해 봤습니다.우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요! 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에서 사용되는 특별한 연산..