공부 기록일지📚

웹 스토리지? 저장할 데이터가 별로 중요하지 않거나, 유실되어도 무방할 데이터라면 서버 단에서 데이터를 저장하는 것이 낭비일 수도 있습니다. 클라이언트 단, 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지를 활용해봅시다. 2가지 종류 웹 스토리지에는 크게 localStorage 와 sessionStorage가 있습니다. 두 개의 매커니즘 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐 입니다. 세션 스토리지는 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. -> 💥브라우저에서 같은 웹 사이트를 여러 탭이나 창을 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 ..

query param == query string (e.g. user?id=23) path param == path parameter (e.g. user/23 ) *용어를 섞어 쓰지만 위와 같은 의미로 해석하시면 됩니다. day에 해당하는 day word list를 삭제하는 것은 다른 툴을 추가하지 않고 순수 react로는 작업이 번잡해진다. word 컴포넌트에서 props를 받아 렌더링하고 있으므로 부모 컴포넌트인 Day에서 word의 상태가 변화됨을 감지하고 변화된 내용을 감지하려면 word의 deleteWord 함수를 역으로 올려줘야 할 거 같음 react-query를 통해 서버 데이터의 변화가 일어났을 때, 클라이언트의 state값을 변경시켜주는 게 베스트 방법일 듯 특히, wordList는 da..

Redux, zustand, Recoil은 클라이언트의 상태를 관리한다면 React Query는 서버의 상태를 관리합니다. 프론트에서 사용하는 데이터는 크게 두 가지로 분류할 수 있는데 정말 프론트에서만 쓰는 view를 위한 데이터가 있고, API에서 가지고 온 데이터(실제로는 서버에 존재하는 데이터) 이렇게 두 가지 상대값이 존재합니다. 리액트 쿼리는 이 두 가지 중 서버의 상태를 관리하기 위한 상태관리 라이브러리 입니다. React-query 는 서버 상태를 관리하기 위한 상태 관리 라이브러리입니다. 우리가 어떤 데이터를 서버에 요청하고 나서부터 요청을 받은 후까지 데이터를 받아오기 전까지 참조 못하게 하는 기능, 게시글 목록 중 한 데이터 수정 api를 호출했다면 게시글 목록 자체를 리패칭하기 등 ..

무한 스크롤(Infinite Scroll)이란? 사용자가 특정 페이지 하단에 도달했을 때, API가 호출되며 컨텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식을 말합니다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션(Pagination)과 달리, 한 페이지에서 스크롤만으로 새로운 컨텐츠를 보여주게 되므로, 많은 양의 콘텐츠를 스크롤하여 볼 수 있는 장점이 있습니다. 무한 스크롤을 구현하려면 가장 간단한 방법으로 스크롤 이벤트를 이용하여 구현할 수 있습니다. 하지만, 스크롤 이벤트를 사용하면 API 호출이 여러 번 갑니다. 이렇게 되면 documentElement.scrollTop과 documentElement.offsetHeight는 리플로우가 발생하기 때문에 개선하지 않으면 성능상 좋..

Portal 이란? 리액트에서는 root element에 모든 컴포넌트를 올리고 지우고 반복하면서 컴포넌트를 만들었습니다. 포탈은 루트 외의 요소에 컴포넌트를 띄울 수 있게 해줍니다. 공식문서에 따르면 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 합니다. div id="root 인 요소와 div id="portal"인 요소는 형제 관계처럼 보이지만 실제로 portal은 root안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이뤄지고 있는 것입니다.(리액트의 tree구조가 리렌더링을 발생시키므로 이럴 때, 부모-자식 관계를 유지하면서 독립적인 위치에서 렌더링을 하면 편리한 경우에 사용, 부모 컴포넌트의 제약에서 벗어나기 위함) *root ..

axios는 클라이언트와 서버가 서로 요청과 응답을 주고 받을 수 있게 도와주는 HTTP 클라이언트 패키지입니다. axios는 여러 기능을 제공하는데 (그래서 fetch보다 개인적으로 더 선호합니다.) 이 중 interceptor에 대해서 배워봅시다. axios interceptor 기능이란 "어떤 요청을 보낼 때 그리고 어떤 응답을 받아와서 처리할 때, 직전에 요청과 응답을 가로채주는 기능입니다. 클라이언트에서 서버에 요청을 보내기 직전 서버에서 응답을 받아와 클라이언트에서 사용하기 직전(.then. catch라는 후속처리 메서드를 실행하기 직전)에 가로챈다고 생각하면 됩니다. axios를 사용하기 전엔 당연히 npm or yarn(패키지 매니저) 로 설치해줘야 겠죠? * axios 써드 파티 라이브러..

리액트에서 임의로 js파일에 에러를 냈을 때, 브라우저에서는 아무런 요소도 볼 수 없고 흰 화면만 나타난다. 이유는 바로 "에러가 나면 스크립트가 실행을 멈추기 때문이다." try - catch (+ finally) 예시 코드 에러를 임의적으로 만들어놓은 상황(상수에 다른 값을 재할당했습니다.) const a = 1; a = 2; //위와 같이 임의로 에러를 냈을 때 에러난 부분부터 스크립트가 실행을 멈추고 // 아래의 코드는 실행이 안된다. return ( 안녕하세용 😎 React.js ); } 상수 a를 2로 변경하는 코드(에러코드) 이후의 멀쩡한 코드들은 그대로 브라우저에 렌더링시켜야 합니다. 이럴 때 에러 핸들링을 해줍니다. 에러가난 부분은 보여주지 않더라도 정상적으로 구동하는 애들은 보여주기 위..

Memoization fetch를 활용한 API호출 (JSON placeholder 활용) Lifecycle 제어 useReducer 사용하기 Context API 사용하기 에 대해서 제 velog에 정리해놓았습니다. 각각 링크를 걸어놨으니 필요 시 확인하시면 됩니다. 카카오톡 서버가 터지는 바람에 벨로그로 피신갈 수 밖에 없었어용 홍홍이.. 개인적으로 벨로그가 생각보다 사용하기 편한 느낌을 받아서 아예 이주를 할까 고민중입니다. 티스토리가 좀 더 다양하게 커스텀할 수 있는 느낌이긴 하지만요. 🐕 .. 또 티스토리에 포스팅하니 익숙해서 좋아지는 간사한 마음..😪