분류 전체보기91 React 상태 관리 최적화: useState에서 useReducer로 전환하기 useState에서 useReducer로의 전환: 복잡한 상태 관리 최적화React 애플리케이션에서 상태를 관리하는 방법은 다양하다. 가장 기본적인 상태 관리 방법으로는 useState가 있지만, 상태 로직이 복잡해지거나 관련된 액션이 많아질 경우 useReducer를 활용하는 것이 더 효율적이다. 이 글에서는 useState와 useReducer의 차이점과 useReducer를 적용하는 방법에 대해 살펴본다.1. useState vs useReduceruseStateuseState는 React 컴포넌트 내부에서 상태를 관리하는 가장 간단한 방법이다.그러나 상태 로직이 복잡해질수록 useState를 여러 개 사용하는 경우가 늘어나며, 상태 업데이트 로직이 분산될 가능성이 있다.useState 예제impo.. 2025. 2. 3. 브라우저의 렌더링 과정과 React의 최적화 기법 브라우저의 렌더링 과정과 React의 최적화 기법웹 애플리케이션이 사용자에게 화면을 제공하는 과정은 여러 단계로 이루어진다. 특히 브라우저가 HTML, CSS, JavaScript를 처리하여 화면을 그리는 과정은 성능 최적화와 직결되며, React와 같은 라이브러리는 이러한 과정을 최적화하는 다양한 기법을 제공한다.1. 브라우저의 렌더링 과정웹페이지를 불러오는 과정에서 브라우저는 다음과 같은 순서로 리소스를 처리한다.HTTP(S) 요청 및 리소스 다운로드사용자가 특정 URL을 입력하면, 브라우저는 해당 서버와 HTTP(S) 프로토콜을 통해 통신하고 필요한 HTML, CSS, JavaScript, 이미지 등의 리소스를 다운로드한다.HTML 파싱 및 DOM(Document Object Model) 생성브라우.. 2025. 1. 31. [TIL] npx, next lint 명령어, package.json과 package-lock.json의 차이 npxnpx create-next-app@latest 로 next application 을 생성할 수 있다. 문득 npx 는 무엇인지 궁금해서 간단히 찾아보았다. npx는 Node.js와 함께 제공되는 패키지 실행 도구로, npm v5.2.0 이상에서 기본적으로 포함되어 있다. Node 패키지 관리자인 npm과 함께 사용되며, 로컬에 설치되지 않은 패키지나 CLI(Command Line Interface) 명령어를 별도 설치 없이 실행할 수 있다. 그래서 어떤 프로젝트에서 next가 설치되지 않은 상황에서도 npx create-next-app@latest 를 실행하여 next js 어플리케이션이 실행될 수 있는 것이다. npx create-next-app@latest 가 실행되면 npx는 create.. 2025. 1. 15. [iframe 사용법 및 속성값 가이드] MDN 문서를 기반으로 작성한 가이드 문서 iframe 태그: 인라인 프레임 요소에 대한 가이드HTML의 요소는 현재 문서 내에 다른 HTML 페이지를 중첩하여 임베딩할 수 있도록 하는 강력한 도구입니다. 이 가이드는 iframe 사용법을 단계별로 설명하며, 각 속성과 기능을 상세히 다룹니다.1. iframe의 기본 개념iframe은 중첩된 브라우징 컨텍스트(browsing context)를 제공하여 별도의 HTML 페이지를 현재 페이지 안에 임베딩합니다. 각 iframe은 독립적인 문서 환경을 가지며, 자체 URL 내비게이션을 지원합니다.최상위 브라우징 컨텍스트: 부모가 없는 브라우징 컨텍스트(일반적으로 브라우저 창).부모 브라우징 컨텍스트: iframe을 포함하고 있는 브라우징 컨텍스트.⚠️ 주의: iframe은 추가적인 메모리와 컴퓨팅 리.. 2024. 11. 19. webStorm에서 계속 github Token 인증을 다시 하라고 할때... 잘쓰고 있던 webstorm에서 갑자기 github과의 인터랙션이 있을 때마다 (pull 받거나, push 하거나 등) 다시 github 연동을 하라고 시킨다. 토큰을 입력해서 로그인을 시켜놔도 다음 액션에서 또 다시 연동요청을 한다 ...! 찾아봤는데 원격 저장소를 끊었다가 다시 add 하면 된다고해서 해봤는데 여전히 동일하다 뒤져본 결과.... webStorm 설정 > Git 에서 가장 하단의 ☑️ 자격 증명 헬퍼 사용 체크가 해제되어있었고, 요 놈을 체크하고 적용 - 확인한 뒤에 깃헙 로그인을 하면 다시는 뜨지 않는다!! 삽질하고 계신 분들께 도움이 되기 바라며..! ㅎㅎ 2024. 7. 24. [javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까? new 연산자.. 2024. 4. 25. 이전 1 2 3 4 ··· 16 다음 반응형
