어제보다 더 나은 오늘

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

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

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

UI 라이브러리를 처음 사용해 보고 있다. 개발의 많은 부분이 트레이드 오프인데 UI 라이브러리 도입도 이러한 부분이 있는 것 같다. pros. - 직관적이고 깔끔한 UX 컴포넌트 지원 - 빠른 개발 속도 - 웹 접근성 준수 cons. - 커스터마이징의 한계 - 이슈가 생기면 내가 코드를 잘못 작성한 탓인지 라이브러리 자체의 이슈인지 매번 찾아봐야함 antd 도입을 결정하고 난 후 매일 antd 레포의 이슈를 뒤지는 삶을 살고 있다 해도 과언이 아니다. 그 첫 시작은 tailwind와의 충돌이었다. tailwind가 설치된 프로젝트에 antd를 추가로 설치하고 버튼 컴포넌트를 불러왔더니 버튼이 보이지 않았다 😱 개발자 도구를 보면 antd primary button의 배경색 #1677ff 가 tailwi..

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

TMDB API를 통해 영화 데이터를 받아와 무한 스크롤을 구현해 보았다. 먼저 고전적인 스크롤 이벤트를 사용하는 방식으로 구현해 본 후, Intersection Observer API를 사용하는 방식으로 리팩토링했다. - GitHub 레포: https://github.com/Ah-ae/infinite-scroll - 배포 링크: https://infinite-scroll-practice.vercel.app 구현 화면 영상 1. 스크롤 감지 방식 핵심은 다음과 같다. 1) window.scrollY로 스크롤 위치를 기억한 다음, window.scrollTo() 메소드를 사용해 해당 위치로 보내주기 2) 스크롤이 바닥에 닿았는지를 판별해 바닥에 닿았다면 다음 데이터를 fetch하기 3) scroll 이벤트..

회원가입과 로그인 시, 이메일과 비밀번호 유효성 검사를 한 다음 유효하지 않은 문자열을 입력시 사용자에게 경고 메시지를 주고자 했다. 이메일은 @와 . 기호가 포함되어 있는지 여부를 기준으로 정규표현식을 사용하여 검사하는 함수를 작성했고, 비밀번호는 8~20자 사이의 영문자와 숫자를 최소 1개 이상 포함하는 경우 유효한 비밀번호라는 기준을 세웠다. // It checks for a sequence of characters that starts with one or more non-whitespace characters ([^\s@]+), // followed by an @ symbol, followed by one or more non-whitespace characters for the domain n..

1. (TS 2345) Argument of type '...' is not assignable to parameter of type '...' 문제 상황: 광역시/도를 선택하면 해당 시/도에 대한 시/군/구를 select box에 보여줄 수 있게 하는 코드를 작성하려고 했다. 예를 들어 서울을 선택하면 서울의 코드 11000 중 앞의 두 자리 11을 divisionSelectValue라는 상태에 담고, 해당 상태를 useEffect의 종속성 배열에 넣어서 사용자가 시/도 단위의 지역을 선택해서 상태 변경이 일어날 때마다 districtList에 해당 시/도에 대한 시/군/구 데이터를 담으려는 게 목적이었다. // divisions.ts 파일 예시 export const DIVISIONS_DATA = [..

💡 한 줄 결론: build command 란에 npm run build가 아닌 CI= npm run build을 입력해줘야 한다. (공백 주의) 1. npm run build 만 입력했을 때 deploy log 2. CI=npm run build (= 앞뒤에 공백없음) 입력했을 때 deploy log 이에 대한 netlify docs의 설명 : In some cases, a build may fail due to a warning message that would not cause a build failure when run locally. This is because some libraries and build tools handle warnings differently when they detect..

GitHub access token은 personal information이기 때문에 코드에 토큰이 그대로 포함된 채 commit을 하면 github에서 해당 토큰을 더이상 유효한 토큰으로 취급해주지 않는다. commit하기 전까지 잘 받아오던 데이터를 401 Unauthorized 에러가 뜨면서 더이상 받아올 수 없게 된다. 그리고 몇 분 후에 github에서 친절하게 아래와 같은 메일을 보내준다 😇 그렇다면 이제 할 일은? 새로운 토큰을 재발급 받아서 .env 파일을 생성하고 해당 파일에 새로운 토큰을 잘 적어주자. 그리고 .gitignore에 .env 파일을 추가하자. 상세한 방법은 여기를 참고하면 된다.