예방이의 개발일기

✅ firebase를 이용해 배포하는 방법에 대해서 알아보기  firebase cli를 이용해서 프로젝트를 간단하게 배포해 봤다. firebase의 auth 기능과 firestore 기능은 사용해봤는데, 배포 기능은 처음 사용해본다.다음에 배포할 때 참고용으로 작성해 놓는다. 🔗 참고 문서 Firebase CLI 참조  |  Firebase 문서 firebase.google.com firebase cli 글로벌로 설치 & 로그인하기npm install -g firebase-tools글로벌로 설치해줘야한다.firebase loginfirebase에 로그인해준다.firebase projects:listfirebase가 잘 설치되고, 로그인도 잘 되었는지 확인하기 위해서 프로젝트 list를 출력해본다. 나는..

PC 브라우저로 테스트 할 때는 몰랐는데스마트폰을 이용해 모바일 테스트를 해보니까 :hover에 background를 넣어놨는데 이 hover의 background 색상이 지속되는 현상이 있었다.  이미지 처럼 같은 위치에 있을 때각 페이지로 화면 전환이 이뤄지면 처음에는 기본 색상이였는데두번째 화면 부터는 hover 색상으로 적용되어 유지되었다. 왜그럴까?모바일 기기는 마우스 대신 터치로 작용을 하는데 그래서 hover 기능이 크게 의미가 없다.hover 기능이 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택되어 효과를 주는건데, 모바일에서는 손가락이 요소 위에 올라가 있는게 아니기 때문이다.그래서 모바일 환경에서는 엘리먼트를 터치하게 되면 브라우저는 포인터가 계속 해당 엘리먼트에 위에 ..

이미지맵 HTML tag인 map과 area를 사용해서 이미지에 링크를 걸 수 있다. 주로 지도같은 복잡한 이미지에 사용할 수 있고,내가 봤던 것은 통 이미지로 된 쇼핑몰 사이트 또는 홍보 배너에서 많이 볼 수 있었던 것 같다. 지금은 많이 안쓰는 태그라고 하는데가끔 이 이미지 버튼 부분에만 링크를 걸어주세요 하는 요청이 있을 때마다 a태그를 position absolute줘서 위치를 맞춰서 작업했는데이 이미지맵 방법을 쓰는것도 빠르고 좋을 것 같다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 위에 이미지는 내가 이미지맵을 이용해 각 포스티잇 부분에 링크를 걸었는데 (개발자도구에서 확인가능)링크가 제대로 동작하지 않는다. 찾아보니이미지..

회사에서 프로젝트를 하다가 431에러를 만났다.404, 401 등의 에러는 익숙했는데...431에러는 또 처음 보는 것 같다. 431에러 정의 신기한게 로컬, 개발에서는 에러가 안났는데운영만 올라가면 생기는 일이여서 해결하는데 꽤 오래걸렸다.  일단 내가 분석한 이슈는 이렇게 된것 같다. 리액트 build 파일을 docker의 노드 가상환경으로 감싸서 띄우고띄운서버에 nginx를 통해 URL을 연결해줬는데 node의 index.js 안에 프록시를 백엔드 API URL로 해놨어야 했는데프론트엔드 API URL로 해놨다. 그래도 호출은 되지만 그 API가 호출하고, node의 index.js안에서 또 호출하고이게 반복되면서 무한루프 때문에 header가 길어져서 431 에러가 났던 것이다.  아니 근데 왜 ..