dev-hpk 님의 블로그

🚨 문제 상황프로젝트를 진행하면서 Youtube 채널을 추가하면서 점점 불편함을 느끼게 되었어요. 위의 이미지처럼 채널이 추가될 때마다 /app 폴더 하위에 폴더가 점점 늘어나 구조가 너무 복잡해지게 되더라고요😭 왜 채널(라우트 페이지)마다 폴더를 만드는지 궁금하실 수 있겠네요🤔Next.js가 파일 시스템 기반의 라우터를 사용하여 폴더를 경로 정의에 사용하기 때문이에요. 위 예시를 보시면 /app 폴더 하위의 폴더 이름이 경로로 사용되고 있어요. /{channel}/page.tsximport axios from '@/app/lib/instance';import ListContainer from '@/app/components/lists/ListContainer';async function page(..

오전 스크럼 회의에서 할 일 리스트 페이지를 작업하시는 팀원분께서 어떻게 구현해야 할지 모르겠다고 도움을 요청하셨어요. 팀 회의 때 밤을 새고 작업을 하셔도 해결을 못하셨다고 하시는데 안 도와드릴 수 없죠🔥 제 작업은 거의 마무리 단계라 잠시 뒤로 미뤄두고 도움을 드리기로 했어요. 일단 문제 상황을 먼저 확인해 봐야겠죠👀🚨 문제 상황 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) { ..

지난번에 Youtube Data API를 사용해 열심히 JSON 데이터를 만들었습니다. 처음 사용해 보는 API다 보니 공식문서를 여러 번 읽는 것도 힘들었지만, 이제 빛을 볼 시간입니다. 프로젝트에 JSON 데이터를 추가하고 사용해 볼게요. 맛길 프로젝트의 기획 포스팅을 보지 않으셨다면, 왜 프로젝트에 JSON 데이터를 일일이 추가하는지 의문이 드실 수 있겠네요😅이번 프로젝트는 CRUD나 로그인 기능을 제외했기 때문에 firebase나 supabase  같은 실시간 DB 서버를 사용하는 것은 조금 과한 것 같아요. 그래서 저는 Next.js에서 지원하는 API Routes를 사용해 볼 겁니다. API Routes는 Next.js에서 Serverless API Endpoint를 만들 수 있게 해주는 기..

이미지 업로드 작업에서 너무 많은 시간을 써버렸네요..😅 이미지 업로드 문제를 해결하기 위해 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 컴포넌트로 분리되어 있어 불편했음위 내용을 ..

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다!흠.. 영상 정보를 어떻게 저장할까요? 직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것 같습니다.구글링을 통해 크롤링과  Youtube Data API를 알게 되었습니다. 크롤링이 더 간단한 것 같지만, 프론트엔드 개발자라면 API를 사용하는 게 당연하겠죠!사실 크롤링이 유튜브 정책 위반이라는 내용도 있고, 크롤링 관련 재판 사례들이 있는 것 같아서 선택한 것도 없진 않습니다😅  Youtube Data API 탐색기를 통해서 query에 "먹을텐데"를 검색하니 아래와 같은 결과가 나왔네요. 재생목록의 영상을 가져오려면 아래  2단계를 거쳐야해요.1️⃣ 재생목록 API에 GET 메서드..