Ella 프론트엔드일지

0. 버그 현황 - React-Query 로 리팩토링 하는 도중에 페이지네이션의 버튼을 클릭하면 화면이 렌더링 되지 않는 문제를 겪었다. 분명 createAsyncThunk 리덕스 툴킷으로 할때는 잘 되었는데...? 왜그런걸까 기존 createAsyncThunk 로 할때의 코드는 아래에 첨부한다. https://ella951230.tistory.com/entry/%EC%98%A4%ED%94%88%EB%A7%88%EC%BC%93-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A6%AC%EB%8D%95%EC%8A%A4%ED%88%B4%ED%82%B7%EC%9C%BC%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-%EA%B5%AC%E..

https://ella951230.tistory.com/entry/%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%ED%8E%98%EC%96%B4%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%A0%84%EC%97%AD%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-VS-get-API-%EC%9E%AC%ED%98%B8%EC%B6%9C [투두리스트 페어프로그래밍] 전역상태관리 VS get API 재호출 0. 버그 배경 Todo페이지에서 아침/점심/저녁 버튼을 누르면 각 Category 페이지로 이동되는 로직이다. 왼쪽 그림에서 각 버튼을 누르면 아침(빨간색 포스트잇)/점심(노란색 포스트잇)/저녁(파란색 ella9..

0. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 1) 브라우저가 2) 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - 브라우저가 가지고 있는 호스트객체 Web API 인 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 (XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.) => 즉, 자바스크립트를 이용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고 받는 방식 🔸Ajax를 사용하면 기존 방식과 어떤 차이가 있을까? - Ajax 가 등장하기 이전에는 웹브라우저가 어떤 정..

0. Redux-toolkit 의 createAsyncThunk -> React-Query 로 리팩토링 🔸리팩토링을 하게 된 배경 - 오픈 마켓 프로젝트에서 전역상태관리로 Redux-toolkit 을 쓰고, 서버 상태관리를 createAsyncThunk 로 관리하고 있었다. 🔸createAsyncThunk - Redux-Toolkit 에서 내부적으로 thunk 를 내장하고 있어서, 다른 미들웨어(ex: Recus-Saga) 를 사용하지 않고도 비동기 처리를 할 수 있다. - 비동기 작업의 성공,실패 및 로딩 상태를 자동으로 처리하는 액션을 생성하므로, 서버 데이터를 편리하게 전역 상태로 관리할 수 있다. - 전역 상태로 관리되는 서버 데이터는 여러 컴포넌트에서 공유될 수 있으며, 필요한 곳에서 사용할 수..

0. 동기와 비동기 - 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 을 동기(synchronous) 처리 방식이라고 하며 - 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식 을 비동기(asynchronous) 처리라고 한다. (오해하면 안되는건, 비동기는 동시의 문제가 아니다. 순서의 문제다. 비동기도 정해진 순서가 있다) - 한번 비동기는 영원한 비동기다. - 대표적으로 타이머 함수인 ① setTimeout/ setInterval ② HTTP 요청 ③ 이벤트 핸들러 는 비동기 처리 방식으로 동작한다. 1. 자바스크립트 엔진 - 자바스크립트 엔진은 자바스크립트 코드를 이해하고 실행을 도와줌 - 자바스크립트 엔진은 Memory Heap..

0. 호출 스케줄링 - 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것 호출 스케줄링을 구현하는 방법은 1. setTimeout 과 2. setInterval 이 있다. 1) setTimeout - setTimeout 함수로 생성한 타이머는 한 번 동작함 🔸setTimeout 예제코드 function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); - 위 코드를 실행하면 1초 후에 sayHi()가 호출된다. function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요. - ..