본문 바로가기
728x90

javascript38

[JS] 동기와 비동기 동기와 비동기 지금까지 자바스크립트와 리액트를 공부하면서 동기와 비동기에 대해 정확히 이해하고 사용한 것이 아닌, 필요에 의해 대략적인 이해만 하고 사용하고 있었다. 하지만 비동기적인 처리를 점점 더 많이 해나갈수록 정확히 이해하고 사용해야겠다는 필요성을 느끼게 되어 이번 기회에 정확히 자바스클비트의 동작 원리를 알고 사용해야 겠다고 생각한다. 동기와 비동기에 대해 공부해보니 결국 이 두 가지는 수행 순서에 대한 매커니즘이라는 생각이 들엇으며, 두 가지에 대해 공부를 해보니 blocking, non-blocking과 동기 비동기를 연관지어 이야기하고 있다. 다만 이 두가지의 개념의 관점이 다른 곳에 맞춰진 개념들이지만 묶어서 언급하면 쉽게 이해가 되므로, 동기와 비동기의 추상적인 개념을 블록킹과 논블록킹.. 2022. 3. 30.
RTK Query 엔드포인트 url 변수로 변경하기 및 데이터 조작하기 엔드포인트 url 변수로 변경하기 기업과제를 하던 중 api에서 데이터를 몇개를 받아 올 것인가에 대해 정해야 할 일이 있었다. 두 가지가 있는데, 1. 데이터를 받아올 개수를 정한다. 2. 페이지 번호를 정한다. 페이지는 10개의 데이터가 들어있다. 요구사항은 10개씩 무한 스크롤을 통해 데이터를 렌더링을 해야 했다. 1번같은 경우에는 처음엔 10 두번째는 20.. 30.. 이런식으로 진행이 되어야 했는데 생각해보니 결국 100000개 100000000개 이런 데이터를 받아오는건 혈압만 오르고 효율도 좋지 않다. 그래서 정한건 페이지 번호별 데이터를 받아 상태를 관리하는 것이다. import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/rea.. 2022. 2. 28.
[JS][호이스팅] 호이스팅이란? 호이스팅 이제 스코프라는 개념에 어느 정도 익숙해졌..나? 어디서 얻허게 선언되는지에 따라 변수가 다른 여러 수준의 스코프에 붙게 되는 과정도 이해했을 것이다. 함수 스코프와 블록 스코프 모두 이점에서는 똑같은 규칙에 따라 작동한다. 한 스코프 안에서 선언된 변수는 바로 그 스코프에 속한다. 선언문이 스코프의 어디에 있는지에 따라 스코프에 변수가 추가되는 과정에 미묘한 차이가 있다. 여기서 그 차이에 대해 살펴보자. 닭이 먼저냐 달걀이 먼저냐 자바스크립트 프로그램이 실행되면 코드가 한 줄 한 줄 위에서부터 차례대로 해석될 것이라고 생각하기 쉽다. 대체로 옳은 생각이지만, 바로 이런 추정 대문에 프로그램을 잘못 이해하는 경우가 있다. 다음 코드를 보자. a = 2; var a; console.log(a);.. 2022. 2. 17.
[JS][함수 vs 블록 스코프] 일반 스코프에 숨기 일반 스코프에 숨기 함수에 대한 전통적인 개념은 이렇다. 함수를 선언하고 그 안에 코드를 넣는다. 바꿔 생각해보는 것도 꽤 유용하다. 작성한 코드에서 임의 부분을 함수 선언문으로 감싼다. 이는 해당 코드를 '숨기는'효과를 낸다. 이렇게 하면 해당 코드 주위에 새로운 스코프 버블이 생ㅅ어된다. 즉, 감싸진 코드 안에 있는 '모든 변수' 또는 '함수 선언문'은 이전 코드에 포함됐던 스코프가 아니라 새ㅇ로이 코드를 감싼 함수의 스코프에 묶인다. 달리 말하면, 함수의 스코프로 둘러싸서 변수와함수를 '숨길' 수 있다는 말이다. 그렇다면 코드를 '숨기는'테크닉은 어디에 유용할까? 스코프를 이용해 숨기는 방식을 사용하는 이유는 여러 가지가 있는데, 소프트웨어 디자인 원칙인 '최소 권한의 원칙'과 관련이 있다. 이 원.. 2022. 2. 16.
[JS][함수 vs 블록 스코프] 함수 기반 스코프 함수 vs 블록 스코프 앞에서 살펴 본 것처럼 스코프는 컨테이너 또는 바구니 구실을 하는 일련의 '버블'이고 변수나 함수 같은 확인자가 그 안에서 선언된다. 이 버블은 경계가 분명하게 중첩되고, 그 경계는 개발자가 코드를 작성할 때 결정된다. 그렇다면 정확히 어떤 것이 새로운 버블을 만들까? 함수만 버블을 만들까? 자바스크립트의 다른 자료 구조는 스코프 버블을 생성하지 못할가? 함수 기반 스코프 앞의 질문에 대한 가장 일반적인 답변은 자바스크립트가 함수 기반 스코프르 사용하기 때문이라는 것이다. 즉, 각각의 선언된 함수는 저마다의 버블을 생성하지만 다른 어떤 자료 구조도 자체적인 스코프를 생성하지 않는다는 것이다. 물론 사실은 아니다. 먼저 함수 스코프와 그 암시적 용례를 살펴보자. function fo.. 2022. 2. 16.
[JS][렉시컬 스코프] 렉시컬 속이기 렉시컬 속이기 렉시컬 스코프는 개발자가 작성할 대 함수를 어디에 선언했는지에 따라 결정된다. 그렇다면 런타임 때 어떻게 레깃컬 스코프를 수정할 수 있을까? 자바스크립트에서는 렉시컬 스코프를 속일 수 있는 두 가지 방법이 있따. 두방법 모두 개발자 커뮤니티에서는 코드를 작성할 때 권장하지 않는 방법이다. 그러나 ㅁ ㅏㄴㅎ은 사람이 이런 방법을 비판하지만, 가장 중요한 논점을 빠트린다. 바로 렉시컬 스코프를 속이는 방법은 성능을 떨어뜨린다는 점이다. 성능 문제를 설명하기 전에 앞서 말한 두 가지 방법이 어떻게 작동하는지 알아보자. eval 자바스크립트의 eval() 함수는 문자열을 인자로 받아들여 실행 시점에 문자열의 내용을 코드의 일부분처럼 처히한다. 즉, 처음 작성한 코드에 프로그램에서 생성한 코드를 집.. 2022. 2. 16.
728x90