분류 전체보기 (399) 썸네일형 리스트형 [JS] input file 에 등록된 이미지를 임시로 읽어오는 방법 주어진 이미지 파일을 선택하면 해당 이미지를 읽어서 미리보기로 출력 이 기능을 잘 활용하면, 유저가 첨부한 이미지 파일을 서버로 전송하기 전에 미리보기로 형태로 제공해줄 수 있다고 합니다. react 나 vue 같은 라이브러리 및 프레임워크에서 사용하려면 별도의 패키지를 사용하거나 아니면 상황에 맞게 가공해야 하겠지만, 이런 방식이 있다는 것에 의미를 두어 봅니다. const wImage = document.querySelector('.image_input') wImage.addEventListener("change", (e) => { const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.addEventListen.. [react hooks] 3. useContext 에 대한 정리 useContext 와 사용 시 주의사항 리액트에서 부모 컴포넌트에서 하위 컴포넌트(자식 컴포넌트)로 데이터를 전달할 때는 props 라는 속성을 인자로 넘겨주어 해당 자식 컴포넌트 내에서 매개변수로 받아와 사용하게 된다. 이러한 방식은 데이터를 명시적으로 연결하는 데 있어서 아주 좋은 방법이지만, 부모 컴포넌트에서 리프 컴포넌트에 도달하는 파이프라인이 길고 복잡할 수록 props 를 사용한 전달 방식은 한계에 봉착할 수 있다. useContext 는 이러한 문제를 해결할 수 있도록 데이터를 전역적으로 관리할 수 있도록 해준다. 단, 주의할 점은 useContext 는 프로바이더(제공자)를 통해 전달된 값이 존재하는 컴포넌트를 값이 변동될 때 마다 리렌더링한다는 점이다. 따라서 무턱대고 useContex.. [react-router-dom] useSearchParams () 에 대한 정리 useSearchParams() 현재 위치의 쿼리 매개변수(쿼리 문자열)에 대한 데이터를 읽고 수정하는데 사용하는 리액트 라우터 돔 라이브러리에서 제공하는 훅이다. 참고) 쿼리 문자열과 쿼리 매개변수를 혼용해서 사용하고 있는데, 둘 다 같은 말이다. 사용예시 리액트의 useState 훅과 유사하게 두 개의 변수를 제공하는데, 하나는 쿼리 매개변수의 데이터가 담겨 있는 searchParams 변수이고, 두 번째는 쿼리 매개변수를 개발자 혹은 사용자가 직접 지정할 수 있는 setSearchParams 함수를 제공한다. searchParams 변수에는 현재 쿼리 문자열이 {key : value} 형식으로 저장되어 있으며 get 메서드에 '키'를 전달하면 해당 키의 value을 읽어서 출력해준다. import .. [react hooks] 2. useMemo() useMemo() 리액트의 useMemo는 함수 컴포넌트 내에서 계산 결과를 메모이제이션하는 훅이다. 메모이제이션은 이전에 계산된 결과를 저장해 두었다가 동일한 입력에 대해 다시 계산하지 않고 저장된 결과를 반환함으로써 성능을 최적화하는 기술이다. useMemo를 사용하면 특정 계산이 매번 다시 수행되지 않고 캐시된 결과를 사용할 수 있다. 다음은 useMemo를 사용한 예시 코드이다. import React, { useMemo} from 'react'; const MyComponent =() =>{ // 복잡한 계산 로직을 가정해봅시다. const expensiveCalculation =(a, b) =>{ console.log('계산 중...'); // 여기서 실제로 계산을 수행하는 로직이 들어갑니다... [단순용어] 캐시메모리/캐시 히트/캐시 미스 캐시메모리캐시 메모리(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') { .. 이전 1 ··· 27 28 29 30 31 32 33 ··· 50 다음
