본문 바로가기

전체 글

 (138)
쿠키와 세션 - HTTP는 Connectionless(비연결지향)과 Stateless(상태 비유지)의 특징을 갖는다. - 하지만, HTTP 통신을 할 때 실제로 데이터 유지가 필요한 경우(로그인 상태와 같은 상태 유지 필요)가 있고 이때 쿠키와 세션을 사용한다. 쿠키(Cookie) * 쿠키란? - 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. - 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다. - 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다. - 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시 Request Header를 넣어서 자동으로 서버에 전송한다. * 쿠키 구성요소..
Prototype을 이용해서 상속을 구현하는 방법 - JavaScript는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것(원시타입을 제외한 값)이 객체다. - 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 객체지향 프로그래밍의 핵심 개념이다. - 프로토타입 객체는 다른 객체로부터 상속된 속성과 메서드를 포함하고 있다. function Student() { this.table = new Array(); this.add = function (name, age) { this.table.push({ name: name, age: age }); }; this.show = function (minAge) { return this.table.filter((student) => student.age ..
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..

티스토리툴바