나를 위한 기록

어찌 돌아가는 파이어베이스인가.. 유저 테스트를 받기 전부터, 어찌 된 영문인지 mock data를 넣는 작업만 하여도 데이터 읽기가 5만을 초과하기 일쑤였다. 피드백을 받는 동안 firebase가 다운되는 일은 없어야 하기에, 급한 대로 일일 할당량에서 초과되는 사용량만큼 결제하기로 했다. (얼마가 나올지 몰라 불안..) 뭐가 문제니.. 처음에는 이미지를 가져오는 방식이 문제라고 생각하였다. 사용자가 게시물을 작성할 때 이미지를 업로드하면, storage에 게시물의 id 값을 제목으로 한 이미지 파일이 저장된다. 게시물 데이터를 가져올 때 하나의 커버이미지를 가져오기 위해 storage 내의 모든 데이터를 읽어야 하도록 로직이 구성되어 있었는데, 이 부분이 서버에 부하를 줄 수 있다는 것을 알게 되었다..

오픈그래프 프로토콜이란? - HTML 문서의 메타 데이터를 표기하는 페이스북에서 만든 프로토콜이다. 이 프로토콜은 웹 페이지의 제목, 설명, 타입, 대표 URL 등을 표준화하여 소셜 미디어 플랫폼이나 검색 엔진에서 효과적으로 정보를 크롤링하고 미리보기를 생성할 수 있게 해준다. 사용방법이 간편하여여 페북, 네이버블로그, 카톡 등에서도 이용되는 중이다. 쓰는 이유는? - 썸네일 포함한 미리보기 제공, 페이지가 어떤 내용인지 사용자가 쉽게 확인할 수 있기 때문! 작동 원리: 사용자가 링크를 입력하면, 해당 플랫폼의 크롤러가 웹사이트를 방문해 HTML의 안에 있는 오픈그래프 메타 데이터를 크롤링한다(og:title, og:description, og:image 등). 이 데이터를 바탕으로 미리보기가 생성된다...

현재 구현 중인 웹서비스의 게시물 상세페이지에서 카카오톡 공유하기 기능을 추가하기로 했다. 기능 구현 과정에서 한 가지 문제가 있었다. '카카오' 버튼을 클릭하면 공유는 잘 되었지만, 게시물의 제목과 내용은 잘 들어가는데 문제는 썸네일 이미지가 보이지 않았다. 이미지 없이 텍스트만 보여서 사용자 경험이 좋지 않았다. 첫째로 의심했던 것은 이미지 URL이 올바르지 않거나, 카카오톡이 지원하지 않는 형식의 이미지를 사용하고 있는 것은 아닌가 하는 것이었다. Kakao developers (https://developers.kakao.com/docs/latest/ko/message/js-link#upload-image)를 살펴보면 https 형식의 imageUrl을 사용하고 있다. 현재 코드에서 매개변수로 받..

Q. prop drilling이 무엇이고 어떻게 해결할 수 있나? Prop Drilling은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 중간에 위치한 여러 컴포넌트를 거쳐야 하는 상황을 말합니다. 즉, 어떤 데이터가 필요한 컴포넌트와 직접적으로 관련이 없는 중간 컴포넌트들도 그 데이터를 전달하는 데 사용되어야 합니다. 예를 들어, 최상위 컴포넌트에서 상태를 가지고 있고, 이 상태를 가장 하위의 컴포넌트까지 전달해야 할 때, 중간의 모든 컴포넌트들이 이 상태를 props로 받아 다시 하위 컴포넌트로 전달하는 과정을 거쳐야 합니다. 이는 코드의 복잡성을 증가시키고, 유지보수를 어렵게 만듭니다. Prop Drilling을 해결하는 방법 중 하나로 ContextAPI를 사용할 수 있습니다. Cont..

Q. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요? 동기식 프로그래밍은 코드가 작성된 순서대로 실행되며, 한 작업이 완료되기 전까지 다음 작업이 시작되지 않는 방식입니다. 반면, 비동기식 프로그래밍은 한 작업이 완료되는 것을 기다리지 않고 다른 작업을 동시에 진행할 수 있는 방식입니다. 예를 들어, 웹 애플리케이션에서 서버로 데이터를 요청하는 경우를 생각해보겠습니다. 동기식 방식에서는 데이터 요청 후 응답을 받기 전까지 다른 작업을 수행할 수 없어 사용자 인터페이스가 멈춰 보일 수 있습니다. 하지만 비동기식 방식을 사용하면 데이터 요청을 보낸 후에도 다른 작업을 계속 진행할 수 있어 사용자 경험이 향상됩니다. JavaScript에서는 Promise나 async/await와 같은..

오늘은 우리 프로젝트의 '좋아요' 버튼 기능을 개선하기로 했다. 기존에는 사용자가 '좋아요' 버튼을 클릭하면 , 데이터베이스의 변경이 완료될 때까지 사용자가 결과를 보기 위해 기다려야했다. (좋아요 버튼 클릭시 하트 색깔, 좋아요 카운트가 반영되기까지 약간의 시간이 걸림) 이를 개선하기 위해 Optimistic updates를 적용해보기로 했다. 옵티미스틱 업데이트는 사용자의 상호작용에 대한 즉각적인 피드백을 제공하고, 서버 응답을 기다리지 않고도 UI를 업데이트 한다. 1. 적용전 처음에는 updateLikedUsers 함수에서 서버에 변경을 요청하고, 서버 응답을 받은 후에 화면을 업데이트 했다. 2. 옵티미스틱 업데이트 적용 옵티미스틱 업데이트에서는 onMutate, onError, onSettle..

Firestore를 사용하는 웹 애플리케이션에서 'post' 도큐먼트마다 댓글 수를 계산하고 포스트 커버이미지에 댓글수가 표시되도록 구현하는 것이 목표였다. 'posts' 컬렉션의 각 도큐먼트에는 'comments'라는 하위 컬렉션이 있고, 이 하위 컬렉션 내의 댓글 수를 각 'post'에 반영해야 했다. 시도1: 댓글 수 계산하는 함수를 만들어 매번 getPosts를 할때 마다 댓글 수 읽게 하기. 처음에는 'post'를 조회할 때마다 'comments' 컬렉션의 문서 수를 쿼리하여 댓글 수를 계산하는 함수를 만들었다. 그리고 updateAndFetchPosts 함수를 만들어 commentCount값을 가져오면서 posts도 읽어오게 했다. 이렇게 하고 나니 코드 양이 많아지고 복잡해졌다. 시도 2:g..

문제: React Router를 사용하여 구현된 웹 애플리케이션에서, 게시물의 커버 이미지를 클릭할 때 해당 게시물의 ID 값을 이용해 상세 페이지로 이동해야하는 기능이 작동하지 않음. - 오류 메시지 부재: 이 문제에 대한 명확한 오류 메시지가 없어 문제 진단이 어려움. - 특정 ID 테스트 실패: 게시물의 특정 ID를 직접 넣어 테스트했지만 여전히 작동하지 않음. -URL 변경 미발생: 클릭 시 URL이 변경되지 않는 현상 발생. 추정: e.stopPropagation() 사용이 컴포넌트의 기본 동작을 방해하는 것으로 추정됨. 상황 분석: 게시물 커버 이미지가 포함된 div에 navigate 속성이 적용되어 있고, 내부에 좋아요 버튼이 있음. 좋아요 버튼 클릭 시 페이지 이동 문제(이벤트 버블링)를 ..