hyeeoooook 님의 블로그

대형사고..기존에 Supabase에서 DB를 사용하고, 사용자 인증을 Firebase로 분류하여 진행하고 있었다. 나중에 게시글을 수정, 삭제할때 모든 사용자가 가능하게 되었고 이를 해결하기 위해서 Firebase의 UID를 Supabase의 UID로 대체하려고 했으나 서로 인증의 방식이 매우 다르고 UID값 또한 달라 연동이 쉽지 않음을 감지 때문에 Firebase의 인증수단을 포기하고 Supabase로 이동하였다.. 문제해결간의 생각의 흐름 먼저 이를 해결하기 위해서 여러가지 방법들을 고민해보았다. 사용하진 못했지만 분명 실행 가능성이 조금은 존재한 영역같아 글로 기록하기로 하였다. 1. Supabase + DB와 Firebase Auth사이에 DB를 둬서 작은 백엔드 서버처럼 미들웨어의 방식으로 ..

동기 vs 비동기 처리데이터를 DB로 보내는 과정에서 문제가 발생했다.문제상황게시물 저장 버튼을 누르자 어떠한 에러코드도 없이 잘 저장되는듯이 내가 지정한 페이지로 넘어감.이때 DB로 정보를 보내는중에 만약 문제가 있다면 콘솔을 찍을 수 있도록 구현하였다. 하지만 이번엔 어떠한 오류코드도 나타지 않았다. 동시에 실제 DB에는 어떠한 정보도 저장되지 않음.해결 방향1. 매우 짧은 게시물을 작성했을 경우 간헐적으로 DB에 저장이 되었다.2. 개발자 도구를 통해 모든 함수가 잘 작동하는것을 확인 "DB에 정보가 도달하지 못하나..?" 라고 생각하다 문득 어쩌면 함수의 순서를 바꿔보면 무엇이 안되는지 확인할 수 있음을 직감했다. 그렇게 찾아낸내용은 동기 함수에서 비동기로부터 데이터 요청을 한뒤에 페이지를 이동하..

여기에 이렇게 내가 만든 게시물이 있다.이 페이지는 랜덤한 Id값을 테이블에 저장해 클라이언트와 연동하여 Id값을 비교하여 맞는 데이터를 가져오도록 구현되어있다. 문제는 게시물을 삭제해도 유저가 삭제하기전 URL을 복사한뒤에 삭제하고 다시 URL을 넣게되면 이미 삭제된 테이블로 인해서 아무런 데이터가 없는 빈 창고로 이동해 아무내용도 없는 가장 기본값인 페이지를 볼 수 있다는것이다. 때문에, 404 페이지를 제작하고 예외처리를 통해서 Id값이 동일하지 않을시에 404페이지로 이동하게끔 하였다.아직 배포를 하기전이기에 현재의 URL은 다음과 같다.(http://localhost:5173/pages/post.html?id=7a02551f-c0ac-4051-a13f-86de3b59b088) 하지만 지금 위사진..

좌측은 textarea를 통해서 글을 작성하는 영역과 우측에는 적은 내용들을 보여주는 preview의 영역으로 구현했다. velog의 영감을 받아 velog의 글쓰기보다 더 편하게 글을 쓸수있도록 노력했다. 기능1. textarea의 영역에 작성된 내용은 우측의 영역에 markdown의 형식을 HTML화 시켜서 보여주어야한다.2. H1~H4까지의 버튼을 눌렀을 경우 상황에 맞는 # 의 값을 넣어준다. 이때, 사용자가 H1에서 H4로 변화를 주고 싶을 수 있기때문에 조건문을 적용하여 버튼을 누른형식으로 바꿔주도록 한다.3. 굵음, 이텔릭, 취소선은 사용자가 그냥 눌러서 사용하거나, 영역을 정해놓고 버튼을 누를수 있기 때문에 두가지의 경우의 수로 나누어 개발을 한다.4. 인용문의 경우에는 보통 한줄 전체를 ..

버튼이 클릭될때 년도와 월을 선택할 수 있는 div태그가 아래로 열리는 로직function calendarSelector_Year() { const yearBtn = document.getElementById("calendar_Year"); const yearSelector = document.getElementById("calendar_Year_choice"); yearBtn.addEventListener("click", (e) => { e.stopPropagation(); if (yearSelector.classList.contains("h-30")) { yearSelector.classList.remove("h-30"); yearSelector.classList.a..

개인 블로그 작성중 캘린더가 한개 들어가면 좋을것 같아서 로직을 구현 및 작성해보았다.Date() 객체란?Date는 javaScript의 내장 객체로, 날짜와 시간을 나타내고 조작할 수 있다.1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것으로, 날짜와 시간의 컴퓨터 기록물을 대부분 차지하고 있는 UNIX 시간과는 다르다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDNJavaScript 날짜의 기반은 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것으로, 날짜와 시간의 컴퓨터 기록물을 대부분 차지하고 ..

FileReader()란?FileReader는 웹 브라우저에서 제공하는 JavaScript API 객체로, 사용자가 선택한 파일을 자바 스크립트가 읽을 수 있는 형태로 변환하는 역할을 합니다. 참고 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader FileReader - Web APIs | MDNFileReader() Returns a new FileReader object. See Using files from web applications for details and examples. Listen to these events using addEventListener() or by assigning an event listener to the..