제이의 콘솔로그

들어가며 나에게 2022년은 온전히 개발자로서 1년을 보낼 수 있는 시간이었다. 회사에 들어가 열심히 적응을 해보기도 하고 부족함을 채우기 위해 스터디도 여러 개 진행하다보니 블로그 등에 생각을 정리하는 시간을 잘 갖지 못했는데, 그런 아쉬움을 달래보고자 이렇게 회고를 남겨보기로 했다. 2022년 나는 어떤 것들을 중요하게 생각했고, 느꼈을까. 연차와 상관 없이 해결사가 되자 6월 즈음 다른 개발자 분이 주니어 컨퍼런스를 신청하는 내용을 보게 되었다. 오프라인 컨퍼런스에 흥미가 갔던 나는 이를 신청했고 함께 갈 수 있었다. 그 곳에서 안드로이드 개발자 수현님이 남겨주셨던 말이 인상이 깊었다. 연차와 상관 없이 팀 내에서 해결사가 되자는 마음으로 일을 해보자. 그렇게 도움을 주다보면 나도 도움을 받으며 함..

테오의 스프린트 12기 외부에서 진행하는 스터디를 참여하면서 테오의 스프린트에 참여해 봤는지에 대한 질문을 많이 받았다. 기존에 신청을 했다가 개인 사정으로 인해서 포기했었다는 이야기를 했지만 많은 분들이 매우 좋은 경험이었다며 추천을 해주다 보니 다시 흥미가 생겼다. 특히, 스터디 마지막 날 테오를 만나 이야기를 나누면서 현업에서도 쉽게 하지 못할 경험을 얻을 수 있을 것 같아 도전해보게 되었다. 1일차 ❓ 아이디어 선정 테오의 안내 메일을 받고 보니, 1일에는 각자의 아이디어를 발표하고 투표를 통해서 진행하게 될 프로젝트를 결정하는 날이었다. 나는 스터디를 관리하는 스터잉 이라는 서비스를 발표했는데, 자신이 없기도 했고 급하게 준비하다 보니 인기가 없었다. 50명 정도가 되는 사람들이 아이디어를 작성..

들어가며 웹 어플리케이션을 만들다 보면 수 많은 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를 사용하고, 비동기를 잘 처리하기 위해 여러가지 미들웨어까지 도입하고 있자면 절실히 다른 방법을 찾고 싶은 생각이 들곤 했다. 상태 관리 라이브러..

들어가며 개발자를 결심하고 한 달, 여기 저기 알아보면서 결정을 내리고 주변 사람들에게 통보를 했었다. "나 서울로 올라가서 개발 공부할거야". 평소 야근도 없어 적당히 다니기에는 나쁘지 않다는 직장을 그만 두고 내린 결정에 "괜찮겠어?" 라는 걱정도 많았다. 물론, "잘 할거다" 응원해주는 사람들도 많았고 용기를 얻어 상경했다. 떨리는 Wecode 생활이었지만 좋은 동기들을 만나 즐겁게 개발을 공부할 수 있었고 덕분에 제법 빠르게 취업을 해 협업툴 회사에 프론트엔드 개발자로 일하게 됐다. 개발 공부를 시작하며 블로그를 열심히 적고, 매일 매일 개발 지식을 채우며 살아가겠다는 다짐했지만 회사에 적응한다는 이유로, 막상 적으려니 어렵다는 이유로 그 동안 블로그를 소홀히 했던 것 같다. 그러다보니 순간마다 ..

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

주의!✨ 이 글은 개발을 배워가는 초보 개발자 작성하는 일종의 공부기록입니다. 현업에서 일하시는 분들이나 정석과는 거리가 있을 수 있습니다! 🧼 Event Bubbling JavaScript 를 공부하면서 이벤트 등을 자주 이용하다 보니 이벤트 버블링으로 인해서 예상치 못한 결과가 나오는 경우도 있었고 이를 이용해서 유용하게 사용하기도 했다. 이벤트 버블링에 대해서 한번 정리해보자. 📸 Event capture 캡처링은 단순하게 말해서 이벤트가 발생했을 때 바깥 요소부터 해당하는 요소까지 찾아들어가는 과정을 말한다. 즉 만약 태그 안에 있는 안에 있는 에서 이벤트가 발생했다면 이를 찾기 위해서 => => => 의 순서로 찾아가게 된다. 🧋 Event Bubbling 이벤트 버블링은 거품이 생기면서 물 위..

조건부 렌더링 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..