Sign in

nextjs

it dev nextjs

모달창에서 스크롤 방지

처음 찾아본 코드로는useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'unset'; };}, []);을 사용했는데 문제점은 스크롤바가 사라지면서 레이아웃이 비틸렸다 다시 돌아왔다 한다는 것상당히 거슬려서 새로운 방법을 찾아봤다.  // utils/modal.ts/** * 스크롤을 방지하고 현재 위치를 반환한다. * @returns {number} 현재 스크롤 위치 */export const preventScroll = (): number => { const currentScrollY = window.scrollY; document.body.style.p..
wono | discuss |
it dev nextjs modal

Next.js 15 - Modal 구현 (with. Parallel Routes & Intercepting Routes)

웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이..
wono | discuss |
it dev nextjs asynclocalstorage

Next.js는 짜증나요 | GeekNews

Next.js의 미들웨어는 로깅 설정이 제한적이며, 기본 로깅이 개발 환경에서만 활성화되어 생산 환경에서 문제 추적이 어려움미들웨어에서 헤더만 전달 가능하며, 다중 미들웨어 체이닝이 불가능해 복잡한 로깅 구현이 제한됨AsyncLocalStorage를 사용한 로깅은 Edge 런타임에서 예상치 못한 동작을 보이며, 페이지와 미들웨어 간 컨텍스트 공유가 제대로
wono | discuss |
it ops nextjs pm2

[NODE] 📚 PM2 모듈 사용법 - 클러스터 / 무중단 서비스

Node.js 싱글 스레드 Node.js는 Chrome의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(runtime)으로 ‘Event Driven’, ‘Non-Blocking I/O’ 모델을 사용해 가볍고 성능이 뛰어나 높은 평가를 받고 있다. Node.js는 기본적으로 싱글 스레드(thread)로 돌아간다. Node.js 애플리케이션은 단일 CPU 코어에서 실행되기 때문에 CPU의 멀티코어 시스템은 사용할 수 없다. 그래서 만약 서버의 사양이 8코어이며 16쓰레드면, 프로그램을 돌리는데 최대 16개 코어를 사용 할 수 있지만, 노드는 싱글 스레드 이기 때문에 모든 코어를 사용하지 못해 최대 성능을 내지 못하는, 즉 자원을 제대로 활용하지 못한다. 그래서 Node.js는 이런 문제를 해결하기 위..
wono | discuss |
it ops nextjs aws

Next.js 정적 웹사이트 S3 + CloudFront + Route53 (가비아 도메인적용)

근래의 대부분의 웹앱의 경우 동적인 방식이 많지만 전통적으로 단일페이지와 같은 랜딩페이지류의 원페이지 형태는 화면의 내용이 바뀔 일이 없는 정적인 방식이 다수다. Next.js를 통해 ssg방식의 정적 웹사이트를 AWS에 배포해서 캐싱을 위해 클라우드프론트를 적용하고 가비아와 같은 서비스에서 원하는 도메인을 구매해서 Route53에 적용하기 까지 기억이 휘발되지 않도록 기록을 남겨보려한다. 1. Next.js 정적사이트로 앱 빌드(SSG) https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation Rendering: Static Site Generation (SSG) | Next.js Using Pages..
wono | discuss |
it dev nextjs hydration

어쩔 수 없는 hydration mismatch를 useEffect없이 해결하기

이 데이터들은 서버에서 값을 알 수 없으므로, 클라이언트에서 데이터를 처리해야 한다. 만약 이 내용을 서버에서 바로 처리하려고 하면, 서버의 결과와 클라이언트의 결과가 달라질 수 있다. 즉, hydration mismatch가 날 수 있다. 다만 이 방법도 한계가 존재한다. 텍스트 대상으로만 가능하다는 점이다. 만약, nested 된 dom 구조에…
wono | discuss |