분류 전체보기

참고사이트• woong님의 velog• Higher의 창작소/#103 🤔 NextJSNextJS는 Vercel이 개발한 풀스택 웹 애플리케이션 구축을 위한 React 프레임워크이다.서버 사이드 렌더링 (SSR)을 사용하여 웹 사이트 구축을 도와준다. Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 🧐 Server Side Rendering웹페이지를 렌더링하는..

참고 사이트• 냠냠맨(React와 Typescript를 좋아하는 개발자)님의 티스토리• hudi님의 개인 블로그 사이드 프로젝트를 진행하면서 DTO를 정의해야하는 일이 생겼다.DTO에 대해 개념이 부족하여 정리해보았다. 📦DTODTO (Data Transfer Object)는 계층간 데이터 전송을 위해 도메인 모델 대신 사용되는 객체이다.이때, 계층이란 Presentation(View, Controller), Business(Service), Persistence(DAO, Repository)등을 의미한다.주로 백엔드 API와 데이터를 주고 받을 때 사용하는 객체 구조를 정의한 타입이며 자료구조체라고도 불린다. • 목적: 데이터의 구조를 명확히 정의하고 타입 안정성을 보장• 사용 위치: API 요청(r..

리액트 컴포넌트를 개발하다보면, 컴포넌트를 어떻게 분리해야할 것인가를 많이 고민한다.또, 분리하여 어떠한 패턴을 이용하여 작성할지도 고민한다. 우선 컴포넌트를 분리하는 기준에 대해 알아보자. 🦴 컴포넌트 분리1. ♻️ 재사용성 (Resualbility)👉🏻 동일한 UI나 기능을 여러 곳에서 사용할 가능성이 있는 경우 컴포넌트를 분리한다.👉🏻 ex. Button, Modal, Card, Input 코드 좀 더 이해하기 >> 유틸함수 cn(tailwind-merge) tailwind-mergeMerge Tailwind CSS classes without style conflicts. Latest version: 3.1.0, last published: 3 days ago. Start using ta..

• kyounghwan님의 GitHub.io Guide | 기억보다 기록을Guide 본 카테고리는 vue.js 에 TypeScript(TS)를 적용하자는 생각으로 TS를 공부하고 기록한 내용으로 구성되어 있습니다. 사전 준비 vue create를 통해 프로젝트를 만들었다고 가정하고 vue.js 코드 위에 tskyounghwan01.github.io  ⚠️ any 타입은 어떠한 값들이든 받을 수 있다고 선언되는데, any를 중구난방으로 사용할 경우, VanillaJS와 다른 점이 없으므로 any 타입의 선언은 하지 않는 것을 길들이자. 작성자는 프로젝트를 진행하면서 type을 위주로 쓴다.그 이유는,interface 정의 후 마우스를 호버하여 확인하려고 하면 타입 종류를 바로 확인 할 수 없는 반면,  t..

참고사이트• Transtack Query 공식 문서 TanStack Start Overview | TanStack Start React DocsTanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like and . It is ready to deploy...tanstack.com• HEROPY.DEV 님의 블로그 TanStack Query(React Query) 핵심 정리TanStack Query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이..

📚 Merge 란 머지,,?Merge란  한 브랜치의 변경사항을 다른 브랜치와 통합하는 기능이다.Merge 대해 알아보고 Repository를 관리해보자.git merge feature-branch 💬  Merge  (defualt)일반적인 Merge는 두 브랜치의 커밋 히스토리를 모두 유지하면서 새로운 Merge Commit을 생성한다. 특징으로는✅ 모든 커밋 히스토리가 보존된다.✅ Merge 커밋이 새로 생성된다.✅ 브랜치의 작업 내역을 그대로 확인 가능하다. 🌿  Squash Merge (압축 병합)여러 커밋을 하나의 커밋으로 압축하여 병합하는 방식이다.현재 브랜치에서 몇 개의 커밋을 작성하여도, 머지 되는 브랜치에는 하나의 커밋 메시지만 남게 되어 히스토리를 단순화한다.feature 브랜치의..

github.com/radix-ui/react-useControllableState 소스코드 primitives/packages/react/use-controllable-state/src/useControllableState.tsx at main · radix-ui/primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitivesgithub.com  🕹️ useControllableState() 란?Radix 라이브러리에서 제공하는 React 훅으로, 제..

상단 내용 작성 예정  ( 2025-01-31 ~ ) 2025. 02. 02 추가∙ useControllableState() 공부∙ ReactNode, ReactChild, ReactElement 공부 후, 재작성 될 예정 (아마 코드 또한 변경될 예정)   합성 컴포넌트의는 다음과 같다 1. Header, Body, Footer를 모두 호출한 경우2. Body와 Footer만 호출한 경우3. Body만 호출하고 Body에 스타일링을 덮어씌운 경우사용자가 필요한 컴포넌트만을 호출함에 따라 다양한 모양의 컴포넌트를 만들 수 있다.또한 각 컴포넌트에 className(tailwindCSS), style을 props로 넘겨주어 디자인을 수정할 수 있다. 📄 App.tsx (필요한 경우 펼쳐서 보기)더보기im..