072DATA

사용자가 여러 챌린지를 고르고 각 챌린지마다 최소 하나의세부 옵션을 골라야 하는 폼을 만들어야 했다예를 들어 '파일 정리'를 골랐으면"불필요한 파일 삭제", "폴더 정리" 중에 하나는 꼭 선택해야 했다.  해결 과정폼에서 다룰 데이터 타입을 먼저 정의했다interface ChallengeFormInputs { content: string; images?: FileList; selectedOptions: Record // 챌린지별로 선택된 옵션들} const { register, handleSubmit, formState: { errors }, setError, clearErrors} = useForm();react-hook-form을 설정하고, 폼을 제출할 때는 이렇게 유효성 검사를 했다..

🔍 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..

오늘은 달력을 구현했는데  useCalendar라는 훅을 만들어서달력에 관련된 로직을 관리하여 꽤 깔끔하게 설계가 된듯하다아직까지는 이벤트 관련 로직이 없어서 UI 정도만 설계했다다음 업데이트 해야할 사항으로 각 날짜별로 통계를 내려주고 해당 월의 통합 데이터까지 출력해야 한다  🛠️ 전체 구조 및 기술 스택React와 TypeScript를 사용한 달력 구현dayjs 라이브러리로 날짜 처리Custom Hook을 통한 로직 관리Tailwind CSS로 스타일링   💡 주요 로직 분석1. Custom Hook (useCalendar)상태 관리const [currentMonth, setCurrentMonth] = useState(dayjs()); 현재 표시되는 월을 상태로 관리dayjs 인스턴스를 초기값으..

데이터 로딩할 때 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..

개발을 하다 보면 이미지 업로드 기능이 필요한 경우가 많은데,특히 여러 장의 이미지를 한 번에 처리해야 하는 경우가 있습니다.오늘은 제가 구현했던 다중 이미지 업로드 기능을 기록해보려고 합니다. 구현 목표최대 5장까지 이미지 업로드 가능이미지 형식 및 크기 제한 (JPG, PNG, GIF, WEBP / 5MB 이하)이미지 미리보기 기능개별 이미지 삭제 기능 1. 이미지 업로드 컴포넌트 만들기먼저 이미지 업로드를 위한 기본적인 UI를 구성했고이 코드에서 ImageUpload 컴포넌트는 다섯 개의 이미지 미리보기 자리를 제공하는 간단한 레이아웃을 만들어유const ImageUpload = () => { // 파일 input 참조를 위한 ref const fileInputRef = useRef(null);..

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) => {..

오늘은 내일 있을 기능 분배에 대해서 더 활기찬 참여를 위하여 어떤식으로 기능 분배를 하면좋을지에 대해서 생각해 보기 위해 기능 분배 방식과 생각을 정리해보려고 한다 이제 곧 프로젝트 개발이 시작될 듯 한데 이런 끄적끄적 적는 포스팅도 이제 마지막이겠지... 컴포넌트 단위로 기능 분배  컴포넌트 단위로 기능을 분배하는 경우에팀원들이 UI 요소나 특정 기능을 담당하는 작은 컴포넌트를 맡아서 개발함 예로 들어서팀원1: 버튼, 모달 같은 UI 컴포넌트 개발팀원2: 로그인 폼, 검색 바 같은 기능성 컴포넌트 개발팀원3: 카드 리스트, 그리드 레이아웃 컴포넌트 개발이런 방식으로 재사용 가능한 단위의 기능을 개발할 때 초점을 맞추고컴포넌트 단위로 분배하여 독립적으로 작업하고 이 컴포넌트 들을 페이지에 모아서 더큰 ..

- 1분 이내의 자기 소개안녕하세요 저는 노용철입니다 내일배움 캠프에서 프론트엔드 과정을 수료(예정)하여 5번의 팀 프로젝트를 통해 협업 능력을 키웠고, React와 Next.js에 대한 전문성을 쌓았습니다. 저는 학습 과정을 즐기며 늘 새로운 것을 배우고자 하는 열정이 있습니다. 이러한 노력을 바탕으로 사용자 경험을 향상시키는 인터랙티브한 프론트엔드 개발자로 성장하고 싶습니다.- 어떻게 개발을 시작을 하게 되었나요?제가 개발을 시작하게 된 계기는 군 복무 중 한 동기의 영향이 컸습니다 사실 어릴 적부터 저는 플래시 8 같은 도구로 새로운 것을 만드는 것을 즐겼습니다. 하지만 시간이 지나며 이런 창작에 대한 열정이 잊혀졌었죠. 동기의 성과를 보면서 제 안에 잊혀져 있던 이 열정이 다시 깨어났으며이 경험은..