소개pnpm은 NPM의 성능을 개선하기 위해 만들어진 패키지 매니저입니다. pnpm은 기본적으로 패키지를 하드 링크로 관리하여, 패키지가 중복 저장되지 않도록 최적화합니다. 이 방식은 디스크 사용량을 줄이고 설치 속도를 크게 향상시킵니다.특징pnpm은 패키지를 중복 저장하지 않으며, 하드 링크를 사용하여 디스크 공간을 절약합니다.pnpm은 패키지를 로컬에 중복으로 설치하는 대신, 중앙 저장소를 사용하여 모든 패키지를 한 번만 다운로드하고, 그 후 프로젝트별로 하드 링크를 통해 패키지를 연결pnpm은 프로젝트별로 패키지를 격리된 폴더에 설치하며, 덕분에 의존성 충돌을 방지할 수 있습니다. 패키지는 실제로 중복 설치되지 않고, 하드 링크를 통해 연결됩니다.의존성 관리와 패키지 설치가 매우 빠릅니다.node_..
css의 background 속성 사용 { background-image: url("bg.gif"); } 태그에 alt 속성을 빈 값으로 사용 태그에 aria-hidden 사용 태그에 role="presentation" 사용 이외의 것들 .visually-hidden { /* 일반적인 흐름에서 항목을 제거 */ position: absolute; /* 잘못 발음되거나 뭉개지는 텍스트를 위한 해결책 */ white-space: nowrap; /* 가능한 가장 작은 크기로 설정 (일부 화면 낭독기는 높이와 너비가 0인 요소를 무시함) */ width: 1px; height: 1px; /* 크기 조정 후 넘치는 콘텐츠 숨기기 */ overflow: hidden; /* 요소의 크기를 변경할 수 있는 모든 속성 ..
기존 Reset CSS가 아닌 최신 Reset CSS가 나왔다고 번역이 된 글을 발견해서 학습을 진행했습니다. /* box-sizing 규칙을 명시합니다. */ *, *::before, *::after { box-sizing: border-box; } /* 폰트 크기의 팽창을 방지합니다. */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } /* list를 role값으로 갖는..
싱글톤 패턴은 디자인 패턴 중 하나로, 클래스의 인스턴스가 단 하나만 생성되도록 보장하는 패턴입니다. 전역 변수를 사용하는 것보다 더 안전하며 구조화된 방법으로 객체를 관리하는 데 유용합니다. 장점 1. 제한된 인스턴스 : 인스턴스가 단 하나만 생성되므로 메모리 사용량을 줄일 수 있습니다. 2. 전역 접근 : 앱의 어디에서나 해당 싱글톤 인스턴스에 쉽게 접근할 수 있습니다. 3. 지연 로딩 : 실제로 필요할 때만 인스턴스를 생성할 수 있습니다. 자바스크립트로 싱글톤 구현 const Singleton = (function() { let instance; function createInstance() { const object = new Object("I am the instance"); return obj..
DNS 서비스는 도메인 네임인 (예: www.naver.com)을 검색하면 IP 주소인 (예: 123.45.678.901)로 바꿔준다. 파일 검색 사용자가 도메인 네임을 입력하면 윈도우 운영체제는 해당 도메인 네임에 대응하는 IP주소를 다음과 같은 경로에 위치한 파일에서 먼저 검색한다. C:\Windows\System32\drivers\etc\hosts 해당 파일을 열면 다음과 같은 내용이 있다. # Copyright (c) 1993-2009 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host na..
스크롤이 생기는 이유들!! 1. 브라우저의 주소 표시줄 높이: 특히 모바일 브라우저에서 100vh는 종종 주소 표시줄을 포함한 전체 높이를 의미합니다. 그래서 실제로는 화면보다 조금 더 길게 나타나게 됩니다. 2. Box Model: 기본적으로 width와 height는 컨텐츠의 크기만을 포함하기 때문에, padding, border, margin 등이 추가되면 요소의 전체 크기가 100vh보다 커질 수 있습니다. 3. 다른 요소들: 해당 요소 외에도 페이지에 다른 요소들이 존재할 경우 그 요소들의 높이 때문에 스크롤이 발생할 수 있습니다. 해결 방법들 1. 모바일 브라우저의 주소 표시줄 때문에 문제가 발생한다면, window.innerHeight를 사용하여 실제 높이를 얻고 이를 요소에 적용할 수 있습..
useImmer? useImmer는 상태 관리 라이브러리인 React의 Hooks를 사용하여 불변성을 유지하면서 상태를 쉽게 업데이트할 수 있도록 도와주는 라이브러리입니다. 이를 사용하면 상태를 직접 수정하는 대신 불변성을 유지하는 방식으로 상태를 업데이트할 수 있습니다. useImmer 설치하기 먼저, useImmer를 설치해야 합니다. NPM을 사용하는 경우 다음과 같이 설치할 수 있습니다: npm install immer 예시 코드 import React from 'react'; import { useImmer } from 'immer'; const TextList = () => { // useImmer로 상태 생성 const [textList, setTextList] = useImmer([]); ..
Key의 역할과 중요성 React에서는 컴포넌트 리스트를 렌더링할 때 각 요소에 고유한 key를 지정해야 합니다. key는 React가 각 컴포넌트를 구별하고 추적하는 데 사용되며, 업데이트 시 효율적으로 DOM을 업데이트하는 데에 중요한 역할을 합니다. key가 없거나 중복된 key를 사용하면 React가 잘못된 컴포넌트를 업데이트하거나 불필요한 렌더링을 발생시킬 수 있습니다. 배열의 index를 key로 사용하는 문제점 예를 들어 다음과 같은 과일 배열이 있습니다. const fruits = ['apple', 'banana', 'orange']; 이 배열을 컴포넌트로 렌더링하고 index를 key로 사용하면 const fruitList = fruits.map((fruit, index) => ); 다음..
HTTP 요청을 취소하는 경우 1. 사용자의 요청 취소 사용가 웹 페이지에서 요청을 시작했지만, 해당 요청이 더 이상 필요하지 않거나 취소해야 할 경우가 있다. 예를 들어서 검색 요청을 시작했지만 검색어를 변경하거나 다른 작업을 수행하려고 할 때 해당 요청을 취소할 수 있다. 2. 네트워크 지연으로 인한 취소 요청 사용자의 요청에 대한 응답이 오랜 시간 동안 지연되는 경우, 사용자가 경험을 향상시키기 위해 해당 요청을 취소할 수 있다. 사용자는 불필요한 대기 시간을 피하고 빠른 응답을 받을 수 있다. 3. 페이지 이동으로 인한 요청 취소 페이지가 이동되거나 컴포넌트가 unmount되는 등의 상황에서 해당 페이지 또는 컴포넌트와 관련된 요청을 취소할 수 있다. 이렇게 하면 불필요한 요청을 줄이고 리소스 절..
useCallback은 함수를 메모이제이션해서 콜백함수를 반환해 의존성 배열에 있는 요소가 변경되었을 때 실행된다. 예를 들어 다음과 같은 코드가 있다고 가정해보자. (Demo 컴포넌트는 신경쓰지 않아도 된다) function App() { const [showParagraph, setShowParagraph] = useState(false); const [allowToggle, setAllowToggle] = useState(false); const toggleParagraphHandler = useCallback(() => { if (allowToggle) { setShowParagraph((prev) => !prev); } }, [allowToggle]); const allowToggleHandle..
