데굴데굴

리스트의 크기가 큰 경우에는 보통 페이지네이션이나 무한스크롤로 끊어서 보여줄 수 있다. 내 프로젝트에서는 로컬에 있는 json 파일을 활용하고 있었고, 솔로로 하는 토이 프로젝트였어서 서버까지 구현하기에는 예상했던 것보다 공수가 많이 들 것 같아 어떻게 해야하나 고민이었다. Intersection Observer API를 이용한 무한스크롤 방식으로 slice해서 보여준다고 해도 결국엔 매번 json 파일 전체를 불러왔기에 최선의 방법은 아니라고 생각했다. 따라서 큰 크기의 리스트를 프론트 단에서 효율적으로 보여줄 방법이 필요했다. 리스트 가상화, windowing이란? 참조 react-window로 대형 리스트 가상화 react-window는 대형 리스트를 효율적으로 렌더링할 수 있는 라이브러리입니다. ..

1. 문제 상황 2. 근본적인 원인 - 이 페이지에 어떻게 접속하게 되었나 3. 해결법 떠올리기 4. 해결 방법 5. 결과 부트캠프에서 했던 프로젝트를 리팩토링하다가 이 문제를 만나게 되었다. 문제 상황 '오픈채팅으로 연락하기' 버튼을 누르면 간혹 이런 페이지로 이동하였다. 근본적인 원인 - 이 페이지에 어떻게 접속하게 되었나 '오픈채팅으로 연락하기' 버튼에 쓰인 window.open()은 앞에 프로토콜까지 붙어있어야 정상적인 링크로 인식한다. (window.location.assign()도 마찬가지이다.) 예를 들어서 내가 현재 localhost:3000에 있다고 가정할 때, 콘솔에 window.open('www.naver.com')를 입력하면 주소창에 이렇게 입력된다. 반면 window.open('h..

Proxy CORS 처리를 백엔드 개발자에게 요청할 필요 없이 리액트 라이브러리나 webpack dev server에서 제공하는 proxy 기능을 이용하면 CORS 정책을 우회할 수 있다. 브라우저를 속인다고 생각하면 된다. 1. webpack dev server의 proxy 기능 이용 클라이언트 폴더 package.json의 맨 밑에 프록시 설정을 추가한다. 아무데나 넣어도 상관은 없지만 보통 알아보기 쉽게 맨 밑에 추가한다고 한다. ... "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "las..

⚙️ 오늘 배운 주제 React Custom Hooks, React Concurrent Feature 🐹 오늘의 기분 오늘도 하루종일 솔로였다. 그래도 저번 주말에는 푹 쉬었어서 컨디션이 나쁘지 않다. usememo, usecallback에 이어서 커스텀 훅을 학습했는데 당최 무슨 소린지 모르겠어서 여러 자료를 찾아보았다. 공식 문서 설명은 너무 어렵게 느껴져서 useFetch나 useInput으로 간단하게 작성된 예제들 먼저 검색해봤는데 이것도 실습에서 겨우 구현해서 더 연습이 필요할 것 같다. 내일은 이 지식을 기반으로 하루종일 과제를 해야 한다. 제대로 찾아보고 내일을 맞이해야겠다. 🗝 키워드 custom hooks, 코드 분할, React.lazy(), React.suspense, fallback..

⚙️ 학습 주제 Redux 보충 🐶 오늘의 기분 아침에 트리 dfs 문제를 푸는데 될 듯 안 될 듯 코드가 안 써져서 한참 고민했다. 아직 못 풀어가지고 이따 또 보거나 내일 아침에 다시 풀어보고 그래도 못 풀면 레퍼런스 볼 예정.. 갑자기 그래프/트리 순회가 나와서 매우 당황스럽지만 이 기회에 제대로 공부해놔야겠다. 어제 과제를 다 끝내서 오늘은 퀴즈 풀고 리액트랑 리덕스에 대해서 좀 더 찾아보았다. 자세하게 정리해놓은 글이 많아서 감탄하면서 읽었당.. 이런 글 쓰시는 분들은 뭐하시는 분들일까.. 존경스럽고 감사하다. 공식문서도 내 말로 요약해가며 읽었더니 뭔가 훨씬 윤곽이 잡히는 느낌..! 근데 막 redux toolkit도 있고 react-redux도 있고 redux도 있고 이러니까 머릿속에서 막 ..

⚙️ 오늘 배운 주제 Redux 🐹 오늘의 기분 어제 React로만 작성했던 장바구니 과제를 Redux로 작성하는 과제를 진행했다. 이번에는 총 세 명이서 페어를 했는데 그래서 그런지 과제가 금방 끝났다. 일정 보니까 내일까지 이어지는 과제길래 약간 머쓱했음.. 금요일에도 하루종일 솔로라 그 동안 부족하다고 느꼈던 부분을(너무너무 많다....) 이번 기회에 조금 채워놓아야겠다. 흔치 않은 개인 시간이다..! 🗝 키워드 Store, Action, Dispatch, Reducer, Object.assign 🗣 스스로에게 설명 상태 흐름에 관한 내용은 부족한 내용이 많지만 오늘 블로깅 과제로 대체한다. Flux architecture와 Redux 데이터 흐름 참고 React Redux Tutorial for ..

⚙️ 오늘 배운 주제 React 상태 관리 🐹 오늘의 기분 오늘은 잠깐 상태 관리에 대해 학습하고 쇼핑몰 사이트의 장바구니 기능을 구현하는 과제를 했다. 처음으로 셋이서 페어를 해봤는데 재밌었다. 처음부터 전부 작성하는게 아니라 이미 작성된 파일에 장바구니의 기능만 추가하는 거라 전체적인 파일 구조를 파악하는게 우선이었다. 그런데 이게 복잡하게 얽혀있어서 쉽지 않았다. 왜 그림을 그려보고 하라고 했는지 이해가 되는 순간이었다. 페어분이 너무 잘하셔서 슉슉 끝났다. 혼자서 다시 풀어봐야지 🗝 키워드 상태 관리, Redux, Props drilling 🗣 스스로에게 설명 상태 = 동적으로 표현되는 데이터 들어오는 데이터가 가짜 데이터라 할지라도 일단 컴포넌트를 구현하는 것에 집중한다. 로컬 상태 -> 컴포넌..

⚙️ 오늘 배운 주제 React로 custom component 만들기 2 🐹 오늘의 기분 지난 주에 이어서 컴포넌트 만들기 과제를 했다. 주말에 일이 있어서 복습을 평소보다 깊게 못해서 약간 걱정됐었음. 페어분과 머리 싸매고 한 덕에 어드밴스드까지 무사히 끝냈다. 진짜 불태웠다고 말할 수 있다.... 이론 학습한 게 까마득하게 느껴질 정도다. 이번 과제에서는 CSS 관련해서 배워가는게 참 많았다. 아무래도 실생활에서 자주 보는 컴포넌트들이다 보니 더 깔끔하게 만들고 싶은 마음이 있었다. 개발공부하면서 느끼는 건 기본이라도 하는게 참 어렵다는 거다. 당연하게 느꼈던 기능인데 막상 직접 구현하려니 엉망진창이고 이런 경우가 많아서 여기서 기능을 더 더하는 것보다 일단 기본이라도 하는게 진짜 중요하다는 걸 뼈..