뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

- 해당 글에 나오는 모든 Next.js에 대한 내용은 App Router 기준이다- 해당 글에 나오는 모든 React는 Vite, CRA, Webpack 등 기반의 SPA를 뜻한다 Next.js에서는 왜 axios보다 fetch를 사용하는가?React에 익숙한 분들이라면 더 잘 알겠지만 주로 axios를 사용해서 통신을 하게 된다. 그 이유는 fetch가 제공하지 않는 DX를 axios가 보완하기 때문일 것이다. 그 차이는 라이브러리 선호도의 차이가 아니라 "누가 네트워크 요청을 통제하느냐"의 차이이다.Next.js를 사용하다보면 공식문서, 예제, 베스트 프랙티스 등을 접할 수 있는데 대부분이 axios를 사용하기 보다는 fetch를 사용하는 경우가 압도적으로 많다.이는 Next.js와 React의 D..

매번 프로젝트를 할 때 Next.js와 Nginx를 함께 사용해왔다.그러나 이번에는 Nginx를 사용하지 않기로 했다.Nginx 없이 프론트엔드를 운영하는데 문제가 없을까? 프론트엔드 개발을 하다보면 "배포" 라는 단계에서 Nginx를 만나게 된다.정적 파일을 서빙하려면 Nginx가 필요하다고 배웠고, 실제로 많은 프로젝트에서 그렇게 사용하고 있다.그런데 이번에 프로젝트를 하면서 Nginx 없이 프로젝트를 구성하게 되었다.이런 방식에 대한 이름까지 있었는데 "Nginx-less Modern Stack" 이라는 패턴이었다. Nginx란 무엇인가?Nginx는 웹 서버 소프트웨어이다. 유저가 브라우저에 주소를 입력했을 때 그에 맞는 파일이나 데이터를 돌려주는 프로그램이다.쉽게 비유하자면, 식당의 홀 직원 같..

새 탭을 닫는 경우 이벤트가 동작해야 하는 경우가 필요했다.단순히 화면을 닫을 때를 상정하면 많은 정보가 있지만 이런 경우 문제는 새로고침만 해도 이벤트가 적용이 된다는 문제가 있다.브라우저에서 페이지를 닫는 이벤트와 새로고침 이벤트는 기술적으로 매우 유사하다.두 경우 모두 beforeunload 이벤트가 발생하기 때문에 두 상황을 구분 짓는 것은 쉽지 않다.내가 원하는 것은 "화면을 닫았을 때 이벤트 동작" + "새로고침 시에는 이벤트 동작하지 않음" 이다. 웹 브라우저에서 창 닫기와 새로고침 구분하기웹 애플리케이션에서 사용자의 다양한 행동을 내가 원하는 스코프 만큼만 정확하게 감지하는 것은 쉽지 않다.특히 브라우저 창을 닫는 행동과 페이지를 새로고침하는 행동은 둘 다 unload를 발생시키지만 새로고..

이번에 프로젝트 마이그레이션 작업을 준비하던 와중에 React가 19버전으로, 그리고 NextJS가 15버전으로 업데이트 되었다.기왕 버전이 업데이트 된 김에 우리 프로젝트도 최신의 버전으로 한 번 가져가보기로 했다.다행히  아직 메인 페이지와 라우팅 정도가 전부이다 보니 업데이트를 해도 크게 달라지는 점은 없었다. 1. Verseion 15로 업그레이드 우선 NextJS 홈페이지에 나와있는 방식대로 커맨드를 입력하여 업그레이드를 진행했다.그리고 package.json에서 확인해보니 dependencies 버전이 바뀐 것을 확인했다.그리고 다시 실행시켜보니 아직 만들어진게 없고 라우팅 정도만 해놓은지라 특별히 문제 될 만한 것은 없어보여서 다음 해야할 일을 진행했다. 2.  Markdown and MDX..

특히 프론트엔드 개발자로 일하다보면 "렌더링(Rendering)" 이라는 단어를 많이 사용하게 된다.렌더링이라는 것은 어떤 정보를 표현하는 것을 말하는데, 특히 웹 개발에서는 주로 데이터 처리를 통해 사용자에게 보여지는 특정 페이지를 생성하는 과정을 말한다. 개인적으로 프론트엔드 개발자 입장에서 아주 중요하다고 생각한다.아무리 성능 좋은 백엔드 컴퓨팅 기능을 갖추고, 좋은 인프라를 구축해놨다고 하더라도 결국 유저 눈에 보이지 않으면, 그리고 사용성이 떨어지게 된다면 다른 대안을 찾기 마련이기 때문이다.이렇게 중요한 렌더링이라는 것은 과거부터 많은 고민거리가 되었고, 그로 인해 다양한 경우에 맞는 패러다임의 적용이 필요했고, 그에 맞는 라이브러리나 프레임워크가 도입되기도 했다.특히 React, Angula..

NextJS를 처음 도입해서 프로젝트를 하고 있다.대부분 React만 했었고, NextJS는 React와 거의 같다라고 들어서 큰 문제 없이 사용할 수 있을지 알았는데 생각보다 CSR, SSR을 맞춰서 사용해야하다보니 고민을 해야하는 부분이 많았다. 오늘은 프로젝트 중 만난 Warning 중 하나인 Props must be serializable for components in "use client" file.... 의 해결에 대해서 알아보려고 한다.  배경어떤 경우 문제가 나타났는지 살펴보자면.../////////////////////////////////////////////////////////////// 부모 컴포넌트/////////////////////////////////////////////..