TIL

이제 실제로 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..

환경next.jstypeScriptyarn❓ESLint: 자바스크립트 코드 문법 오류 및 코드 스타일 가이드를 제공하기 위한 정적 코드 분석 틀이다. 자바스크립트와 JSX코드를 위한 오픈소스 린팅 유틸리티로,프로그램을 작성할 때 발생할 수 있는 오류, 버그, 스타일 오류 그리고 일관성 없는 코드 패턴을 식별해준다.코드를 분석해 잠지적인 문제를 지적해 주기 때문에 효율적이고 일관성있는 깨끗한 코드를 작성할 수 있도록 도와준다. 커스텀도 가능하다. 팀단위로 프로젝트를 진행하래 코딩 규약에 맞춰 검사 규칙을 조정할 수 있다. 예를 들면 특정 코딩 스타일을 강제하거나, 사용하지 않는 변수, 미사용 표현식 등을 경고하도록 설정할 수 있다.플러그 인을 통해 기능을 확장할 수도 있기 때문에 React 같은 기술스택에..

취준생이 오래되면서 왜 나를 뽑지 않는가...!!라고 생각하면서 프로젝트 준비와 함께 이력서와 깃허브를 프론트앤드답게 수정해보기로 했다. 현재 초라한 나의 프로필.. 이력서에 기재된 나의 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..