crabLab

리덕스 미들웨어란 무엇인가? ⛓ 리덕스 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당할 수 있습니다. 미들웨어의 구조는 아래와 같습니다. const loggerMiddleware = store => next => action => { //기본 구조 } exportdefault loggerMiddleware; const loggerMiddleware =functionloggerMiddleware(store){ returnf..

TDZ(Temporal Dead Zone/일시적 사각지대)란? 👨‍🎓 TDZ는 무엇일까? TDZ ( Temporal Dead Zone )는 해석하면 "일시적 사각지대" 이다. 위 아래 코드를 보면서 어떤 부분에서 에러가 일어나는지 살펴보자! 첫 번째 코드 [ 인스턴스 생성 후 클래스 선언 ] const myCat = new cat('mimi') class cat { constructor(name) { this.name = name; } } 두 번째 코드 [ 함수 호출 후 함수 선언] hello('Shin') function hello (name) { return `Hello ${name} :)`} 위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면Referenc..

프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요? 동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이라고 생각합니다. 요청하고-응답받는 시간을 하나의 박스(box)라로 정의한다면,동기는 박스 안에서 움직이고, 비동기는 박스를 벗어나 작동되는 원리 라고 생각합니다. 동기 : 요청을 하면 (바로) 응답을 받는다는 의미요청과 응답이 같은 시간대 “안에” 고정되어 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지합니다. 응답을 받고나서야 비로소 다시 진행되는 특성을 가집니다. 비동기 : 요청 한 내용을 언젠간 응답해 줄 것이라는 약속을 의미. 요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고 쿨하게?! 자기 갈길?! 가는 특성입니다. 언젠간 응답을 ..

리덕스에서 미들웨어 청크의 역할은 뭘까요? 리덕스 청크란 리덕스 미들웨어의 한 종류입니다. 간단한 동기 작업만이 가능한 리덕스에 비동기 작업이나, 웹 요청, 또는 저장소에 접근하는 복잡한 요청 등을 처리해주는 고마운 친구입니다. 비동기작업에서의 세가지 상태 우선 가장 문제가 되는 비동기 작업부터 처리해보겠습니다. 우리가 비동기 요청을 보냈을때의 상태를 구분해보면 세 가지가 있습니다.2. 요청에 성공했을때 3. 요청에 실패했을때 1. 요청을 보내지 않았거나 아직 대기중일때 위 세가지 상태를 상수 형태로 선언해서 사용하겠습니다. 그래서 청크의 역할은? 미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는등 업데이트 ..

라이프 사이클 (함수형 vs 클래스형) Lifecycles in Class Components (클래스형) 일반적인 순서 생성될 때 (마운트 될 때 - Mounting) : constructor, render, componentDidMount업데이트할 때(Updating) : render, componentDidUpdate제거할 때 (마운트 해제 될 때 - Unmounting) : componentWillUnmount Lifecycles in Functionl Components (함수형) 함수형 컴포넌트에는 "리액트 훅"이 있는데, 훅으로 함수형 컴포넌트들을 관리합니다.클래스형 라이프사이클에 나왔던 모든 phases( componentDidMount, componentDidUpdate, componen..

출처 : Axios란? / Axios 사용 및 서버 통신 해보기! Axios란? / Axios 사용 및 서버 통신 해보기! Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. # Axios란? # Axios사용법 # Axios를 사용해서 백엔드 없이 서버 통신 해보기! velog.io 출처 https://im-developer.tistory.com/166 Vue.js 첫걸음 CHAPTER 14 라우팅과 HTTP 통신 (저자: 이지호) https://github.com/axios/axios https://이듬.run/axios/guide/ 이듬.run - 이 웹 사이트는 판매용입니다! - diligent board 자료와 정보 ..

출처: Authentication(Firebase Auth Rest API) Authentication(Firebase Auth Rest API) Firebase Auth API를 이용한 인증 방식 velog.io firebase auth 인증이 필요한 이유 웹 사이트의 모든 사용자가 모든 콘텐츠에 접속할 수 있어야 하는 것은 아닙니다. 이러한 콘텐츠에 대한 접근을 "인증(Authentication)"을 통해 보호할 수 있습니다. 예를 들면, 사용자 프로필 페이지는 로그인한 사용자만이 접근할 수 있도록 되어야 합니다. 페이지 뿐만 아니라 데이터베이스에 저장되어 있는 데이터도 보호되어야 합니다. 예를 들어, 비밀번호를 변경하는 요청을 서버에게 보낼 때 이는 데이터베이스의 사용자 비밀번호를 업데이트하는 것입..

상담소 프로젝트는 혼자 하는 것은 한계가 있다. 장기적으로, 조급해하지말고 생각하는것이 좋다. 리액트 프로젝트를 CRA없이 만드는것 추천한다. 많은 곳에 레퍼런스들이 있다. 생각의 흐름대로 만드는 것이 아닌 기획하고 설계하는 데 시간을 많이 쏟자 백엔드와는 api주고받기가 중요하다. 백엔드가 작업이 평균적으로 빨리끝난다(여러차례 봐왔던 내용!) 확장프로그램 목록 prettier, gitlens, auto complete tag, live share, vscode-styled-components, eslint node js 미들웨어란? 웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있다. 그럴때 미들웨어를 이용하여 웹 서버의 요청/응답에 대해 공통적으로 관리가 ..

항해톡 영상 DOM 과 virtual DOM 과 react NotFound 페이지를 만들때 주의할 점 라우터에서는 path를 “/*” 로 만들어주고 그 위에 “/:id”같이 바로 모든게 ID로 가는 경로를 만들면안된다. 이후 그 페이지 접속하는 링크요소에도 같은 경로를 잘 지정해 준다. 리덕스에서는 기본 리덕스는 불변성을 유지해주는 것이 중요하다. 항상 불변성 유지를 위해 기본 상태를 변경하는 것이 아닌 새로운 값을 업데이트하는 방식으로 사용하자. 리덕스 툴킷은 조금 자유롭다. 하지만 항상 불변성 유지를 염두해 두자.

항해톡 끝났다.. 남은 항해톡은 즐겁게 지켜보는 입장이 되어야지 영상과 글은 잘 정리해서 조만간 올릴 생각이다. 이번주 리액트 라우터 기능만 잘 정리해서 하면 좋을 것 같다. 항상 시간이 많이 부족하다. 배포 클론과 실전 주차에서의 배포문제에 관심이 간다. 흐름은 이해가 되는데 어떻게 구현할지는 모르는 상태 도입하면 어떻게든 될 것 같은데 도입의 엄두가 안난다. 나중에 꼭 해봐야겠다. (우선 리액트 과제 끝내고)