공부하는 비오

사가를 사용하여 서버에 비동기 요청을 보낼 때, 다음과 같은 코드일 것이다. 수많은 요청들이 있을 텐데, 개발을 할때는 localhost를 사용하지만 배포 할때는 실제 주소를 사용할 것이다. 이를 일일히 다 바꿔주는건 귀찮을 뿐더러, 실수로 빠트리는 코드가 있을 수도 있다. 하지만 사가에서 axios를 이용하여 기본 url을 설정해줄 수 있다. /saga/index.js axios.defaults.baseURL = '기본 URL'; 이후 코드는 이렇게 바뀐다. 기본이 되는 url 이후 주소만 적어주면 된다.

Redux 2020. 12. 25. 21:36

제로초 노드버드 강의 정리 노트 처음부터 수백, 수천개의 데이터를 불러와서 화면에 표시하려고 하면 시간이 너무 오래걸리고 메모리도 잡아먹고, 사실 처음부터 그렇게 표시 할 필요가 없다. 스크롤 내릴때마다 10개씩 게시물이 나오도록 만들어보자. 일단 스크롤 위치를 구해야 한다. scrollY : 얼마나 내렸는지(스크롤의 위치) clientHeight: 화면 보이는 길이 scrollHeight: 총 길이 (컨텐츠의 높이) JavaScript 스크롤 관련 : biio-studying.tistory.com/75?category=903435 다음과 같이 콘솔창에 찍어서 확인 할 수 있다. scrollY가 0일 때, 611까지 화면이 보이므로, 제일 아래까지 내린 값은 scrollHeight - clientHeig..

Redux 2020. 12. 18. 10:29

saga 나누기 rootSaga에서 기능별로 파일을 만들어서 오른쪽 사진과 같이 나눈 후, rootSaga는 import해온 파일 fork 해주기. 리듀서 연결하기 / 액션 flow -saga 사용환경 세팅(biio-studying.tistory.com/162?category=944898)에서 리덕스랑 사가릉 연결해줌. 리듀서도 사가처럼 대응되는 액션을 만들어준다. 로그인 액션을 디스패치 한 후 일어나는 일 dispatch(LOG_IN_REQUEST) → reducer/ LOG_IN_REQUEST실행, isLoggingIn: true → saga/ logIn 실행 →delay(1000) → put(LOG_IN_SUCCESS) → reducer/ LOG_IN_SUCCESS실행, isLoggingIn:fal..

Redux 2020. 12. 15. 21:42

rootSaga를 만들고, 사용하고 싶은 비동기 액션을 사가(redux-saga에서는 제너레이터 함수를 사가라고 부른다.)를 사용해 만든다. 사가는 사가이펙트라는 유틸 함수들을 사용한다. saga Effect all( [ ] ) 배열의 모든요소를 한 번에 실행한다. fork(함수, para?) 비동기 함수 호출한다. (non-blocking) ex) 일반적인 호출: logInAPI(action.data) call, fork를 사용: call(logInAPI, action.data) 첫번째 인수가 함수, 두번째 인수가 첫번째 인자. call(함수, para?) 비동기 함수를 동기함수처럼 호출한다. (값을 받아 올때까지 기다린 후 코드 실행. yield가 await과 같은 역할을 한다.) take(액션, 함..

Redux 2020. 12. 15. 14:38

제로초 노드버드 강의 정리 노트 saga사용 환경 세팅 /saga 파일을 만든다. /store/configureStore.js 에서 다음과 같이 설정한다. createSagaMiddleware 를 불러와서 미들웨어에 넣어주기. store.sagaTask = sagaMiddleware.run(rootSaga); 이렇게 설정하면 saga를 사용할 기본준비가 끝났다.

Redux 2020. 12. 15. 10:40

서비스 거부(DoS) 공격이란? 서비스 거부(DoS, Denial-of-Service) 공격이란 특정한 네트워크나 웹 리소스에 합법적인 유저가 접근하지 못하도록 방해하는 것입니다. 전형적으로, 막대한 양의 트랙픽을 통해 특정 대상(흔히 웹 서버)에 과부하를 주거나, 악의적인 요청을 보내 해당 리소스가 오작동을 일으키게 하거나 완전히 정지시킵니다. 미들웨어(thunk)와 DOS ? thunk는 매우 기본적인 미들웨어 기능을 제공해준다. 그러므로 thunk로 만들었을 경우, 실수로 로그인 버튼을 두번 클릭 하면 서버로 요청이 두번 다 간다. 스크롤 이벤트 같은 경우에도, 비동기 요청을 넣어놓으면 스크롤을 쫙 내렸을 때, 서버에 요청이 수백개가 갈 수 있다. (서버요청 수백개 === 셀프 DoS 공격 ^^;;..

Redux 2020. 12. 13. 22:31

Redux-thunk? thunk는 프로그래밍 용어로 지연된 함수라는 의미이다. Redux-thunk를 사용하면 디스패치를 나중에, 한번에 묶어서 할 수 있다. action이 function인 경우에는 thunk가 지연함수이기 때문에 이 action을 나중에 실행해 줄 수 있다. thunk를 사용해 매우매우 쉬운 미들웨어를 만들어보자. action을 로그로 남기는 미들웨어. 콘솔 창을 확인해보면 action을 확인할 수 있다. thunk 는 이게 끝이다. 매우 간단하다. 한번에 디스패치를 여러번 할 수 있게해준다(미들웨어^^;;). thunk를 쓰는 이유는 다음과 같다. 로그인/ 로그아웃 기능이 있는 액션이 있다면, 로그인이나 로그아웃을 원한다고 해서 바로 로그인 로그아웃이 되지 않는다. 백엔드 서버에 ..

Redux 2020. 12. 13. 22:22

Middle Ware 란? 미들웨어는 액션이 dispatch 되기 전 수행하는 작업을 설정한다. 미들웨어는 액션과 리듀서 사이의 중가자라 할 수 있다. 미들웨어가 필요한 이유는 효과적으로 비동기 액션을 디스패치 하기 위해서이다. 리듀서의 경우 동기작업만 처리할 수 있다. 예를 들어 서버에서 데이터를 받아와 dispatch 되어야 하는 경우 미들웨어를 사용한다. (리듀서 내에서는 동기 작업만 처리하고 컴포넌트밖에서 axios를 사용하여 비동기작업을 처리할 수도 있다. 하지만 이렇게 사용하면 결국 미들웨어를 사용하는 것과 같은 모양새가 되므로 미들웨어를 사용하는 것이 효율적이다.) 미들웨어를 통해 전달받은 액션을 콘솔에 기록할 수 있고, 액션 취소, 다른 종류의 액션을 추가적으로 디스패치 할 수 있다. 미들..

Redux 2020. 12. 13. 21:54