Ella 프론트엔드일지

0. Transition 브라우저에서 렌더링이 시작되면 중단될 수 없으며 렌더링이 완료되기까지 화면은 block 상태가 된다고 할 수 있다. 이로 인하여 렌더링 도중에 발생하는 텍스트 입력과 마우스 클릭과 같은 액션이 지연되어 버벅거림을 느낀 적이 있을 것이다. 화면이 오래 멈춰있다면 사용자 경험은 악화되기 때문에, React 18에서는 렌더링 블록킹 문제를 해결하기 위해 동시성을 이용하게 되었다. 🔸startTransition 작업 단위를 잘게 나누어 실행하되, 우선순위가 높은 작업등을 먼저 렌더링하고 우선순위가 낮은 작업은 잘게 나누어진 단위에서 블록시킨다. 예를 들면 검색창에 검색을 할 경우 키보드 입력에 따라 추천 검색어가 뜬다. 키보드 입력이 한 번 발생할 때마다 입력된 키워드에 대해 관련된 단..

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..