dev-hpk 님의 블로그

오전 스크럼 회의에서 할 일 리스트 페이지를 작업하시는 팀원분께서 어떻게 구현해야 할지 모르겠다고 도움을 요청하셨어요. 팀 회의 때 밤을 새고 작업을 하셔도 해결을 못하셨다고 하시는데 안 도와드릴 수 없죠🔥 제 작업은 거의 마무리 단계라 잠시 뒤로 미뤄두고 도움을 드리기로 했어요. 일단 문제 상황을 먼저 확인해 봐야겠죠👀🚨 문제 상황 Swagger의 API 문서가 너무 복잡해서 어떤 API를 사용해야 할지 모르겠다고 하시네요. 다시 보니 정말 헷갈릴만 하네요. 다른 API 문서들을 찾아보니 아래처럼 설명을 잘 작성해두기도 했네요🤔 아쉽지만 언제 어떤 환경에서 개발할지 알 수 없으니, 주어진 환경에 맞게 개발할 줄 알아야 개발자로 성장할 수 있겠죠!🌈 문제 해결1️⃣ 폴더 구조 수정 우선 폴더 구..

드디어 로그인 기능이 구현되었습니다. 그동안 로그인 기능이 구현되지 않아서 swagger에서 직접 로그인 후 response로 받은 토큰을 env 파일에 저장 후 사용했습니다.const res = await instance.get( `/groups/${groupId}/task-lists/${taskListId}/tasks`, { params: { date }, headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`, }, }, );  🚨 문제 상황 API 요청 함수를 만들 때마다 항상 header에 토큰을 적용해 주는 부분에서 중복 코드에 대한 불편함을 느꼈어요.개발을..

오늘 작업에는 클립보드를 이용하는 부분이 있습니다❗ 멤버 초대 모달의 '링크 복사하기' 버튼을 클릭하면 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 ..

Trouble Shooting🚨 상황팀원의 PR(pull request)에서 발견된 버그와 개선 사항 및 수정 방법에 대해 리뷰를 작성했습니다.반응형 화면과 이벤트 관련 테스트도 진행하면서 코멘트를 열심히 남겼는데요..😊 리뷰에 대한 피드백 반영이나 확인 없이 PR이 머지되었습니다...😥 🤔 무엇이 문제였을까요?문제 상황이 왜 발생했는지 고민해 봤을 때 아래 3가지 정도가 있는 것 같습니다.1️⃣ 리뷰 프로세스의 불명확함2️⃣ 의사소통 부족3️⃣ 팀의 리뷰 문화 미정립 다른 리뷰 코멘트는 확인하시고 응답하신 것을 보면 2️⃣번은 아닌 것 같습니다😥 📖 배운 점1️⃣ 의사소통과 피드백 방법의 개선 필요성다시 확인해보니 제가 남긴 리뷰가 모호하거나 딱딱한 어조로 작성되어 요청보다는 단순한 의견으로..

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

🚫 문제 상황 : 동적 라우팅 ([id].tsx) 페이지에서 새로고침 하면 404 page로 이동한다. 문제 원인을 찾지 못해서 vercel 배포 환경 설정이 잘 못 되었는지 확인하기 위해 로컬에서도 빌드를 진행했습니다. 빌드 후 next/static 폴더의 리소스를 비교했지만 로컬과 vercel 모두 [id]로 동적 파일을 생성했습니다.어디서부터 잘못된 걸까요.💡 해결 방법팀 회의와 검색을 통해 문제 원인과 해결 방법 여러 개 찾아보았는데, 프로젝트에 바로 적용하기에는 어려운 부분들도 있어서 멘토님께 해당 이슈를 공유했습니다. 멘토님의 조언을 통해 해결 방법을 간추려 봤습니다.getServerSideProps 선언해 SSR(Server Side Rendering)로 동작하도록 수정실제로 SSR로 수..

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다.🌈 개선 사항 : 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줄만 노출하고 길어지면 말 줄임(...) 처리하는 게 가장 자연스러운 것 같습니다.팀원분들도 모두 말 줄임 처리가 좋다..