어제보다 더 나은 오늘

기존 테이블 컴포넌트에 정렬 API를 연동하는 작업을 하던 중 다음과 같은 상황을 만났다. (간단한 예제 코드를 만들어 보고자 했으나 공개 API로 같은 현상을 재현하기가 어려웠다 😢) 먼저 테이블은 antd의 table 컴포넌트로 테이블의 각 열마다 정렬 버튼이 있다. 정렬 버튼을 처음 누르면 오름차순 정렬(ascend), 두번째로 누르면 내림차순 정렬(descend), 세번째로 누르면 정렬 취소 순서로 동작하고, 사용자가 특정 열의 정렬 버튼을 누를 때마다 해당 열이 ascend인지 descend인지 알 수 있다. 이 정보를 바탕으로 서버에 쿼리 스트링으로 정렬된 데이터를 요청한다. 그러자 특정 열의 정렬 버튼을 누를 때마다 화면이 full refresh가 되었다...! 😰 정렬 버튼을 한번씩 눌러서..

예외 처리를 설계하며 고민한 내용들을 간략하게 정리해 보았다. 프로젝트마다 필요한 예외 처리가 다르고, 구현 방식도 여러 가지가 있기에 개발의 많은 부분이 그렇듯 정답이 없는 것 같다. 나중에 시간이 흐른 뒤 이 포스팅을 보면 분명 '왜 이렇게 했지?'라고 생각할 것 같다. 😇 하지만 같은 고민을 하는 누군가에게 조금이나마 도움이 될 수 있기를 바란다. 1. 에러의 분류 먼저 위의 도식을 참고하여 프로젝트 상황에 맞게 에러를 분류해 보았다. 사용자에게 에러가 발생한 이유를 설명하고 사용자의 액션을 유도하는 장치를 제공하는 것을 예외 처리의 핵심으로 두었다. 1. 예상 가능한 에러 a. 사용자 입력 값에 대한 에러 - 에러 발생 상황 예시: 로그인 시 틀린 비밀번호를 입력하거나 회원가입시 중복 아이디 또는..

지난주부터 회사 프로젝트에서 다른 팀원 분이 담당하던 feature를 내가 맡게 되었다. 인계를 받으면서 이슈 중 하나가 무한스크롤 기능 중 스크롤을 위로 올려 이전 페이지 아이템을 가져올 때 사용자가 현재 보고 있는 아이템이 화면에 유지되지 않고 새로 받아온 페이지의 첫번째 아이템으로 화면이 튀는 현상이었다. 반면 스크롤을 아래쪽으로 내려서 다음 페이지 아이템을 가져올 때는 현재 보고 있는 아이템이 화면에 그대로 유지되었다. 인계를 해준 팀원 분은 이 이슈를 스크롤 앵커링 문제라고 생각했고, 바닐라 JS를 사용하거나 React에서도 useRef를 사용해서 직접 DOM 조작을 할 때는 위쪽이나 아래쪽 어디로 스크롤을 하든지 스크롤 앵커링이 정상적으로 동작하며, React의 상태를 UI에 렌더링하는 경우 ..

들어가기에 앞서 Derrick Stolee가 작성한 Commits are snapshots, not diffs를 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다. Git은 뭐가 뭔지 헷갈리기로 악명이 높다. 사용자들은 기대와 어긋나는 용어와 문구를 접하며 곤혹스러워 한다. 이러한 현상은 git cherry-pick이나 git rebase와 같이 '히스토리를 다시 작성'하는 명령에서 가장 두드러진다. 내 경험상 이러한 혼란의 근본 원인은 커밋을 여기저기에서 무엇이 어떻게 바뀌었는지 보여주는 diff로 해석하기 때문이다. 하지만 커밋은 diff가 아니라 스냅샷이다! Git을 감싸고 있는 베일을 걷어내고 레포지토리에 데이터를 저장하는 방식을 살펴보면 Git을 이해할 수 있..

들어가기에 앞서 https://www.patterns.dev/vanilla/command-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 명령을 처리하는 객체를 통해 메소드와 실행되는 동작의 결합도를 낮출 수 있다. 특정 작업을 실행하는 객체과 메소드를 호출하는 객체를 분리할 수 있다. 주요 세 가지 클래스: invoker, receiver, command invoker : command를 생성하고 실행하는 역할 나중에 실행할 수 있도록 명령을 대기열(queue)에 넣거나 이미 실행된 명령을 실행 취소하는 데 사용할 수도 있다. receiver : 특정 command를 수신하고 처리 애플리케이션의 다른 클래스나 메소드에 ..

들어가기에 앞서React Query를 사용해 에러 핸들링을 하면서 많은 도움을 받았던 아티클을 공유하고자 합니다. React Query의 메인테이너인 TkDodo의 블로그 포스팅 React Query Error Handling을 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다.   에러 처리는 비동기 데이터 작업, 특히 데이터를 가져오는 작업(fetch)의 필수적인 부분이다. 우리는 모든 요청이 성공하는 것이 아니며, 모든 프로미스(Promise)가 이행(fulfilled)되는 것도 아니라는 사실을 직시해야 한다. 처음부터 이 부분에 집중하지 않는 경우가 많다. 에러 처리는 나중에 생각하고, '잘 되는 케이스'를 먼저 처리하곤 하는 것이다. 하지만 에러를 어떻게 처리..

지금 다니는 회사는 올 여름 개발팀이 새로 꾸려진 곳으로 구성 인원은 (나를 포함한) FE 신입 2명, BE 1명 등 총 세 명으로 프론트엔드 사수가 없는 곳이다. PM도, 기획도, QA도 없이 세 명이서 일을 분담하여 진행해야 하는 환경이어서 팀 내 개발 문화를 정립해 나가거나 시니어 없이 일을 하는 방법에 대해 늘 관심을 가지고 있던 찰나 지난 우아콘에서 비슷한 고민을 공유해 주는 세션을 발견했다. 30여 분 가량의 세션을 들으며 개인적으로 적용해 보고 싶은 내용들을 정리해 보고자 한다. 시니어 엔지니어란? - 팀 내/외 영향력을 가진다. - 때로는 가장 지루하고 시시한 일(예: 레거시 코드 개선)들을 도맡아 하기도 한다. - 가장 어려운 기술 문제를 풀어낸다. 출처: 윌 라슨, 시니어 엔지니어가 없..

GitHub - labs42io/clean-code-typescript: Clean Code concepts adapted for TypeScript Clean Code concepts adapted for TypeScript. Contribute to labs42io/clean-code-typescript development by creating an account on GitHub. github.com 이렇게 하지 마라(Bad) vs. 이렇게 해라(Good) 버전의 쉬운 예제들로 정리된 클린 코드 예제이다. 예제들을 쭉 보면서 내가 자주 하는 실수만 따로 모아서 정리해 본다. 1. 변수 단락 평가(short circuiting)나 조건부 대신 default arguments 사용 Bad : func..

들어가기에 앞서 https://www.patterns.dev/vanilla/mediator-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통해 서로 통신하도록 한다. 중재자 객체가 요청을 받아 이를 필요로 하는 객체들에게 전달한다. 중재자는 보통 객체나 함수로 구현된다. 사용 예제) 채팅 앱 - 채팅 앱에서 사용자는 메시지를 서로 직접 주고 받지 않는다. - 채팅 서버에 메시지를 전송하고, 서버가 각 사용자에게 메시지를 전달한다. class ChatRoom { logMessage(user, message) { const time = new Date().to..

들어가기에 앞서 https://www.patterns.dev/vanilla/observer-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. Observer 패턴에서는 특정 객체를 구독할 수 있는데, 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다. 이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다. Observable 객체는 보통 3가지 주요 특징을 포함한다. observers : 이벤트가 발생할 때마다 전파할 Observer들의 배열 subscribe() : Observer를 observers 배열에 추가한다. unsubscribe() :..