JavaScript37 [Deep Dive] 클로저(Closer)란 무엇인가? 먼저 클로저를 알아보기 전에 이해해야 할 개념은 실행 컨텍스트와 렉시컬 환경이다. 이 개념을 다시 한번 되새기며 클로저에 대해 알아보도록 하자. [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실 junvelee.tistory.com 실행 컨텍스트와 렉시컬 환경을 이해했다면, 클로저라는 것은 무엇일까? 클로저(Closer)와 렉시컬 환경 먼저 기억해야 할 것은 렉시컬 환경의 특징이다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.. 2023. 8. 13. [Deep Dive] 자바스크립트 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)란 무엇인가? 💡 실행 컨텍스트란? 코드를 실행하는데 필요한 환경 정보를 제공하는 객체로, 코드 실행 결과와 순서를 관리하는 영역입니다. 식별자와 *스코프는 실행 컨텍스트의 렉시컬 환경에서 관리하고, 코드 실행 순서는 스택으로 관리합니다. *스코프 : 식별자에 대한 유효범위 코드의 평가와 실행 모든 소스코드는 평가와 실행 과정으로 나누어 처리되고, 실행 컨텍스트를 통해 실행되고 관리된다. - 코드 평가 : 실행 컨텍스트 생성 및 변수, 함수 등의 선언문의 식별자를 실행컨텍스트의 렉시컬 환경(Lexical Environment)의 환경 레코드(Environment Record)에 등록, 스코프 체인 형성, this값 설정 - 코드 실행 : 런타임 시작, 변수나.. 2023. 8. 10. [Deep Dive] var, let, const의 차이 / hoisting(호이스팅)에 대해 오늘 목표 : var, let, const의 차이 / hoisting(호이스팅) 모던 자바스크립트 Deep Dive 책을 이용해 변수들과 호이스팅에 대해 공부한 내용을 정리해 보았다. 1. var의 등장 배경 / 문제점 1) 중복 선언 - 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다. 또 재할당이 아니라 이전의 변수가 덮어쓰여진다. 규모가 큰 프로젝트에서 변수명이 중복될 경우에도 Error가 발생하지 않는다. 이는 누군가 실수로 변수를 중복 선언하여 의도치 않은 결과를 초래할 수 있다. 2) var 호이스팅 - var변수의 선언문이 스코프 내의 최상단으로 끌어올려진 것처럼 동작하여 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다. 3) 함수 레벨 스코프 - var 키워드로 정의된 변수는.. 2023. 7. 11. [React] React query 사용해 보기 React query 리액트에서 상태 관리 라이브러리 중 하나로, 강력한 비동기 상태 관리를 지원한다. 리액트 쿼리의 기능은 다음과 같다. Backend agnostic: 백엔드에 종속되지 않음 Dedicated Devtools: 전용 개발 도구 Auto Caching: 자동 캐싱 Auto Refetching: 자동 재요청 Window Focus Refetching: 창 포커스 시 자동 재요청 Polling/Realtime Queries: 폴링/실시간 쿼리 Parallel Queries: 병렬 쿼리 Dependent Queries: 의존성 있는 쿼리 Mutations API: 뮤테이션 APIAutomatic Garbage Collection: 자동 쓰레기 수집 Paginated/Cursor Queries.. 2023. 5. 2. [React] React-router-dom이란 무엇인가? Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 이동하는 것을 의미한다. 1. 일반적인 Routing 서버에 URL로 새로운 페이지 전체(html, css, js, img 등)를 요청해서 응답 받은 새 페이지를 업데이트 한다. 2. React Router = CSR(Client Side Routing) 서버에 URL로 새로운 페이지를 요청하는 것이 아니라 페이지는 유지하되, Application에서 업데이트가 필요한 부분만, 경로에 해당하는 컴포넌트만 부분적으로 업데이트하고, 부분적으로 네트워크 통신(fetch 등)하여 JSON 형.. 2023. 4. 21. 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 : 부모 -> 자식 컴포넌트로 props를 계속해서 내려주면, 불필요한 컴포넌트에도 전달되어야 하고, 부모 컴포넌트가 리렌더링 시 자식 컴포넌트도 리렌더링 된다. 어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다. 2) useContext 등 context API의 위험성 : 전역 State의 provider가 한개라도 변경되면, props을 받는 모든 하위 컴포넌트 전체가 리렌더링 된다. => context API vs 리덕스 공부 3) 따라서 Global st.. 2023. 4. 19. 이전 1 2 3 4 5 ··· 7 다음
