목록Redux (6)
책 읽다가 코딩하다 죽을래
어그로 미안하다.. 그치만... 이렇게라도 하지 않으면... 아무도 안온다고.. 😭 이 글을 읽기 전에 스코프와 실행 컨텍스트의 개념을 알고 있으셔야 합니다. 2021.11.03 - [코딩/자바스크립트] - 자바스크립트 실행 환경(Execution Context)이란 무엇인가 자바스크립트 실행 환경(Execution Context)이란 무엇인가 🤔 실행 환경을 배워야 하는 이유 코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고 실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는 ablue-1.tistory.com 🤔 클로저의 의미 클로저(Closure).. 이름만으로는 무엇을 하는지 모르는 친구다. 유명한 JS서적에서도 각각 이 친구를 다르게 정의해 놓았다..
React-Redux를 더욱 쉽게 관리하게 만들어주는 immer, redux-action에 대해 배워보자 모듈 설치 방법 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions npm i redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions 각 모듈에 대한 설명 redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날..
Redux는 전역 상태 관리를 편히 사용할 수 있게 해주는 라이브러리입니다. 목차 1. React에서 Redux를 사용하는 이유 2. Redux 구조 3. Redux 사용법 1. React에서 Redux를 사용하는 이유 더보기 에서 컴포넌트 내에서의 데이터는 state로 해결된다. 그럼 컴포넌트 간에서는? props가 있다. 그렇지만 되게 제약사항이 많다. props는 양방향이 아닌 일방향이다. 부모가 자식에게 props를 줄 수 있지만 부모에게 받은 props를 수정할 수 없을뿐더러 애초에 부모에게 데이터를 줄 수 있는 수단이 없다. 게다가 만약 컴포넌트 관계가 A->B->C->D와 같고 A의 데이터를 D에게 전달하려면 B와 C를 거쳐야 하고 또한 데이터 변화가 없는 B와 C도 필요 없는 리랜더링 일어..
GD프로젝트 리액트 심화반 3주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(immer, redux-action, Debounce, Throttle, useCallback) 2. 3주 차 과제 3. 배운 내용 프로젝트에 적용 1. 새롭게 배운 내용 1 -1 immer, redux-actions 더보기 사실 2주 차에 배웠던 것들인데 그때는 배운 내용들이 정리가 안되어서 3주 차에 쓰고 있다.. 3주 차에는 redux를 더욱 쉽고 이용하기 간편한 모듈들에 대해 배웠다. redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날 때마다 action 이전..
GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 3주 차도 무난히 끝을 냈다. 이번 3주차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운내용 (redux, router) 2. 결과물 3. 배운 내용 적용 1. 새롭게 배운 내용 1 - 1 Router 더보기 라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가..