072DATA

모던 자바스크립트?왜 그냥 자바스크립트가 아니라 모던 자바스크립트 일까요?해당 페이지의 튜토리얼을 진행하다보면 '모던' 자바스크립트가 그냥 자바스크립트와 무엇이 다른지 궁금해졌습니다.모던 자바스크립트의 정의모던 자바스크립트의 정의로는 2015년에 나온 ECMAScript 2015(6판)와 그 이후의 판을 구현한 자바스크립트라고 정의가 되는데 여기서 ECMAScript에 대한 의문도 생기게 되는 것 같습니다.ECMAScript?ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어입니다.ECMAScript 개정안표준화가 필요했던 배경브라우저 전쟁과 호환성 문제1990년대 Netscape와 Microsoft는 각자의 브라우저(Navigator와 ..

https://0723-0725.tistory.com/110 깃 허브 계정 플래그 및 일시 정지 (Your account has been flagged,Your account is suspended)최근 TIL이나 깃허브 잔디를 심지 못했던 이유가 있었는데 바로 깃허브 쉑 때문이다. 멘탈이 가출해버렸기 때문에 이 무기력함은 말로 설명하기 어렵다. 쨌든... 내가 겪었던 썰을 풀어보겠슴다0723-0725.tistory.com 이전에 깃허브 측에서 계정에 대한 제한이나 일시 정지가 풀렸다는 답변을 받아도 깃허브의 레포지토리에 push 하려고하면 Your account is suspended라는 오류가 나왔는데이러한 내용을 다시 문의 했더니 새로운 해결책을 주었다. echo url=https://github...

깃 허브 계정 플래그 및 일시 정지  2https://0723-0725.tistory.com/111 깃 허브 계정 플래그 및 일시 정지 2 (Your account has been flagged,Your account is suspended)https://0723-0725.tistory.com/110 깃 허브 계정 플래그 및 일시 정지 (Your account has been flagged,Your account is suspended)최근 TIL이나 깃허브 잔디를 심지 못했던 이유가 있었는데 바로 깃허브 쉑 때문이다. 멘0723-0725.tistory.com   최근 TIL이나 깃허브 잔디를 심지 못했던 이유가 있었는데 바로 깃허브 쉑 때문이다. 멘탈이 가출해버렸기 때문에 이 무기력함은 말로 설명하기 ..

이전에는 데이터 분석 및 카카오맵을 불러오고데이터의 위치를 기반으로 마커와 인포윈도우를 생성했습니다.. 이번에는 데이터를 리스트 형식으로 렌더링하고 데이터를 검색할 때 디바운싱 기법을 적용하며카드를 클릭하거나 마커를 클릭했을 때 지도를 이동시키는 이벤트와 지도를 불러올 때 로딩처리까지 구현해볼 계획입니다 StoreList 컴포넌트 1. StoreList 컴포넌트 Propsconst StoreList = ({ stores, onClick, selectedStoreId }: StoreListProps) => {  StoreList에 전달되는 props 들은 상위 페이지에서 제공되는 상태와 클릭 함수입니다 상위 페이지 구조const Page = () => { const [selectedStoreId, set..

지난 시간에는 서울 맵의 친환경 스토어 데이터를 분석하고supabase에 저장하는 과정을 기록했는데욥 이번 글에서는 실제로 카카오맵을 불러오는 과정을 기록하겠습니다. 먼저 카카오맵 API 문서에 나와있는 시작하기를 따라하면서 개발자 등록 및 API 키를 발급받아야 합니다. 그리고 타입 지원이나 지도를 더 원할하게 사용하기 위해서 카카오맵 SDK 라이브러리를 사용합니다npm install react-kakao-maps-sdk혹은yarn add react-kakao-maps-sdk   카카오맵 API 가이드https://apis.map.kakao.com/web/guide/ 카카오맵 SDK 가이드https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro Tutorial |..

시작하기 전.. 처음에는 프로젝트에서 서울맵의 지도 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..