CSR은 무엇일까 CSR(Client-side rendering)은 말 그대로 웹 브라우저에서 페이지를 동적으로 렌더링하는 방식으로, 웹 애플리케이션에서 사용되는 렌더링 방식 중 하나다. CSR은 초기에 서버에서 전달되는 HTML 페이지가 비어있거나 최소한의 내용만을 포함하여, JavaScript와 같은 클라이언트 측 스크립트를 사용하여 페이지를 동적으로 생성하고 렌더링한다. 장점 더 나은 사용자 경험을 가져올 수 있다. 초기 페이지 로딩 후 필요한 데이터만 비동기적으로 가져와 동적으로 페이지를 업데이트한다. 이로써 사용자는 빠른 페이지 전환과 부드러운 상호작용을 경험할 수 있다. 페이지간 이동 시 빠른 로딩 속도 추후 서술할 SCR 보다 비교적 빠른 초기 로딩 속도를 선보인다. 서버 부하 절감 페이지를..

... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ... 글을 시작하며, 아래 사진은 프리온보딩 프론트엔드 챌린지 사전과제 내용이다. 프리온보딩 프론트엔드 챌린지를 하면서, 사전과제로  사진과 같은 내용을 받게 되었다. 이 포스트에선 3번에 해당하는 내용을 포스팅할 것이다. Next.js 에서 yarn start(or npm run start)란 무엇인가 npx create-next-app my-app 을 터미널 창에 입력하면 생성되는 Next 앱을 보자. Next script next 앱의 package.json 안을 보면, script라는 곳이 있다. ... "s..

이번에 회사에서 개발 중인 웹 서비스를 Next 13으로 마이그레이션하여 이 경험을 블로그에 공유해보고자 한다. cli를 활용하여 업그레이드하기 먼저 최신 버전을 설치하여 준다. npm install next@latest react@latest react-dom@latest npm install -D eslint-config-next@latest Next 13으로 업그레이드 해주는 명령어와 ESLint 업그레이드 명령어이다. 나는 ESLint도 사용 중에 있기에 같이 업그레이드 해주었다. Codemods 를 이용하여 새로운 버전 적용하기 Image next 13 으로 넘어오며 기존 next/image가 next/legacy/image로 변경되었고, next/future/image가 next/image로 ..

현재 프로젝트에서 antd의 DatePicker를 사용 중에 있다. 근데 자꾸 TypeError: t.weekday is not a function 에러가 뜨는 것이다. defaultValue, value 가 지정되어있으면 에러가 뜨길래 우리 똑똑한 chatGPT한테 물어봤다. 사실 맨 처음부터 좋은 대답을 해주진 않았다. moment 또는 date 객체를 쓰라느니 뭐라느니... 그래서 써봤다. 근데 문제는 RnagePicker에서 타입 추론이 day.js 를 사용하라고 떴다. 아니나 다를까 노드 모듈에 그냥 Dayjs가 박혀있었다. 대체 우리 ChatGPT는 뭐란 말인가.... ChatGPT에게 불만을 가지고서 열심히 질문을 다시 하기 시작했다. 여러 번 삽질 끝에 드디어 단서가 되는 답변이 나왔다. ..

안녕하세요, 오늘은 React, Next 환경에서 Portal 을 사용해보겠습니다. 문제 상황 모달을 붙이는 도중, 다른 요소가 모달을 뚫고(...) 존재감을 과시하고 있었습니다. 이런 문제는 CSS 상속 구조로 인해 발생합니다. 제 경우엔 z-index가 부모 요소에 따라 한계가 발생하여 모달을 뚫는 현상이 나타나더라구요 이를 해결하기 위해, Portal을 사용하기로 하였습니다. Portal로 사용할 태그 선언하기 React 에선 public/index.html 에 태그를 선언해주면 됩니다. Next 환경이니 pages/\_document.tsx 에 태그를 선언하겠습니다. Portal 컴포넌트 제작하기 Portal로 사용할 태그를 지정하여 Portal을 생성해줍니다. 그 이후, Portal에 child..

안녕하세요. 오늘은 modal 을 context api를 사용하여 전역에서 관리했던 경험을 공유하려합니다. 개념 우리는 context api 를 사용하여 전역에서 사용할 수 있는 modal 틀을 제작할거에요. modal 은 react portal 을 사용해 띄워줄 겁니다. (z-index 문제 등 고려) context에서 modal 의 상태를 관리합니다. 가져올 요소는 다음과 같습니다. showModal closeModal 개발 먼저 context 를 만들어줄게요. App에 붙여줍니다. 이제 사용하면 됩니다. 저는 modal 을 갖고 있는 객체를 생성하여 showModal 함수를 매칭시켜두었습니다. 읽어주셔서 감사합니다 즐거운 코딩 되세요!