전체 글 (395) 썸네일형 리스트형 [단순용어] 캐시메모리/캐시 히트/캐시 미스 캐시메모리캐시 메모리(cache memory)는 CPU가 더 빠르게 데이터를 처리하기 위해 사용하는 고속 버퍼 메모리입니다. 캐시 메모리는 CPU와 메인 메모리(main memory) 사이에 위치하여 CPU가 필요로 하는 데이터를 미리 캐시에 저장해두는 역할을 합니다. 이는 메인 메모리나 하드 디스크에 접근하는 것보다 훨씬 빠르기 때문에 시스템 성능을 향상시키는데 중요한 역할을 합니다. 캐시 메모리는 크게 두 가지로 나뉩니다. 하나는 L1 캐시(L1 cache)로 CPU 내부에 위치하며, 다른 하나는 L2, L3 등의 레벨 캐시(level cache)로 CPU 바깥에 위치합니다. 일반적으로 레벨이 낮은 캐시는 레벨이 높은 캐시보다 작지만 더 빠르고 비싸며, 레벨이 높은 캐시는 레벨이 낮은 캐시보다 크지만.. [단순용어] LF와 CR LF와 CR CR(Carriage Return)과 LF(Line Feed)은 모두 컴퓨터에서 줄바꿈을 표현하는데 사용되는 제어문자(Control Character)입니다. CR은 커서를 문자열의 가장 왼쪽으로 이동시키는 역할을 합니다. 즉, CR은 현재 위치한 커서를 해당 줄의 맨 앞으로 이동시키는 역할을 하며, 이로 인해 다음 문자열이 현재 문자열의 위쪽에 나타나게 됩니다. 반면에 LF는 커서를 다음 줄로 이동시키는 역할을 합니다. 즉, LF는 현재 위치한 커서를 다음 줄의 가장 왼쪽으로 이동시키며, 이로 인해 다음 문자열이 현재 문자열 아래쪽에 나타나게 됩니다. CR과 LF는 종종 함께 사용되며, 이 경우에는 줄바꿈을 나타내기 위해 CR+LF(CRLF)라는 표현이 사용됩니다. 예를 들어, Window.. [next.js] CSR(Clinet Side Rendering) 다른 글들도 그렇지만, 제가 이해한 내용을 바탕으로 정리하는 것이라 이렇게 출처가 없는 글의 경우 보시는 분들은 참고용도로만 쓰시길 바랍니다. 혹시나 잘못된 저의 글로 인해서 누군가 피해를 보는 일은 원치 않습니다. CSR(Clinet Side Rendering) 클라이언트 사이드 렌더링은 브라우저 렌더링에 필요한 모든 데이터를 서버 측에서 보내주면, 해당 데이터를 브라우저 측에서 받아와서 필요한 HTML, CSS, JS 등의 파일을 생성하여 브라우저 자체적으로 화면을 렌더링하는 방식을 의미합니다. 따라서 클라이언트 사이드 렌더링 방식의 웹 페이지는 초기 로딩 속도가 다른 렌더링 방식에 비해 느린 편 입니다. 하지만, 초기 렌더링이 느린 만큼, 그 이후에는 빠른 인터랙션 구현이 가능하여, 보다 모바일 앱.. [리액트] 키보드 방향키로 페이지 이동하는 기능에 쓰일 코드 저장 아래 코드에서 useEffect 훅을 사용하여 window 객체에 키보드 이벤트 리스너를 등록합니다. 이벤트 처리 함수 handleKeyDown에서는 ArrowRight와 ArrowLeft 키를 처리하는 예시 코드를 작성하였습니다. useEffect 훅의 cleanup 함수에서는 등록한 이벤트 리스너를 제거토록 합니다. 이렇게 함으로써 컴포넌트가 unmount될 때 이벤트 리스너가 자동으로 제거되어 메모리 누수를 방지할 수 있습니다. import { useEffect } from 'react'; function MyComponent() { useEffect(() => { const handleKeyDown = (e) => { // 키보드 이벤트 처리 if (e.key === 'ArrowRight') { .. [react 부트스트랩] 프로그래스 바 사용 설정 참고용 React에서 부트스트랩 프로그래스바를 사용하는 방법은 다음과 같습니다. 1. 설치 먼저 Bootstrap을 설치합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다: npm install react-bootstrap bootstrap 2. Bootstrap CSS import 사용하고자 하는 React 컴포넌트에서 Bootstrap CSS를 가져옵니다. 다음과 같은 코드를 작성합니다: import 'bootstrap/dist/css/bootstrap.min.css'; 3. 컴포넌트를 표시하고자 하는 영역에 사용 Bootstrap 프로그래스바 컴포넌트를 사용하여 프로그래스바를 만듭니다. 다음과 같은 코드를 작성합니다: import React from 'react'; import 'b.. [단순용어] ECMA - 262 ECMA - 262 ECMA-262는 ECMAScript 언어의 규격(standard)을 정의하는 문서입니다. ECMAScript는 자바스크립트의 표준화된 버전을 뜻하며, ECMAScript 규격은 ECMAScript를 구현하는 모든 브라우저, 런타임, 프레임워크 등에서 준수해야하는 규칙과 명세를 제공합니다. 따라서 ECMAScript 규격은 자바스크립트 코드가 어떻게 작동해야 하는지, 어떤 문법과 기능을 사용할 수 있는지 등을 명확하게 정의하고 있습니다. [react] 단순 자동 슬라이드 코드 정리 import { useState, useEffect } from 'react'; function AutoSlide({ images, intervalTime }) { const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCurrentIndex((currentIndex + 1) % images.length); }, intervalTime); return () => clearInterval(intervalId); }, [currentIndex, images.length, intervalTime]); return ( ); } 위 코드에 대해 설명하자면, useSta.. [java script] Private Class Fields [ ES2019 ~] Private Class Fields 2015년 ES6 에서 처음 등장한 클래스 내에서 필드선언 시 해당 필드 변수의 좌측에 #을 붙임으로써 외부에서 해당 변수에 대한 접근을 차단하는 문법이 ES2019 에 등장했습니다. 즉, '#변수명' 으로 선언된 변수는 외부에서 직접적으로 접근할 수 없고, 해당 변수를 간접적으로 참조하여 접근할 수 있게 가능함으로써 내부 구현을 숨김 으로써 정보은닉 및 보호를 효과적으로 달성토록 도와줍니다. class ExampleClass{ publicField = 10; // Public Class Field 입니다(내/외부 자유롭게 접근 가능). #privaField = 5; // private Class Field 입니다(내부에서만 접근 가능. getPrivateField(.. 이전 1 ··· 27 28 29 30 31 32 33 ··· 50 다음