행복을 담는 블로그

🚨 문제 발생build 시 위 이미지와 같이 어떠한 에러인지 정확하게 보여주지 않고, 모든 page에서 build error가 발생하였습니다. 🛠️ 문제 원인 분석소거법으로 파일과 코드를 하나하나 비활성화 하며 문제 원인 탐색 후 찾아낸 문제의 코드들을 바탕으로 구글링을 통해 빌드 에러의 원인을 파악하였습니다. 🔥 문제 원인1. Next.js의 경우, build 시 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행합니다.하지만, 이 시점에서 Session storage 나 window 등 client 전용 객체를 참조하여 이 값을 사용하고 있던 모든 페이지에서 오류가 발생하였습니다. (* 서버에는 window나 document 같은 객체가 존재하지 않..

zustand에 isTeacher 값을 넣어서 상태를 유지 시켰는데, 새로고침 시 다시 제자리로 돌아옴…🥲 시도 1. zustand persist를 이용해서 isTeacher 값을 localStorage에 저장한다. 수강생↔강사 전환 버튼 시, isTeacher 값이 localStorage에서 바뀌는 것을 확인할 수 있다. import { create } from 'zustand'; import { persist } from 'zustand/middleware'; interface UserRoleState { isTeacher: boolean | null; setIsTeacher: (value: boolean) => void; } export const useUserRoleStore = create( p..

Trouble Shooting🔥loginUserId를 받아오는 시점과 사용 시점의 문제useQuery로 getUserInfo 함수를 통해 userInfo를 호출하는 시점과 EditProfile에서 userId를 호출하는 시점이 모두 비동기처리로 일단 호출부터 헤 -> 이후 값을 이용하자. 이렇게 흘러갔기 때문에 loginUserInfo에 설정된 초기값인 null이 먼저 사용되어 일어난 문제점이었다.원인 파악 :기존 getUserInfo 함수를 호출할 때 userId를 사용하여 유저 정보를 가져오고 있다.그러나 userId 값은 useLoginStore의 loginUserId를 통해 가져오는데, 이 값의 초기값은 null로 설정되어 있다.따라서 처음 getUserInfo 함수는 초기값 null을 사용하여..

🔥BIG ISSUE🔥 어제 하루종일 기능 구현도 잘 되고 적당히 하루 해야할 일을 잘 마무리 한 것 같아서 기분이 좋았는데 자기 전에 commit하고 push하고 자야지 했는데 문제가 발생해버렸다.. 그것은 바로... 내가 이전에 사용하던 브랜치가 pr을 하고 merge하면서 자동 삭제가 된지도 모르고 열심히 코드 작성하고 커밋했는데 push 하려고 보니 해당 브랜치가 없다고 하는거임.. 그래서 새로운 브랜치 만들어서 브랜치 이동했는데 마지막 push한 지점으로 돌아가 버렸다… 몇 시간 동안 작성한 코드 날라가고… 그래도 다행히 commit 기록에서 찾아서 코드는 찾았는데 뭔가 이상해서 일단은 아예 새 브랜치 다시 만들고 마지막 커밋 기록으로 돌아가니 코드 복구가 되긴했는데 이 방법이 맞는지 모르겠어서 ..

트러블 슈팅🔥 문제 1) image url은 잘 들어오는데 사진이 안 뜨는 상황 댓글을 작성하는 페이지에서 다른 값들은 다 comment에 잘 담겨서 들어와서 해당 data를 렌더링 해주는데 문제가 없었는데, 이미지만 잘 안 불러와지는 문제가 생겼었다. console.log를 계속 찍어서 확인도 해보고, 이미지 url도 복사해서 넣어보고 하니 사진이 잘 뜨는데 src={comment.image[0]} 에서만 사진을 불러오지 못하고 있었다. 문제 원인 파악) 다른 mainpage에서는 image로 url을 잘 받아오고 있고, 메인 화면에서도 잘 뜨고 있음… 뭐지.. 둘의 차이점이 무엇일까 비교하던 중 문제점 파악!! 내가 위에서 받아오고 있던 후기 작성하기에서는 image 자체를 ‘ ’ 바로 이 따옴표 안..

마이페이지에서 프로필의 정보를 수정하는 기능을 구현하였다. 마이페이지에서 프로필 정보를 수정하기 위해서 다음과 같은 작업이 필요하다. 1. supabase에서 user의 정보를 불러와서 프로필 수정 input 창에 넣어줘야 한다. 우선 supabase에서 정보를 불러오기 위해 api 호출을 진행해야 한다. 이번 프로젝트에서 api 호출을 상당히 많이 진행하기 때문에, 근본적인 의문이 생겼다. 🧐 바로 반복되는 api 호출, 과연 최적화하는 방법은 무엇인가??? (전체 데이터를 불러와서 각자 걸러서 사용 vs api를 따로 작성하여 각자 필요한 데이터만 가져오기) 1) api 도 각자 필요한 값이 다 다른데, select(”*”) : 모든데이터 불러오기를 해서 한 번에 여러곳에서 동일한 호출함수 사용하기 ..

data 불러오기 pending 상태 후 → data 값이 들어온다. data가 undefined는 아님 data가 pending 상태에서 시간 경과 후 data가 들어옴. useState로 상태 관리를 하면, 처음 렌더링이 될 때 들어오는 값을 받아서 상태가 바뀌기 때문에, 새로고침 후 바로 input 창으로 정보가 안 들어옴. api 호출이 너무 많이 일어나거나, 중복으로 data를 불러오고 있으면 발생할 수 있는 문제이다. 🧐 해결 방법 데이터 캐싱 : 데이터를 불필요하게 매번 호출하지 말고, 한 번 불러온 데이터를 캐싱하여 재사용하자. 데이터 로딩 상태 관리 : 데이터가 로딩 중일 때 적절한 로딩 상태를 관리하여 현재 데이터가 불러오고 있음을 알려주자 모든 컴포넌트에서 모든 유저 정보를 사용할 필..

상태관리를 하는 가장 큰 이유는 애플리케이션의 복잡성을 관리하고 유지보수를 용이하게 하기 위함입니다. 전역으로 상태를 관리함으로써 여러 컴포넌트에서 공통적으로 사용되는 상태 및 데이터를 공유할 수 있으며, 또한 컴포넌트를 분리함으로써 컴포넌트의 재사용성을 높이고 유지보수를 보다 쉽게 만들 수 있습니다. 간단한 로직에서는 주로 useState를 통해 상위 컴포넌트에서 하위 컴포넌트로 props로 상태를 전달해주는 방식을 사용하나, 프로젝트의 규모가 커질수록 전역 상태 관리가 필요하였고, 이를 위해 redux나 zustand와 같은 전역상태 라이브러리를 사용합니다. 최근 1년간 다운로드 수를 확인 할 수 있는 "npm trend"를 확인해보아도 전역상태 관리 라이브러리 중에서 redux가 단연 1등입니다. ..