TIL

취준생이 오래되면서 왜 나를 뽑지 않는가...!!라고 생각하면서 프로젝트 준비와 함께 이력서와 깃허브를 프론트앤드답게 수정해보기로 했다. 현재 초라한 나의 프로필.. 이력서에 기재된 나의 git profile에 들어왔을때 나의 스킬이 무엇인지 한눈에 알려줄 수 있도록 작성해보자 1. Repository 들어가기 2.  New Repository  3. Create a new repository  4. README 작성하기  원하는대로 리드미를 작성해주면 내 프로필에 들어갔을때 작성한 리드미가 보여진다! - 움직이는 타이틀https://readme-typing-svg.demolab.com/demo/

교육을 들을 수 있는 기회가 생겼다..!!현재 진행중인 프로젝트에서 관리하고 있는 방법과 배우고 나서 어떻게 관리하면 좋을지 비교하고 수정하기 위해 작성해보겠다😆 진행중인 프로젝트에서 관리하고 있는 방법을 작성한 블로그 1. https://anywhereim.tistory.com/95 axiosInstance 작성해보기(accessToken, refreshToken)이전 내용에 이어서 axiosInstance코딩한 내용을 작성해보고자 한다. fetch보다 사용성도 좋고 error 핸들링이 좋은 axios 알랍유야.. 리펙토링 되었습니다. 리펙토링은 간단한 코드분리 정도이므로 아anywhereim.tistory.com 2. https://anywhereim.tistory.com/111 토큰 만료처리하기프..

📖 AxiosInstance 리펙토링이 필요한 이유1. ` basicAxiosInstance `기본 axiosInstance 2. ` axiosInstance `accessToken을 헤더에 담고, accessToken이 만료된 경우 refreshToken을 이용해 accessToken 재발급요청을 해주는 axiosInstance  2개의 instance를 만들어 사용하고 있는데 accessToken 재발급 요청해준는 부분만 따로 분리하여 사용해야하는 경우가 생겼다. 코드를 제대로 분리하기로 마음먹었다.  사실 분리만 했기때문에 크게달라진것은 없으나, 리펙토링전 코드와 리펙토링 후 작성하게된 TIL이 있어서 작성이 필요했다..!! 그 경우를 알고 싶은 분은 아래 블로그 경로를 참고해주세요🤣https:..

프로젝트를 진행하면서 부족한 부분들이 생긴다.그래서 프로젝트를 하면서 중간중간 리펙토링도 많고 추가 해야하는 기능도 많아 두서없는 TIL을 쓰게 된다.. ㅎ쨋든. 📖AxiosInstance 이외에 토큰 만료처리가 필요한 이유.API를 요청하는 특정 페이지로 이동하기 전에 refreshToken이 만료되었는지 확인이 필요했다.   ❓refreshToken이 만료되었는지 확인하는 이유.백엔드로부터 ` accessToken `을 받아 localstorage에 저장해 사용하고토큰을 디코딩하여 추가로 localstorege에 user로 저장하여 로그인 상태유지, 접근 제어 등에 사용하고 있다.⬇️localstorage에 저장한 이유더보기더보기더보기cookie의 특성상 api 요청을 보낼 때마다 헤더에 담겨 함께..

react-hook-form 사용하면서 배운 것들 정리하기. 1. type을 number로 받아 value에 저장해야할때금액을 받는 폼을 만들어 등록 시, 수정 시에 사용하려고 했다. import { ReHomeFormType } from "@/types/register/register";import React from "react";import { useFormContext } from "react-hook-form";interface AdoptionFeeFormChildrenType { text?: string; defaultValue?: number;}export default function AdoptionFeeForm({ text, defaultValue,}: AdoptionFeeForm..

무한스크롤을 아주 쉽게 라이브러리 2개로 구현할 수 있다..!! 사용된 라이브러리1. useInfiniteQuery//설치명령어yarn add @tanstack/react-query​2. react-intersection-observer//설치명령어yarn add @react-intersection-observer/hooks​ react-intersection-observer를 사용한 이유 useInfiniteQuery로만 작성해보려고 하였으나초보자 이지만 코드 분리하는거 좋아하는 편.. axios코드, 훅, 전부 분리해 사용하고 싶은 오기 발동.export const useReadReHomeHomeList = (params: ScrollParamsType) => { return useInfiniteQ..

* 가장 하단에 참고 블로그가 있습니다. 참고한 블로그를 보고 제가 이해한 대로 재작성 하였습니다. 제가 이해한대로 작성하였으니 잘 모르시겠다면 하단에 참고 블로그를 확인해주세요. 간단 명료하게 잘 작성해주셨습니다. 전역상태 관리로 zustand를 사용하고 있어 zustand를 이용해 컨펌창을 만들어보려고 한다. confirm() 을 호출하면 기대하는 동작1. confirm 다이얼로그 띄우기2. 다이얼로그가 닫히면 결과 반환. confirm 다이얼로그를 띄우기 위해서는 modal과 같이 boolean값으로 상태를 변경시키고,상호작용이 끝나는 시점에 결과 값을 받기 위해서는 ` Promise `(대기, 완료, 실패) 되었을때 그 결과를 ` resolve `를 통해 반환받으면 된다. confirm창의 동작을..

absolute / relative 사용 시 수직 가운데 위치시키기 absolute right-0 top-1/2 transform -translate-y-1/2

사용자 미리보기 이미지를 띄울때 백앤드에게서 미리보기 url을 받아서 보여주는 로직이 있다. 사용자가 미리보기 상태에서 이미지를 삭제하면 서버에 삭제 요청을 하게 되는데 이때 404가 났다.  내가 확인 한 부분 1. 관리자창 요청url 확인2. 요청 url 값 스웨거에서 테스트 해보기3. url 요청 시 받은 값과 삭제 요청 시 url 확인  위 내용을 전부 확인했을 때 삭제 요청 url은 문제가 없었다. 그런데 관리자 창 네트워크에서 페이로드를 살펴봤을때 쿼리스트링으로 보냈던 url이 조금 이상했다. 그래서 axios 에서 받은 url을 추가로 확인해 보았다.  이상한 url을 받고 있었다. 이는 인코딩이 되지 않아 발생되는 문제였다.   위 처럼 encodeURIComponent(url) 을 이용하..

Next.js 에서 Image tag를 사용하면서 너무 많은 경고를 받아 나혼자 메모겸 작성.. ㅎ fill을 사용하는 경우   사용하지 않는 경우