CHY'S IT

다국어 지원 기능을 React 프로젝트에 추가하려면, 일반적으로 i18n(국제화)을 위한 라이브러리인 react-i18next를 사용합니다. 이를 통해 번역 파일을 관리하고, 여러 언어로 텍스트를 쉽게 변경할 수 있습니다. 아래는 다국어 지원을 위해 react-i18next를 설정하고 사용하는 방법입니다.1. 필요한 패키지 설치우선, 다국어 지원을 위해 필요한 패키지들을 설치해야 합니다.npm install i18next react-i18next i18next-browser-languagedetector2. i18next 설정 파일 생성i18n.js 파일을 생성하여 다국어 지원을 설정합니다. 여기서 번역 리소스를 정의하고, 브라우저 언어 감지 등을 설정할 수 있습니다.// src/i18n.jsimport..

position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..

로컬 저장소를 GitHub와 연동하는 방법을 단계별로 안내해 드리겠습니다. 이 과정을 통해 로컬에서 작업한 내용을 GitHub 저장소에 푸시할 수 있게 됩니다. 아래의 단계를 따라 주세요.1. Git 초기화 및 설정먼저, 로컬 저장소에서 Git을 설정하고 연동을 시작합니다.Git 설치 확인: Git이 설치되어 있는지 확인합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 입력하세요.설치되어 있지 않다면 Git 공식 사이트에서 설치할 수 있습니다.bash코드 복사git --versionGit 초기화: 로컬 프로젝트 폴더로 이동한 후, Git 저장소를 초기화합니다.bash코드 복사cd /path/to/your/project git init사용자 정보 설정: Git에서 사용할 사용자 이름과 이메일을 설정합니..

1.1 Context 설정하기import React, { createContext, useState, useContext, ReactNode } from 'react';// NotificationContext 생성interface NotificationContextType { hasNoti: boolean; setHasNoti: (value: boolean) => void;}const NotificationContext = createContext(undefined);interface NotificationProviderProps { children: ReactNode; // children 타입을 명시적으로 정의}// NotificationProvider 컴포넌트export const Notifi..

이번 'MK-Blog' 를 개발하면서 글 작성 / 수정 하는 페이지에 ReactQuill을 넣었습니다.해당 툴에다가 이미지들을 넣으면 이미지 태그의 src 가 한없이 깁니다. 서버에 전송할 때, 길이 제한때문에 전송 실패할 확률이 큽니다. 그래서 저는 src 를 image_1, image_2 이런식으로 보내기로 했습니다. (저희는 이미지파일만을 또 추출하여 서버에 전송하기 때문에 가능한 방법이었습니다!! 잘 알아보셔야 합니다) /** * content 영역의 img 태그들을 모두 가져와서 src를 image_${index + 1}로 변경하는 작업 */ let newContent = ''; const quillEditor = quillRef.current?.getEditor()..

1. IntersectionObserver의 관찰 조건 및 실행 시점 문제댓글 목록의 렌더링이 완료되지 않았거나, DOM의 변화를 감지하기 전까지 IntersectionObserver가 정상 작동하지 않을 수 있습니다. 이 경우, 새로운 데이터를 불러올 때 IntersectionObserver가 즉시 반응하지 않는 문제가 발생할 수 있습니다.2. 해결책방법 1: useLayoutEffect로 렌더링 이후 바로 IntersectionObserver 실행useEffect 대신 useLayoutEffect를 사용하면, DOM 업데이트 후 바로 IntersectionObserver를 실행할 수 있습니다.import { useLayoutEffect } from 'react';useLayoutEffect(() =>..

URLSearchParams는 JavaScript에서 URL의 쿼리 문자열(query string)을 쉽게 다룰 수 있도록 해주는 내장 API입니다. 주로 URL의 파라미터들을 파싱하거나, 새 파라미터를 추가하거나, URL을 수정할 때 사용됩니다. 브라우저 환경에서 주로 사용되며, URL에 포함된 쿼리 매개변수를 간단하게 처리할 수 있도록 돕습니다.기본적인 사용법URL에서 쿼리 파라미터를 추출새로운 쿼리 파라미터를 추가쿼리 파라미터 수정쿼리 파라미터를 삭제문자열로 변환생성URLSearchParams 객체는 URL의 쿼리 문자열을 인자로 받아 생성할 수 있습니다. // URL의 쿼리 문자열에서 생성const params = new URLSearchParams('?name=John&age=30'); // 또..

SSE (Server-Sent events)?서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술입니다.- 보통의 HTTP 통신 : 요청 1번 응답 1번 입니다.- SSE(Server-Sent events) : 한번의 연결로 여러번의 응답을 실시간으로 받을 수 있습니다.- 서버에서 클라이언트로의 단방향 스트리밍 EventSource :SSE 연결을 편리하게 할 수 있도록 해주는 Web API입니다. 실제로 SSE 구현해보기EventSource 는 헤더 설정이 불가능합니다. 따라서 event-source-polyfill 패키지의 도움을 받아야 합니다.event-source-polyfill ? : 이 라이브러리는 표준 EventSource를 폴리필로 제공하여, 추가적인 기능(예: 헤더 설정)을 지원합니다...

Intersection Observer? scroll 이벤트 : - 스크롤 시 짧은 시간 내에 수 백, 수 천의 이벤트가 동기적으로 실행될 수 있어, 성능에 악영향을 줄 수 있습니다. Intersection Observer API : - 루트 요소와 타겟 요소의 교차점을 관찰합니다.  - 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있습니다.- scroll 이벤트와 다르게 교차 시 비동기적으로 실행됩니다. - 성능상 유리합니다. 교차점 정보는 다음과 같은 여러 가지 이유로 필요합니다.페이지가 스크롤될 때 이미지나 다른 콘텐츠가 레이지 로딩되는 현상.사용자가 페이지를 넘길 필요가 없도록 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 "무한 스크롤" 웹사이트를 구현합니다.광..