dev-hpk 님의 블로그

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

카드의 태그 관련 이슈가 발생했습니다.카드 생성 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[..

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

저번 포스팅에서 retryFetch라는 메서드를 만들어서 요청을 보내고, response의 status를 확인해 토큰을 재발급했다.const retryFetch = async ( url: string, options: RequestInit): Promise => { const response = await fetch(url, options); if (response.status === 401) { // status === 401 : Unauthorized 토큰 갱신 const refreshResponse = await fetch( `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/refresh-token`, { method: "..

서버에 로그인 후 response를 확인해 보니 accessToken과 refreshToken이 반환되었다 refreshToken은 뭔지 모르겠으니 일단 패스하고, accessToken으로 데이터 요청하자.const postArticleComment = async ({ id, content,}: PostCommentInterface): Promise => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_SERVER_URL}/articles/${id}/comments`, { method: "POST", headers: { "Content-Type": "applicatio..

JWT 토큰을 사용할 때 Access Token만 사용하는 경우 많은 문제가 발생합니다. 이를 해결하기 위해 Refresh Token을 사용하는데요, Refresh Token은 보안과 관련된 핵심 개념 중 하나로, 특히 인증이 필요한 웹 애플리케이션에서 자주 사용됩니다. 목차 1. JWT 토큰이란? 2. Access 토큰만 사용하는 경우 문제점 3. Refresh Token이란? 4. Refresh Token 탈취 위험추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. JWT 토큰이란?JWT(JSON Web Token)는 클라이언트와 서버 간 인증 및 정보 교환을 위한 토큰 기반 인증 방식입니다. JWT는 간단하고 효율적이며, 다양한 애플리케이션에서 널리 사용됩니다.   JWT.IOJSON W..

1. 애플리케이션 추가 및 키 발급 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 주소에서 애플리케이션을 등록하고 로컬 환경을 도메인으로 추가했다.  키도 발급 완료했으니 공식 문서를 보면서, 화면에 지도를 띄워보겠습니다. 2. 지도를 그리는 JavaScript API 불러오기index.html에 직접    서버를 실행시켜 확인해 보니, 내 api key가 개발자 도구에 그대로 노출되고 있었다. 3. API Key env로 관리하기API Key를 Github이나 서버에서 개발자 도구로 확인하지 못하게 하기 위해 .env에서 환경변수로 관리하기로 ..

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..

IntersectionObserver API는 스크롤이나 뷰포트 변화를 감지해 특정 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 실행하게 해주는 API입니다. 이를 통해 이미지 지연 로딩, 무한 스크롤, 애니메이션 활성화 등을 효율적으로 처리할 수 있습니다. 목차 1. IntersectionObserver 기본 사용법 2. IntersectionObserver 옵션 3. 주의할 점 4. IntersectionObserver 적용 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. IntersectionObserver 기본 사용법IntersectionObserver는 크게 두 단계로 구성됩니다. 첫 번째로 IntersectionObserver 객체를 생성하고, 두 번째로 해당 객체로 ..

Axios를 사용한 API 요청에서 발생할 수 있는 다양한 오류를 처리하는 방법은 매우 중요합니다. 서버나 네트워크 문제로 인해 API 요청이 실패할 수 있으며, 이러한 오류를 적절히 처리하면 사용자 경험을 개선하고 문제를 디버깅하는 데 도움이 됩니다. 이번 글에서는 Axios의 오류 처리 방식과 일반적인 방법을 소개하겠습니다.   Axios의 오류 처리목차 1. 기본 오류 처리 2. 오류 객체 3. HTTP 상태 코드에 따른 오류 처리 4. 타임아웃 처리마무리추천글 기본 오류 처리 Axios는 Promise 기반이기 때문에, 오류는 주로 .catch() 블록에서 처리됩니다. 요청이 실패하면 .catch() 블록이 실행되어 오류에 대한 정보를 처리할 수 있습니다.axios.get('https://json..