행복을 담는 블로그

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등입니다. ..

끝나지 않을 것만 같은 내일배움캠프가 드디어 최종 프로젝트만을 남겨두고 있다... 최종 프로젝트에서는 디자이너분도 함께 진행을 하게 되었고, 디자이너분께서 기본적인 와이어프레임, 컬러, 디자인과 관련한 부분들에 대해서 도움을 주신다고...! 디자인에 대해서 일도 감각이 없는 개발자로서.. 진짜 쓸만한 프로젝트가 나올 수 있을 듯 하다ㅋㅋ 오늘 결정된 주제도 디자이너분께서 키워드를 던져주셨는데 완전 팀원 모두가 긍정적으로 반응하여 최종 주제로 발탁되었다!! 우리가 결정한 주제는 바로 "원데이 클래스 예약 사이트"이다! 이번 프로젝트를 통해 해보고 싶었던 기능 구현으로는 크게 두가지였다. - 지도 api를 불러와서 위치를 찍어보고, 지도 api 기능을 많이 활용해보자. - 실시간 채팅 기능을 구현해보자. 캠..

이번 프로젝트를 진행하면서 로그인 기능을 처음 맡게 되었는데, 이부분을 해결하기 위해 상태 유지를 하는 등 많은 우여곡절이 있었던 것 같다. 그 중에서도 상태유지를 하면서 로그인한 정보를 불러와 로그인한 정보가 존재하면, 로그인 상태로 유지하고, 로그인한 정보가 없을 경우 로그아웃 된 상태로 유지하는 hooks을 만들어 사용하였다. // _hooks > useLoggedIn hook import { getLoginUserInfo } from "../_components/authComponents/authInfo-api"; export const useLoggedIn = () => { const { setIsLoggedIn } = useAuthStore(); const isLoggedIn = useAuth..