본문 바로가기

전체 글

(220)
[Next.js] react 와는 다른 이미지 import 방법 설명과 Image 컴포넌트 활용하기 Next.js에서 import로 이미지를 가져올 때, 해당 이미지는 객체 형태로 임포트됩니다. 이 객체는 다음과 같은 속성들을 포함합니다 src: 실제 이미지 경로height: 이미지 높이width: 이미지 너비기타 메타데이터그러므로 src={logo.src} 로 접근해야 하며,react 에서 사용했던 것 처럼 src={logo}  이런 식으로 작성할 경우 이미지 바인딩이 불가능하게 됩니다. import Link from "next/link";import logo from "@/assets/logo.png";export default function MainHeader() { return ( );}  더 나은 방법으로는 Image 컴포넌트를 사용하는 ..
[Next.js] next 기초 1. App 라우팅   동적 라우팅 폴더명 기입방식 [folder]필수 파라미터입니다하나의 세그먼트만 매칭됩니다블로그 포스트, 제품 상세 페이지에 적합합니다[ ...folder ]최소 하나의 세그먼트가 필요합니다여러 세그먼트를 포함할 수 있습니다계층적 카테고리 구조에 적합합니다/shop/clothes (O)  /shop/clothes/shirts (O)[ [ ...folder ] ]선택적 모든 것을 포함하는 라우트선택적 필터나 검색 파라미터가 있는 페이지에 적합합니다   이렇게 대괄호 표기를 하면 /blog/post-1  /blog/post-2  /blog/post-3 이렇게 동적으로 라우팅이 가능해진다.그리고 [folder] 안의 page.js 에서export default function BlogPo..
[javascript] 문자열을 배열로 변환하는 방법들 코테나 실무에서 문자열을 배열로 변환하여 로직을 작성해야하는 경우가 종종 있습니다그럴 때 사용하는 방법은 아래 3가지 중 편한 방법을 선택하시면 됩니다 1. split() 사용 const str = "hello";const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o']const str = "hello"; const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o'] 2. spread 연산자 사용 const arr2 = [...str]; // ['h', 'e', 'l', 'l', 'o']3. Array.from() 사용 const arr3 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
[React Design] HOC Pattern 고차 컴포넌트 패턴 1. 고차 컴포넌트 정의 자바스크립트는 함수형 프로그래밍이 특징인 언어입니다.그 중에서 함수를 값처럼 인자를 받아 함수를 리턴하는 함수를 고차 함수라고 합니다. 고차 컴포넌트( HOC )도 이와 비슷한 개념 입니다.단지 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 차이가 있다고 보시면 됩니다. 그리고 이 리턴하는 새로운 컴포넌트는고차 컴포넌트의 기능을 래핑하여 기능 + 인자 컴포넌트를 반환하는 차이가 있을 뿐입니다. function withStyles(Component) { return props => { const style = { padding: '0.2rem', margin: '1rem' } return }}const Button = () = Click me!const Text..
[React Design] Compound Pattern (복합 컴포넌트 패턴) 애플리케이션에는 상호 의존적인 컴포넌트가 있는 경우가 많습니다. 이들은 state와 로직을 함께 공유하며 서로 의존하고 있습니다.select, 드롭다운 컴포넌트 또는 메뉴 항목과 같은 컴포넌트에서 이러한 패턴을 자주 볼 수 있습니다.  복합 컴포넌트 패턴을 사용하면 하나의 작업을 수행하기 위해 모두 함께 작동하는 컴포넌트를 만들 수 있습니다. Chakra UI 에서 볼 수 있는 탭1 탭2 내용1 내용2   으로 컴포넌트 이름을 명명하는 게 특징 입니다.  Context APIReact.Children.map 이나 React .cloneElement 를 사용할 경우1. React.Children.map의 경우 Wrapper로 감싸면 props 전달이 안되어 컴포넌트 중첩이..
[TanStack Query / React Query] Optimistic Updates ( 낙관적 업데이트 ) : UI 방식과 캐시 방식 https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역 정리한 글 입니다.  낙관적 업데이트는 mutation 이 성공적으로 반영될 것이라 낙관적으로 판단을 하고서버로 부터 응답이 오기 전에  UI 업데이트를 먼저 하는 것을..
[TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트 https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역한 글입니다.  Mutation 응답으로부터의 업데이트 서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutati..
[TanStack Query / React Query] TanStack Query 필터링 filters : QueryFilters와 MutationFilters https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com 공식문서를 간단히 요약한 내용입니다. 기본적으로 필터들은 invalidateQueries, removeQueries, refetchQueries 등과 함께 쓰입니다.  1. Que..