본문 바로가기
JS this this란? - this는 기본적으로 실행 컨텍스트가 생성될 때 결정되므로, 어떤 방식으로 함수를 호출하느냐에 따라 this의 값이 달라진다 1. 전역공간에서의 this - 전역 공간에서 this는 전역 객체를 가리킨다. - 브라우저 환경에서 전역객체는 window이고, Node.js에서 전역객체는 global이다. - 자바스크립트의 모든 변수는 특정객체(실행 컨텍스트의 LexicalEnvironment)의 프로퍼티로 동작하므로, 전역변수 a 와 전역컨텍스트에서 this.a 와 전역객체.a 는 모두 같은 값을 가진다. 2. 매서드로서 호출할 때, 매서드 내부의 this - 함수와 메서드를 구분하는 유일한 차이는 독립성인데 함수는 그 자체로 독립적인 기능을 수행하며 메서드는 자신을 호출한 대상 객체에 관한.. 2020. 11. 7.
JS 실행 컨텍스트 실행 컨텍스트, execution context란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 - 어떤 실행 컨텍스트가 활성활 될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보들을 수집해서 실행 컨텍스트 객체에 저장하고 이를 call stack에 쌓는다. - 스택 구조상 call stack의 맨 위에 쌓이는 컨텍스트와 관련있는 코드가 현재 실행되며, 이런 방식으로 전체 코드의 환경과 순서를 보장한다. - 실행 컨텍스트 객체는 다음과 같은 정보를 담고 있다 : VariableEnvironment, LexicalEnvironment, ThisBinding VariableEnvironment와 LexicalEnvironment - VariableEnvironmen.. 2020. 11. 7.
JS 데이터 타입 자바스크립트 변수와 식별자 - 변수 : 변할 수 있는 데이터를 담는 공간 - 식별자 : 데이터를 식별하는 데 사용하는 이름 -> 변수명, 메모리 주솟값 자바스크립트 데이터 타입 primitive type - number, string, boolean, null, undefined - 값이 담긴 주솟값을 변수에 저장 - 값이 달라지면 무조건 새로운 메모리 공간에 새로운 값을 저장하고 해당 새로운 메모리 공간의 주솟값을 변수에 할당한다. => 한 번 만든 값은 바꿀 수 없고 값의 변경은 새로 만드는 동작을 통해서만 이루어진다. 한 번 만들어진 가비지컬렉팅을 당하지 않는 한 영원히 변하지 않는다 : 불변성의 성질! var a = 1; var b = a; // a 와 b는 1이 담긴 같은 메모리 주소를 저장하고.. 2020. 11. 7.
14. Redux-middleware - 리액트 웹 애플리케이션에서는 API 요청에 대한 상태도 잘 관리해야 한다 - 리액트 웹 애플리케이션에서 리덕스를 사용하고 있으며 api 요청과 같은 비동기 작업을 관리해야 한다면 middleware를 사용하여 효율적으로 상태를 관리할 수 있다 middleware란? - 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들 실행하는 액션과 리듀서 사이의 중간자 - 미들웨어가 하는 작업 예시 1 : 전달받은 액션을 콘솔에 기록 - 미들웨어가 하는 작업 예시 2 : 전달받은 액션을 취소하거나 다른 종류의 액션을 추가로 디스패치 - 대표적인 미들웨어 : redux-thunk, redux-saga redux-thunk - 비동기 작업을 처리할 때 많이 사용하는 미들웨어.. 2020. 11. 6.
13. React-Redux React-Redux란? - Redux를 React App에서 효율적으로 사용하기 위해 여러 유틸함수와 Provider 컴포넌트를 제공하는 라이브러리 Presentational Component and Container Component Patterns - 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴 - Presentational Component : 상태관리가 이루어지지 않고, 그저 props를 받아서 화면에 UI를 보여 주기만 하는 컴포넌트 - Container Component : 리덕스와 연동되어 있는 컴포넌트로, 리덕스로부터 상태를 받아오거나 리덕스 스토어에 액션을 디스패치한다. - 리액트 프로젝트에 리덕스를 적용하여 업데이트에 관련된 로직(container)을 리액트 컴포넌.. 2020. 11. 6.
12. Redux 리덕스란? - 상태 관리 라이브러리 - 컵포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 - 컴포넌트들간에 공유되는 상태를 여러 컴포넌트를 거치지 않고 손쉽게 상태 값 전달 및 업데이트 가능 - 전역상태를 효율적이고 체계적으로 관리 가능 - 미들웨어 기능을 이용하여 비동기 작업을 효율적으로 처리 리덕스 기초 개념 1. 액션, action - 어떤 상태로 변화하는지 'type'이라는 키의 값으로 표현하는 하나의 객체 - type 키의 값 이외의 값들은 상태 업데이트시 참고하는 값 // action example { type:'ADD_TODO', data:{ id:1, text:'redux 공부' } } 2. 액션 생성 함수, action creator - 액션 객체를 만들어.. 2020. 11. 6.

티스토리툴바