1. 세팅 - 디자인 레퍼런스: WaveeAI - AI Chat Dashboard WaveeAI - AI Chat Dashboard dribbble.com - shadcn-ui 설치 -> shadcn-ui docs 참고 (저는 현재 vite를 사용중이므로 해당 내용 참고하였습니다) 2. 필요한 컴포넌트 구성 디자인 레퍼런스를 보면 크게 왼쪽 사이드바와 메인으로 구성되어있습니다. 저는 여기에 추가적인 무언가를 할 예정이므로 네비바까지 추가하게되었습니다. 또한, 제가 구현하려는것은 결국 채팅앱이기때문에 채팅을 입력하는 컴포넌트와 채팅을 렌더링하는 컴포넌트가 필요했습니다. 3. 코드 분리 기존코드 const SendMessage = () => { const [message, setMessage] = useSt..
이번 프로젝트는 블로그에 기록하면서 구축해보려합니다. 저는 1인 개발 프로젝트를 진행할 때 보통 아래와 같은 순서로 진행합니다. 간단한 기획 프로젝트 주제, 프로젝트 간단 설명, 사용 기술, 예상 규모(기간, db등,,) 간단한 기획을 기반으로 openAI와 상세 기획 구성 디자인 레퍼런스 검색 (주로 유튜브나 Dribbble 참고) 1,2,3 을 통합하여 기획서(노션) 및 뼈대(draw.io) 작성 4번을 기반으로 1번에서의 사용 기술, 예상 규모 재검토 개발 시작 1. 간단한 기획 최근 1 ~ 2달간 NextJs v13을 기반으로 한 game forum 프로젝트를 진행하였고, 진행중입니다. 따라서 이번에는 조금 결이 다른 프로젝트를 진행해보려합니다. 저는 개인 프로젝트 주제를 정할 때 생각하는건 두 ..
- Router loaderloader 함수는 원래 remix라는 react 프레임워크에서 데이터 패칭을 수행하는 하나의 메커니즘이지만, react-router가 최신버전으로 업데이트되면서 해당 메커니즘을 채택하고 사용하기 시작하였습니다.loader는 기본적으로 페이지(컴포넌트)에서 데이터를 패칭합니다- react-query useQueryreact-query는 데이터 패칭, 데이터 변경, 캐시 관리등에 사용되는 react 패키지입니다useQuery는 기본적으로 hook이므로 컴포넌트가 마운트될때 데이터를 패칭합니다 - loader vs useQueryloader는 loader가 정의되어있는 컴포넌트와 매치되는 path가 트리거되면 데이터를 가져옵니다 반면, useQuery는 path가 트리거된 후 매치..
주제: 같은 앱을 NextJs v13과 Remix로 각각 구현해보면서 서로의 차이점을 이해하는 프로젝트 깃허브: https://github.com/joseph0926/NextANDRemix-Expenses GitHub - joseph0926/NextANDRemix-Expenses: 하나의 프로젝트(Expenses Note)를 NextJs v13과 Remix v2로 각각 구현해 하나의 프로젝트(Expenses Note)를 NextJs v13과 Remix v2로 각각 구현해보는 프로젝트 - GitHub - joseph0926/NextANDRemix-Expenses: 하나의 프로젝트(Expenses Note)를 NextJs v13과 Remix v2로 각각 구현해보는 프로젝트 github.com 구조 & 조건 ..
2022년 말 ~ 2023년 지금까지 React 생태계에서 가장 큰 변화를 가져온 것은 NextJs v13으로의 업데이트일것입니다. 이전 버전들의 NextJs에서의 컨셉과 비교했을 때 정말 많은 변화가 생겼으며, 이러한 변화들을 하나씩 정리하려합니다, 1. React만 사용하는 것은 더이상 권장되지 않는다. 소제목을 조금 자극적으로 작성면도 있지만, 이 소제목은 실제로 React 공식 팀원이 말한 내용입니다 왜 이런 내용을 언급했을까요? React는 2013 ~ 2014년에 나온 프레임워크로, SPA라는 개념을 이용하여 빠른 페이지 이동등 많은 이점을 선보였고 이러한 장점에 힘입어 현재까지 가장 인기있는 자바스크립트 프레임워크 자리를 차지하였습니다. 하지만, SPA를 기반으로 하는 React에는 장점만큼..
저는 팀프로젝트시 디자이너, 기획자 또는 다른 프론트 팀원으로 부터 무언가 구현 요구를 받으면 디자인 시스템을 설계하여 청사진을 만든 후에 작업을 시작합니다. 디자인 시스템이란? 디자인 시스템은 디자인 원칙, 색상 팔레트, 타이포그래피, 컴포넌트, 패턴 등과 같은 디자인 요소들을 표준화하고 일관성 있게 관리하는 시스템을 말합니다. 제가 생각했을 때 디자인 시스템을 설계할 때 중요하게 생각하는 요소는 아래와 같습니다. 재사용성 / 일관성 / 유지 및 보수 / 협업 이번 글에서는 제가 실제로 요구를 받은 것을 어떤식으로 구현(react)하는지를 예로 들어 디자인 시스템을 구축해보려합니다 1. 요구사항 분석 우선 어떤 요구를 받게되면 가장 먼저하는 것은 이것을 구현해야될 위치(역할)를 정합니다. 저는 Reac..
Next.js가 v13으로 버전 업데이트가 되면서, 기존에 page 폴더에서 해왔던 작업들이 app 폴더에서 진행되게 변경되었고 추가적인 변화들이 생겼습니다. 그중에서 이 글에서 알아볼 것은 server componet 입니다. Server Componet 란? server 컴포넌트란 서버를 벗어나지 않는 컴포넌트입니다. 조금더 길게 써보면, server 컴포넌트의 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공합니다. 즉 해당 컴포넌트의 js 코드가 클라이언트에서 실행되지 않는다는 것을 의미합니다. 이게 무슨 의미가 있을까요? 일반적인 CSR에서는 컴포넌트의 js 코드가 클라이언트로 전송되고, 클라이언트에서 실행됩니다. 반면 server 컴포넌트는 앞서 언급했듯이 클라이언트로 js 코드를 ..
