간단한 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 ..

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

용어 트리(Tree): 계층 구조를 시각화하는 데 사용되는 관례. 예를 들어, 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있다. 서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부분. 루트(Root): 트리 또는 서브트리의 첫 번째 노드, 즉 루트 레이아웃. 리프(Leaf): 자식이 없는 서브트리의 노드, 즉 URL 경로에서의 마지막 세그먼트. URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다. URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성) app Router Next.js의 13 버전에서는 React Server Components를 기반으로 한 새로운 App Router가 소개되었다. 이 새로운 라우터는 ..