[React] 플리커링 현상 해결하기

개발을 거의 다 마친 상황..에서 마주한 한가지 문제거슬리는 부분을 찾아냈다. 바로 플리커링(flickering) 현상이다. ⭐️ 왜 일어나고 있는 것인가?원인은 이렇다.일단 이 프로젝트는 suspense로 부모 컴포넌트가 싸여있고 빈 div를 fallback으로 두고 있다.{ path: PATH.PLANNING, element: ( }> ), },열리는 모달에는 댓글들을 불러오는 api가 모달이 열려질때 불려진다. 이 댓글을 불러오는 api가 완료되길 기다리는 동안 Suspense에서 설정해놓은 Callback인 빈 div 화면이 전체에 걸쳐서 플리커링 현상을 일으키는 것이다. 👍 해결책1. Suspense를 CommentField에 씌워준다.// ScheduleM..

→2024.06.24

aws

nextjs 프로젝트를 정적배포를 해보다 생긴일

Nextjs 개발이 거의 다 마무리가 되가는 상황에 배포를 해보기로 했다.s3와 cloudfront를 사용해서 배포를 해보기로 했다.하지만 잘못된 결정이었다.. 정적 웹 호스팅이란?정적 웹 호스팅은 HTML, JavaScript, 이미지, 동영상 및 기타 파일을 저장된 그대로 웹 사이트 방문자에게 단순히 제공할 뿐이며 애플리케이션 코드를 포함하지 않는다.정적 웹 호스팅은 ssr 처럼 전체 프로세스가 각 사용자 요청에 수행되는 것이 아닌 빌드 시간에 수행된다. 따라서 속도가 더 빠르다. 또한 seo 검색엔진 최적화에 이점이 있고 cdn에서 페이지를 수신하면 되기때문에 리소스와 비용을 절감할 수 있다.따라서 마케팅 웹사이트 , 블로그 및 문서, 포트폴리오 웹사이트 등에서 많이 사용한다. Nextjs의 정적..

→2024.05.18

자유글

[NPM 배포] SpeechBubble 배포하기 (1)

프로젝트를 할때마다 만나는 ui가 있습니다. 바로 말풍선입니다. 보기에는 상당히 구현하기 매우 쉬워보입니다. 하지만 문제는 저 위에 뾰족 나와있는 저 삼각형이 문제입니다. 저 삼각형을 구현하려면 일단 위치를 일일이 맞춰주어야 하죠. 항상 구현할 때 너무너무 귀찮았습니다. 따라서 이참에 한번 말풍선 라이브러리를 만들어보자! 라는 생각이 들었고 그 배포기를 블로그에 적어보려합니다.1. 프로젝트 설정이번 프로젝트는 번들링 사이즈 개선을 위해서 pnpm과 vite를 사용해서 배포하려고 합니다.일단 vite 프로젝트를 만들어줍니다.React 와 TypeScript를 사용하겠습니다. 2. 컴포넌트 생성필요 없는 파일은 다 지우고 말풍선에 필요한 Pointer 컴포넌트들을 만들었습니다. (Public도 함께 삭제해줍..

→2024.05.15

Frontend

짧게 알아보는 React 19 버전

React를 주로 사용하는 개발자로서 React 19 버전에서 새로 추가되는 내용과 수정되는 내용은 뭔지 간단히 알아보는 시간을 가지겠습니다. ⭐️ Compiler(컴파일러)첫번째 중요한 사실은 React에 Compiler를 추가한다는 사실입니다. 다른 프레임워크인 Astro나 Svelte는 컴파일 단계가 있어 많은 일들을 개발자 대신 해주지만 React는 컴파일 하는 스텝 없이 오직 브라우저에서 실행되어 추가적인 성능을 위해서 더 많은 코드를 작성해야 했죠.예를 들어서 useMemo, memo, useCallback 같은 hook들 말이죠하지만 React 19 에서는 compiler가 추가되어 자동적으로 memorization을 제공합니다. 따라서 19버전에서는 이러한 성가신 hook들을 더이상 사용하..

→2024.05.10

자유글

[docker] vite 배포하면서 겪었던 시행착오

docker 란?도커는 컨테이너 기반 가상화 플랫폼으로 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행하는 기술입니다.도커 컨테이너는 가볍고 빠르며 확장성이 좋아서 개발 및 배포 프로세스를 간소화하는 데 사용된다고 합니다.따라서..docker를 사용해서 ec2에 배포하는 것이 목표인데요ec2에 배포하기 전 연습을 위해 로컬에 docker를 사용해서 service 프로젝트 배포했어요 현재 모노레포 디렉토리는 위와 같은 구조로 되어 있습니다.현재 service 는 vite를 사용해서 빌드하고 있고 yarn berry를 사용해 개발하고 있습니다.지금부터 만났던 에러들과 배포하는데 힘들었던 내용을 정리하고자 합니다.본 글은 로컬 배포일때의 겪었던 문제들을 적은 것임을 알립니다. 🔥 첫번째..

→2024.04.16

자유글

[#회고] 지금까지의 회고록

1. 회고록 대학교 수업을 모두 마치고 이제 개발 공부를 이어간지 언 반년 이상이 지났습니다. 그 때보단 아는 것도 많아지고 그랬습니다만은 아직도 느껴지는 부족함과 나약함. 지금 내가 이렇게 하는게 맞는 걸까 라는 생각을 수도 없이 합니다. 처음 혼자 개발할 때는 정말 재밌어서 내가 만들고 싶은 개인 프로젝트도 진행하고 전에 있던 동아리에서 해커톤도 진행했어요. 하지만 갑자기 이게 잘한게 맞는지 되돌아보면 모르겠습니다. 더 넓은 세상으로 예를 들어 다른 개발 동아리나 부트캠프라도 했어야 했나 라는 생각이 듭니다. 2. 잘했던 점 개인 프로젝트 혼자서 개인 프로젝트를 했던게 그래도 웹 구조가 어떻게 돌아가는지 알아 볼 수 있는 좋은 계기가 된것 같아요. 벡엔드와 디자인 모두 혼자 한번 해보았어요. 벡엔드는..

→2024.04.04

전체 글