incodevelop

문제네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다.전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다."지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다.암호화된 배열은 지도의 각 가로줄에서 벽 부..

🚨  TroubleShotting보이는 것과 같이 모달창이 다른 요소들보다 가장 상단에 와야하는데 가장 밑에 위치한다.문제 발생의 배경 - As Is처음에 모달창 구현법에 대해서 고민을 했다.React-dom에서 제공하는 createPortal을 사용할 것인가?vs RootLayout.tsx에서 Modal.tsx 컴포넌트를 가장 상단에 위치시킬 것인가? 두 방법의 원리를 생각해봤다.createPortal은(1) HTML에 모달이 될 컴포넌트와 모달이 렌더링 될 DOM 노드를 (ex. ) 미리 위치시킨다.(2) 모달창 열기를 실시하면, 미리 위치시킨 DOM 노드를 document.querySelector 또는 getElementById로 가져와서 그 위치에 모달창을 렌더링 한다.장점: 모달창을 렌더링하고..

🚨  TroubleShotting문제 발생의 배경 - As IsNext.js의 App-Router를 사용하며 좋아요를 구현하던 중, 낙관적 업데이트를 구현하고 싶었다.그래서 처음에는 코드를 이렇게 짰다.submitQuizLike()라는 비동기 통신 로직이 실행되기 전에 setIsLiked로 낙관적 업데이트를 해야지라는 허접하고 야무진 소망(?)과 함께..ㅋㅋㅋconst LikeQuiz = ({ quiz_id }: { quiz_id: string }) => { ... const [isLiked, setIsLiked] = useState(userData && quizLikeData && quizLikeData.users?.includes(userData.user_id)); const queryClie..

🚨  TroubleShotting문제 발생의 배경 - As Is무한스크롤 사용 이유1. 데이터를 추가적으로 불러올 때 매끄러운 UI2. 새로운 데이터를 불러올 때 이전 데이터를 refetch 하지 않고 새로운 데이터만 fetch해서 불필요한 네트워크 요청량을 줄일 수 있기 때문에이러한 이유로 useInfiniteQuery를 이용해서 무한스크롤을 구현하기로 했다.그런데, intersection-observer 없이 무한스크롤을 구현해보고 싶었다.굳이? 싶기도 하지만 코딩의 스팩은 시행착오의 결과물이라고 했으니..! 함 해보자방법은 두 가지가 있을 것 같다.1. 스크롤 내린 높이가 전체 높이를 기준으로 전체 높이의 어느정도를 넘기면 fetchNextPage() 2. 스크롤 내린 높이가 intersectio..

🚨  TroubleShotting문제 발생의 배경 - As IsSupabase에 quiz_like라는 테이블에 users라는 column을 user_id의 배열(text[])로 타입을 정해두었다.이 users라는 column을 한 번의 통신으로 update하고 싶었으나,기존 supabase의 update 메서드는 기존 걸 갈아바꾸는 메서드라서 기존의 것을 select 한 뒤 update 하는 총 두 번의 네트워크 통신이 발생했다.내가 원한 것은 한번의 통신으로 기존 것에 추가되도록 하고 싶은 와중에 구글에 찾아보니 이런 글이 있었다.https://github.com/orgs/supabase/discussions/1570 Is there any way to add values to an array col..

🚨  TroubleShotting드래그를 라이브러리 없이 mouseEvent로 구현해보고 있던 중,드래그를 반복적으로 하면 이전에 마지막으로 드래그 했던 요소에서 더 드래그 되지 않고자꾸 처음으로 돌아가는 현상이 발생했다.이런 오류가 발생했다.문제 발생의 배경 - As Is const [startMoveX, setStartMoveX] = useState(0); const [mouseDown, setMouseDown] = useState(false); const [movingX, setMovingX] = useState(0);const handleMouseDown = (clickEvent: React.MouseEvent) => { setMouseDown(true); setStartMove..

이전 포스팅에서는- Server-Action으로 업데이트 한 데이터를 어떻게 화면에 바로 반영하는지- 로딩 중 상태는 어떻게 보여줄 수 있는지에 대해서 다뤘다.이번 포스팅에서는1. 유효성 검사와 error Handling은 어떻게 하는지2. Server-Action으로 낙관적 업데이트는 어떻게 할 수 있는지, useOptimistic()의 버그(?)에 대해서 다룰 예정이다.1. Server-Action에서 유효성 검사와 ErrorHandling은 어떻게 할까?유효성 검사 - zod 라이브러리 사용왜 zod를 사용해야 하는가? 보통 Server-Action을 사용하지 않고 유효성 검사를 할 때에는 useState()를 사용해서 form 태그나 input 태그에 입력되는 값을 state에 할당하고,그 값이 ..

저번 포스팅에서는 Server-Action의 사용법에 대해서 3가지 방법을 다뤘다.이번 포스팅에서는 1. Server-Action으로 네트워크 요청한 데이터를 어떻게 바로 화면에 반영할 수 있는지2. Server-Action 중의 로딩 상태는 어떻게 처리할 수 있는지3. 유효성 검사는 어떻게 하면 좋을지4. Server-Action으로 낙관적 업데이트는 어떻게 하면 좋을지 + useOptimistic의 아직까지의 한계의 내용을 다룰 예정이다. 1. Server-Action으로 네트워크 요청한 데이터를 어떻게 바로 화면에 반영할 수 있을까? 1-1. revalidatePath()첫 번째 방법은 revalidatePath()을 사용하는 방법이다. // Server 컴포넌트"use server"const Da..

Next.js 13 -> 14 로 넘어오면서 Server-Action이라는 게 등장했다."use client"로 클라이언트 컴포넌트를 만드는 것은 많이 해봤지만 Server-Action은 맨날 구경만 하다가 이번에야 기록을 남긴다.Server-Action이란?Server-Action은 서버 단에서 실행되는 비동기 함수로서, form 제출이나 Data Mutation을 다루기 위해 Server와 Client 단 모두에서 쓰일 수 있는 Action을 뜻한다.How To Invoke Server-Action기본적인 사용법은 공식문서에 잘 나와있기에 다루지 않고 공부하면서 몰랐던 점들 위주로 설명하겠다.먼저 비교를 위해서 Server-Action을 사용하지 않고 원래대로 Client 사이드에서 서버로 데이터를 ..

🚨  TroubleShotting 저번 트러블 슈팅에 이어서 사실 한 가지 문제점이자 의문점이 하나 더 있었는데..해결이 되었으니 그냥 넘어갈까 하다가 너무 찝찝해서!저번에 났던 이 오류는 Suspense가 SSR- streaming의 대상이 되고, Suspense와 엮여있는 useSuspenseQuery의 queryFn 내에서 clientSupabase()를 사용하고 있었기 때문에pre-rendering(SSR) 시에는 clientSupabase()가 작동을 안 하기 때문이었다. 문제 발생의 배경 - As Is그런데 하나 더 의아했던 부분은 이 오류가 A -> B 페이지로 넘어갈 때는 뜨지 않았는데, B 페이지에서 새로고침을 하면 뜬다는 것이었다.그래서 서칭을 하던 도중, Next.js 공식문서에 R..