본문 바로가기
반응형

안뇽

전체 글
133

[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.
Node.js란(등장배경/내부구조/작동방식) Nodejs의 등장배경Nodejs란?자바스크립트를 실행시키는 런타임 환경자바스크립트는 브라우저 종속 언어였다. 브라우저 밖에서 실행하려는 몇가지 시도가 있었는데, 이렇게 실행된 js의 속도가 너무나 느려서 사용되진 못함 구글에서 V8엔진을 탑재한 크롬브라우저가 나오면서 바뀜.크롬브라우저는 더 빨리 js를 실행할 수있게됨 V8엔진코드도 오픈소스로 공개됨이때 구글 개발자가 Node프로젝트를 시작하게됨. 이게 Nodejs로 탄생하게됨비동기 이벤트 주도 Javascript 런타임으로써 Nodejs는 확장성 있는 네트워크 어플리케이션을 만들 수 있도록 설계되었다.“비동기 이벤트 주도”자바스크립트에서 비동기를 처리하는 방법: Async, await, Promise, callback…이벤트 주도 방식이란?Node.j.. 2024. 7. 23.
[Python] 알고리즘 공부 3일차 Python Coding Test TILDATE: 2024-07-17LEVEL: 0RANK: 152,048위 → 148,939위중앙값 구하기중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요.def solution(array): array.sort() answer = array[len(array)//2] return answersort()가 시간복잡도가 큰데 다른 방법이 있을까??-> 대부분 sort()나 sorted(array)를 쓰는 듯.sorted(array)[len(a.. 2024. 7. 17.
[Python] 알고리즘 공부 2일차 Python Coding Test TILDATE: 2024-07-16LEVEL: 0RANK: 157,291위 → 152,048위배열 두 배 만들기정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요.def solution(numbers): for i in range(len(numbers)): numbers[i] *= 2 return numbers# 다른사람 풀이def solution(numbers): return [num*2 for num in numbers]짝수 홀수 개수정수가 담긴 리스트 num_list가 주어질 때, num_list의 원소 중 짝수와 홀수의 개수를 담은.. 2024. 7. 17.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바