072DATA

🔍 1. Supabase API 구현 - 특정 기간 데이터 조회export const calendarApi = { getByDateRange: async (startDate: string, endDate: string, userId: string) => { try { // 지정된 시작 및 종료 날짜의 시간 범위를 설정 const startDateTime = `${startDate}T00:00:00.000Z`; // 시작 날짜의 00시 설정 const endDateTime = `${endDate}T23:59:59.999Z`; // 종료 날짜의 23시 59분 설정 const { data, error } = await supabase .from("cha..

데이터 로딩할 때 Skeleton UI 적용하기 🦴오늘은 데이터를 불러오는 동안 사용자 경험을 개선하기 위해 Skeleton UI를 적용해봤슴다사실 전에는 그냥 "로딩중..." 이라고 표시하고 말았는데, 이번에는 좀 더 세련되게 만들어보고 싶었어요Skeleton UI란? 🤔Skeleton UI는 실제 컨텐츠가 로드되기 전에 보여주는 임시 화면입니다!!페이스북이나 유튜브 같은 서비스를 사용하다 보면 콘텐츠가로드되기 전에 회색 막대들이 깜빡이면서 로딩을 표시하는데 그것이 바로 Skeleton UI입니닷Skeleton UI를 사용하는 이유사용자가 어떤 내용이 로드될지 미리 예상할 수 있다갑자기 콘텐츠가 확 나타나는 것보다 자연스럽다로딩 중이라는 걸 직관적으로 보여준다만드는 방법! 💻Tailwind CSS..

최근 작업하는 프로젝트에서 레벨링 시스템을 구현했는데유저의 포인트를 기반으로 레벨을 계산하고 현재 레벨과 다음 레벨까지 남은 포인트를시각적으로 표현하여 경험치바도 만들어 보았다 1. 레벨과 경험치 설정 우선, 레벨과 필요한 경험치를 정의한 LEVEL_CONFIG 라는 상수를 만들었다각 레벨마다 이름, 최소/최대 포인트, 이미지 등을 포함해사용자가 어떤 레벨에 속하는지 쉽게 파악할 수 있게 했다.export const LEVEL_CONFIG = { 1: { name: "씨앗", min: 0, max: 1000, image: "/seed.png" }, 2: { name: "새싹", min: 1100, max: 5000, image: "/sesac.png" }, 3: { name: "트리", min: 5..

Throttling을 알아보다가 렉시컬 환경과 클로저에 대한 이야기가 나와서꼭 이 부분을 학습해야 편할 것 같아 이래저래 찾아보고 열심히 학습해보았다 렉시컬 환경(Lexical Environment) -> 어휘적 환경?코드가 작성된 그 문맥의 환경을 의미 -> 약간 범위를 나타내는 말로 유추가 됨변수나 함수가 선언된 위치에 따라 해당 변수나 함수가 접근할 수 있는 범위가 결정됨 -> 참 말이 어려움ㅋㅋㅋㅋfunction outer() { let x = 10; // 렉시컬 환경의 일부 function inner() { console.log(x); // inner 함수는 outer의 렉시컬 환경에 접근 가능 }} 코드로 보면 조금이나마 이해가 되는데 그렇다면 함수안에 있는내부 함수들은 자신..

Throttling은 성능 최적화를 위한 프로그래밍 기법이며이벤트나 함수 호출의 횟수를 제어하는데 사용됨 비슷한 기법으로 debouncing이 있음(내일 써야지 ㅎㅋ) Throttling (쓰로틀링)일정 시간 동안 함수가 한 번만 실행되도록 제한하는 기법특징마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 함정해진 시간 간격으로 함수를 실행사용 예시: 스크롤 이벤트, 무한 스크롤, 실시간 데이터 갱신, API 요청 제한export function throttle any>( func: T, delay: number): (...args: Parameters) => void { let isThrottled = false; return (...args: Parameters) => {..

Toast란? Toast는 화면의 특정 위치에 잠깐 나타났다가 사라지는 간단한 알림 메시지를 제공하고사용자에게 빠르게 정보를 전달하거나 작업의 피드백을 제공하기 위해 사용됨 특징 일정 시간 동안만 화면에 표시된 후 자동으로 사라짐에러, 성공, 경고 등의 간단한 상태 메시지를 전달하는 데 적합함팝업과 달리 사용자의 작업을 방해하지 않으며 인터랙션이 필수가 아님 커스텀 상단, 하단, 왼쪽, 오른쪽 등 화면의 어느 위치에 표시할지 설정할 수 있음토스트 메세지가 사라지는 시간을 설정할 수 있음필요에 따라 사용자가 수동으로 닫을 수 있도록 닫기 버튼을 추가할 수 있음 사용 예시 성공 메시지: 데이터 저장, 사용자 로그인 등 성공적으로 작업이 완료되었을 때.에러 메시지: 네트워크 오류, 잘못된 입력 등 실패한 작업..

안녕   오늘은 명시적으로 this를 설정하기 위해서 사용되는 3가지 메소드에 대해서 간단히 정리해보겟슴닷     call 메서드 함수 호출 시 this를 명시적으로 지정해야 할 때 사용합니다 특징컨텍스트 전환객체 메서드를 다른 객체에서 호출하고 싶을 때 call을 사용해 this를 바꿀 수 있음. 사용법functionName.call(thisArg, arg1, arg2, ...) const person1 = { name: '이태규' };const person2 = { name: '한도현' };function greet() { console.log('상민이 닮은, ' + this.name);}greet.call(person1); // "상민이 닮은, 이태규"greet.call(person2); //..

안녕안녕하세요 오늘은 프로젝트 진행중에 별점 기능을 추가하여해당 로직들을 살펴보고 설명해보는 글을 작성해보도록 하겠습니다. 또 자랑도 할 겸 이미지 캡처 올려드리고 깃허브와 배포 링크도 달아두겠습니다.구경 한 번씩 해보시고  피드백이나 에러사항 있으면 댓글로 부탁드립니다.   Moview - 배포 링크https://shyunis.github.io/Moview/ THISISMOVIETHISISMOVIE Movie Make Dreamshyunis.github.io  Moview - 깃허브 링크https://github.com/sHyunis/Moview GitHub - sHyunis/Moview: 영화 커뮤니티영화 커뮤니티. Contribute to sHyunis/Moview development by cre..

안녕  오늘은 프로젝트 진행중 구현된 기능중 슬라이드에 대해서 소개해보겠슴다   변수 선언 let currentSlide = 0; const slider = document.querySelector(".slider"); const slides = document.querySelectorAll(".slide"); const leftButton = document.querySelector(".slide-button.left"); const rightButton = document.querySelector(".slide-button.right");   먼저 슬라이드의 현재 위치를 업데이트 할 수 있도록 변수,슬라이드를 적용시킬 요소(div, button)를 querySelector를 사용하여 클래스 ..

안녕 TMDB API를 활용해서 영화 뿐만 아니라 크레딧과 OTT 정보도 가져올 수 있습니다. 해당되는 API의 URL을 Fetch로 요청해서 APIKEY를 삽입하고 데이터를 받으면 되는데 말로만 하면 이해하기 어려우니 코드를 삽입 하겠습니다.(OTT정보만 해볼게요) 데이터 요청 const apiKey = "TMDB에서 지급해준 API KEY를 담아줍니다.";//async, await문법을 활용하여 데이터를 원할히 받아서 보낼 수 있도록 합니다.//try, catch문은 덤으로 사용해주세요(코드 가독성과 에러 처리에 유용합니다.)async function fetchMovieOTT(id) { const API의 주소를 담긴 변수의 이름 = `https://api.themoviedb.org/3/movie/..