본문 바로가기

WEB/JavaScript

(25)
[SWR] 실시간 상태를 반영할 수 있는 라이브러리 SWR! 시작전 알려드립니다. 현재 SWR이 많은 업데이트가 진행이 된 상태이기 때문에 굵직한 변경점은 없지만 사용방법이 세부적으로 다를 수 있다는 점을 알려드립니다. SWR은 비동기 작업을 도와주는 React Hooks 라이브러리이다. Redux 특유의 복잡함 때문에 단점으로 작용하고 있고 대체할 라이브러리들이 속속들이 나오고 있다. 간단 설명 SWR은 stale-while-revalidate를 뜻하는 것으로, 데이터를 검증하는 동안 stale(Cache) 데이터를 사용하는 것을 말한다. 다시 설명하자면, Cache된 데이터를 보여주고, 데이터 요청을 보낸 후, 새롭게 받은 데이터를 보여주는 것을 말한다. npm i swr (Login.tsx) const LogIn = () => { const { data, e..
[Redux] 미들웨어란? (Redux Thunk, redux-promise-middleware) 미들웨어 미들웨어는 소프트웨어 각 분야에서 세부적으로 다르게 뜻한다. 위키백과에서는 OS와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 말한다. 유의해야할건 소프트웨어 분야에서는 같은 이름을 가지고 있지만 다른 것을 의미 하는 것들이 상당히 많다. Redux Thunk나 Redux Saga나 Redux Promise 등은 Redux 에서 동작하는 미들웨어이다. 어떠한 두 가지 요소의 중간에서 동작하는 소프트웨어라고 생각하면 크게 보았을 때 그 의미가 대략 같다. Redux 미들웨어 리덕스가 가지는 상태관리 라이브러리들 중 핵심 기능 중 하나는 미들웨어를 사용할 수 있다는 점이다. Context API나 Mobx에 경우에는 미들웨어를 지원하지 않는다. 리액트에서 리덕스의 미들웨어를 사용..
[JS] Formik Formik과 Yup은 Form 작업을 좀 더 편리하게 해주는 라이브러리이다. Formik에 공식문서에는 Form 작업을 할때 가장 성가신 작업이 3가지로 분류된다고 한다. 폼에서 값 가져오기 유효성 검사 및 오류 메세지 폼 submit 핸들링 Formik 먼저 설치하는 방법은 터미널에 입력한다. npm install formik 위에서 설명 했듯이 폼에서 입력한 데이터를 받는 역할을 하고 유효성 검사와 오류 메세지를 동적으로 띄워줄 수 있다. Form 기능이 그러하듯 버튼을 클릭하면 Form에 입력한 값들을 객체로 담아 처리할 수 있도록 해준다. 이 기능을 좀 더 간편하게 할 수 있는데 사실 차이가 그렇게 크지 않아서 사용을 하지 않아도 된다. import React from "react"; /* Li..
[JS] 함수를 호출하는 call / apply / bind 차이점 함수 호출을 하는 방법은 함수의 이름 옆에()을 붙이는 방법으로 널리 쓰이고 있다. 자주 사용되진 않지만 함수를 호출하는 방법은 그 밖에 call, apply라는 함수를 사용하여 호출할 수 있다. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 1. Function.prototype.call() 두 개의 매개변수를 받는 함수이다. MDN에 따르면 아래와 같은 인자를 넘겨주어야 한다. thisArg: func 호출에 제공되는 this의 값 arg1, arg2, ...: func이 호출되어야 하는 인수 간단하게 말해 첫번..
[JS] 이벤트 버블링과 캡처링 중첩된 엘리먼트들 중 어느 한 요소에 이벤트 핸들러를 등록하면 중첩된 엘리먼트들 모두 전파되는 현상을 말한다. 이런 현상을 HTML DOM API의 이벤트 전파(Event Propagation)라 말하고 두 가지 방식으로 구분된다. 이벤트 버블링 : 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.(👆) 이벤트 캡처링 : window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.(👇) 둘의 차이는 방향에 있다. 상위 계층요소에서 하위로 간다면 이벤트 캡처링 그 반대인 하위 요소에서 상위 계층요소로 전파된다면 그것을 이벤트 버블링이라고 말한다. 이벤트 버블링 var divs = document.querySelectorAll('div'); divs.forEach(function(div) {..
[JS] 이벤트 루프(Event Loop) 이미지 좌측에 JavaSciprt Engine에 관한 Memory Heap, Call Stack에 관한 내용은 해당 게시글을 참조하면 된다. WEB APIs 이미지 우측에 Web APIs는 JS로 묶은 것 밖에 있다. JS 엔진에 대한 것이 아니라는 것을 의미한다., Web API는브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다. Callback Queue 비동기적으로 실행된 콜백 함수가 보관되는 영역이다. JavaScript로 작성된 함수들의 호출이나 선언이 Memory Heap에 저장된다는 것이 차이점이다. 예를 들어 setTime..
[JS] 자바스크립트 동작원리 컴퓨터는 이진코드(0, 1)두개의 값만 알아들을 수 있다. 하지만 우리가 작성하는 자바스크립트는 0, 1이 아닌 영어에 가깝고 영어를 알고있다면 배우지 못한 사람도 대충은 알아볼 수 있고 배운다면 영어로 코딩 또한 가능하다. 그렇다면 컴퓨터는 어떻게 우리가 영어로 작성한 자바스크립트 코드를 알아들을 수 있는지 알아보자. 자바스크립트의 엔진 자바스크립트 코드를 동작시키는 장치를 엔진이라고 말한다. 현재 사용되는 엔진은 대부분 Google에서 C++로 작성된 V8엔진을 사용하며 Chrome과 Node.js에서도 해당 엔진을 사용한다. 개발자가 작성한 자바스크립트 코드는 V8엔진에 의해서 컴퓨터가 알아들을 수 있는 언어로 변환된다. 그럼 어떻게 변화되는지 알아보자. 자바스크립트(V8) 엔진구조 자바스크립트 엔..
[JS] 메모리 힙과 콜스택 자바스크립트 엔진이 구동되면서 코드를 읽고 실행하는 과정에서 아주 중요한 두가지 단계가 있는데. 정보(ex. 변수, 함수 등)를 특정한 장소에 저장하는 것 실제 실행되고 있는 코드를 트래킹하는 작업(실행 컨텍스트) Memory Heap 메모리 힙(Memory Heap)은 변수, 함수 저장, 호출 등의 작업이 발생하여 아래 내용들이 진행되는 공간이다. 어느 언어든지 메모리 생명주기는 비슷하다. 위 이미지로 예를 들자면 자바스크립트 코드에서 var num = 20; 이라는 구문이 있을때 "박스하나를 주고 그 박스에 num이라는 라벨을 붙이고 20을 넣어줘" 같은 말이다. 필요할때 할당한다. (allocate, 할당) 사용한다. (읽기, 쓰기) (use, 사용) 필요없어지면 해제한다. (release, 해제)..