072DATA

시작하기 전.. 처음에는 프로젝트에서 서울맵의 지도 api를 활용하여 친환경 스토어를 보여주려고 했지만서울시 지도의 UI/UX가 너무 구리(너구리)길래 카카오맵에서 보여주면 좋겠다는 의견이 나왔고 서울시 제로웨이스트 스토어 데이터를 활용해서카카오 맵으로 커스텀해보기로 했슴다,.   데이터 분석 서울시 API에서 제공하는 데이터를 살펴보니 필요 이상으로 많은 필드가 있었습니다.아래와 같이 필요한 것만 추려냈습니다interface OgInfo { COT_CONTS_ID: string; COT_CONTS_NAME: string; COT_ADDR_FULL_NEW: string; COT_COORD_Y: number; COT_COORD_X: number; COT_VALUE_03: string; COT_..

기술면접 솔직히 답변 적으면서 서치도 해보다보니 실제로는 대답 못할 것 같은 질문이 있슴다..하지만 이렇게 연습을 해놔야 내일 있을 모의 면접에서 웃음을 선사하기 싫어서 미리 학습해봤씀다...어떻게보면 기술면접 준비하는 과정도 학습이라고 생각해서 TIL로 제출해버릴까 합니다... 그럼 이만^_^b  Q . HTTP 프로토콜의 GET과 POST 요청의 차이점은 무엇인가요?A. GET은 URL에 데이터가 노출되어 조회와 캐싱에 적합하고,POST는 body에 데이터를 담아 보내어 보안성이 높고 데이터 생성에 적합합니다.Q.  자바스크립트에서 동기(Synchronous)와 비동기(Asynchronous)의 차이점은 무엇인가요? A. 동기는 코드가 순차적으로 실행되어 흐름 예측이 쉽고, 비동기는 여러 작업을 동시..

목표useMemo와 useCallback의 동작 원리 이해두 Hook의 차이점과 각각의 사용 의도 파악 (!)실제 프로젝트에서의 적용 방법 습득성능 최적화 관점에서의 이해 React의 렌더링 특성React에서 컴포넌트는 다음과 같은 경우에 리렌더링됨state가 변경될 때props가 변경될 때부모 컴포넌트가 리렌더링될 때이러한 리렌더링은 때때로 불필요한 계산이나 렌더링을 발생시킬 수 있음 Memoization이란?이전에 계산한 값을 저장해두고 동일한 입력이 들어올 때 재사용하는 기법컴퓨터 프로그래밍에서 속도를 향상시키는 최적화 기술 중 하나 그럼 이제 useMemo와 useCallback 알아보겠음 useMemo 사실 useMemo 관련해서 포스팅을 한 적이 있긴한데 다 까먹고 제대로 정리된 것 같지도 않..

🚨 문제 상황 Modal 컴포넌트에 Tailwind CSS로 스타일을 적용했을 때의도한 대로 스타일이 적용되지 않는 현상이 발생했다.// 적용이 잘 안되는 Tailwind 스타일 {/* 모달 내용 */}  하지만 같은 스타일을 인라인으로 적용했을 때는 정상적으로 작동했다.// 정상 작동하는 인라인 스타일 {/* 모달 내용 */} 🔍  원인 분석 JIT 컴파일러 이슈Tailwind CSS의 JIT 컴파일러는 빌드 시점에 사용된 클래스만 생성함동적으로 생성되는 모달의 경우 컴파일 시점에 해당 스타일이 포함되지 않을 수 있음.스타일 적용 시점의 차이인라인 스타일: 런타임에 직접 DOM에 적용됨Tailwind: 빌드 타임에 생성되어야 함 인라인 스타일이 적용되는 이유     런타임 vs 컴파일타임인라인 ..

🔍 문제 상황사용자가 하루에 한 번만 챌린지를 제출할 수 있어야 하는데 중복 제출이 가능한 문제가 발생했습니다.  발생한 구체적인 문제점 같은 날짜에 여러 번 챌린지 제출이 가능시간대(Timezone) 처리로 인한 날짜 계산 오류DB의 timestamptz 타입과 프론트엔드의 날짜 처리 불일치캘린더 데이터 표시 불일치동일한 시간대 이슈로 인해 캘린더에 챌린지 데이터가 잘못된 날짜에 표시되거나 누락되는 현상 발생월별 통계 데이터 계산 시 날짜 기준이 불명확한 문제  문제의 원인 1. 복잡한 시간 범위 쿼리 접근초기 해결 시도에서는 다음과 같은 복잡한 쿼리를 사용했습니다...const { data: todayChallenge } = await supabase .from("challenges") .sel..