본문 바로가기

TIL

 (100)
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 '../../..
타입지정 오류, 필요한 타입만 사용 롤 챔피언의 세부정보를 가져오는 server action 함수를 작성한 후 페이지에서 불러와 사용하는데 타입지정 중에 오류가 발생했다. 발생한오류이전에는 불러올 데이터 중 필요없는 부분까지 타입을 연습 겸 전부 적어줬었는데 해당 타입을 지정해주었을 때 계속 오류가 떴다.  이전에 선언한 타입타입선언을 조금 잘못적어준 것 같은데 fetch한 data와 계속 여러번 비교하면서 확인했는데도 어느 부분이 잘못되었는지 못찾았고 계속 헤맸다.export type ChampionDetail = { [key: string]: { id: string; key: string; name: string; title: string; image: { full: string; spri..
`next/image` Un-configured Host 개인과제 진행 중 롤 챔피언의 이미지를 가져오기위해서 아래와 같이 코드를 작성했으나 오류가 발생했다.오류 메세지를 읽어보니 src의 호스트 주소 ddragon.leagueoflegends.com 가 next.config.js 파일에 설정되어 있지 않아서 발생한 문제인 것 같았다. 오류 메세지에 조회되는 nextjs docs에 들어가보니 에러가 발생하는 이유와 고칠 수 있는 방법을 확인할 수 있었다.https://nextjs.org/docs/messages/next-image-unconfigured-host#possible-ways-to-fix-itWhy This Error OccurredOne of your pages that leverages the next/image component, passed ..
타입선언 - 인덱스 시그니처 , undefined 에러처리 🚨 문제 1불러올 데이터의 타입 선언 작성 중 반복되는 부분에서 키(이름) 만 바뀌는 경우 일때 어떻게 작성을 해야하는지 고민이 되었다."Atrox" 는 롤 챔피언 이름으로 data 객체 안에 여러 챔피언들이 들어있고 key 인 "Atrox" 부분이 바뀌면서 다른챔피언 정보들이 들어있다.{ "type": "champion", "format": "standAloneComplex", "version": "14.19.1", "data": { "Aatrox": { "version": "14.19.1", "id": "Aatrox", "key": "266", "name": "Aatrox", "title": "the Darkin Blade", "bl..
Router Handler & Server Action ■ Router Handler웹 요청 및 응답 API 를 사용해 특정 경로에 대한 커스텀 요청 핸들러를 만들 수 있게 함* 응답API (REST API : GET / POST / PUT / PATCH / DELETE)route.tsapp directory 내부에 route.ts 파일을 만나면 기본적으로 Next.js는 router handlers로 인식함! ☀︎  Pathname 으로 요청을 했을 때,  - html 반환 시 → app router - json(계산된 데이터) 반환 시 → Route handler * url path, pathname : 도메인(www.sample-web.com) 이후 따라오는 URL 부분  ■ Server Action서버에서 실행되는 비동기 함수, 서버 컴포넌트와 클라이..

티스토리툴바