기존 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..
문제 유형 - 자료구조 - 우선순위 큐 문제 널리 잘 알려진 자료구조 중 최소 힙이 있다. 1. 최소 힙을 이용하여 다음과 같은 연산을 지원하는 프로그램을 작성하시오. 2. 배열에 자연수 x를 넣는다. 배열에서 가장 작은 값을 출력하고, 그 값을 배열에서 제거한다. 프로그램은 처음에 비어있는 배열에서 시작하게 된다. 출력 입력에서 0이 주어진 횟수만큼 답을 출력한다. 만약 배열이 비어 있는 경우인데 가장 작은 값을 출력하라고 한 경우에는 0을 출력하면 된다. 예제 입력 9 0 12345678 1 2 0 0 0 0 32 예제 출력 0 1 2 12345678 0 풀이 const [N, ...ARR] = require('fs') .readFileSync(process.platform === 'linux' ? ..
useEffect useEffect는 컴포넌트의 라이프사이클에 특정 동작을 연결할 때 사용된다. 컴포넌트가 렌더링된 이후에 비동기 작업을 수행하거나, 외부 API 호출, 이벤트 구독 등의 작업을 수행할 수 있도록 해준다. useEffect(callback, [deps]); useEffect의 첫 번째 매개변수로 전달되는 콜백 함수는 컴포넌트가 렌더링될 때마다 실행되거나, 특정 의존성이 변경될 때만 실행될 수 있다. 또한, useEffect의 콜백 함수는 반환 값으로 클린업(clean-up) 함수를 반환할 수 있다. 클린업 함수는 컴포넌트가 소멸될 때 실행되거나, 다음 useEffect 실행 전에 호출된다. useCallback useCallback은 콜백 함수의 메모이제이션된 버전을 반환한다. useMe..
