debounce 란? debounce는 반복적으로 실행되는 이벤트를 제어하는 기법으로 일정한 시간이 지난 후에 콜백함수를 실행하는 형태로 최적화하는 기법이다. 이번 리팩토링에서 debounce 가 적용된 곳은 검색 영역이다. 문제점 검색을 실행할때 기존에는 유저의 입력값이 변할 때 마다 서버호출을 통해 값을 업데이트해왔다. 이렇게 되면 단순한 검색을 실행할때 서버가 수십번 호출되는 문제가 있고, 이는 고스란히 서버의 부하로 이어진다. 반응성이 빠른것이 좋겠지만, 유저입장에서 자신이 입력하는 과정에 나오는 화면은 불필요한 정보이다. 몇단어만 입력해도 검색결과가 나오는것은 분명 좋겠지만 현재 상태에서는 단지 '가나다'를 검색하려고 해도 수차례 호출이 되는것을 볼 수 있다. 해결법 useDebounce 커스텀..

리팩토링을 하는 이유? 시간에 쫒겨 개발을 하다보면 코드품질에 신경을 쓰지 못할 수 있다. 어쩔 수 없는 것이다 하지만 그렇다고 용인되는 것도 아니다. 내가 쓴코드 조차 기억속에서 희미해지는 순간, 그 프로젝트를 리팩토링 하는것이 본인의 코딩 실력향상에 도움이 될 것이라고 멘토님이 충고해주신걸 기억해 리팩토링을 진행하고자한다. Chrome Light House Light house 라는 툴을 이용해 웹사이트를 분석해보면 대략적으로 나마 웹사이트의 품질을 검사해 볼 수 도 있고, 개선해야 할 점을 알 수 있다. 꽤나 유용한 툴이니 이를 이용해서 고쳐 나가야 할 점을 찾아볼 수 있다. 이번 프로젝트를 하면서는 중간중간에 짬짬히 Light house 테스트를 돌려봤는데 이 덕분에 발견한 문제를 고칠 수 있었다..

이미지 압축을 도입한 이유 Brower Image Compression 을 사용한 계기는 서버로 필요 이상으로 큰 이미지를 전송함으로 인한 트래픽을 줄여 서버의 부하와 비용을 줄이고, 브라우저의 초기 로딩속도를 높히기 위함이다. 파일의 크기에 신경 쓸 필요없이 인쇄용으로 사용되는 이미지의 경우 확대, 축소를 고려해 높은 해상도의 이미지를 필요로 하지만, 웹사이트의 경우 확대, 축소를 하는 경우가 드물고, 지나치게 큰 이미지는 이미지 로딩시간의 증가와 트래픽 증가를 야기한다. 이미지 압축을 브라우저에서 진행한 이유? 업로드가능한 이미지의 용량을 제한해버리는 방법도 있지만, 일반적으로 이미지 크기를 생각하면서 파일을 업로드 하지는 않으므로, 생각지도 못한 경고/오류 를 만나게 된다면 UX 관점에서 좋지 못하..

Axios interceptor? 먼저 Axios interceptor은 따로 다운받아서 사용하는 라이브러리가 아니라, axios라는 데이터 페칭 라이브러리를 이용할때 사용할 수 있는 메서드이다. Axios interceptor을 이용하면 axios가 서버로 request를 보내기 전 혹은 서버의 응답을 받고 .then으로 처리하기전에 응답을 가로채서 요청/응답 전에 필요한 코드를 실행할 수 있는 메서드이다. Axios Interceptor 사용이유 가장 첫번째 이유는 UX이고, 두번째 이유는 요청의 분리를 통한 코드 가독성 향상, 유지보수 효율 증가이다. 일반적으로 보안을 이유로 accessToken의 유효기간을 정해놓는다. 이렇게 되면 일반적인 사용자 입장에서는 자신도 모르는 사이에 액세스 토큰이 만..

React Secure Storage? React Secure Storage 는 로컬스토리지에 값을 암호화 하여 저장하고, 저장된 암호화 값을 다시 해독하여 사용 할 수 있게 해주는 라이브러리 이다. 일반적으로 로컬스토리지에 저장되는 값은 문자열이고, 장치에 액세스 할 수 있는 사람은 누구나 이 데이터를 읽고, 조작할 수 있다. 보안과 관련된 문제이다 보니 사용하기 전에 믿을 수 있는 라이브러리 인지 Modules를 열어서 코드를 확인해본결과, crypto-js 라는 라이브러리와 murmurhash-js 라는 라이브러리를 리액트 환경에서 쉽게 사용할 수 있도록 조금 손 본 라이브러리라는걸 알게됬다. 프로젝트에 React Secure Storage을 사용한 이유 서버로부터 JWT토큰을 받아서 사용하는 과정..

MSW? MSW 는 Mock service Worker 의 약자로, 가짜 API데이터를 만들어주는 라이브러리이다. 동작방식은 React에서 Fetch 나 Axios를 이용해 서버로 통신을 요청하면, MSW가 중간에서 이를 가로채 대신 대답을 해주는 방식이다. MSW를 이용하면 백엔드와 연결을 하기전에 미리 데이터 페칭을 대비할 수 있다. 프로젝트에 MSW를 사용한 이유 먼저 이유부터 설명하자면 미리 서버와의 통신을 mock(흉내) 해주는 라이브러리를 이용하여 효율적인 일정분배, 서버통신 대비를 위해서이다. 몇번의 해커톤을 진행해본 결과, 프론트엔드와 백엔드의 개발 속도 차이로 인해 프로젝트가 통채로 위태위태 해진 경험이 있다. 백엔드에서 서버를 열기 전까지 서버와의 통신을 경험해볼 수 없기 때문에 더미데..