Pay it forward

빠르게 성장하는 스타트업에게 빠르게 만들고, 배포하고, 유저의 반응을 체크하고, 빠르게 개선하는 게 중요하다는 것은 당연하다.그 순환 사이에 시행착오를 겪으면서 이런 비즈니스를 하는 사람들에게는 이런 기능이 중요하구나, 아 이런 부분은 옵션으로 제공하면 다양한 사용자가 만족할 수 있겠구나, 이런 부분은 추상화가 되어 모듈화 할 수 있겠구나, 같은 깨달음이 생긴다.스타트업의 개발자로서 성장하는 회사를 만들기 위해 중요한 것은 바로 이 시행착오를 통해 얻은 깨달음을 내 머리에만 넣어두는게 아니라, 코드에 적절히 녹여놔야 한다는 것이다.입사 후 첫 프로젝트를 하며 물류업계, 특히 의약품 물류업계에 대한 지식이 생겼다. 그리고 TMS, OMS, WMS를 만들면서 이것들을 어느 부분에서 모듈화 해야 하는지 시행착..

Nextjs 프로젝트를 배포한 뒤 유독 시크릿탭에서 , 그것도 처음에만!! 위와 같은 화면이 간헐적으로!! 목격됐다.제일 어려운 잘되다가 또 안되다가 이유없이 잘되다가 또 이유 없이 안 되는... 그런 이슈였다. 콘솔창에는 ChunkLoadError라고 찍힌다. 처음 ChunkLoadError라는게 보여요~라는 제보를 받았을 때는아~ 그거 새 배포해서 그래요 새로고침 하면 될 거예요. 하고 대답했지만 시크릿 탭을 닫았다가 새로 켜고 접속해도 똑같은 에러가 다시 발생한다는 믿을 수 없는 추가제보가 들어왔다.게다가 새로고침을 여러 번 하면 괜찮아진다고 한다. 정말 이상했다.전 회사에서는 브라우저 장기접속자(?)들을 위해 ChunkLoadError를 미들웨어에서 잡은 후에 새로고침 해주는 방식으로 해결했었다...

Nextjs의 app router로 진행했던 개인 프로젝트를 다시 배포했다.이번 프로젝트를 하면서 가장 신경을 썼던 부분은 로딩, 랜더링 성능의 최적화이다.클라이언트 컴포넌트를 어디에 둬야 트리의 가장 하단에서 인터렉션에 따른 리랜더링을 최소화할 수 있을까?어떻게 유저에게 빨리 보여주고 덜 지루하게 할 수 있을까?이러한 고민들의 한 방법으로 컴포넌트 스트리밍과 Blur 이미지 제공하는 기능을 추가했다.하지만 로컬에서와 다르게 배포환경에서 제대로 동작하지 않는 부분에서 트러블이 있었고,이 글에서 그 트러블과 해결을 정리한다. MainPosts컴포넌트에 데이터를 fetch 요청하는 로직이 들어있다.loading.tsx파일을 준비하거나(로딩화면) 스트리밍 fallback ui를 준비하지 않으면 저 mainpo..

게시물에 좋아요 버튼을 Server Action으로 구현했습니다 서버컴포넌트 서버액션은 많은 장점이 있지만 유저 인터렉션이 필요한 부분에서는 클라이언트 컴포넌트를 사용해야 합니다. 위 코드는 서버에서 함수를 실행하고 Js 번들에 포함되지 않고 서버에서 한 번만 랜더링 되겠지만 postLikeSA(서버액션)이 실행되고 성공하면 revalidateTag()로 getIsLiked() fetch 함수를 초기화해서 다시 상태를 업데이트합니다. 아무리 빨라도 당연히 딜레이가 생기게 됩니다. 위 이미지는 클라이언트와 서버가 api엔드포인트로 직접 상태를 업데이트하는 과정을 나타낸 그림이지만 왼쪽에 모니터 이미지를 Nextjs 서버로 생각하시면 되겠습니다. 백엔드 서버에서 200 응답을 받으면 getIsLiked()를..

Nextjs로 작업하면서 대부분을 서버에서 작업하고 있습니다. 이번에는 내 정보 수정 페이지를 만들면서 put요청을 server action으로 구현하고 있습니다. client component에서 state로 데이터를 관리하고 저장버튼에 이벤트를 걸어서 put요청을 하면 아주 쉽겠지만 server action으로 함수를 만들면서도 유저와의 인터렉션으로 이미지 미리보기 기능이 있어서 이를 구현한 기록입니다. input만 있는 form에서는 server action으로 formdata를 만들고 보내는 것이 아주 단순했습니다. 'use client'; function LoginForm() { const initialState = { message: '', errors: {} }; const [state, d..

1. 폰트 최적화가 왜 필요할까? Nextjs는 왜 폰트 최적화를 만들었을까요? 폰트를 그냥 태그로 폰트 다운로드해서 css에 적용하면 되는 것으로 알고 있었지만 폰트를 최적화한다는 것은 ux를 개선하고 seo점수를 개선하는 효과가 있습니다. 폰트와 ux, seo가 어떤 관련이 있는 것일까요? 혹시 이런경험 없으셨나요? 커스텀 폰트가 적용되면서 Text가 차지하는 영역이 바뀌면서 다른 엘리먼트의 위치까지 변경되는 경험이요. 혹은 데이터 패치가 완료되고 dom에 다른 요소가 추가되면서 다른 엘리먼트의 위치가 변경되는 경우도 있습니다. 이렇게 다른 요소의 변경에 의한 의도치 않은 dom의 위치가 변경되는 것을 Cumulative Layout Shift(이하 cls)라고 합니다. (https://web.dev..