본문 바로가기
반응형

안뇽

전체 글
111

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.
[TailwindCSS] container width 커스텀하기 Tailwind CSS에서 container 클래스를 사용시 기본적으로 각 뷰포트 크기마다 미리 정의된 너비를 설정하고 있다..추가로 원하는 대로 커스터마이즈할 수 있있는데, 가운데 정렬이나 패딩도 적용할 수 있다.이 기본 설정을 커스터마이즈하려면 tailwind.config.js 파일에서 container 설정을 수정하면 된다.tailwindcss.config.js에 container 설정 추가프로젝트의 루트 디렉토리에 있는 tailwind.config.js. 만약 이 파일이 없다면, npx tailwindcss init 명령어를 사용하여 생성한다.theme 섹션 아래에 container 설정을 추가하여 각 뷰포트 크기별로 container의 최대 너비를 설정할 수 있다.[커스텀 예시]import ty.. 2024. 8. 27.
프론트엔드에서 하이드레이션(Hydration)이란? 하이드레이션(Hydration) 개념하이드레이션(Hydration)은 프론트엔드 개발에서 서버사이드 렌더링(SSR, Server-Side Rendering)과 관련된 중요한 개념이다. 서버사이드 렌더링은 웹 페이지를 서버에서 미리 렌더링하여 클라이언트에게 HTML을 전달하는 방식이다. 이때 클라이언트 측에서 자바스크립트를 통해 추가적인 기능(예: 이벤트 처리, 상태 관리 등)을 활성화하는 과정을 하이드레이션이라고 한다.왜 하이드레이션이 필요한가?빠른 초기 로드:서버사이드 렌더링을 통해 브라우저는 즉시 HTML을 표시할 수 있어 초기 로드 속도가 빠르다.사용자는 화면이 빠르게 표시되는 경험을 할 수 있다.동적 상호작용 가능:서버가 렌더링한 HTML만으로는 버튼 클릭, 폼 제출 등 동적 상호작용이 불가능하다.. 2024. 8. 22.
[nextjs/react-select] Warning: Prop id did not match. Server: "react-select-4-live-region" Client: "react-select-3-live-region" error 문제 Warning: Prop id did not match. Server: "react-select-4-live-region" Client: "react-select-3-live-region" 이 경고는 서버와 클라이언트에서 렌더링된 결과가 일치하지 않을 때 발생함주로 서버 사이드 렌더링(SSR) 환경에서 발생하며,클라이언트와 서버 사이에서 일관성 없는 ID가 생성될 때 발생할 수 있다.경고의 원인react-select와 같은 라이브러리는 고유한 id를 각 컴포넌트에 할당하는 경우가 있다. 이 고유한 id는 클라이언트와 서버가 서로 다른 순서나 방식으로 할당하면 달라질 수 있다. 예를 들어, 컴포넌트가 처음 서버에서 렌더링될 때와 클라이언트에서 하이드레이션될 때 할당된 id가 서로 다르면 이 경고가 발생한다.. 2024. 8. 22.
OpenAI API의 입력과 출력 이해하기 OpenAI API란?OpenAI가 만든 다양한 AI모델을 개발자가 활용할 수 있도록 만든 APIhttps://platform.openai.com/docs/overviewOpenAI API의 이해OpenAI API의 입력과 출력이 어떤 것인지 정확히 이해한다.생성형 AI가 무엇인지 이해한다. LLM(Large Language Model)의 입력과 출력이 무엇인지 이해한다. LLM이 어떻게 동작하는지 이해한다. ChatGPT가 어떻게 만들어졌는지 간략하게 이해한다. 생성형 AI란?생성형 AI란 데이터를 학습하여 새로운 콘텐츠를 생성하는 인공지능 기술이다. 텍스트, 이미지, 음악, 비디오 등을 자동으로 창작할 수 있는 능력을 갖추고 있다. GPT와 DALL-E 같은 모델이 대표적이다. 주요 특징은 학습된 데.. 2024. 8. 16.
[TIL] useEffect/onClick 내에서 비동기 처리 useEffect내에서 비동기 처리useEffect 훅에서 비동기 함수 호출을 감싸는 이유를 전문적으로 설명하면 다음과 같다.React의 useEffect 훅은 컴포넌트가 렌더링될 때 특정 작업을 수행할 수 있게 해주는 훅이다. useEffect의 리턴 값은 클린업 함수 또는 undefined여야 하며, 이는 다음 렌더링 전에 수행할 정리 작업을 정의한다. 따라서 useEffect는 프로미스(Promise)를 리턴할 수 없다.비동기 함수를 직접적으로 useEffect에 전달하면 함수가 프로미스를 리턴하게 된다. 그러나 useEffect는 클린업 함수를 기대하므로 프로미스를 직접 반환하는 것은 올바르지 않다. 이에 따라 비동기 작업을 useEffect 내부에서 수행하려면 즉시 실행 함수(IIFE, Imme.. 2024. 8. 8.
[TIL] 왜 !!를 사용하는가? (double negation operator, double bang) 느낌표 두개 !! 연산자는 자바스크립트에서 흔히 "double negation" 또는 "double bang"이라고 불린다. 이 연산자는 값의 truthiness를 명시적으로 boolean 타입으로 변환하는 데 사용된다.사용 예!! 연산자의 일반적인 사용 예는 다음과 같다:const value = "some string";// Double negation to convert to booleanconst isTruthy = !!value;console.log(isTruthy); // true동작 원리첫 번째 !는 값을 부정(negate)하여 논리적 반전을 수행한다. 이 단계에서 truthy 값은 false로, falsy 값은 true로 변환된다.두 번째 !는 다시 한 번 부정하여 원래 값의 truthine.. 2024. 8. 8.
Javascript 클로저 https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저의 정의MDN 정의: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.코어 자바스크립트 정의: 어떤 함수 A에서 선언한 변수를 참조하는 내부 함수 B를 외부로 전달할 경우, 함수 A의 실행 컨텍스트가 종료된 이후에도 그 변수가 사라지지 않는 현상.예제 코드function doSomething() { let x = 10; function sum(y) { return x + y; }; return sum;}const add = doSomething();console.log(add(5)); // 15클로저 현상의 동작방식LexicalEnvironment: 코드 실행 컨텍스트가 .. 2024. 8. 8.
디바운싱과 쓰로틀링(Debouncing&Throttling) 목차디바운스란?디바운싱 사용 예시디바운싱 코드쓰로틀링이란?쓰로틀링 사용 예시쓰로틀링 코드디바운싱과 쓰로틀링의 차이Leading edge vs Trailing edgeLeading edge 예시Debounce Leading Edge vs Throttling정리1. 디바운스란?전자에서 기계적인 접점이 붙거나 떨어질 때 발생하는 바운싱 현상을 방지하기 위한 기법에서 유래. 프로그래밍에서는 연이어 발생하는 이벤트를 하나의 그룹으로 묶어서 처리, 주로 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용.2. 디바운싱 사용 예시창 크기 조절 이벤트: 창 크기가 변할 때마다 이벤트가 발생하는 것을 방지하고, 크기 조절이 끝난 후에만 이벤트가 발생하도록 설정.디바운싱을 적용하지 않으면 창 크기가 변할 때마다 이벤.. 2024. 8. 8.
리액트 18버전 변경점(useTransition, Suspense and SSR, Automatic Batching) 1. useTransition블로킹렌더링문제한번 렌더링 연산이 시작되면 멈출 수 없음대형화면 업데이트의 경우 렌더링되는동안 페이지 지연이 발생useTransitionuseTransition 훅은 사용자가 상태를 전환할 때 UI 업데이트를 더 부드럽게 만들기 위해 도입되었다. 이는 UI의 일부가 비동기 작업으로 인해 느려지는 것을 방지하고, 사용자가 인터랙션을 할 때 더 좋은 경험을 제공한다.기능사용자 인터페이스의 느린 업데이트를 처리하기 위해, 긴급하지 않은 업데이트를 우선 순위가 낮은 작업으로 처리한다.사용자는 여전히 긴급한 업데이트(예: 버튼 클릭)에 빠르게 반응하는 UI를 경험한다.사용법import { useTransition, useState } from 'react'; function MyCom.. 2024. 7. 24.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바