본문 바로가기
반응형

안뇽

전체 글
133

[면접공부] 리액트에서 index를 key값으로 사용하면 안되는 이유 리액트(React)에서 index를 key 값으로 사용하는건 비추천되고있다.그 이유에 대해 알아보자.1. Key의 역할Key는 리액트가 각 요소를 고유하게 식별할 수 있도록 도와주는 속성리액트는 key를 사용하여 요소의 변경, 추가, 삭제 여부를 효율적으로 파악함효율적인 비교를 통해 DOM 업데이트를 최소화, 성능을 최적화2. Index를 key로 사용하면 안 되는 이유1) 요소의 순서 변경 시 문제 발생배열의 요소가 추가되거나 삭제될 때, index는 순서에 따라 변하기 때문에 같은 요소에 대한 key가 변경될 수 있다.리액트는 key 값이 바뀌면 요소를 새로운 요소로 인식하여 불필요한 DOM 업데이트가 발생할 수 있다.예시const items = ['Apple', 'Banana', 'Cherry'];.. 2025. 1. 9.
[TailwindCSS] className style에 !important추가하기 SwiperJS에 navigation 버튼이 기본스타일이 있어서color를 바꾸려고 className에 text-seagull-500(테마커스텀컬러)를 추가했다.우선순위에 밀려서 스와이퍼 기본이 잡히고있음!important를 하려면 간단하다.쓰려는 className앞에 !를 붙이면된다.!text-seagull-500으로 쓰면된다. Next Next  잘 변경되었다! 2025. 1. 7.
데이터 CRUD 처리(api작성)와 hooks React Query 사용 1. 데이터 CRUD는 API에서 작성데이터의 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete) 작업은 API 파일에서 작성하는 것이 좋다.API 파일은 서버와 통신하는 로직을 모아둔 곳으로, 컴포넌트에서 API 호출 로직을 분리해 유지보수성과 재사용성을 높인다.// api/posts.tsimport { db } from '@/lib/firebase';import { collection, addDoc, getDocs, updateDoc, deleteDoc } from 'firebase/firestore';// CREATEexport const createPost = async (postData: Post) => { const docRef = await addDoc(coll.. 2024. 12. 16.
컴포넌트 element 타입 두개 선택하여 사용하기(Link와 button으로...) 컴포넌트 element를 button 혹은 Link로 동적렌더링하는 방법에 대해 알아보자. 기존코드/** @jsxImportSource @emotion/react */import { cn } from '@/utils/style';import { ComponentPropsWithoutRef, FC } from 'react';type ButtonProps = ComponentPropsWithoutRef & { color?: string; size?: string; className?: string; children: React.ReactNode;};const Button: FC = ({ color = 'primary', size = 'medium', children, className, .... 2024. 12. 11.
[Typescript] 제네릭을 사용하는 타입 정의 두 가지 타입 정의의 주요 차이는 제네릭을 사용하는지 여부와 유연성이다.1. 제네릭을 사용하는 타입 정의type ButtonProps = { href?: string; color?: string; size?: string; className?: string; children: React.ReactNode;} & ComponentPropsWithoutRef;특징(예시 설명)제네릭(T) 사용:T는 기본값으로 'button'을 가지며, ElementType(React에서 사용 가능한 HTML 태그 또는 컴포넌트 유형)을 확장.개발자가 Button을 사용할 때 T를 통해 해당 컴포넌트의 타입을 동적으로 설정할 수 있다.유연성:ButtonProps를 사용하는 컴포넌트가 또는 등 다양한 요소를 렌더링할.. 2024. 12. 11.
[Nextjs] Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types 포스트상세페이지([id].tsx)에서 getServerSideProps에서 url에서 id를 받아(query)id로 getDoc 한개의 포스트를 조회해서 가져오는데createdAt이라는 타임스탬프 타입 속성이 return할때 에러가 남. return { props: { ...data, }, };이렇게 작성했더니Reason: object ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data typescreatedAt: createdAt ? JSON.parse(JSON.stringify(createdAt)) : null, 이런 에러가 남.  createdAt가 타임스탬.. 2024. 12. 11.
[HTML] button을 a로 감싸는게 일반적인가, 아니면 a를 button으로 감싸는게 일반적인가 과 의 사용 목적과 HTML 표준에 따라 둘 중 어느 쪽을 감싸야 하는지가 달라진다. 각 요소의 올바른 사용 사례와 일반적인 관례를 비교해보겠다.1. 로 을 감싸는 경우 Click Me목적: 네비게이션을 트리거하면서 버튼 스타일을 적용하려는 경우.의 기본 역할은 다른 페이지나 URL로 이동하는 것.문제점: HTML 표준 위반. 요소 내부에는 인터랙티브 요소(예: )를 포함하면 안된다.브라우저 동작이 비정상적일 수 있고, 접근성(A11y) 도구에서도 문제를 일으킬 수 있다.2. 으로 를 감싸는 경우 Click Me목적: 버튼으로 보이는 요소가 클릭되었을 때 링크로 이동하려는 경우.문제점: HTML 표준 위반입니다. 내부에는 href 속성이 동작하지 않으므로 의 고유 기능이 사라질 수 있다.CSS나 .. 2024. 12. 11.
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. 이 오류는 React가 Promise 객체를 직접 렌더링하려고 시도할 때 발생. Promise는 비동기 작업을 나타내는 객체이므로, React 컴포넌트가 이 객체를 렌더링하려고 하면 오류가 발생한다. React는 Promise 객체를 렌더링할 수 없어, 이문제를 해결하려면 비동기 데이터를 올바르게 처리해야한다. 문제 원인비동기 작업에서 반환된 Promise를 JSX에서 직접 렌더링하려고 할 때 발생한다.난... 코파일럿으로 코드 수정하다가 함수형 컴포넌트에서 async함수로 선언해버린것같음.해결 방법Promise 객체가 JSX에서 렌더링되지 않도록 하려면, 비동기 작업이 완료된 후 데이터를 렌더링해야 한다. 이를 위해 React의 상태를 사용하여 데이터를 가져온 후, 비동기 작업이 완료될 때만 렌더링하도.. 2024. 12. 10.
삼항연산자보다 더 간결하게 쓰기(논리연산자, nullish 널 병합연산자 `??`) image src에 previewImgUrl 값이있으면 previewImgUrl없으면 '/images/common/noImage.png'을반환하게 일반적으로는 삼항연사자를 사용한다.근데 previewImgUrl가 중복되니 좀 더 간결하게 쓰고싶어진다.논리연산자 ||||는 previewImgUrl이 null, undefined, false, 0, ''(빈 문자열)일 때 기본 값을 적용한다.const previewImgUrl = ''; // 빈 문자열// 실제 src: '/images/common/noImage.png'빈 문자열이 기본 값으로 대체된다.빈 문자열이 falsy하기때문에 유효한 값일때는 ??을 사용nullish coalescing 연산자 ????는 previewImgUrl이 null 또는 und.. 2024. 12. 9.
React Props: setState와 함수 시그니처의 차이점 //함수 시그니처interface ModalProps { setIsModalOpen: (isOpen: boolean) => void; }// setStateinterface ModalProps { setIsModalOpen: React.Dispatch>}두 타입은 비슷해 보이지만 중요한 차이점이 있다. 사용 의도와 동작에 따라 적합한 상황이 나뉘며, 아래에서 각각의 의미를 설명하겠다.1. setIsModalOpen: (isOpen: boolean) => void이 타입은 함수 시그니처를 정의한다. setIsModalOpen은 단순히 boolean 값을 받아서 특정 작업을 수행하는 함수이다.예시:const handleModalToggle = (isOpen: boolean) => { console.lo.. 2024. 11. 19.
[SQLD] 데이터 모델링, 엔터티, 속성, 관계, 식별자 데이터 모델링데이터 모델링 정의와 특징현실 세계의 데이터를 약속된 표기법으로 표현하는 과정추상화현실 세계를 일정한 형식에 맞추어 표현하는 추상화의 의미를 가질 수 있다.단순화복잡한 현실을 제한된 언어나 표기법으로 이해하기 쉽게하는 단순화의 의미를 가진다.정확화모호함을 배제하고 누구나 이해가 가능하도록 정확하게 현상을 기술하는 정확화의 의미를 가진다.데이터 모델링 유의점중복여러 장소의 데이터베이스에 같은 정보를 저장하지 않도록 하여 중복을 최소화한다.비유연성데이터의 정의를 데이터의 사용 프로세스와 분리비일관성데이터 간의 상호 연관관계를 명확하게 정의하여 일관성 있게 데이터가 유지되도록 한다.데이터베이스 스키마 구조 3단계외부 스키마View 단계는 여러 사용자 관점으로 구성개념 스키마통합된 모든 사용자의 관.. 2024. 10. 24.
[React] 데이터 fetch와 state 관리는 페이지 vs 컴포넌트 ?? 데이터 fetch와 state 관리는 페이지 단에서 하는 것이 좋다. 1. 최소한의 네트워크 호출데이터를 한 번만 fetch하고, 그 데이터를 여러 컴포넌트에 전달할 수 있기 때문에 불필요한 네트워크 요청을 줄일 수 있다. 만약 각 컴포넌트에서 데이터를 개별적으로 fetch한다면, 불필요한 중복 호출이 발생할 수 있다.2. 상태 관리의 중앙 집중화페이지 단에서 fetch와 state 관리를 하면 여러 하위 컴포넌트에 데이터를 쉽게 전달할 수 있다. 이렇게 하면 상태 관리가 중앙 집중화되어 예측 가능하고 유지보수가 쉬워진다.3. UI 성능 최적화페이지 전체에서 데이터를 필요로 하는 경우, 한 번의 데이터 fetch로 모든 컴포넌트에 필요한 데이터를 공급할 수 있다. 이를 통해 로딩 상태를 일관되게 관리하고.. 2024. 9. 13.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바