본문 바로가기

전체 글

 (136)
this - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. - 자바나 C++ 같은 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리키지만, JavaScript의 this는 함수 호출 방식에 의해 동적으로 결정된다. - 즉, 함수를 선언할 때 this가 바인딩할 객체가 정적으로 결정되는 것이 아닌, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. * JavaScript에서의 함수 호출 방식에 따른 this - 일반 함수 호출(전역 함수, 중첩 함수, 일반 함수로 호출되는 메서드 내에서 정의한 중첩 함수 내부, 콜백 함수) : 기본적으로 this에는 전역 객체가 바인딩 된다. function foo()..
이벤트 위임 - 이벤트 위임 : JavaScript에서 이벤트 처리를 최적화하고 성능을 향상시키는 패턴 중 하나입니다. 이 패턴은 일반적으로 이벤트가 여러 DOM 요소에 연결되어 있을 때 유용하게 사용된다. - 이벤트 위임의 핵심 아이디어는 이벤트를 여러 개의 하위 요소에 직접 연결하는 대신, 상위(부모) 요소에 하나의 이벤트 핸들러를 연결하고, 그 상위 요소에서 발생한 이벤트를 각 하위 요소에 대한 조건부 처리를 통해 다루는 것이다. - 이벤트 전파 : DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것 버블링 - 버블링 : 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식 예시 document.querySelector("l..
Promise 동작원리와 예시 Promise - 프로미스는 ES6에서 도입된 비동기 처리를 위한 패턴이다. 기존의 콜백 패턴의 콜백 헬로 인한 가독성 문제 및 에러 처리를 해결하기 위해 도입되었다. - Promise 생성자 함수를 통해 인스턴스화 하며, 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데, 이 콜백함수는 resolve와 reject 함수를 인자로 전달받는다. - Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행하고, 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다 - 프로미스는 현재 비동기 처리가 어떻게 진행되고 있는지를 나타내는 상태 정보를 갖는다.(pending : 비동기 처리가 ..
React 공식문서 -flushSync - flushSync : 강제로 제공된 콜백 내부의 모든 업데이트를 동기적으로 flush(강제로 비워냄)하도록 하고 DOM이 즉시 업데이트 된다. - flushSync는 자주 사용되지 않으며 앱 성능을 저하시킬 수 있습니다. - flushSync를 호출하면 React가 보류 중이던 작업을 강제로 flsuh하고 DOM을 동기적으로 업데이트 한다. import { flushSync } from 'react-dom'; flushSync(() => { setSomething(123); }); - flushSync는 매개변수로 전달받는 콜백함수를 즉시 호출하고 여기에 포함된 모든 업데이트를 동기적으로 flush한다. - 보류 중인 모든 업데이트, Effect 또는 Effect 내부의 업데이트를 flush할 수도 ..
React 공식문서 -useSyncExternalStore - useSyncExternalStore : 외부 스토어를 구독할 수 있는 React 훅이다. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) - 스토어에 있는 데이터의 스냅샷을 반환한다. - 두 개의 함수를 인수로 전달해야 한다. - subscribe : 하나의 callback 인수를 받아 스토어를 구독하는 함수. 스토어가 변경되면 제공된 callback을 호출해야 하고, 이로부터 컴포넌트가 리렌더링된다. subscribe 함수는 구독을 해제하는 함수를 반환해야 한다.(subscribe 함수는 처음 마운트될때 호출되고, 이후 상태가 변화될때 호출된다) - getSnapshot 함수의 경우, 스토어에서 데이..
React 공식문서 -userId - userId : 접근성 속성에 전달할 수 있는 고유 ID를 생성하기 위한 React 훅이다. - useId는 특정 컴포넌트 내 특정 useId와 관련된 고유 ID 문자열을 반환한다. - useId를 목록에서의 키 생성하기 위해 호출하지 말아야 한다. 키는 데이터에서 생성되어야 한다. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); return ( Password: The password should contain at least 18 characters ); } export default function App() { return ( Choose password Confirm passwor..
DeepDive - 48장. 모듈 48.1 모듈의 일반적 의미 - 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. - 이때, 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export라 한다. - 모듈 사용자는 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있으며 이를 import라 한다. 48.2 자바스크립트와 모듈 - 자바스크립트는 태생적으로 모듈 시스템을 지원하지 않는다. 즉, 모듈이 성립하기 위해 필요한 파일 스코프와 im..
DeepDive - 47장. 에러 처리 47.1 에러 처리의 필요성 - 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. - try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. - 우리가 작성하는 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. 47.2 try... catch... finally 문 - try... catch... finally 문은 일반적인 에러 처리 방법이라고 한다. - finally 문은 불필요하다면 생략 가능하다. catch 문도 생략이 가능하지만, catch문 없는 try 문은 의미가 없으므로 생략하지 않는다. console.log('[Start]'); t..

티스토리툴바