1. useOutletContext React Router에서 제공하는 훅으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유하거나 기능을 전달하기 위해 사용한다. useOutletContext는 Outlet 컴포넌트의 context 속성을 통해 데이터를 전달 받는다.React Router를 사용한 페이지 내에서, 특정 라우트 계층 구조에서 데이터를 효율적으로 공유하고자 할 때 유용하다. 1-1. 기본 구조와 동작1. 부모 컴포넌트에서 context 설정부모 컴포넌트는 Outlet에 context 속성을 사용해 데이터를 전달한다.import { Outlet } from 'react-router-dom';function Parent() { const sharedData = { user: 'John Do..

1. HTTPHTTP는 클라이언트(브라우저)와 서버 간에 요청(Request)과 응답(Response)을 주고 받기위 위한 프로토콜(규칙)이다.TCP 기반 프로토콜클라이언트와 서버 연결을 수립한 후 메세지를 교환데이터를 패킷 단위로 전송하며, 수신 측에서 데이터를 검증한 뒤 응답을 보낸다.HTTP/1.1 에서는 요청-응답 한 번마다 연결이 종료되었지만, Keep-Alive 옵션을 통해 연결을 유지할 수 있다.HTTP/2 이후에는 멀티플렉싱을 사용하여 하나의 연결에서 여러 요청과 응답을 처리할 수 있다.데이터 누락 시 재전송 요청을 처리하여 신뢰성을 높임신뢰성을 보장하기 위해 3-way handshake로 연결을 설정하고, ACK(확인 응답)를 사용하여 패킷이 제대로 전달되었는지 확인할 수 있다. 문제가 ..

1. toLocaleString()number.toLocaleString([locales[, options]]) 매개변수locales(선택) : 사용한 로케일을 지정하는 문자열이나 문자열 배열이다. (예: en-US, ko-KR)options(선택) : 포맷 옵션을 설정하는 객체이다.const number = 1234567.89;// 기본 사용console.log(number.toLocaleString()); // 예: "1,234,567.89" (브라우저 설정에 따라 다름)// 특정 로케일 사용console.log(number.toLocaleString('ko-KR')); // "1,234,567.89" -> 한국어 로케일// 옵션 추가 (통화)console.log(number.toLocaleStrin..

현재 3개월 차, 느낀 점은.. 역시 강의를 보는 것, 책을 보는 것과 달리 내 손으로 직접 코드를 많이 쳐봐야 한다는 사실을 여전히 뼈저리게 느끼고 있다. 내 머리 속에는 이해가 되었지만, 이거를 코드로 입력 혹은 프로젝트를 진행하게 된다면 과연 내가 배운 내용들을 바로 적용 시킬 수 있을까? 라는 생각이 문득 든다...그래서 이번 강의를 들으면서 1주일에 한 번 투두리스트 혹은 2~3일에 한 번 조그만한 프로젝트를 만들어봐야겠다는 생각이 들었다. 배우는 것도 중요하지만 머리 깨지도록 해보는 것도 중요하다!이번 일요일에는 강의와 조금만한 프로젝트를 진행하고, 다음 주 부터는 내가 계획했던 것들을 진행 해봐야겠다.나태를 이겨내자.

1. React Router 의 개념Router에는 여러 종류가 있다. BrowserRouter : 브라우저의 history API를 사용, URL이 깔끔하게 유지HashRouter : URL에 #를 포함, 서버 설정이 필요 없지만 SEO에 불리함MemoryRouter : 메모리에서 라우팅 정보를 유지. 브라우저 히스토리를 사용하지 않는 환경(테스트용 등) 적합1-1. 라우트의 정의path 와 렌더링할 컴포넌트를 정의중첩 라우트를 부모 - 자식 관계 정리import { createBrowserRouter } from 'react-router-dom';const router = createBrowserRouter([ { path: '/', element: , children: [ ..

1. useMemouseMemo는 메모이제이션하여 불필요한 계산을 방지하는 React Hook이다. 즉, 특정 값이 변경되지 않으면 기존 계산 결과를 재사용하도록 하는 기능이라고 볼 수 있다.주요 목적은 무거운 계산이나, 렌더링 중 반복적으로 실행되는 연사을 최소화하여 성능을 향상시키는 것이다.import React, { useMemo } from 'react';const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);import로 useMemo를 가져온다. useMemo(() => {계산식}, [의존성])첫 번째 인자: 함수 -> 계산할 코드를 함수로 작성두 번째 인자: 의존성 배열 -> 배열 안의 값이 변경될 때만 첫..