프리다는 회원가입 후, 웹상에서 다이빙 로그를 쉽게 관리할 수 있도록 도와주는 어플리케이션입니다. 자주 작성하는 값들이 미리 작성되어 있어 쉽게 작성할 수 있고, 버디 / 다이브샵 에서 작성한 다이브로그를 QR코드로 촬영하여 해당기록을 가져올 수 있도록 기획되었습니다. 웹개발의 전반적인 과정에 대한 이해를 높히고 기획, 디자인, 프론트엔드, 백엔드 모든 분야를 공부하고자 솔로 프로젝트로 진행했습니다. 스쿠버다이빙의 경우 한국보다 동남아와같은 해외에서 더욱 활성화가 되어있음을 감안하여 글로벌 서비스를 목표로 i18next 라이브러리를 활용하여 현지에 맞는 언어서비스를 제공하도록 했습니다.

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

Tailwind css 설치하기 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Tailwind css 를 사용하기 위해 먼저 패키지 매니저를 이용해 설치해준다. postcss를 기반으로 작동하

리팩토링을 하는 이유? 시간에 쫒겨 개발을 하다보면 코드품질에 신경을 쓰지 못할 수 있다. 어쩔 수 없는 것이다 하지만 그렇다고 용인되는 것도 아니다. 내가 쓴코드 조차 기억속에서 희미해지는 순간, 그 프로젝트를 리팩토링 하는것이 본인의 코딩 실력향상에 도움이 될 것이라고 멘토님이 충고해주신걸 기억해 리팩토링을 진행하고자한다. 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의 유효기간을 정해놓는다. 이렇게 되면 일반적인 사용자 입장에서는 자신도 모르는 사이에 액세스 토큰이 만..