초기화면 로딩시간은 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/..

데스크톱 애플리케이션을 만들기 위한 프레임워크다.https://v2.tauri.app/ Tauri 2.0The cross-platform app building toolkitv2.tauri.app  Backend : RustFrontend : webview를 통해 HTML, CSS, JS -> React.js, Next.js 등등 사용 가능 장점매우 작은 바이너리 크기 (Electron 대비 1/10 ~ 1/20 수준)높은 성능과 낮은 메모리 사용량Rust의 안전성과 성능 이점강력한 보안 기능 내장크로스 플랫폼 지원 (Windows, macOS, Linux)  개발자 관점에서의 장점npm 생태계 활용 가능웹 개발 경험을 데스크톱 앱 개발에 활용시스템 API에 대한 안전한 접근 제공커스텀 플러그인 개발 가..

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

간단한 poc 를 위해 개발자가 기획, 디자인없이 빠르고 이쁘게 프론트개발하는 방법에 대해서 고민해보았습니다. 어떻게 해야 빠르게 fo 개발할 수 있을까? 1. ai 를 활용 - 인공지능을 활용한 코드 편집기2. css 는 컴포넌트 라이브러리를 사용 - 재사용 가능한 컴포넌트의 모음 숙달되면 개발속도는 크게 상승할 것으로 판단하였습니다. cursor ai1. vs code 를 포크해서 만든 프로젝트개발 친숙vs code 의 extensions 사용가능  2. 프로젝트 단위의 질문도 가능 (RAG)vector db 를 활용한 코드베이스 인덱싱 기능 지원하기 때문사용자가 질문한 내용과 유사성, 관련성이 높은 문서들을 인덱싱하고 사용자 쿼리와 함께 prompt에 함께 답변을 생성  3. 간단한 조작법- ta..

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 ..