제이의 콘솔로그

들어가며 웹 어플리케이션을 만들다 보면 수 많은 Form 들을 만나게 된다. 상황에 따라서는 단순히 2~3개의 입력이 아니라 여러 개의 입력을 받고 유효성 검증까지 함께 해야하기 때문에 매번 골머리를 않는 부분이기도 하다. 특히, 사용자의 입력마다 유효성을 검증하고 에러 메세지를 보여줘야 하는 경우에는 렌더링 최적화에 대한 고민이 들어가게 되고, 이를 이해 코드를 작성하다 보면 또 엄청 복잡한 코드를 마주하고는 인상을 쓰게 된다. 팀 간에 협업을 진행하면서도 Form을 어떻게 작성할 지 협의가 쉽지 않아지는 포인트이기도 하다. 이를 개선하기 위해서 도움을 받을 수 있는 라이브러리가 있는 지 찾아보게 되었고 나는 React-hook-form 은 어떤 라이브러리인지, 어떤 문제를 도와줄 수 있는지 살펴보려고..

들어가며 회사 프로젝트에 React Query를 도입시켜보면서 그동안 함부로 건들지 못했던 API 핸들링 관련 로직을 건들어야만 했다. React Query 잘 도입해서 팀원들이 편하게 사용할 수 있으면 좋겠다는 마음이 들어 대대적으로 한번 뜯어봤다. 아래는 기존에 사용하던 API 에러 핸들링을 더 잘해보기 위해서 고민한 내용이다. 고민하게 된 계기 React Query만 잘 도입하면 되겠다 싶었는데, 세션에 대한 처리가 필요했다. 기존에는 세션에 관련된 커스텀 훅을 만들고 여기에 API 응답을 넣어서 처리가 될 수 있도록 했는데 React Query를 도입하면서 동일하게 처리할 수 없었다. React Query에서는 이를 onError 옵션을 통해 처리할 수 있도록 하고 있는데 기존 세션 만료 응답은 ..

들어가며 기업협업을 진행하던 당시에 면접을 보고 온 동기가 useEffect 대신할 수 있는 라이브러리가 있다는 말을 했다. 그 당시에는 무엇인지 제대로 몰랐지만 얼마 후 그 라이브러리가 React Query 라는 것을 알게 됐다. 물론, useEffect를 대신하는 라이브러리라고 보기에는 어렵지만 useEffect를 이용해 데이터를 가져오지 않아도 되는 것은 맞았다. 이후 우아한 테크세미나를 통해 React Query에 대해서 발표를 듣기도 했지만 간단한 테스트 정도만 진행해보고 제대로 도입을 고민해보지는 못했다. 하지만, 데이터를 잘 다루기 위해 Redux를 사용하고, 비동기를 잘 처리하기 위해 여러가지 미들웨어까지 도입하고 있자면 절실히 다른 방법을 찾고 싶은 생각이 들곤 했다. 상태 관리 라이브러..

들어가며 현재, 현장에서 일하는 직원들을 위한 협업툴을 서비스하는 회사에서 개발을 하고 있다. 입사 초기에는 기존 서비스를 리액트로 마이그레이션 하는 작업을 천천히 맡아 진행하고 있었는데, SAAS 부분을 강화하는 프로젝트를 진행하게 되면서 운영 어드민을 새롭게 리드해서 만들게 되었다. 운영 어드민의 경우에 여러가지 핵심 비지니스 로직들이 많아서 부담이 되는 부분도 있었지만, 다양한 데이터를 다뤄보고 비지니스 로직을 구현할 수 있어 즐겁게 진행하는 중이다. 그 중에 결제 관련 기능을 구현하면서 인보이스, 청구서 다운로드 기능을 구현하게 됐다. 기존에 URL을 통해서 쉽게 다운로드를 구현할 수 있구나 싶었는데, 전과는 다른 방법을 이용해야 했기 때문에 기록으로 남겨두려고 한다. API 호출했는데 이상한 문..

조건부 렌더링 React 를 통해서 인스타그램 클론 코딩을 진행하면서 여러 일들이 있었지만 그 중에서 어려웠던 한 가지를 뽑자면 바로 Lifecycle 에 관련된 일이다. 정확하게 Lifecycle에 대해서 모르는 상태로 관련 메소드를 사용하다 보니 여러 에러를 겪을 수 밖에 없었다. React가 화면을 그리는 방식 React에서 특히 클래스형 컴포넌트를 사용하는 경우에 화면이 그려지는 방식은 아래와 같다. 생성자 함수인 constructor() 가 호출된다. 화면을 렌더링 하는 render() 메소드가 호출된다. componentDidMount() 가 호출된다. 만약 내가 그리고자 하는(특히, Array.map() 을 이용해서 그릴 예정인) 데이터가 componentDidMount() 를 통해서 불러와..

JavaScript를 공부하면서 여러가지 문법에 대해서 공부를 했지만 if문 에서의 구문과 표현식의 차이에 대해서는 진지하게 고민해 본 적이 거의 없었다. 이번 프로젝트를 하면서 이에 대해서 크게 느낄 수 있었는데, 이에 대해 정리해보자. if문과 삼항연산자 본격적으로 프로젝트를 하면서 받았던 많은 피드백 중에 하나가 if, else 문을 사용했던 내용을 삼항연산자로 바꿔보라는 것이었다. 얼핏 보기에도 삼항연산자를 사용했을 경우에 식이 간결해지기 때문에 가독성에 좋아보이기는 했지만 구체적인 이유에 대해서는 고민이 없이 사용을 했었다. if(a > 0){ console.log("wow"); } else { console.log("no!!"); } 위의 식은 삼항 연산자를 사용하면 아래처럼 간단해 진다. a..

프로젝트를 진행하면서 꽤 긴 시간을 사용했던 드래그 슬라이드에 대해서 정리해보고자 한다. 배워가는 단계에서 작성한 코드이기 때문에 구현에 초점을 맞췄다는 점을 짚고 넘어갔으면 한다. 드래그 슬라이드 위의 모습처럼 마우스를 통해 드래그를 했을 때 좌우로 움직이는 슬라이드이다. 단순히 onDrag 이벤트를 사용하면 되는 것이 아닌가 싶을 수 있지만 drag 이벤트를 사용하는 경우에 잔상이 생겨서 원하는 결과물과는 달랐다. onDrag 이벤트를 사용하면서 잔상을 없애는 방법을 여러가지 찾아봤지만 드래그를 제한하는 방법들이 대부분이었다. 그래서 아예 방향을 틀어서 mouse 관련 이벤트를 통해서 이를 구현했다. 1. 마우스 클릭 관련 이벤트 const handleScroll = (e, scroll) => { s..

1. 객체로 컴포넌트 활용하기 React를 사용하여 프로젝트를 진행하면서 많은 고민이 되는 부분 중에 하나는 바로 어떤 값을 state 로 설정하여야 하는지에 대한 고민일 것이다. 만약 한 페이지 내에서 사용하는 모달창이 5개가 있고 이를 boolean 값을 통해 관리한다면 5개의 비슷한 state 가지고 있어야한다. 이는 매우 낭비라는 생각이 들었기 때문에 이를 개선해보고 싶었다. 어떤 방법이 좋을까? 먼저, 어떤 값을 이용하면 5개의 상태값을 하나로 줄일 수 있을 지 고민했다. 이는 간단했는데, 바로 boolean 값이 아닌 설명하는 내용을 통해서 관리하면 되는 문제였다. 예를 들어 삭제 관련된 Modal 의 경우에는 delete 등의 이름을 부여했다. 그렇다면 이제 삼항연산자 등을 이용해서 이름에 ..