전체 글

언제 어떤 메서드를 사용하는 것이 좋을 지 궁금해서 적어보는 글 📌 공통점refetch와 invalidateQueries 둘 다 리액트 쿼리의 캐시된 데이터를 무효화 시키는 메서드이다. 📌 차이점사용 목적은 같지만 메서드별로 동작과 사용시기가 다르다.refetch- 쿼리를 새로고침하여 바로 데이터를 다시 fetch 한다. - 바로 fetch한 결과를 바로 볼 수 있다는 것이 장점이다.- 사용 예시) 새로고침 버튼을 눌러 최신 데이터를 수동으로 가져올 때 invalidateQueries- 쿼리의 캐시를 무효화하여 stale한 상태로 만든다.- 1) 컴포넌트가 다시 마운트되거나2) 사용자가 포커스를 변경하거나3) 네트워크가 다시 연결되거나4) 자동 리페치 간격이 설정되어 있는 경우간격에 따라서 다시 fe..

🔎 비동기적으로 동작하는 setStatesetState로 상태 업데이트 후 예상처럼 값이 나오지 않는 경험을 여러번 했었다. 이유를 찾아보니 호출한 직후 상태가 바로 업데이트 되지 않을 수 있어 상태 업데이트 후 바로 상태값을 확인할 때 예상한 값이 나오지 않을 수 있다는 것이었다. 아래와 같은 방법을 통해 이 문제를 해결했었다.1) useEffect 훅을 사용하여 상태 변경 후에 다음 로직을 실행하도록 설계한다.useEffect(() => { console.log(value); }, [value])2) 이전 상태에 의존할 경우 함수형 업데이트를 통하여 처리한다. const increment = () => { setCount(prevCount => prevCount + 1);}; 🔎 비동기..

책을 선택하게 된 계기프론트엔드의 기본이 되는 js의 지식의 깊이가 너무 얕다고 느꼈다. 어렴풋이 알고 있는 클로저, this 등.. 기초를 단단히 다지는 게 시급했고, 이 책을 발견하게 되었다.두껍지 않은 두께와 핵심 개념을 모두 포함한 알찬 책이라는 생각이 들어 고민없이 선택했다. 결론 : 너무 만족 ⭐⭐⭐너무 만족스럽게 마지막 페이지를 닫았다. 그동안 구글링을 전전하며  js 관련 개념을 조각조각 이어붙이면서 가장 답답했던 것은 개념들이 서로 어떻게 연결되어 있는 지를 이해하기가 어렵다는 것이었다.이 책은 개념의 개연성이 잘 나타나 있어서 앞서 배운 개념을 뒤에서 활용하여 설명하며 각 개념들이 어떻게 연결되고 작용하는 지를 체계적으로 설명해주었다. 이 부분에서 개념의 이해도가 전체적으로 높아진 느낌..

코딩테스트 문제를 풀다가 시간 초과 실패를 겪어본 적 누구나 있지 않은가? 일단 나는 굉장히 많다...ㅜ 그래서 조금이라도 시간 복잡도를 줄이는 것에 늘 생각하고 고민해보려 한다.아예 접근 방식을 다르게 하는 것이 시간 복잡도 측면에서 가장 효율적이었던 경험이 많지만 같은 로직에서 간단한 조작 하나만으로 복잡도를 줄일 수 있는 방법이 있다. 바로 배열에 접근할 때 인덱스로 접근하는 것이다. 배열을 다룰 때 원본 배열을 그대로 둔 채 인덱스로만 값을 조종하는 방법은 상황에 따라 실행시간을 줄이는데 소소한 도움이 된다. 👁‍🗨 배열에 인덱스로 접근하는 예시예시 1) 배열의 마지막 요소를 반복적 제거하는 과정순서대로 pop 메서드를 사용하는 경우와 인덱스 값을 1씩 줄이는 방법을 사용하는 경우의 예시이다...

검색어 입력 중 검색창 외부를 클릭하면 연관 검색어 창이 닫히도록 구현해야 할 일이 생겼다 비슷한 경험으로 과거 모달을 띄우고 모달 외부를 클릭하면 모달이 닫히도록 구현한 적이 있는데, 그때는 어두운 불투명 오버레이 컴포넌트를 깔고 오버레이 컴포넌트에 onClick 이벤트 핸들러를 할당하여 클릭 이벤트가 발생하면 모달을 닫히는 동작으로 간단하게 구현할 수 있었다. 이번에도 동일한 방법으로 투명 오버레이를 깔아 구현해볼까 생각했으나 연관 검색어 창이 활성화 된 상태에서도 지도 확대 축소나 스크롤 등의 이벤트는 정상 동작 해야했기 때문에 불가능하다고 판단하였다. 💭 생각한 두가지 방법 그래서 생각해본 두가지 방법..! 우선 연관 검색어 창이 열려있는 지 닫혀있는지를 boolean으로 나타내는 state값을 ..

진행 중인 팀 프로젝트에서 데이터를 그래프 형식으로 나타내야할 일이 생겼다. 여러가지 그래프 라이브러리 중에서 최종적으로는 recharts를 사용하게 되었다. 📊 다양한 그래프 라이브러리의 존재 정말 다양한 그래프 라이브러리가 있었다. 그 중 후보군은 두개로 좁혀졌다. 1. ApexCharts 2. Recharts 기본적인 선정 기준은 다음과 같았다. 1. 러닝커브(학습 소요시간)이 낮고 2. 깔끔한 UI를 갖고 있고 3. 적당한 커스텀이 가능하며 4. 관련 레퍼런스가 많을 것 다음 선정 기준을 잡기 위해 내가 구현해야 할 기능에 대해 알아보고 라이브러리의 기술로 구현이 가능할 지에 대해 찾아보았다. 📍 구현 기능1. x값 기준 그래프 부분 색상 변경 : 이게 안된다..?!?!?! 내가 구현할 그래프는 ..

말로만 들어본 웹팩. 평소에 CRA를 통해 프로젝트를 만드는데, 이 CRA설치에 웹팩이 포함되어있어 웹팩파일을 직접 설정하는 경우가 없었다. 이번에 VSCode 익스텐션을 만들어보며 웹팩 설정도 같이 해보게 되어 기록! 🌟 Webpack이란? 웹의 규모가 커질 수록 파일 간의 관계가 복잡하고 무거워져서 브라우저 로딩 시간이 길어지는 현상이 나타난다. 이때 웹팩을 사용하여 파일 정리 및 최적화를 해줄 수 있다. 웹팩은 여러개의 파일을 하나로 합쳐주는 자바스크립트 모듈 번들러이다. 쉽게 말해 웹팩을 통해 여러개로 나눠진 파일을 하나의 번들로 모듈화하여 로딩 속도도 줄이고 가독성과 유지보수성도 향상시키는 역할을 한다. 만약 번들의 크기가 너무 커질 경우 초기 로딩 속도는 저하될 수 있는데 이땐 웹팩에 코드 스..

컴포넌트 하나를 만들기 위해서 폴더 하나에 컴포넌트 파일 하나와 스타일링 파일 하나를 각각 담는 경우가 많다. 파일마다 보일러 플레이트도 존재하기 때문에 컴포넌트의 개수가 많아질수록 매번 수동으로 다 만들기에 번거로움을 느껴 효율적인 작업을 하기 위해 익스텐션을 만들어봐야겠다는 생각을 하게 되었다. 💪🏻 만들고 싶은 익스텐션 여러 스타일링 도구에 적합한 익스텐션을 만들고 싶었기 때문에 구분이 필요했다. 일단은 내가 사용해본 styled componenet와 scss 대상으로 만들었다. 추후 더 추가할 예정! 생각한 동작은 아래와 같다. 1. 원하는 컴포넌트 위치의 상위 폴더에 우클릭을 한다. 2. "{컴포넌트명} {스타일링도구}" 을 입력받는다. 3. 컴포넌트명의 폴더가 생기고 하위에 컴포넌트 파일과 스..

TailwindCSS에서 SCSS로 바꾸는 도중 문제가 발생했다.!! 근데 해결하고 보니 어처구니 없는 기초적인 실수라서 다시는 같은 실수를 하지 않기 위해 부끄럽지만 기록해보려 한다. 🚨 문제 발생 토글 버튼을 직접 구현하는 과정에서 css가 적용되지 않는 문제가 발생했다. 원래대로라면 체크박스 형식의 input 선택 유무에 따라 .btnInputBody 와 .btnInputBall의 속성이 바뀌어야 한다. 하지만 속성이 바뀌지 않았다..ㅜㅜ tailwindCSS로는 무난하게 구현했었는데 왜 문제가 발생했을까? import styles from "./input.module.scss" ; .btnInput { input{ display:none } input:checked { .btnInputBody{ ..

Next13의 서버 컴포넌트를 활용한 data fetching 방법에 대해 공부하다보면 상당부분이 react-query와 흡사하다는 것을 느낄 수 있다. Next13의 data-fetching 그리고 react-query Next 13 버전에서는 fetch() api를 지원하여 서버 컴포넌트 내부에서 data fetching이 좀 더 간편하도록 도와준다. fetch 옵션을 통해 캐싱 , revalidate 등의 기능도 쉽게 사용할 수 있다. 여기서 한가지 궁금증이 생겼다. 그렇다면 next13에서 react-query 사용할 필요가 없을까?? 보통 react-query를 사용하는 이유의 대부분이 next13의 fetch api가 지원하고있는 기능을 사용하기 위해서라고 생각한다. 캐싱, 동기화 및 업데이트..