이것저것 스터디📚 (107) 썸네일형 리스트형 useReducer를 활용한 상태관리 흐름 - useReducer Hooks API는 flux 아키텍쳐를 따른다. - useReducer API는 복잡한 상태관리에서 useState보다 유리하다. - useReducer는 구체적인 상태변경을 감추고, reducer에게 맡길 수 있고, 콜백(setState 등)을 계속 하위 component에 전달해줘야 하는 불편함을 줄일 수 있다. 대신 dispatch라는 매개체 역할의 함수를 전달해준다. * flux 아키텍처 - dispatcher는 애플리케이션에서 발생하는 모든 action을 수신하고 이 action을 처리할 적절한 store에게 전달한다. - action은 dispatcher에 전달되는 객체로 애플리케이션에서 발생하는 이벤트나 사용자의 상호작용을 나타낸다. - store는 애플리케이션의 상태.. 해시 테이블(HashTable) - 해시 테이블 : (key, value)로 데이터를 저장하는 자료구조 중 하나로 빠르게 데이터를 검색할 수 있다. - 해시 테이블이 빠른 검색속도를 제공하는 이유는 내부적으로 배열(버킷)을 사용하여 데이터를 저장하기 때문이다. - 해시 테이블은 각각의 key 값에 해시함수를 적용해 배열의 고유한 index를 생성하고 이 index를 활용해 값을 저장하거나 검색한다. - 따라서, 이러한 해싱 구조로 데이터를 저장하면 index를 통해 key 값으로 데이터를 찾을 때 해시 함수를 1번만 수행하면 되므로 매우 빠르게 데이터를 저장/삭제/조회할 수 있다. - 해시테이블의 평균 시간복잡도는 O(1)이지만, 데이터의 충돌이 발생하는 경우 Chaining에 연결된 리스트들까지 검색을 해야 하므로 O(N)까지 시간복.. HTTP GET과 POST 차이 - HTTP GET과 POST는 웹에서 데이터를 서버에 보내거나 서버에서 데이트를 받는 데 사용되는 두 가지 주요한 HTTP 메서드이다. GET과 POST 차이 1. 목적 - GET : 서버에 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드이다. - POST : 서버로 리소르를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드다. 2. 데이터 전송방식 - GET : URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(query string)이라고 부른다. 예를 들어 www.example.com/show?name1= value1&name2=value2 의 경우 서버에서는 name1과 name2라는 파라미터 명으로 각각 value1과 value2의 파라미터 값을 전달.. 쿠키와 세션 - 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 : 비동기 처리가 .. 이전 1 2 3 4 5 ··· 14 다음
