[깃허브 링크] GitHub - joseph0926/react: react 개념 정리 re react 개념 정리 re. Contribute to joseph0926/react development by creating an account on GitHub. github.com React의 작동 원리 let virtualDOM = null; function render(reactEl, containerDOMEl) { const newVirtualDOM = createVirtualDOM(reactEl); if (!virtualDOM || virtualDOMHasChanged(virtualDOM, newVirtualDOM)) { updateRealDOM(containerDOMEl, newVirtualDOM);..
1. 세팅- Clerk: clerk 공식 문서 -> 저는 react로 구현중이므로 react 부분을 참고하였습니다 Welcome to Clerk Docs | ClerkAdd complete user management to your application in minutes.clerk.com- prisma: prisma 공식 문서 -> 저는 mongoDB를 이용중이므로 mongoDB 부분을 참고하였습니다. Prisma | Next-generation ORM for Node.js & TypeScriptPrisma is a next-generation Node.js and TypeScript ORM for PostgreSQL, MySQL, SQL Server, SQLite, MongoDB, and Cockro..
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. 기본 정보 환경 Front: React, Socket.io-client Back: Node, Express, Socket.io 목표 socket.io을 활용하여 간단한 채팅 앱 만들기 React + Node (express) DB x 2. 세팅 React 생성 -> npx create-vite@latest client (VITE) Node 생성 -> npm init -y 라이브러리 설치 front: npm install socket.io-client (socket.io-client) back: npm install socket.io (socket.io) / npm install -D nodemon ts-node-dev @types/express @types/node tsconfig-paths typ..
이번 프로젝트는 블로그에 기록하면서 구축해보려합니다. 저는 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에는 장점만큼..
