공부하는 비오

서비스 거부(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

redux에서 action을 기록하기 위해서는 middle ware를 사용해야한다. (미들웨어를 만들어 로그로 기록할 수도 있다. 이건 redux-thunk에서...) history가 쌓이면 메모리도 잡아먹고, 중앙 데이터가 어떻게 변하는지 다 보여 보안에도 취약하기 때문에, 개발자용에서만 devtool에 연결해야한다. 이를 위해 개발용 미들웨어와 배포용 미들웨어를 다르게 설정한다. 개발용으로 미들웨어를 따로 사용하기 위해서는, redux-devtools-extions을 다운받아 브라우즈의 익스텐션과 연동시켜줘야 한다. 배포용은 compose, 개발용은 composeWithDevTools를 사용한다. applyMiddleware 메서드를 사용. middlewars자리에는 직접 배열이 들어가면 안되므로, ..

Redux 2020. 12. 13. 20:57

useRef 를 사용하여 선택하고 싶은 DOM의 ref값으로 설정해주면, ref 객체의 .current 값이 선택한 DOM을 가리키게 된다. useRef 를 사용하면 내가 만든 버튼을 클릭해 파일 선택창을 만들 수 있다. input창을 만들고 hidden으로 설정한다. (파일을 선택하는 input창이 보이지 않음) const imageInput = useRef(); useRef를 사용한 변수를 ref 속성으로 적는다. 버튼에는 버튼을 클릭했을 때, 파일창이뜨는(input창을 누른것과 동일한 효과) 함수를 설정한다. useRef 메서드를 사용해, 인풋창을 클릭하게 한다. useRef를 사용할 때 주의해야할 점은, useRef는 순수객체?를 생성하기때문에 리렌더링하더라도 항상 동일한 ref객체를 제공한다는 ..

React 2020. 12. 12. 22:47

정규식을 만들어보기 이전에 제일 기본적인 표현을 살펴보자. 정규식은 / 사이에 적는다./여기에적힌단어가정규식/ g는 global로 g가없으면 하나만 선택된다.g가 있으면 해당하는 모든 항목이 선택된다.  예를 들어, /#/g라고하면 모든 #이 선택된다. /#./g#다음 한 글자까지 포함.하지만 해시태그가 몇 글자로 이루어져있는지 알수 없다. /#.+/g# 이후의 모든 글자 선택  정규식의 대괄호 안에 있는 글자들은 그 글자만 포함한다는 뜻./#[해첫익]/g은 # 바로다음 '해, 첫, 익'이 오는 글자만 선택.  ^은 그 글자들을 제외한 다른 글자만 포함한다./#[^해첫익]/g 해, 첫, 익 이외의 다른 단어만 포함된다.  /#[^두익해]+/이렇게 사용하면 # + (두, 익, 해 제외) + 그 이후단어까지..

JavaScript 2020. 12. 12. 22:31

Store은 state를 저장하는 객체이다. Redux에는 하나의 상태저장소가 있고, 여기서 대부분의 state를 관리한다. Store의 state는 Reducer를 통해서만 변경이 가능하다. Reducer는 그 이전상태값과 action을 인자로 가지며, 이 두가지를 받아와 새로운 state를 반환한다. reducer에 action을 전달해주는 역할은 하는 것이 dispatch이다. dispatch(action)을 할 경우, action의 type에 맞는 데이터를 받아와 state를 return해준다. action은 객체로서, 반드시 type을 가지며, 동적으로 payload를 가질 수 있다. Redux의 장점 중 하나는 상태 변화를 예측가능하고 투명하게 만든다는 점이다. 액션이 보내질때마다 새 상태가 ..

이론공부 2020. 12. 11. 21:10

store에서 관리해야할 state가 여러개일 경우, 리듀서 파일을 분리하여 만들 수 있다. 여러개의 리듀서로 분리한 후 하나의 리듀서로 합쳐주기 위해 사용하는 것이 combineReducer. combineReducers({리듀서1, 리듀서2, ... }) createStore은 다 합쳐진 이 리듀서를 사용하면 된다. 이건 Redux toolkit을 사용했을때의 모습. 아예 다른 코드이긴 하지만 그걸 감안하고 봐도 확실히 toolkit을 사용한 것이 코드량이 확 줄었다. 차이점은 Slice로 만들었기 때문에 actions와 reducer로 따로 분리해서 export해야한다는 것. getState를 할때에도 state로 가져오는 것이 아니라 분리한 이름으로 가져와야 한다. ex) state.cart

Redux 2020. 12. 11. 21:09