incodevelop

새로운 사이드 프로젝트를 하는 도중 프론트 배포를 무엇으로 할지 고민에 빠졌다.우리의 서비스는 웹소켓을 이용한 투표 서비스이고, 정적파일을 저장할 일이 아직까지는 많지 않다.제목의 EC2 + NginX 와 CloudFront + S3 두 방법의 특징과 장단점, 현재 프로젝트에 무엇이 더 적합할지 알아보았다.CloudFront + S3 Amazon S3(Simple Storage Service)정적파일(HTML, CSS, JS, 이미지, 폰트 등)을 저장하는 스토리지정적파일이란?더보기서버의 가공 없이 그대로 제공할 수 있는 자원HTML, CSS파일, JS파일, 이미지, 폰트, 비디오/오디오  장점서버리스로 서버 관리가 필요 없음무제한 확장성내구성(데이터 유실 위험 거의 X)단점웹소켓 지원 X트래픽이 많아지..

보통 React 앱을 만들 때 많이 쓰는 npx create-react-app simple-deploy 이 명령어, 문득 npx란 무엇일까? 라는 의문이 들었다.npx란?-      Node Package eXecute의 약자로-      Node.js와 함께 설치되는 명령어 실행 도구-      주로 패키지 실행에 쓰임역할🔹  글로벌 설치 없이 패키지 실행그럼, 글로벌 설치란? npm install -g create-react-app처럼 -g 옵션을 사용글로벌 설치를 하면 내 컴퓨터 전체 어디서나 해당 패키지를 사용할 수 있게 됨즉, 패키지가 내 컴퓨터의 글로벌 패키지 폴더에 영구적으로 설치됨=> npx는 최신버전을 일시적으로 다운로드해서 바로 실행 후 사용 후에는 삭제함🔹 일회성 실행패키지를 설치..

🚨  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 사이드에서 서버로 데이터를 ..