FE 개발일지

오늘은 react-query에 있는 infinitiQueries와 IntersectionObserverAPI로 무한 스크롤로 작업을 하였는데요. 기존에는 window 객체에 scroll 이벤트로 무한스크롤을 구현했다가 사용자 입장에서 좀 더 원활한 스크롤 이벤트를 할 수 있게끔 개선작업을 진행하였습니다. 여기서 기존 scroll과 intersectionOnbserverAPI를 간단하게 개념정도만 짚고 넘어가봅시다. 기존 scroll 이벤트는 스크롤 발생 시 많은 이벤트가 동기적으로 실행될 수 있으며, 무한 스크롤의 경우에는 scroll 이벤트가 계속 발생되기에 정말 많은 콜백들이 실행될 수 있습니다. 이는 성능에 악영향을 끼치고 큰 부하를 줄 수 있게 됩니다. 이러한 부분을 개선한 API인 Interse..

어떻게 보면 저번 FE에서 OOP의 대한 고민 포스트의 대한 연장선일 것 같네요! API를 클래스로 바꾸어 react-query를 같이 쓰면서 한번 더 깨닫게 된 내용이니까요. 다들 Arrow Function 많이 쓰시나요? function과 Arrow function의 차이점은 저도 직접 경험했다기보다는 어떤 차이점이 있지?라고 찾아보고 이론적으로 접한적이 더 많은 것 같습니다. 간단하게 function VS arrow function의 차이점을 짚고 넘어가봅시다. 일반 함수의 this - 함수를 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩 할 객체가 동적으로 결정된다. 화살표 함수의 this - 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되고, 상위 스코프의 this를 가리킨..

#1 들어가기 안녕하세요. 오늘은 useState로 여러개의 input 상태를 관리하는 법을 포스트 하도록 하겠습니다. 저는 내 정보관리 페이지를 작업을 하고 있는데요. 내 정보관리는 워낙 관리해야 할 내용들도 많고 그만큼 변경도 많이 일어나는 페이지입니다. 그에 따라 여러 개의 iuput창을 활용하게 되는데, input 상태가 늘어날때마다 useState와 onChange 핸들러를 만드는 작업이 너무 싫었습니다. 그래서 이를 효율적으로 관리하는 방법에 대해서 고민하게 되었습니다. #2 과정 기존에 이런 코드로 변경되는 사항에 대해서 관리를 하고 있었습니다. const [corporationName, setCorporationName] = useState(""); const [corporationNumb..

#1 들어가기 안녕하세요. 오늘은 react-router-dom으로 라우터를 구성하던 중, 문제가 발생한 상황에 대해서 포스트를 써보도록 하겠습니다. 저는 개인적으로 사이드 프로젝트로 간단하게 페이지를 만들며 작업을 하고 있었습니다. 페이지 전환 작업을 react-router-dom의 도움을 받았구요. react-router-dom은 리액트의 화면 전환을 도와주는 역할을 하는 녀석이죠. 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줍니다. #2 문제 혹시, Route 설정을 다하고 url은 정상적으로 변경되지만, 렌더링이 되지 않는 현상을 겪어본 적이 있으신가요? 저는 react-router-dom의 도움을 받아, 페이지에 따른 각각의 컴포넌트를 불러와 렌더링하여 페..

이렇게 또 useState를 주제로 글을 쓰게 되었습니다. 한번 더 공식문서의 중요성을 느끼고 정리하면 좋겠다 생각되어 이렇게 글을 작성하네요 이번에는 제가 page 단위로 계속해서 10개의 데이터들을 불러와야 하는 작업을 하고 있었습니다. 근데 0페이지에서 1페이지의 내용들까지는 불러오는데 그 이후의 데이터들을 못불러오는 것입니다. 이런식으로 0에서 1로는 업데이트가 되었는데 1에서 머물러 있는 상태가 계속 되었습니다. count를 업데이트 하는 useState를 만든다고 생각했을 때, 이렇게 배웠고 실제 이렇게 사용했었으니까요 const addButton = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(..

안녕하세요. 오늘은 useState로 컴포넌트 값 다루는 주제에 대해서 얘기를 해볼까 합니다. 다들 useState로 컴포넌트 다루는데에 있어 아직 미숙한 분들도 이미 익숙해서 잘 다루시는 분들도 많다고 생각이 듭니다. 아직 저는 미숙한 쪽에 속하는 것 같습니다. 이번 개발 이슈는 새로고침 버튼을 눌렀을 때 api를 받아오는 로직이였습니다. 똑같은 로직으로 컴포넌트에 값을 잘 넘겨줬고, 실행도 잘 되었습니다. 그러나 한쪽은 갱신이 잘되고 다른쪽은 갱신조차 안되는 상황이 발생하는 것 입니다. 이 이슈에 관련해서 생각나는 부분들이 있으신가요? setSlidePopupContent(컴포넌트)를 실행할 땐 값이 잘 넘어갔던 코드가 새로고침 버튼을 눌렀을 땐 함수는 잘 실행이 되지만 값이 넘어가지 않아 갱신이 안..

#1 Fragement react에서는 컴포넌트가 여러 엘리먼트를 반환하는 것은 다들 알고 계실겁니다. Fragments는 dom에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있습니다. 이 때, Fragments를 선언하는 shorts syntax가 있습니다. key 또는 attribute를 지원하지는 않지만 다른 엘리먼트처럼 이렇게 사용할 수 있습니다. 그러면 이걸 왜 설명하냐? 리액트로 개발을 하다보면 팝업 모달을 위해 작업을 하셨던 적이 많으실거라고 생각합니다. 이번 글에서는 팝업 모달창의 z-index 때문에 애를 먹었던 경험을 정리해보고자 합니다. 간단하게 설명드리면 z-index는 가상의 z축을 만들어 태그들에게 z축의 값을 줍니다. (z축 : 화면에서 수직을 이룬다.) 즉, 어떤..

#1 useState useState.. 리액트를 접하면서 HOOKS에 의한 useState를 통해 많은 도움을 얻었습니다. 오늘 개발 도중 useState의 동작원리를 제대로 이해하지 못해 어려움을 겪었던 것을 정리해보고자 합니다. 사실, 리액트의 특성과도 연관이 있어 리액트를 좀 더 이해하는 과정도 됐었던 것 같습니다. useState.. 리액트를 사용하면서 가장 많이 써봤던 녀석이라 제대로 이해하고 있다고 생각했습니다. 제가 기능 구현을 하고자 했던 것은 검색기능이였는데 검색한 검색어가 없을 경우에 대한 처리였습니다. {search} 에 대한 검색 결과가 없습니다. 간단한 기능이라고 생각해 searchBar에 form을 달고 submit을 이용해 검색결과를 처리하고자 생각하였습니다. const [s..