초기화면 로딩시간은 UX에 중요한 요소입니다. X2bee 솔루션은 더 나은 UX를 위해 lazy loading을 구현합니다.Next.js page아래는 app/page.tsx의 코드이다.용량이 꽤 큰 PopupListModal을 import한 후,useState의 초기값을 false로 놓아,PopupListModal component가 렌더링되지 않게 해놓았다.간단한 예를 들었지만 이 component는 실제 application에서는,웹사이트를 이용하는 모든 사람들이 꼭 보지 않아도 되는,원하는 사람만 클릭해서 봐도 되는 component라고 보면 된다.'use client'import { useState } from 'react'import { Button } from '@/components/ui/..

ES6부터 도입된 기능으로, 언어나 라이브러리 차원에서 제공되는 반복(iteration)과 비동기 흐름 제어를 유연하게 다룰 수 있게 해준다. [ 필요성 ]자바스크립트의 핵심 개념, 이터레이터와 제너레이터데이터 컬렉션을 효율적으로 다루기 위해 자바스크립트는 이터레이터(Iteratior)와 제너레이터(Generator)라는 두 가지 개념을 제공한다. 이터레이터는 "반복 가능한" 객체들을 위한 프로토콜을 정의하며, 제너레이터는 이터레이터를 사용하여 값을 순차적으로 생성하는 함수이다. 이 두 개념은 자바스크립트에서 비동기 처리, 데이터 스트림 처리 등 다양한 상황에서 유용하게 사용된다. [ 정리 ]1. 데이터를 순회하는 표준화된 방식 제공  2. 커스텀 반복 로직 구현  - 기본 자료구조 외에 사용자 정의 객..

Next.js에 remark-breaks plugin 설치개요일반적인 markdown 파일은 줄 바꿈을 어떻게 할까?lorem ␠ ␠ ipsumlorem\ipsum위에는 sp라고 작게 썼지만 일반 공백(스페이스바)이라는 뜻 (공백을 표시할 수가 없으니)단순히 'Enter'를 치면 줄이 안 바뀐다첫번째 방법은 스페이스바 2번 치고 → Enter 누르는 방법두번째 방법은 백슬래시 후 → Enter 누르는 방법이렇게되면 Obsidian에서 편집한 내 글이 git push하는 순간 줄바꿈이 안 된 상태로 브라우저에 rendering 되게 된다.이 문제를 해결하기 위해 remark-breaks 플러그인을 설치한다.그러나 설치하기 전에 왜 이러는 건지 간단히 배경지식을 조사해보자.MarkdownCommonMar..

개요 Next.js 를 위해서는 자동 설치가 있고 공식문서: https://nextjs.org/docs/getting-started/installation#automatic-installation 수동 설치도 있다. 공식문서: https://nextjs.org/docs/getting-started/installation#manual-installation 수동 설치는 이 블로그에 더 자세히 적어놓았으니 참고 : https://x2bee.tistory.com/category/Next.js%20%EA%B0%9C%EB%B0%9C%20%EA%B0%80%EC%9D%B4%EB%93%9C/01.%20Set%20up 여기서는 create-next-app을 이용해 자동 설치를 한다. Setup 1. create app ..

Fetch browser 개발자도구 console에서 fetch를 사용해도 에러가 나지 않는다 → browser native한 javascript 커맨드 fetch('https://jsonplaceholder.typicode.com/todos') 위 주소로 fetch를 보낼 수 있다. fetch는 asynchronos function이므로 const data = fetch('...'); 이런 식으로 바로 사용할 수 없다. reponse의 형태는 json format으로 key에 따옴표가 있음 → javascript object과 표기가 다름. [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { ... promis..

Parallel Routes Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다. 예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다. Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다. 슬롯은 공유 부모 레이아웃에 속성(props)으로 전달됩니다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children pro..