영코드

리액트 훅 인 액션 (존 라슨)을 읽다가, 잠깐 짚고 넘어가고 싶은 부분을 발견했습니다! 퀵메모 🍮예제를 보면, 부모 컴포넌트에서 관리하는 bookable 과 그 갱신함수 setBookable을 자식컴포넌트에서 prop 으로 전달받는 구조인데useEffect 의 의존성으로 등록되어있더라구요. setter 함수는 변동되는 함수가 아닌데, 의존성 배열에 넣는 의미가 있을까 해서 찾아봤습니다.우선 챗지피티한테 묻기.* state setter 함수는 React에서 절대 변하지 않는다. 즉, 리렌더링이 된다고 해서 setBookable 의 참조가 새로 생기지 않고 항상 동일함. (공식문서 확인O)* useEffect 의 의존성 배열에 넣은 이유는 ESLint 규칙 때문으로 보인다. React 공식 ESLint ..

프론트엔드 개발자에게 curl 이 필요한 순간curl은 명령어 기반의 HTTP 클라이언트 도구입니다.간단히 말하면, 인터넷에 있는 서버에 요청을 보내고, 응답을 받아오는 프로그램이에요.저는 네트워크 보안 장비 회사에서 프론트엔드 개발자로 일하고 있는데, 가끔 QA 스레드를 보면 이런 멘션이 올라옵니다."curl 명령어로 테스트한 결과를 공유해주세요.""curl 명령어로 실행해서 응답을 알려주세요."보통 개발자들이 REST API를 테스트할 때는 자바스크립트 환경이라면 fetch를, 혹은 API만을 직접 확인할 때는 Postman을 많이 씁니다.그런데 보안 장비 회사의 특성상, 클라이언트 → 웹서버 → 장비 서버 구조에서 동작하기 때문에, 단순히 웹서버만 확인하는 게 아니라 장비 서버에 직접 접근해서 CL..

안녕하세요!어제까지만 해도 햇빛이 너무 따갑고 푹푹 찌는 더위에 숨이 막히는 날이였는데요.간밤에 비가 내리더니 공기가 조금 선선해진 느낌이 듭니다. 아직 물놀이도 못갔는데..여름을 좋아하는 저는 아쉬운 마음이 드는데요 ㅠㅠ 여름아 가지마,,하지만 비가 그치고 며칠이 지나면 또 언제 그랬냐는 듯 푹푹 찌는 더위를 자랑할 것 같아요. 재귀적으로요... 오늘의 주제는 바로 ‘재귀함수’입니다. (짝👏짝👏짝) (제 유머 어떤가요? 챗GPT에게 검수받음..ㅎㅎ) 최근에 변경된 로그를 비교하는 Diff 뷰어 컴포넌트를 개발했었는데요, 이때 사용한 개념이 '재귀함수' 였어요.개념적으로 알고만 있었지 실무에서 사용한건 처음이 아닌가 싶네요오늘의 주인공은 재귀함수이지만, 살짝 꼽사리를 껴서 deep-diff 라는 라이..

다시 돌아온 트러블 슈팅입니다 ㅎㅎ 오늘 다뤄볼 문제는 '클로저' 개념과 관련이 있습니다. 실무에서 자주 겪게 되는 문제인데 버그를 유발할때는 굉장히 당황스럽지만 알고보면 당연하고, 또 쉬운 문제랍니당. 구현된 기능은 대략 이렇게 생겼어요 IDNameActionsjo123John Smith … Grid 의 Actions 컬럼을 통해 Dropdown Menu를 사용할 수 있는 " … " 버튼을 렌더링 합니다. AG-grid의 각 cell은 cellRenderer를 통해 렌더링 될 컴포넌트를 선언 할 수 있고, cellRendererParams 옵션으로 파라미터를 전달할 수 있어요. 해당 내용은 AG-Grid 도큐먼트에 자세히 나와있으니 문서를 참고해주세요! const dropdownMenu = [ ..

오늘 드디어 릴리즈가 끝났습니다.바쁜 일정 때문에 이번 개발주기에는 코드베이스를 깊게 생각하고 고쳐쓰는 과정에는 크게 투자하지 못했고 ‘잘 작동 하는지!’ 를 우선으로 해야했는데요.오늘은 살짝 여유가 생겼으니 얼마 전에 작성했던 useDebouncedCallback 훅을 다시 리뷰해보겠습니다.const debouncedFetch = useDebouncedCallback(doSomething , 3000)useEffect(()=>debouncedFecth(),[alertToast])function useDebouncedCallback void>(callback: T, delay: number) { const timeoutRef = useRef | null>(null); const callbackRef ..

주말 저녁, 개인 블로그 만들던 중 짧게 기록해보는 트러블 슈팅입니다!반응형 블로그를 만들고 있는데,모바일 환경에서는 스크롤 중일 때만 Navigation이 보이도록 하고 싶었어요.그래서 window.scrollY로 스크롤 여부를 감지하려 했는데...console.log(window.scrollY); 이 계속 0만 나오는게 아니겠어요? 😱 🔍문제 원인DevTools로 확인해보니, 스크롤이 html이 아닌 body 요소에서 발생하고 있었어요.기본적으로는 html 요소가 스크롤을 담당해야 하는데, body로 넘어가 있던 상태.왜 이런 일이 발생했는지 추적해보니...레이아웃을 구성하면서 프로젝트 body에 height: 100% 같은 스타일이 들어간 게 문제였어요.즉, body에 스크롤이 걸려있는 것이니d..

안녕하세요 💛이번에도 따끈따끈한 '오늘의' 실전 트러블 슈팅 이야기를 가져왔습니다.✌️ 오늘은 버그의 원인이 소스코드에서 잘 보이지않았기 때문에해결하는데 시간이 오래 걸리지 않을까~ 걱정스러웠는데요. 생각보다 간단하게 해결되었답니다. ㅎㅎ 버그 상황을 간단한 도식으로 나타내 봤어요. 1. 드롭다운 메뉴를 눌러서2. Menu 2를 선택합니다 --- Menu 2 를 누르면 사용자의 확인을 요청하는 Dialog가 발생해요.3. Dialog의 취소or확인을 눌러 창을 닫습니다.4. 어? 그런데 갑자기 화면에 그 어떠한 요소도 클릭되지 않아요!!!!! 어떤가요? 아주 크리티컬한 버그죠.Dialog 를 닫고나면 잘만 클릭되던 DropdownMenu도 더이상 클릭되지 않았어요. 브라우저 콘솔에는 다음과 같은 경..

안녕하세요 💛 오늘도 따끈따끈한 실전 트러블 슈팅이야기를 가져왔습니다. 🔥 주제는 '코드를 명시적으로 작성해야 하는 이유' 인데요. 아마 한번 쯤은 다 들어보셨을 거에요 (저도 알고는 있었습니다..만) 이번에는 이 원칙을 지키지 않아서 실제로 버그가 발생했던 경험를 공유 드리겠습니다 😀 우선, 배경상황은 이렇습니다. * 다국어(i18n) 를 지원하는 웹사이트* 로그인 후 사용자가 접속하는 페이지에 ag-Grid가 있고, 이 그리드의 컬럼명은 다국어로 설정 const columnDefs = useMemo( () => [ { headerName: t('table.name'), field: 'name' }, { headerName: t('table.email'), field: 'email' ..

Previousag-grid 컬럼 정의에 tanstack query 데이터를 참조했을 때 벌어지는 일 (1) ag-grid 컬럼 정의에 tanstack query 데이터를 참조했을 때 벌어지는 일 (1)오늘도 따끈따끈한~ 당일 자 트러블 슈팅이다.레포트된 버그는 다음과 같다.ag-grid를 사용한 테이블에서 사용자가 순서를 변경한 컬럼이 일정시간 뒤 초기화됨! 🙄 해결해보자. 해당 프로젝트에meldu.tistory.com 1편 내용에 이어서... 그렇다. 의존성 배열에 '장비그룹' 을 가진 useMemo는 장비 그룹 데이터가 바뀌지만 않는다면 컬럼이 초기화 되는 일은 없다. 코드를 작성할 당시에도 장비 그룹 데이터가 바뀔 것이라고 생각 하지 않았던 듯 싶다. 적어도 화면을 사용하고 있는 동안은 말..

오늘도 따끈따끈한~ 당일 자 트러블 슈팅이다.레포트된 버그는 다음과 같다.ag-grid를 사용한 테이블에서 사용자가 순서를 변경한 컬럼이 일정시간 뒤 초기화됨! 🙄 해결해보자. 해당 프로젝트에서는 AG Grid 를 사용하고 있다. AG Grid 는 아주 강력한 테이블 라이브러리로 정렬, 필터, 피벗 등.. 거의 왠만한 기능은 탑재되어있다고 봐도 무방할 정도.그러나 강력한 만큼, 개발자가 직접 라이브러리에 개입하기가 너~무 힘들다. 커스텀이 쉽지않아서 오히려 사용에 꺼려질때가 있다. 개인적으로는 거의 프레임워크 수준이라고 느꼈다. 아무튼, 이 AG Grid 의 구조 아래서, 컬럼은 이렇게 정의된다.const App = () => { const [columnDefs, setColumnDefs] = u..