Redux-saga : 특정 action을 dispatch 할 경우 연결된 함수를 실행 한다. 또한 api요청이나 기타 비즈니스 로직을 컴포넌트로 부터 분리할수 있다. 동시에 여러개의 put을 사용할수 있다. 제너레이트를 활용한다. 제너레이트 : function* 키워드를 사용하여 선언하고 여러개의 반환값을 가질수 있다. yield 키워드를 사용하여 위치한곳에서 실행을 일시 중지후 다시 시작 가능 다만 다시시작할때는 next키워드를 사용해야됨. saga의 사이드 이팩트 : fork 비동기함수를 실행한다. call 동기함수 all 함수를 동시에 실행시킨다. take ("")안의 것이 실행될때까지 기다림. 1회용이다 임마 takeEvery take가 여러번써야될때. takeLatest 앞에 여러번누른거 무시..

Redux : 기존의 props방식은 트리 구조로써 옆으로는 가지 못하는 불편한 구조의 방식이였다면 Redux같은 상태관리 라이브러리는 동그란 링모양의 상태 관리 저장소로써 기존의 방식과는 다르게 옆으로도 데이터가 간다라고 생각하면 된다. Redux의 장단점 : 데이터가 컴포넌트에 흩어져 있는 것에 비해 관리하기 쉬움 데이터변화가 기록되서 히스토리 트래킹이 쉬움 서버에 비동기 요청하기 편함 단점은 코드가 길어짐 Redux 구성요소 : Store : Redux의 데이터들을 저장하기 위한 저장소 State : Redux Store에 저장되어 있는 상태 값 Action : Redux State를 변화시키기 위한 객체 ( type이라는 필드를 무조건 포함해야 한다. ) Action Creator : Action..

Ant design : 디자인을 하지 못하는 우리 프론이들을 위한 디자인 프레임워크로써 Card, Button, Input, Form, icons 등을 제공 반응형 그리드시스템도 제공한다. 반응형 할 때 모바일을 먼저 만드는게 좋다고 한다... 하지만 나는... 반대가 편하다... xs : 모바일 sm : 태블릿 md : 작은 데스크탑 페이지에서 중복처리 : _app.js에서 페이지의 공통적인 부분들 모아둘수 잇다.. 하지만 나는 이번 프로젝트 같지 않으면 header로 빼두는 편이다.... * 특정 페이지 공통이다 라고 하면 layout컴포넌트에 빼둔다. a태그의 target=”_blank”시 보안때문에 rel='noreferrer noopener'필수 리액트를 위한 크롬 확장프로그램 설치 👉 'Rea..

SSR(서버사이드 렌더링) : 브라우저 -> 프론트서버 -> 백엔드 서버 -> 데이터베이스 백엔드 서버에서 받아온 데이터를 프론트서버의 HTML과 함께 브라우저에 보냄. 장점 : SEO최적화(검색노출), 사용자에게 빠르게 데이터를 보여줄수 있다. 단점 : 페이지 변환속도가 느리다. CSR(클라이언트 렌더링) : 첫방문 : 브라우저 -> 프론트서버 -> 브라우저 -> 백서버 -> 데이터베이스 그 이후 : 브라우저 -> 백서버 -> 데이터베이스 첫방문시에는 브라우저에서 프론트 서버로 HTML CSS JS를 가져간후 로딩되는 와중에 다시 브라우저로 가서 백서버에다가 데이터를 요청함 그후에는 모든 프론트서버의 HTML CSS JS는 가져갓으니 데이터가 바뀌면 브라우저 백서버 데이터베이스순 장점 : 페이지 변환속..