예방이의 개발일기

blocked by CORS policy: Response to preflight request doesn't pass access control check 강의를 보면서 firebase storage를 프로젝트에 셋팅하고,이미지 등록을 테스트 해보려고 하니위와 같은 CORS 에러가 났다. 404에러가 나고, 콘솔로그에 위와 같은 에러메세지가 떠있었다.공식문서를 참고해 해결했다. 강의와 다른점이 꽤 있었다... ㅠ아마 24년 10월 30일 파이어베이스가 유료로 바뀌고나서 바뀐건가 싶다... Firebase Storage 유료로 변경!!강의를 보면서 firebase storage 를 적용해보려고 했는데뭔가 정책도 바뀌고, 사용법도 바뀐 것 같다.강의 설명과는 달라서 참고용으로 글을 작성한다.  일단 24년..

강의를 보면서 firebase storage 를 적용해보려고 했는데뭔가 정책도 바뀌고, 사용법도 바뀐 것 같다.강의 설명과는 달라서 참고용으로 글을 작성한다.  일단 24년 10월 30일 이후로 스토리지를 사용하려면 Spark 무료 요금제에서는 사용이 안되는 것 같다.무조건 Blaze 요금으로 업그레이드를 진행해야한다. 2024년 9월에 발표된 Firebase용 Cloud Storage 변경사항에 대한 FAQ  |  Cloud Storage for Firebase의견 보내기 2024년 9월에 발표된 Firebase용 Cloud Storage 변경사항에 대한 FAQ 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Firebase는 Google 제품과 생태계를 안전firebas..

✅ 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 에러가 났던 것이다.  아니 근데 왜 ..

const array = [ { id: 1, type: "사과", dueDate: "20241215", price: 11369, }, { id: 2, type: "바나나", dueDate: "20241215", price: 19194, }, { id: 3, type: "사과", dueDate: "20241215", price: 9010, }, { id: 4, type: "사과", dueDate: "20241208", price: 19517, }, { id: 5, type: "바나나", dueDate: "20241208", price: 18910, }, { id: 6, ..

http가 뭘까? http는 통신 프로토콜 => 즉 규약이다 (약속이라는 말)브라우저와 서버가 통신을 할 때 보안문제가 발생 하면 화면과 동작에도 영향이 있어 정보 유출 등의 사고가 생길 수 있다. 브라우저는 HTTP라고 하는 통신 프로토콜에 따라 서버와 통신해서 리소스(HTML,CSS, 이미지 등)를 가져오거나 데이터를 생성 또는 업데이트, 삭제 한다.여러 통신을 하면서 데이터를 주고 받고, 업데이트하는 것을 개발자도구 Network 탭에서 확인해 볼 수 있다. 브라우저의 통신흐름HTTP 요청 & 응답 개발자도구에서 응답과 요청에 대한 정보를 확인할 수 있다.요청라인, 헤더, 바디 등을 확인해 볼 수 있다. HTTP 메서드HTTP 메서드에는 GET, HEAD, POST, PUT, DELETE, CONN..

뭔가 프론트엔드 개발을 하면서 보안에 대해 크게 걱정해본 적이 없는데... 이번 회사에서 ISMS 심사를 하느라 보안에 대해 다시 생각해보는 계기가 된 것 같다. 분명 보안은 백엔드에서 훨씬 많이 신경써야하는게 많지만... 생각보다 프론트엔드에서 놓치고 있는 점도 많았다.  1. 통신구간 암호화일단 요즘 최대 고민은 client에서 reqeust을 보낼 때 그 요청값들을 어떻게 암호화 할지다....원래는 AES 암호화 방식을 사용했는데 AES 암호화를 crypto.js 라이브러리를 사용했는데 iv랑 key에 값을 .env에 넣어놓고 썼다.나는 process.env -> 즉 .env 파일에 key값을 넣어놓고 꺼내서 쓰면 개발자도구에서 노출이 안되는 줄 알았다...아니였다. 개발자도구에 key값이 다 노출..