React Query를 사용하여 GET 요청을 처리할 때에는 주로 useQuery를 사용하게 되는데, 이때 아무런 조건 없이 useQuery를 사용하게 되면 기본적으로 컴포넌트가 렌더링 되는 시점에 데이터 가져오기를 시도합니다. 하지만 개발을 하다보면  종종 '특정한 이벤트'가 발생했을 때에만 데이터를 가져와야 하는 경우가 있습니다.이번 글에서는 그 경우 적절하게 처리하는 방법에 대해서 알아보겠습니다. GET 요청에 useMutation을 사용해야 할까?한 가지 생각해 볼 수 있는 방법은 useMutation을 사용하는 것입니다. 하지만 여기서 고민이 생깁니다.useMutation으로 GET 요청도 처리할 수 있지만 보통 POST, PUT, DELETE와 같은 '변경 작업'에 적합한 훅입니다.다행히 Re..

이번 글은 TypeScript 문법 중 유니온 타입과 인터섹션 타입, 타입 가드와 타입 단언에 대한 내용입니다.분명히 알고 있으면서 사용해 봤던 문법들이지만, 설명하려고 하면 애를 먹는 만큼 이번 기회에 한번 더 정리하려고 합니다. 유니온 타입이란?유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다라는 의미의 타입입니다.function logText(text: string | number) { // ...} 위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있습니다.이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다. 유니온 타입의 장점유니온 타입의 장점은 아래 예시를 확인해 보면 ..

날씨가 따뜻해지고 있는 요즘 저는 회사에서 B2B용 사이트 새로 만드는 중입니다. 덕분에 웹 사이트의 기초가 되는 여러 작업들을 해 볼 수 있었는데, 오늘은 그중 사이트 URL을 공유했을 때 나오는 오픈 그래프에 대해 글을 작성하려고 합니다.   오픈 그래프(Open Graph)란?오픈 그래프란 (줄여서 og) 사이트를 공유했을 때 접속하기 전 사이트에 대한 정보를 '미리' 확인해 볼 수 있는 미리 보기이며,HTML 문서의 meta 태그 중 "og:XXX"가 있는 태그들을 찾아내서 보여주는 프로토콜입니다. 카카오톡이나 슬랙 같은 메신저에 링크를 공유하면 쉽게 확인할 수 있으며 소셜 미디어에 특화된 프로토콜이라고 할 수 있습니다.(참고로 오픈 그래프에서 사용되는 오픈 그래프 프로토콜..

이번글은 개발자라면 누구나 사용해 봤을 console에 대해서 좀 더 자세히 작성해보려고 합니다. 콘솔(console)은 브라우저의 디버깅, 테스트, 로깅 등 콘솔 화면에 접근하여 다양한 기능을 수행할 수 있는 객체입니다. 대표적으로 자주 사용되는 메소드는 console.log() 이지만, 아래 사진 처럼 console 자체를 사용해 보면 다양한 메소드들이 있습니다.  이번 글에서는 모든 다 다루지는 않고 자주 쓰이는 메소드들만 정리해 보겠습니다.   JS 로그 레벨 및 브라우저에서 로그 level 지정하는 방법JS에서 제공하는 로그의 형식은 console[level]() 이며 로그 level은 아래와 같습니다. (위 사진에서도 확인 가능합니다.)debuginforwarnerror브라우저에서 로그 레벨을..

많은 서비스에서 자사 서비스 유입을 위해 '배너 광고'를 많이 사용합니다. 그중 프로모션 이벤트 형식의 자사 제품 광고를 할 때 관련 이미지나 정보를 직접 하드코딩하여 배포하는 경우가 많습니다. 이때 단순 반복 작업은 개발 리소스 낭비이기에 배포가 아닌 광고 서비스를 많이 사용하는데요. 이번 글에서는 그중 흔하게 사용되는 Google Ad Manager 적용과정을 개발자 관점에서 작성하려 합니다. 우선 Google Ad Manager와 쓰이는 용어를 간단히 설명하고, 고정된 크기의 광고를 설정하는 법, HTML & CSS를 이용해서 반응형 광고를 설정하고 React에서 적용하는 방법들을 설명하도록 하겠습니다. Google Ad Manager 란? Google Ad Manager는 광고주와 발행사가 디지털..

안녕하세요. 추운 날들이 반복되고 있는데 다들 감기 조심하세요. 🤧🤧🤧 이번글은 React에서 children을 다룰 때 유용한 React.Children에 대해서 정리해 보려고 합니다.사실 React 공식문서에서는 Children의 사용이 코드의 취약성(Fragile Code)로 이어질 수 있어 사용을 추천하지 않습니다. 하지만 오늘도 회사에서 발견했듯이 많은 레거시 코드들이 남아있으며,당분간 계속 볼 거 같기에 Children API를 정리하려고 합니다. 추가적으로 글의 마지막 부분에서는 React 공식 문서에서 추천하는 Children을 사용하지 않는 방법 등을 작성할 예정입니다. React Children API란?React에서 정말 자주 사용하는 children과 Children API는 ..

(이 글은 다크모드에 최적화되어 있지 않습니다 ㅠ, 라이트 모드로 봐주시면 감사하겠습니다) 반성하고 있습니다. 🥲🥲🥲신입 FE 개발자로 취업 후 야근 + 눈물과 함께 만든 서비스의 성능이 이렇게 안 좋을지 몰랐습니다... 이번글은 정말 아무것도 몰랐던 신입 개발자가 Lighthouse 성능 점수를 16점 (25%) 올렸던 경험담을 소개하려 합니다.참고로 Lighthouse 점수는 '성능', '접근성', '권장사항', '검색엔진 최적화' 이렇게 4가지 기준으로 산정됩니다. (이 글은 '성능' 개선 과정에 대해서 중점적으로 다루도록 하겠습니다.) Lighthouse 도입 이유작년 6월에 회사에 입사하여 기존에 있던 5년 된 Polymer 기반 레거시 프로젝트를 React로 마이그레이션 하면서 숨 가쁘게..

문제사내 저장소를 Bitbucket에서 Github로 이전하게 되면서 편의성과 보안성 모두를 위해 PKA(Public Key Authentication)기반의 SSH 키 등을 사용하여 개발을 진행하게 되었습니다. 이때 git을 이용하여 push나 pull 등 다양한 작업을 할 때 ssh연결을 여러 번 붙어야 하는 경우, 매번 passphrase를 요구하고 있어 불편함을 느껴 다른 방법을 찾게 되었습니다. 사실 보안적인 이유로 매번 passphrase를 입력해 주는 것도 좋지만, 귀찮고 불편하기 때문에 해당 과정을 건너뛸 수 있는 방법과 ssh 환경이 무엇인지를 작성해 보려고 합니다.  (코드만 보고 싶으시다면 목차에서 해결방법을 눌러주세요!) SSH란?SSH란 Secure Shell Protocol, 즉..