본문 바로가기

전체 글

 (114)
supabase response data type supabase 테이블의 데이터를 가져오는 로직에서 구조분해할당한 data 의 타입을 지정해주었는데 Postgrest관련 오류가 발생했다. data를 꺼내지 않고 response 로 값을 받아서 콘솔에 출력해보고, 데이터를 가져올 테이블 명을 다르게 적어서 에러가 날 경우의 response 도 받아보았다. ❓ 원인구조분해할당을 해서 data 만 가져올 경우 에러에 대한 처리가 되어있지 않은데다가, 에러에 대한 타입이 선언한 Article(data 형태 타입) 타입에 없어서 오류를 보이고 있었다. ✅ 해결response로 값을 받아서 에러처리를 먼저 해준 뒤 사용할 데이터 값에 Article 타입을 지정해주었다.  response의 타입 PostgrestSingleResponseany[]> response..
TypeError: Cannot read properties of undefined (reading 'Geocoder') nextjs에서 주소를 좌표로 변환하기 위해 지오코더 서비스를 사용하려고 하였고, Geocoder를 찾을 수 없다는 오류가 발생했다.script 에 &libraries=services 는 이미 추가한 상태였고, 어디 부분이 문제인지 찾기 어려웠다.* libraries=services 장소 검색과 주소-좌표 변환을 할수있는 services 라이브러리(src url sdk 뒤에 사용할 라이브러리를 불러 올 수 있음)* strategy : 웹 성능 최적화를 도와줄 Next.js의 strategy 속성, beforeInteractive로 값을 넣어주면 어떠한 코드보다도 먼저 script를 로드하게 도와줌 (기본값은 afterInteractive로 script가 빠르게 로딩 되지만 다른 페이지에 있는 코드가 먼저..
ERD (Entity Relationship Diagram) 이전에는 ERD 를 대충 데이터 구조를 그려놓은 것? 이라고만 이해하고 완성된 것들만 접했었는데 플러스 주차 팀 프로젝트가 시작되고 나서 처음으로 제대로 찾아보고 팀원과 함께 만들며 공부하게 되었다. ERD DIAGRAM : Entity Relationship Diagram의 약자로, Entity (개체)와 Relationship (관계)를 중점적으로 표시하는 데이터베이스 구조를 한 눈에 알아보기 위해 그려놓는 다이어그램이다.  - API 명세로 어떤 기능을 구현해야겠다고 감이 잡히면 이제 유저들의 데이터를 저장할 데이터베이스 스키마를 설계해야하고 이는 ERD로 표현되어야 한다.- ERD를 사용하면 팀원들이 서비스의 데이터베이스의 구조를 쉽게 이해하고 더 효과적인 데이터베이스 설계를 할 수 있다.  ■ ..
type 과 interface 의 차이점 타입과 인터페이스는 매우 유사해서, 둘 중 하나를 자유롭게 선택하여 사용할 수 있다.인터페이스 대부분의 기능은 타입에도 동일하게 사용 가능하다. 가장 큰 차이점으론 타입은 새 property를 추가하기 위해 다시 선언 될 수 없지만, 인터페이스는 가능하다. 확장 방법의 차이 1 인터페이스의 상속Bear 인터페이스를 선언하고, extends Animal 으로 상속받아 확장한다.interface Animal { name: string}interface Bear extends Animal { honey: boolean}const bear = getBear()bear.namebear.honey  타입의 상속Animal 타입 생성 후 새 타입을 만들고 & 연산자로 교집합을 통해 타입을 확장한다.type Ani..
fetch json() 메서드 적용이 안되는 문제 🚨 문제route handler 를 컴포넌트에서 불러오는 과정에서 .json() 부분에 오류가 있다는 에러 메세지를 계속 마주했다.  // app/api/rotation/route.tsexport async function GET(request: Request) { const res = await fetch( "https://kr.api.riotgames.com/lol/platform/v3/champion-rotations", { headers: { "Content-Type": "application/json", "X-Riot-Token": process.env.RIOT_API_KEY!, }, } ); const data: Champio..
typescript-eslint/no-unused-vars 프로젝트를 배포하려고 시도하는데 eslint 오류가 표시되는 부분 때문에 빌드에서 막혀버렸다. 사용되지 않는 변수나 인수를 오류로 표시하는 eslint 플러그인이 해당 오류를 발생시키는데 .eslintrc.json 파일에서 no-unused-vars 규칙을 설정해줄 수 있다.    "no-unused-vars": "off",    "@typescript-eslint/no-unused-vars": "off" 이 설정을 "error" , "warn", "off"  등으로 바꿔서 설정해주면 된다.// .eslintrc.json{ "extends": ["next/core-web-vitals", "next/typescript"], "rules": { "no-unused-vars": "off", "@..
Route Handler & Server Action 제대로 이해하기 Route Handlers☛ 간단하게 말하자면 next 에서 백엔드 만들기!!Route Handlers 는 프론트가 쓰기 좋은 형태(ex. 배열 안 객체)로 데이터를 가공하는 것이 주 포인트* 데이터 정제를 위한 비즈니스 로직을 route handlers 에 담는 것인데 만약 정제를 안하고 담았다? → 의미없는 절차만 추가된 것 ❓프론트 개발자들이 백엔드 api 를 만들고 싶어하는 욕구가 든 이유 ?😫 백엔드에서 만들어준 데이터 형태가 맘에안들어! 구조가 한눈에 안들어와! 가독성 떨어져! 우리가 정제할수있게 기능 만들어줘!!😫 프론트 자체에서 raw 데이터를 가져와서 형태를 바꾸고, 화면단 코드에서 어떤 구조인지 한눈에 보이도록 코딩을 하고 싶어! ⚫️ Next.js : Route Handlers 만..
절대경로 import alias @/* npx create-next-app@latest 명령어를 입력 후 nextjs 프로젝트 생성 시 젤 마지막에 import alias 옵션에 대해서 선택하게된다.처음에는 아무생각없이 강의를 보고 무작정 옵션을 선택했었는데 과제를 진행하면서 절대경로를 알게되고 이 기능에 대해 제대로 이해할 수 있게 되어서 기록해보고자 한다.  ■ 상대경로현재 디렉토리를 기준으로 작성된 경로디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정없이 그대로 사용할 수 있다는 장점이 있으나현재 디렉토리를 기준으로 작성되기 때문에 ../../../형태로 입력이 되고 부피가 큰 프로젝트에서는 이 구조가 훨씬 깊어지게 되므로 가독성이 어렵고 관리하기 까다로울 수 있다는 단점이 있다.import { Button } from '../../..

티스토리툴바