분류 전체보기 썸네일형 리스트형 Redux Toolkit [생활코딩] 리덕스 툴킷의 등장 이유 및 배경 1. 리덕스를 사용하려면 설정할것이 너무 많다. 2. 미들웨어의 설정과 설치가 어렵다. 3. 반복되는 코드가 너무 많다. 4. 불변성 유지의 어려움 Redux Toolkit Thunk 동기적인 처리는 reducers를 사용하고 비동기적인 처리는 extraReducers를 사용 더보기 리덕스 로깅 미들웨어 및 비동기 Redux Thunk 액션을 전달하고 (dispatch) 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자. 로깅, 충돌보고, 비동기 API 와 통신, 라우팅 등등 비동기 API를 위한 미들웨어 Thunk '일부 지연된 작업을 수행하는 코드 조각' 지금 당장 논리를 실행하는 대신 나중에 작업을 수행하는데 사용할 수 있는 함수 thunk 없이 사용해도 괜찮지만 미들웨어는 중앙 집중식 접근 방식이므로 구성요소를 더 간단하고 일반화하고 한곳에서 데이터 흐름을 제어 할 수 있어 큰 앱에서 리덕스를 사용하기 더 편해진다. 비동기 작업 관리: Thunk는 Redux에서 비동기 작업을 관리하기에 좋은 방법이다. Redux는 동기 작업을 다루는 데는 효과적이지만 비동기 작업은 Thunk를 사용하여 쉽게 처리.. 더보기 리덕스 최종 개념 정리 왜 쓰는가? 1.pros 문법 귀찮을 떄 모든 컴포넌트가 props 없이 state를 stroe에서 직접 꺼낼 수 있다. 2. 상태 관리 위해서 리듀서 : state 수정 방법에 대한 요청(action)을 가지고 있다. 초 간단 redux (애플코딩) ----------------------------------------------------------- 컴포넌트들은 요청만할 수 있게 코드를 작성 ----------------------------------------------------------- 컴포넌트에 state 수정 요청을 하려면? dispatch를 사용(인자로 action을 줌) state의 수정 방법 : reducer ACTION ==> 수행하는 작업의 유형을 지정하는 type 속성,.. 더보기 slug,Routin src가 없는 pages가 먼저 우선순위를 가진다. 오른쪽위와 같이 베이스 url을 설정하여 import시 ..을 줄이수 있다. 페이지 안에서 구현한 slug가 우선시 된다. 그래서 뒤에있는 slug는 무시가 된다. 쿼리는 둘다 넘어 온다. [Shallow Routing ] [API Routes] 더보기 Data Fectching, Layouts, Pages, Image ssg는 빌드시에 미리 파일을 생성해서 그걸 웹브라우저에서 보여준다. => 서버에 부하 없이 제공 가능하다. 더보기 배포 아래와 같이 배포하는 방법에서는 여러가지가 있다. 최종적으로 배포할 방법은 아래와 같다. 1. ec2 인스턴스 생성 2. 보안그룹 설정 3. 키페어 생성 4. 인스턴스에 연결 1~4 까지는 이미 많이 해봄 5. 도커 설치 https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04 위 링크 진짜 개 맛있다 ! 직빵이네 얌얌굿 5-1 , sudo apt install docker-compose 6. ec2로 리액트 파일 가져가기 깃 클론으로 가져옴 ㅇㅇ 7. 도커 pg 실행 sudo docker-compose up 클라이언트 배포를 위한 소스 코드 변경 이젠 로컬 호스트가 아닌 위 aws url 로.. 더보기 유저 페이지 생성 유저 데이터 가져오기 유저 데이터 가져오는 api 생성 더보기 무한 스크롤 [useSWRInfinite, Intersection observer] SWR은 페이지 매김 및 무한 로딩과 같은 일반적인 UI 패턴을 지원하기 위해 전용 API useSWRInfinite를 제공한다. https://swr.vercel.app/ko/docs/pagination#useswrinfinite api 생성 리스트 나열하기 Intersection observer Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차 점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보 이는 요소인지 아닌지를 구별하는 기능을 제공한다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌 더링 성능이나 이벤트 연속 호출 같은 문제없.. 더보기 이전 1 ··· 16 17 18 19 20 21 22 ··· 45 다음
