전체 글

📌 상황프로젝트에서 Zustand 를 이용해 다크모드 기능을 구현하던 중, 현재 경로 정보를 가져오기 위해 useLocation() 훅을 사용하려고 했는데 다음과 같은 에러 메시지를 접하게 됐다.Uncaught Error: useLocation() may be used only in the context of a component 🔍 문제 분석번역을 해보니 "useLocation() 은 컴포넌트의 컨텍스트에서만 사용될 수 있습니다." 라는 의미였다.관련 문서를 찾아보니, 이 문제는 useLocation() 훅이 Router 컴포넌트의 자식으로 존재하지 않을 때 발생하는 오류였다. 나는 RouterProvider 를 사용해서 라우터를 관리하고 있었고, 아래와 같이 ThemeSwitcher 컴포넌트에..

❓ React.lazyReact.lazy 는 컴포넌트를 동적으로 불러오기 위해 사용되는 함수이다.이 함수는 컴포넌트를 import 해서 받아오고, 이걸 지연시켜서 로드할 수 있게 해준다. 쉽게 말하자면, lazy 는 게으르다는 뜻으로 실제로 컴포넌트가 필요할 때까지 로드를 미루는 역할을 한다.예를 들어, 웹사이트에 여러 페이지가 있을 때, 사용자가 처음 들어올 때 모든 페이지를 한 번에 불러오는 게 아니라! 실제로 필요한 페이지나 컴포넌트만 불러오게 함으로써 초기 로딩 시간을 줄여준다.이렇게 하면 사용자에게 더 빠른 경험을 제공할 수 있다. ❗️사용법 예시import React, { lazy } from 'react'const Home = lazy(() => import('@pages/home/Home...

❗ 문제출처: 프로그래머스 코딩 테스트 연습,https://school.programmers.co.kr/learn/courses/30/lessons/76501 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr어떤 정수들이 있습니다.이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다.실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.  ❓ 나의 풀이function solution(absolutes, signs) { let answer ..

❓ AliasAlias 는 "별명" 으로 번역된다.번역 그대로, Alias 는 긴 파일 경로를 → 짧고 기억하기 쉬운 별명으로 대체하여 접근할 수 있게 해주는 기능이다. 예시를 보자!기존에는 컴포넌트나 모듈을 불러올 때 이런 식으로 상대 경로를 사용했다. 이 방식은 파일 경로가 길어지거나 깊어질수록 가독성이 떨어질 뿐만 아니라, 파일 위치가 변경되면 경로를 일일이 수정해야 하는 불편함이 있다. import Header from '../../common/components/header/Header.jsx' 하지만, alias 를 사용하면? 특정 디렉토리 경로에 대해 짧고 직관적은 별칭을 설정하여, 간단한 경로로 불러올 수 있다. import Header from '@common/components/head..

❓ DOM 이란?DOM 은 Document Objct Model 의 약자로, 문서 객체 모델이라고 한다.DOM 은 웹 페이지를 구성하는 HTML 이나 XML 문서를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할을 한다.그리고 이렇게 변환된 구조를 통해 자바스크립트와 같은 프로그래밍 언어가 웹 페이지의 내용을 동적으로 바꾸거나 추가하거나 삭제할 수 있도록 도와준다. ++) 동적으로 바꾼다는 의미는? (동적 웹페이지)웹 페이지는 일반적으로 정적인 페이지로 시작된다.사용자가 웹 페이지를 열었을 때 그 페이지의 내용은 고정되어 있다는 뜻이다.동적으로 바꾼다는 것은 웹 페이지의 내용을 사용자와의 상호작용이나 다른 이벤트에 따라 실시간으로 수정할 수 있다는 의미이다. (버튼 조작, 양식 제출 등...) 이렇게 동..

❓ 웹 브라우저웹 브라우저는 웹 페이지를 탐색하고 표시하는 소프트웨어이다.간단히 말하자면, 인터넷에서 정보를 검색하고 원하는 사이트에 접속하게 해주는 프로그램이다.브라우저는 사용자 요청을 웹 서버에 전달하고, 서버로부터 받은 정보를 사용자에게 보여준다. 우리가 흔히 알고 있는 크롬, 인터넷 익스플로러, 사파리 등이 브라우저이다! 브라우저는 HTML, CSS, JavaScript 와 같은 정보를 처리하며, 이미지나 동영상 같은 다양한 미디어 파일도 함께 처리한다.또한, 보안 관리나 성능 최적화, 사용자 데이터 보호와 같은 기능도 수행한다. ❗ 브라우저가 화면을 그리는 과정1. HTML 렌더링웹 페이지의 구조를 담당하는 HTML 을 화면에 표시한다. 간단 설명:사용자가 특정 사이트에 접속하면, 브라우저는 서..