프로젝트에서 프론트엔드 부분을 담당하면서 작업을 이어가다 보면, 어느 순간 무한 스크롤 기능을 구현해야 하는 순간이 오게 된다. 아무런 방법을 모른다고 가정 할 때, 머리속에서 방법에 대해 떠올려보면 아마도 가장 먼저 생겨나는 방법은 웹 브라우저 내 스크롤바의 위치에 따라 데이터를 fetch 해오는 과정이 떠오를 것 같다. 물론 아닐수도 있지만 나는 그랬다.. 그야 아주 직관적인 방법이기 때문이다. 스크롤 바가 화면 맨 아래로 이동이 되었을 때, 그 순간 추가적으로 데이터를 가져오게 되면 그게 무한 스크롤이지 않을까. 브라우저에는 이렇게 스크롤 바의 위치를 표현해주는 API 를 제공한다. 이벤트에 구독하여 매 움직이는 순간마다 위치를 가져올 수 있는데, 이를 이용하면 충분히 직관적인 스크롤 이벤트를 구현..
수많은 사용자가 사용하는 웹 사이트가 있다고 가정해보자. 이러한 웹 사이트는 수많은 유저들에 의해 다양한 요청이 서버에 도착할 것이고, 서버는 이에 맞는 응답을 네트워크를 통해 전달할 것이다. 네트워크의 제한된 대역폭에 비해 출력량이 많아진다면 당연하게도 네트워크 지연이 발생하게 된다. 즉 대역폭 병목현상이 발생하게 된다. 물론 이벤트성 페이지에서 12시 정각에 상품 구매창이 열린다던지, 대학 수강신청과 같이 한 순간에 대량의 유저가 몰리는 경우와 같이 어쩔수 없이 지연이 발생하게 되는 상황은 지연이 발생할 수 밖에 없는 과정을 인정하고 이에 대한 해결책을 강구해야할 것이다. (이벤트 페이지의 구매창 클릭 버튼을 맨 밑에 위치시키는 등으로 급격하게 너무 쉽게 사용자가 몰리는 상황을 예방하는 방법도 있겠다..
useEffect 는 컴포넌트의 라이프사이클을 함수형 컴포넌트 내에서 조절할 수 있도록 제공되는 react hook 중 하나이며, 실제 react 로 컴포넌트를 구현하는 과정에서 아주 유용하고 자주 사용되는 hook 이라고 할 수 있다. 매 컴포넌트가 랜더링 될 때마다 필요한 sideEffect 를 다룬다던지(서버와의 통신), state 나 props 의 변화로 인한 다른 요소의 업데이트가 필요한 경우, 실제 컴포넌트가 unmounting 될 때의 상황에서 useEffect 는 필수적으로 활용되곤 한다. 그치만 실제 작업을 해보다보면 알겠지만, 이것저것 기능을 추가하고 서로 연계를 하다보면 어느새 컴포넌트 내 useEffect 가 너무 과다하게 사용하고 있는것은 아닌가 의문이 들 때가 있다. 필요해서 사..
이전 포스팅에서 redux를 간단하면서 의사코드 수준을 구현하면서 설명한적이 있다. 매번 리덕스를 사용할 때마다 action, dispatch, reducer 등등 용어부터 햇갈리면서 그 흐름 역시 파악하기 쉽지 않았는데, 구현 경험을 토대로 좀 더 리덕스에 가까워진 느낌을 받았었다. 이후 리덕스의 사용 시간을 점차 늘려나가면서 코드적으로도 익숙해지고 있는 중이다. 리덕스를 구현해보면서 느낄 수 있었던 점 중 또 하나는 리덕스는 동기적인 흐름이라는 점이다. dispatch 를 통해 실행된 reducer 는 순수함수이기에 동기적이다. 즉, 상태값에 대한 예상된 결과값을 도출하기가 쉽다는 장점이 있다. 하지만 서버와의 연결 등 비동기적으로 상태값을 변경해야할 상황이 많이 있다. 아무리 좋은 원격 상태관리이념..
함수형 컴포넌트를 사용하다보면, useState 를 통한 상태변화를 동기적으로 처리하고 싶을 때가 있다. 예를 들면 우선 데이터를 받아와 상태를 변경하고, 이 변경된 상태를 props 로 다른 컴포넌트에 넘겨준다던지, 상태변화과정을 순차적으로 진행해서 연결시키고자 할때 등등이 있다. 그리고 이러한 의도로 코드를 작성하였다가, 제대로 작성하지 않은 경우를 맞이하게 되는데, useState 는 비동기적으로 작동하기 때문이다. 직관적으로 상태가 변화하고, 그 변화된 상태 데이터를 컴포넌트에 반영하는것이 이해과정에서 편하지만, useState 가 비동기적으로 작동되어야 하는 이유가 있다. 실제 리엑트 공식문서에서도 동기적 사용을 위한 메서드를 제공하긴 하지만, 거의 절대적으로 이를 사용하지 말라고 경고한다. 그..
redux 는 간단한 로직에서 출발했다고 하는데... 리엑트 를 한번 간략하게 구현해보았으니, 이번에는 리덕스를 구현해보는 경험을 가져보고자 하였다. 구현이라고 해봤자 아주 간략하게 이러한 원리와 흐름으로 리덕스가 구현되었구나 정도를 파악하고자 하는것이고, 앞으로 리덕스를 사용함에 있어 리덕스의 flow 를 이해할 수 있지 않을까 하는 기대감이 있다. 실제로 리덕스는 npm trend 에서 알 수 있듯이 아직 많은 사람들이 사용하고있는 대표적인 상태관리 라이브러리이다. 이 외 recoil, mobx 등 많은 상태관리 라이브러리도 그 시작점은 리덕스라 해도 무관할 것 같다. 길어지는 코드가 싫지만 그래도 Redux를 사용했던 이유 처음 리덕스를 사용할 때, 외부에 store 를 생성하고, 거기에 또 dis..
훅을 사용할 때는 두 가지 규칙을 준수하여야 한다 리엑트의 훅은 자바스크립트 함수이다. 저번에 리엑트를 간략하게 구현하였을 때, 마지막으로 useState 에 대해서 구현을 했으며, 자바스크립트의 클로져 성질을 활용했다는 것을 알 수 있었다. 자바스크립트의 함수라면 굳이 규칙이 필요할까. 어째서 리엑트 개발팀은 두 가지 규칙을 두었으며, 이러한 규칙을 강제하기 위해 linter 플러그인을 제공하는 것일까 하며 궁금증이 생겼고, 조사해본 자료를 토대로 포스팅을 해보고자 한다. 2 가지 hook 의 규칙 리엑트 공식문서에서 언급하고 있는 hook 의 규칙은 크게 2가지이다. 1. 오직 React 함수 내에서 Hook 을 호출해야 한다. 사실 이 부분은 얼추 이해가 되는부분이었다. 즉 함수 컴포넌트 내부에서 ..
리엑트를 사용하기만 했지... 프로젝트를 진행하면서 가장 많이 사용한 라이브러리(요새는 거진 프레임워크라 해도 될..)는 리엑트이다. 많이 사용하는 만큼 항상 사용하는 hook 과 패턴에 의존하는 편이 있어서 좀 더 리엑트에 대해 공부를 하고자, 다시 공식문서를 참고하며 여럿 유명하신 개발자분들의 의견들을 참고하고 있다. (감사합니다!) 그저 당연하게 사용해왔던 라이브러리의 동작 원리에 대해서 할 수 있는만큼 알아보는것이 좋겠다 생각이 들어서, 검색과 강의를 참조하여 아주 간략하게 리엑트를 구현해보았다. 구현하는 과정과 이를 통해 리엑트에서 제안하는 규칙에 대해서 다뤄보도록 하자. 이 포스팅은 김민태: React로 구현하는 아키텍쳐와 리스크 관리법을 참고하였습니다. 간략하게 기본 셋팅 자바스크립트로 구현..
