TIL

☁️환경☁️Next.js(page router)typeScriptreact-query ❓SSRServer Side Rendring 의 약자로 ssr이라고 한다.  실행될 때 가장먼저 ssr컴포넌트가 실행되고, 이후에 실행되는게 _app.tsx 부분이다.  ssr 컴포넌트에서는 console.log("getServerSideProps")_app.tsx 에서는 console.log("_app")으로 확인해보면 아래와 같이 순서가 찍혀서 나온다. 위 순서를 기억하고 아래 내용을 읽으면 조금 더 이해가 쉽다. 1. query-key 만들어주기import { getCards } from '@/remote/card'import { useQuery } from 'react-query'export default fun..

☁️환경☁️- Yarn- Next.js (13version)- TypeScript 1. 설치yarn add @emotion/react @emotion/styled  2. bael 설정하기 emotion.jsx를 사용하기 위해서는 babel 설정이 필요하다.- 가장 최상위에서 `.babelrc` 파일 생성하기- 파일에 아래 코드 작성해 주기{ "presets": [ [ //기본적으로 next가 가지고 있는 babel "next/babel", { //대신 emotion.jsx 사용 설정 "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" ..

✅필요한 파일 다운받기 1. 아래 링크에 들어가 아래 순서대로 진행하면 된다.https://www.geoservice.co.kr/ GEOSERVICE-WEB www.geoservice.co.kr위 링크 회원가입 시 초기 50,000코인을 지급해준다. 다운로드 받을 때마다 10,000코인 씩 차감 되니 이점을 유의하여 필요한 파일을 다운받으면 된다.  2. nav바에 아카이브 선택 3. 필요한 파일 다운받기- 최신구역행정도 선택- 가장 최신 날짜 선택(글을 보고 계신 날짜 기준으로 최신 날짜 선택하시면 됩니다.)- 필요한 파일을 다운받으면 된다.   ✅json 파일로 변환하기 1. 마찬가지로 아래 링크에 들어가 순서대로 진행하면 된다.https://mapshaper.org/ mapshaperDrop, pa..

이제 실제로 migration을 만들기 전에 Prisma에 대해 조금은 알아보고 시작해보자. ❓PrismaNode.js 기반의 ORM(Object-Relational-Mapping) 도구데이터베스와 상호작용을 단순화 하고 개발 생산성을 높이는 도구SQL 쿼리를 직접 작성하지 않고 javaScript 코드로 쿼리를 작성할 수 있게 해주는 도구타입 세이프한 쿼리 작성을 통해 런타임 에러를 방지타 ORM과는 달리, 자체적인 스키마 문법을 제공해 직접 DB마이그레이션, 클라이언트 코드 생성 작업 가능 개념` Prisma Client `Node.js & TypeScript용 쿼리 작성 클라이언트 ` Prisma Migrate `마이그레이션 시스템 ` Prisma Studio `데이터베이스의 데이터를 보고 편집하는..

환경next.jstypeScriptyarnvisual studio code  1. project 만들기Supabase처음 메인에 진입시 메인에 Start Your project 를 클릭하면 아래와 같은 화면이 나온다.여기서 New project를 클릭 후 처음 회원가입한 경우 아래의 단계를 순서대로 이미 계정이 있는 경우는 두번째 이미지부터 보면 된다.  첫번째 단계: organization 만들기Name, Type of organization, pricing Plan을 모두 작성 및 선택 후 Create organization 클릭 두번째 단계: project 만들기 - 첫번째 단계에서 작성했던 Name이 Organization에 보여짐. - Database Password는 Generate a pas..

교육을 들을 수 있는 기회가 생겼다..!!현재 진행중인 프로젝트에서 관리하고 있는 방법과 배우고 나서 어떻게 관리하면 좋을지 비교하고 수정하기 위해 작성해보겠다😆 진행중인 프로젝트에서 관리하고 있는 방법을 작성한 블로그 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..