개발자 박가나

'한잔해' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 파악로그인 성공 시 유저 정보를 zustand에 저장하고 이후 유저 정보가 필요할 때마다 매번 API를 호출하는 것이 아니라 zustand에 저장된 유저 정보를 가져와서 사용하도록 구현하였는데, 로그인을 성공했음에도 불구하고 유저 정보를 제대로 받아오지 못하고 새로고침을 해야 비로소 유저 정보를 받아오는 문제가 발생하였다.  시행착오'use client';import { createContext, useContext, useEffect, useState } from 'react';import { useAuthStore } from '@/store/authStore';import { SignInDataType } from '@/types/A..

'한잔해' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생MVP 기능 개발을 마무리하고 중간 발표를 위해서 vercel에 배포를 하였는데, 로컬에서는 문제없이 동작하던 로그인 기능이 배포 링크에서는 너무 오래 걸리는 현상이 발생하였다.  시행착오 1가장 먼저 region 문제가 아닐까 싶어서 확인해봤는데 vercel과 supabase 모두 서울로 잘 설정되어 있었다.  시행착오 2비슷한 문제를 겪고 있는 stack overflow를 발견하였고, server action을 route handler로 변경해보기로 하였다. https://stackoverflow.com/questions/78078248/dalle3-request-in-next-js-14-server-actions-leading-t..

'냠냠로그' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생공공데이터 API를 이용하기로 하였다. https://www.data.go.kr/data/15100070/standard.do 전국통합식품영양성분정보(음식)표준데이터국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr 문제없이 데이터가 받아와지는 것을 확인한 후, 검색 기능을 구현하고자 하였다. 하지만 '비빔밥'을 검색하면 '고추장비빔밥', '새싹비빔밥' 등 '비빔밥'이 포함된 데이터들도 같이 받아와야 하는데, 식품명이 정확히 '비빔밥'인 데이터만 받아오는 문제가 발생하..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다. 이번 트러블슈팅의 경우, 오류 해결이 아니라 잘못 알고 있던 개념을 바로잡기까지의 과정이다.  잘못 이해하고 있던 내용server action 방식을 사용하기 위해서 컴포넌트에 'use server'를 선언해 주었다.'use server';export default async function Champions() { const data: ChampionsType = await fetchChampions(60 * 60 * 24); return ( ... );} 그러다 문득 Next.js의 경우 기본 설정이 서버 컴포넌트이기 때문에 클라이언트 컴포넌트가 되어야 하는 경우에만 'use client'를 선언해주면 된다..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다. 이번 트러블슈팅의 경우, 오류 해결이 아니라 여러 방법 중에서 가장 효율적인 방법을 선택하기까지의 과정이다.  로테이션 데이터 불러오기route handler 방식으로 rotation 데이터를 불러오는 로직을 구현하였다.export async function GET(): Promise { const res = await fetch('https://kr.api.riotgames.com/lol/platform/v3/champion-rotations', { headers: { 'X-Riot-Token': ${process.env.RIOT_API_KEY} } }); c..

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생champions 데이터를 받아와서 화면에 보여주는 기능을 구현하고 있었다. 각 champion의 이미지를 보여주기 위해 Image 태그를 사용하는 과정에서 아래와 같은 에러가 발생했다.  시행착오 1해석을 해보니 'ddragon.leagueoflegends.com'이라는 hostname이 next.config.js 파일의 images에 정의되어 있지 않아서 발생한 오류인 것으로 보였기 때문에 next.config.js 파일에 images를 정의해주었다.const nextConfig = { images: { domains: ['ddragon.leagueoflegends.com'] }};e..

'마운틴듀' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  메인 페이지의 지도에서 특정 장소 클릭 시 상세 페이지로 이동다음과 같은 로직으로 구현하고자 하였다.메인 페이지에서 id 값을 상세 페이지로 넘겨주기id 값을 이용해서 클라이밍장의 상세 정보를 받아와서 보여주기하지만 카카오 지도 API에서 id 값을 이용해서 장소의 상세 정보를 받아오는 API를 지원해주지 않았기 때문에 다음과 같은 로직으로 변경하였다.메인 페이지에서 id와 place_name 값을 상세 페이지로 넘겨주기place_name 값으로 장소 검색하기검색 결과 중에서 넘겨받은 id 값과 동일한 id 값을 가지는 장소의 상세 정보를 보여주기  상세 페이지로 이동상세 페이지에 접속하면 다음과 같은 로직이 수행되도록 구현하였다.places..

'야구 캘린더' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  경기 일정 등록하기 경기 일정을 등록할 때, 홈/원정 여부와 상대 팀을 선택한다.홈 경기일 때, team_home은 내가 응원하는 팀 / team_away는 상대 팀 / stadium은 내가 응원하는 팀의 구장원정 경기일 때, team_home은 상대 팀 / team_away는 내가 응원하는 팀 / stadium은 상대 팀의 구장즉, 상대 팀을 선택하는 순간 여러 개의 값을 변경해 주어야 한다.  시행착오 1단순하게 useForm에서 선언한 handleSelect를 여러 번 호출하는 방식으로 구현했는데 값이 제대로 변경되지 않았다.export function useForm(initialValues) { const [values, se..