JH 기술 블로그

🔑 무한스크롤 도입 계기요즘 조금씩 시간을 내서 사이드프로젝트를 진행 중이다! 디자이너분이 제공해주신 목업을 보았을 때, 무한스크롤로 구현하면 좋을 것 같다는 생각이 들었다.홈 화면에서는 전체 To Do를 보여줘야 하는 요구사항이 존재하였는데, 만약 To Do가 많아지면 분명 성능적인 이슈가 발생할 것이 분명했다. 그렇기에 기획자 분과 UX적으로 어떤 방법이 좋을 지 함께 고민하고 상의한 끝에, 무한 스크롤을 통해 전체 To do를 보여주는 방식을 채택하기로 하였다. 프론트엔드 분들과 상태관리 라이브러리를 선택할 때, Jotai와 Tanstack Query를 사용하기로 결정하였기에 Tanstack Query에서 제공하는 useInfiniteQuery 를 통해 무한 스크롤을 구현해야겠다는 생각이 들었다...

도입 계기현재 재직 중인 회사에서 QA 분들이 연달아 퇴사를 하게 되어, 앞으로는 QA가 없이 개발을 진행해야 하는 상황에 직면하게 되었다.그러다보니 자연스럽게 팀 내에서는 테스트 코드를 작성하는 것에 대한 논의가 이루어졌다. 그러나 설상가상으로 우리 팀에서 작성했던 테스트코드라고는 약 2년 전에 작성했던 코드만 남아있는 상황이었다... 이러한 상황에서, E2E 테스트 라이브러리인 Cypress가 눈에 들어왔다. Cypress를 도입하는 것을 적극적으로 건의하였고, 현재 내가 cypress 환경을 구축하고 있는 중이다. 준비하면서 기록을 해두면 좋을 것 같아 이렇게 블로그에 글을 남겨둔다.Cypress 도입의 이유Cypress는 주로 엔드투엔드(E2E) 테스트에 사용되는 강력한 프레임워크로, 테스트 작성..

IntroNextJS 14버전으로 새로운 프로젝트를 한창 진행 중이다.해당 프로젝트는 Vecel을 이용해 CI/CD 파이프라인을 구축해 놓은 상태인데, 개발 모드에서는 괜찮았는데  프로덕션 빌드 시 문제가 발생했다. 그래서 여느 때처럼 에러를 해결 하기 위해 구글을 검색해보았는데 생각보다 한국어로 정리가 되어 있는 글을 만나지 못했다...ㅋㅋ 내가 정리한 글을 보고 누군가가 쉽게 에러를 해결했으면 하는 바람으로 몇 자 적어본다! 내가 에러가 발생한 코드// '/oauth/redirected/kakao'"use client";import axios from "axios";import { useRouter, useSearchParams } from "next/navigation";imp..

👏들어가기 전에... 이번 포스팅의 주제는 합성 컴포넌트로, children에 대해서 잘 모르겠다면 이 전 포스팅을 보고 오는 것을 추천한다. [React] children 알아보기 (tistory.com) [React] children 알아보기 최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 humor12.tistory.com 사이드프로젝트를 통해 많은 코드를 작성하면서 느끼는 것은 바로 프론트엔드가 다뤄야 할 관심사가 너무나도 많다는 것이다. UI로직, 서버 로직, 유저 인증인가 로직...이러한 관심사를 잘 분리하지 않는다면 스파게티 코드가 될 수 있다는 것..

사이드 프로젝트를 진행하면서 다크모드를 위해 ThemeProvider를 사용할 일이 생겼다. 처음 접한 건 1년 좀 넘었는데 다시 한 번 되새겨보고자 포스팅을 남긴다. 스타일을 관리하고 전역적인 테마를 설정하는데 도움을 주는 ThemeProvider에 대해서 알아보는 시간을 가지도록 해보자! 🤷‍♂️왜 ThemeProvider? 다크모드를 개발하기에 앞서 어떻게 접근해야할지 생각해보는 시간을 가져보자. const Container = styled.div` background-color: ${(props) => props.mode ? "#000000" : "#ffffff"}; ` 방법 중 하나로 위와 같이 props로 전달 받은 mode를 기준으로 true면 검정색, false면 흰색으로 배경색을 지정해줄..

사이드 프로젝트를 진행하면서 기존에 Recoil로만 처리하는 것 대신, React Query를 사용해야겠다는 생각이 들었다. 프로젝트 특성상 API를 호출 할 일이 잦다는 것이 그 이유이다. 그럼 오늘은 React Query를 왜 사용하고, 어떻게 사용해야 하는지에 대해서 알아보자. 🤷‍♂️React Query React-query란 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. 👏 React Query의 장점 기존의 Recoil과 같은 상태관리 라이브러리를 사용 할 때 BoilerPlate 형태의 코드가 많이 발생한다. 반면 React Query는 비교적 코드의 양이 적으며, 구조도 단순하여 유지 보수가 용이하다는 장점이 있다. 동일한 요청..