neda의 블로그

html react scroll top 버튼 스크롤 멈춤 현상 문제 상황 크롬 브라우저에서 스크롤 탑 버튼을 눌렀을 때 위로 스크롤 되다가 멈추는 현상 발생 const onClickToTop = () => { window.scroll({ top: 0, behavior: "smooth" }); }; 문제 원인: 크롬의 smooth scrolling 기능이 켜져 있으면 스크롤이 늦게 멈추게 되는데, 스크롤을 하다가 바로 스크롤 탑 버튼을 누르면 스크롤이 올라가는 중에 스크롤 end 이벤트가 발생하여 멈추게 된다. smooth scrolling 해제 시 -> behavior: "smooth"를 지정해도 한 번의 스크롤로 상단까지 바로 올라감 smooth scrolling 설정 시 -> behavior: "sm..

supabase postgresql 데이터 없는 날 포함하여 월간 일별 통계 만들기 postgresql의 데이터 테이블에서 날짜 데이터를 사용하여 일별 통계 만들기 관리자는 선택한 년도와 월에 해당하는 각각의 날짜에 대해서 가입자 현황 그래프를 볼 수 있어야 한다 하지만 매번 api를 호출하는 것은 너무 비효율적이다. 또한 범위를 통해 해당 월에 해당하는 데이터를 전부 가져오고, 클라이언트에서 직접 그룹화하는 것은 가져와야 하는 데이터가 너무 커지고, 처리해야 하는 직접 클라이언트에서 처리해야 하는 부담이 생긴다. 유저 정보를 가지는 테이블이고 있고 아래와 같이 날짜 데이터를 사용하여 유저가 가입한 날짜를 가리키는 레코드가 있을 때, 날짜별로 가입한 사용자의 수를 일자 별로 가져올 수 있다면 편할 것이다..

200907 디바운싱과 쓰로틀링 디바운싱(Debouncing)과 쓰로틀링(Throttling)은 반복적인 이벤트를 효율적으로 처리하기 위한 방법이다. 디바운싱 디바운싱은 연속적으로 발생한 이벤트에서 마지막 이벤트만 처리하는 방식이다. 검색 기능에서 문자를 입력할 때마다 검색 api를 호출하면 매우 비효율적일 것이다. 이때 디바운싱을 통해 입력이 다 끝난 후에 검색 api가 호출되도록 하여 불필요한 api 호출을 줄일 수 있다 쓰로틀링 쓰로틀링은 이벤트가 지속적으로 발생할 때 이벤트의 발생 빈도를 줄이기 위해 사용하는 방식이다 스크롤이나 리사이즈와 같은 이벤트는 짧은 시간 내에 많은 이벤트가 반복 발생할 수 있다. 이때 모든 이벤트에 대해 함수 또는 연산을 처리하면 비효율적이고 연산이 무거우면 성능 저하가..

230906 css flexbox에서 부모 영역 전체 공간 사용하기 flexbox에서 자식이 2개 이상일때 부모의 크기에서 다른 자식의 크기를 뺀 나머지 크기를 모두 사용하도록 하는 방법 아래와 같이 헤더 영역, 컨텐츠 영역, 바텀 영역이 있을때 높이가 달라질 때 헤더와 바텀 영역의 크기는 고정하고 컨텐츠 영역의 크기만 변경된다. .content { flex: 1 } HTML 삽입 미리보기할 수 없는 소스

230905 HTTP에서 HTTPS로 https는 http 프로토콜에 인증서를 사용하여 보안을 강화하는 것이다. HTTP는 텍스트 기반 프로토콜이므로 네트워크를 들여다 볼 수 있는 사람은 누구나 쉽게 스니핑을 할 수 있다. 웹이 발전하면서 중요한 데이터를 전송할 때 숨겨야할 필요성이 생겼다. 인증서를 사용하면 공개키를 통해 암호화를 진행해 안전하게 서버에게 데이터를 전송할 수 있다. SSL 인증서는 인증 기관을 통해 발급받아 서버에 설치하여 사용한다. 인증서를 제 3자인 인증 기관에서 관리하는 이유는 신뢰성 때문이다. 스스로 인증서를 만들 수도 있지만, 검증할 수 없기 때문에 안전하지 않다.

230904 내일배움캠프 중간 발표와 피드백 마지막 프로젝트의 중간 발표를 진행하고 프로젝트 전반에 대해 피드백을 받을 수 있었다. 채팅 기능 채팅 기능은 기술적 어필을 할 수 있는 부분이 많다. 기능 개선도 트러블 슈팅이다 오류를 해결하는 것 뿐만 아니라 기존에 되던 것도 더 좋게 바꾸면 트러블 슈팅이 될 수 있다 dev 브랜치 이상에서는 모든 주석을 제거 주석을 지우고 주석 없이도 읽기 쉽도록 코드를 만들어라 리액트 쿼리 키 관리 커스텀 훅으로 추상화하여 한 곳에서 쿼리 키를 관리하여 키가 중복되거나 잘못된 키를 사용할 가능성을 줄일 수 있다. 기술적 의사 결정 현재는 하나의 기능에도 여러 선택지가 존재한다. 선택지 간 장단점 비교를 통해 의사 결정의 합리적 이유를 만들어라

디자인과 기획이 거의 잡혀서 빠르게 개발하는 한 주였다. sendbird로 채팅 기능을 구현했었는데, 최대 연결 20개가 넘어서 바로 서비스가 막혀버렸고, supabase realtime 기능으로 채팅을 다시 직접 구현했다. 오히려 직접 구현하는게 용량 걱정 안해도 되고, sendbird와 supabase간 연결을 안해도 되어서 더 좋았던 것 같기도 하다 월요일에 중간 발표기 때문에 최대한 mvp 기능을 구현하고, 주말은 에러나 디자인을 정리하는 데 시간을 썼다.

230901 nextjs 서버컴포넌트에서 form 사용하기 서버 컴포넌트에서는 useState와 같은 hooks을 사용할 수 없다.따라서 form의 기본 사용법에 따라 action과 method로 http 요청을 보내고 api 폴더에 만들어 둔 route.ts에서 적절한 처리하여 응답을 받는다. // app/api/auth/login/route.ts export async function POST(request: Request) { const requestUrl = new URL(request.url) const formData = await request.formData() const email = String(formData.get('email')) const password = String(form..

230831 javascript Intl을 사용하여 날짜 시간 다루기 채팅방에서 채팅에 대한 각각의 시간과 일자별로 날짜를 알려주기 위해서 Intl 객체를 사용하여 사용자의 언어에 맞게 시간을 계산하여 보여줄 수 있다. 시간 보여 주기 const getTimeText = (isoDateString: string) => { const isoDate = new Date(isoDateString); const options: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric' }; return new Intl.DateTimeFormat(navigator.language, options).format(isoDate); }; getTimeText(..

230830 react router dom에서 useSearchParams로 쿼리 스트링 조작하기 특정 params 값 가져오기 const [searchParams, setSearchParams] = useSearchParams(); const room_id = searchParams.get('room_id') 기존 params에 특정 params 업데이트하기 const [searchParams, setSearchParams] = useSearchParams(); setSearchParams((prev) => ({...prev,room_id:'123'})); 특정 params 삭제하기 setSearchParams는 useState처럼 콜백 함수에서 기존 상태를 인자로 받을 수 있다. 삭제는 URLSear..