데굴데굴

리스트의 크기가 큰 경우에는 보통 페이지네이션이나 무한스크롤로 끊어서 보여줄 수 있다. 내 프로젝트에서는 로컬에 있는 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..