prefer2 Log

프로젝트 규모가 커짐에 따라 에러 처리의 중요성을 느끼고 구조 정리와 리팩토링이 필요성이 보였다. 왜 에러 처리의 중요성을 느꼈는지, 어떻게 일관성있게 정리하고 어떻게 에러를 보여줄지를 고민한 과정을 기록해보려고 한다. 기존의 에러 처리 방식 우선 프로젝트에서 어떤 방식으로 api를 관리하고 있는지 살펴보자. '내편' 프로젝트에서는 react-query와 axios를 사용하여 서버 요청들을 관리하고 있다. 이 두 조합을 사용하며 느낀 장점은 코드의 분리를 확실하게 할 수 있다는 점이었다. axios를 사용하여 api 요청 함수들을 도메인별로 정의해놓고, react-query의 useQuery와 useMutation에서 이 api 요청 함수들을 사용했다(use + CRUD + api명 형식으로 커스텀 훅을..

기존의 내편의 로그인은 1시간이 지나면 무조건 로그아웃이 되고 있다. 만약에 롤링페이퍼를 작성하고 있다가 확인 버튼을 눌렀을 때 로그아웃이 된다면 사용자는 매우 당황스러울 것이다. 또한 일반 사용자에게 ‘토큰이 만료되었습니다’ 라는 메시지를 보여주는 것은 상당히 어색하고 당혹스러운 일이다. 사용성과 기술적 시도를 위해 refresh token 도입을 결정하였다. Access Token을 길게 하면 안되나요? access token은 서버에서 저장하지 않는 jwt 값이다. 만약 이 정보를 해커가 탈취한다면? 이 토큰 값만을 가지고 모든 일을 수행할 수 있게 된다. 거의 모든 요청마다 access token을 실어서 보내고 있기 때문에 이 값은 탈취되기 매우 쉽고 탈취되어도 이를 알 수 있는 방법이 없다. ..

같은 건 매번 새로 요청하지 않기 캐시(cache)는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 리소스의 사본을 저장해두었다가 같은 요청이 들어왔을 때 저장해둔 사본을 제공하는 것 캐시를 적절하게 사용하면 동일한 리소스에 대한 불필요한 작업을 줄일 수 있어 경제적이다. 하지만 잘못 사용하면 올바르지 않은 오래된 값을 가져와 부작용을 야기할 수 있으므로 적절하게 캐시를 설정하는 것이 중요하다. HTTP Cache 캐시는 크게 Shared(공유) 캐시와 Private(사설) 캐시가 있다. 캐시는 요청을 보내는 클라이언트에서 보관할 수도 있고, 클라이언트와 ..

기본 설정 강력 새로고침(cmd+shift+r)을 매번 사용하지 않고 사이트에 처음 방문한 것 과 같은 환경을 유지하기 위해 Chorme의 Network의 캐시사용 중지를 활성화시켜주었다. 측정하기 성능을 개선하기 위해서는 어떤 점을 개선해야 할 지 찾아야 한다. 이를 위해 기존의 사이트의 성능을 측정해보았다 lighthouse Chrome의 개발자도구에 들어가면 Lighthouse 탭을 확인할 수 있다. 원하는 조건을 선택하여 성능을 측정해보자. memegle은 데스크탑에서 주로 사용될 것이라 여겨져 데스크탑 기준으로 성능을 측정하였다. 성능, 접근성, 권장사항, SEO, PWA에 대해 측정이 가능하다. 이 값은 어디서 측정하는지 그리고 어떤 기기를 사용하는지에 따라 매번 측정 결과가 다르게 나온다. ..

프로젝트를 진행하기 전 가장 막막했던 부분이 UI 개발이었다. 디자이너분이 주신 디자인을 따라 구현하거나, 기존에 존재하는 사이트들을 따라만들기만 해본 터라 어디서부터 시작해야할지 감이 잡히지 않았다. 직접 figma를 사용해보는 것도 처음이었고 이뻐야 만들 맛이 나는 사람이라 이쁘게 만들고 싶었다. 일반 사용자가 볼 때 가장 영향이 큰 부분이랑 생각되어 고민을 다양하게 하는 것이 맞다는 생각도 들었다. 시간을 많이 잡아먹었지만 나름 즐기면서 작업을 이어나갔기 때문에 이 과정을 글을 남겨본다. 초기 프로토타입 백엔드 팀원과의 소통을 위해 소피아가 만든 프로토타입이다. 디자인은 전혀 신경쓰지 않은 채 플로우를 이해하기 위해 만들었다. 팀원들과 공유하며 각자 프로젝트에 대해 가지고 있던 의견과 방향성을 맞추..

더 까먹기 전에 정리를 해보자! 절대경로 CRA로 프로젝트를 만들었다면 아주 간단하게 절대경로로 코드를 작성할 수 있다. root에 jsconfig.json파일을 만들고 아래와 같이 baseUrl을 설정해주면 된다 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } https://create-react-app.dev/docs/importing-a-component/#absolute-imports custom hook 리액트를 거의 처음 접해보다보니 1단계에서는 커스텀 훅을 전혀 사용하지 않고 기본적인 react 학습에만 집중했었다. 2단계에서는 시간적 여유가 있어서 이를 학습해 적용해보았다. 커스텀 훅을 학습하기에 앞서 우선 hook에 대해 ..

CustomElement custom element api를 처음으로 사용해보았다. 사용하면서 state와 props의 차이, 생명 주기에 대한 이해가 높아졌다. 사용 방법은 mdn과 아래 글들에 정말 친절하게 나와있다. https://meetup.toast.com/posts/115 https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements https://ko.javascript.info/custom-elements mixin customElement를 쓰다보니 HTMLElement, HTMLTableRowElement를 상속받을 일이 있었다. 두 클래스 모두 내부 메서드는 동일하고 table property 차이 정도가 ..

custom event 페어였던 소피아 덕분에 커스텀 이벤트를 처음 사용해보았다. 애매하게 이해한 채 사용을 했는데 리뷰어님께 좋은 답변을 받아 남겨본다. 의존성을 없애기 위해서 사용한다 정도로 이해했는데 예시를 들어주셔서 조금 더 이해에 도움이 되었다. 커스텀 이벤트에 대해서는 조금 더 공부해보고 정리해봐야겠다. 미래를 생각하자! step2를 제출하고 스스로 코드를 리뷰해보니 아쉬운점이 너무 많았다. 특히 이벤트 관련해서 위임을 사용할 수 있지만 이를 사용하지 않아서 복잡해진 코드들이 많았다. 결과적으로 탭의 개수가 더 늘어나도, 초기 선택 탭이 달라져도 유연하게 반응할 수 있는 코드로 변경하면 좋겠다는 리뷰를 받게되었다. 이에 대해서는 크게 고민하지 않고 작은 기능 구현에만 집중했었다. 확장성에 대..

debounce VS throttle 두 방법 모두 성능을 위해 이벤트를 제어하는 방법이다. 디바운스와 스로틀은 연속된 이벤트들을 그룹화해서 과도한 이벤트 핸들러의 호출을 방지한다. See the Pen Untitled by SunHo Park (@prefer2) on CodePen. 본격적으로 알아보기 전에, 예시를 통해 어떤 작동을 구현하려고 하는지 알아보자. 버튼을 빠르게 눌러보면 기본, 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도의 차이를 볼 수 있다. debounce 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 여러 연속된 이벤트 콜을 하나로 그룹핑할 수 있게 한다. throttle 짧은 시..

Input 사용성을 높이려 이것저것 하다 보니 Input 태그에 생각보다 많은 속성이 있음을 확인할 수 있었다. 속성 값만 넣으면 알아서 invalid처리를 해준다. 주어진건 잘 써먹자 name name 속성은 form이 제출된 후 서버에서 form data를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용 min, max (numeric types) input의 최소, 최대값을 설정할 수 있다. 범위를 벗어나게 되면 invalid step (numeric types) 단위값(증분값) 설정. 지정 단위로 나눠떨어지지 않으면 invalid autofocus 페이지가 로딩될때 지정된 input에 오토포커스 https://developer.mozilla.org/ko/docs/Web/HTM..