개발일지

이번 글은 사이드 이펙트로 인하여 refetch에 관한 문제를 다뤄보려고 합니다문제이게 pull 받고 난 후 상황인디여refetch를 컴포넌트 본문에서 호출하다 보니, 리렌더링이 일어날 때마다 서버에 요청이 쏟아졌습니다. 이렇게 결과는버튼 하나만 눌러도 네트워크 탭에 수십 개의 요청이 찍히고,서버는 불필요한 트래픽으로 과부하가 걸렸습니다.화면도 계속 깜빡이면서 UX가 완전히 망가졌습니다.왜 이런 문제가 생길까?핵심은 React의 컴포넌트 렌더링 방식 때문입니다.React 컴포넌트는 상태나 props가 바뀌면 리렌더링 됩니다.리렌더링될 때마다 함수 본문이 다시 실행됩니다.그런데 그 안에서 refetch()를 호출하면?→ 렌더링 = 네트워크 요청 이 되게 됩니다즉, refetch는 조건부로 실행되어야 하는 ..

“React에서 컴포넌트의 생명주기는 크게 마운트(Mount), 업데이트(Update), **언마운트(Unmount)**의 세 가지 단계로 나뉘고, 이 생명주기 각각에 대응하는 작업을 함수형 컴포넌트에서는 Hooks를 통해 수행합니다.”1. 마운트(Mount) 단계이 단계에서는 컴포넌트가 DOM에 처음 렌더링됩니다.클래스 컴포넌트에서는 constructor → render → componentDidMount 순으로 실행됩니다.함수형 컴포넌트에서는 useEffect를 사용하고, 의존성 배열을 빈 배열([]) 로 설정하면 componentDidMount처럼 한 번만 실행됩니다.useEffect(() => { console.log("컴포넌트가 마운트되었습니다."); // 초기 데이터 요청 등}, []);2..

서론: 필자는 프론트엔드 단톡방에 들어가있다 어느날 갑자기 tailwind와 nextJs 사용중에 한분이 여백이 안지워진다는 글을 올리셨다. 나는 당연히 width가 100vw가 아닌거 아니야? 했는데...결론:해당 이슈를 단톡방 전원이 고민하면서 padding? gap? border? width? 등 여러 이유를 댔지만 모두 아니었다.그러나 이 문제를 겪은분이 계셔서 해결해주셨는데 문제는 css에 sticky 라는 속성이 있는데 해당 속성으로 header를 만들면 가끔 겪는이슈라고 하셨다 정확한 이유는 스티키 계산이 소숫점까지 계산하며 틀어지는 걸로 생기는 이슈라고하셨다. 그리하여 해당 이슈를 가상 요소인 before로 해결이 가능하다고 말씀해주셨다 느낀점:필자는 sticky header를 잘 사용하지..

사내 프로젝트를 진행중에 제네릭 타입을 사용 해야 할 일이 생겼다그런데 제네릭 타입을 사용하니 에러 문구가 나왔다 const getSortingClickHandler = (header: Header) => { return ... };아무 문제가 없어야 하는 타입 정의 구문이어야 한다 허나 아래와 같은 에러 문구가 발생하였다처음엔 해당 문구를 확인하지 못하고 const getSortingClickHandler: (header: Header) => (event: unknown) => void = (header) => { return ... }위와 같이 작성하여 우회하였다 하지만 가독성이 너무 떨어져 고민을 하다문득 처음 typeScript를 배우던 중 해당 문제를 겪었던 생각이 났..

오랜만에 블로그를 남기네요 이번주는 회사에서 react-table 관련 주제로 공부를 하느라 좀 늦었는데 react-table을 공식문서를 읽어가며 사용하다가 멘탈이 나간 주제가 있었습니다. 그것은 바로바로...해당 에러인데요 react hook 규칙을 위반했다! 라고 적혀있습니다. 해당 에러는 제가 react 기초를 공부할때 가끔 보았던 에러인데요 공식문서에 해당 에러를 검색해보면공식 문서에 이렇게 조건부 랜더링을 훅 위에 사용하지 말라고 돼있습니다 이 말이 무슨뜻이냐면 간단히 말해서 hook 호출을 하고 return( 랜더링 되는 부분) 에 사용하라는 것인데요 그래서 vsCode를 키고 제 코드를 확인해보았습니다.ㅋㅋㅋㅋ 이럴수가 이렇게 돼있지 뭐에요 당연히 projcetList가 있어야 데이터를 넣..

점점 인터넷 문화가 발전돼가며 기존 바닐라Js 개발자들은 유지보수와 여러 과정에서 어려움을 겪었다 이 문제를 해결하기 위해 React가 개발된 것 이다. 1.ReactJs와 바닐라Js의 비교기능React바닐라 JS구조컴포넌트 기반 구조, UI 컴포넌트 재사용 가능구조가 존재하지 않는다, HTML, CSS, Js가 섞여서 존재한다상태 관리useState, useEffect, zustand, Context API등 사용수동으로 상태를 관리하고, DOM을 직접 업데이트UI 업데이트가상 DOM을 사용해 실제 DOM과 바뀐 부분만 자동 업데이트DOM을 직접 조작해야한다성능가상 DOM으로 리렌더링 최적화직접 DOM을 수정하므로 성능에 영향을 미치는 경우가 밠생재사용성높음 ( 컴포넌트 재사용 가능 )낮음 ( 수동으로..

1. react의 등장 계기페이스북 개발자들은 페이스북이 정형화 되고 기능이 많아질수록 코드의 유지보수와 가독성이 떨어져 새로운 기능을 만들기 힘들어지며 이를 해결 할 방안을 찾다가 리엑트를 만들게 되었습니다.2. 돔의 구조와 이해react의 작동 방식에 들어가기 앞서 돔의 개념부터 재탐색을 해볼게요 Dom은 웹 사이트에  접속하면 보이는 버튼 혹은 메뉴 등이 모여 하나의 페이지를 만든다. 이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 DOM이다.위 사진은 돔의 구조를 이미지화 했을때 화면이다 이처럼 트리 구조를 띄기 때문에 하나의 값이 변경되면 그 값을 변경하기 위해 모든곳을 리랜더링(새로고침)을 하게 된다. 이렇게 된다면 문제점이 하나의 값만 수정해도 모든 페이지를 불러와 새로..