WIL

리팩토링은 미래의 나에게.. ㅋㅋ참고용으로만 올려야겠습니다.네이버지도 with React - Step by Step 2initGeocoder.jsfunction initGeocoder( infoWindow, map, searchInputRef, searchButtonRef, marker, setSelectedGeoData, setSelectButtonDom, user) {map.addListener('click', (e) => { searchCoordinateToAddress( infoWindow, map, e.coord, setSelectButtonDom, setSelectedGeoDa..

팀플 주간이 끝났습니다!팀원분들의 노력 덕분에 무리없이 프로젝트를 완료 할 수 있었습니다. 아웃소싱 프로젝트(aka 외부 api 사용 프로젝트)에서 저희는 네이버 지도 api 를 활용하여운동 모임 사이트를 기획했고, 5일이라는 짧은 시간동안 요구사항을 대부분 구현했습니다.오늘은 그 중 제가 담당했던 네이버 지도 api 에 관한 사항을 정리하려고 합니다.네이버지도 with React - Step by Step 1네이버 지도 api script 동적 로드네이버 지도 api 를 이용하기 위해서는 https://openapi.map.naver.com/openapi/v3/maps.js 라는 스크립트를 로드해야 합니다index.html 에서 script 태그로 로드해도 되지만, 좀 더 동적인 방식을 고려하였습니다사..

useQuery 의 queryKey 배열에 대해 설명해주세요useQuery의 queryKey는 React Query에서 캐싱 및 상태 관리의 핵심 요소입니다. queryKey는 쿼리의 고유한 식별자로 사용되며, React Query는 이를 기반으로 데이터 캐싱, 데이터 무효화, 리패칭 등을 관리합니다.queryKey의 역할데이터 캐싱 및 식별:queryKey는 쿼리의 고유 식별자입니다. 동일한 queryKey를 가진 쿼리는 동일한 데이터 캐시를 공유합니다.React Query는 queryKey를 사용하여 캐시된 데이터를 저장하고 검색합니다.쿼리 무효화 및 리패칭:특정 queryKey를 가진 쿼리를 무효화하면, React Query는 해당 queryKey에 대한 데이터를 무효화하고, 필요에 따라 다시 패칭..

좋은말할 때 Tanstack Query 쓰자험난했던 팀플 주간이 끝이 났습니다.리덕스 createAsyncThunk 와 extraReducer 연습은 아주 제대로 했지만그냥 웬만하면 redux 버리고 zustand 와 tanstack query 를 쓰자는 교훈? 을 얻었습니다.기억하기 위해 supabase의 table, auth 관련 메소드를 정리하면서 한 주를 마치려 합니다.Supabase 메서드 정리table 메서드Supabase는 Postgres 데이터베이스를 기반으로 하며, 다양한 테이블 관련 메서드를 제공합니다.다음은 Supabase의 테이블 관련 주요 메서드들에 대한 설명입니다:1. 데이터 삽입 (Insert)const { data, error } = await supabase .from('..

폭풍같은 한 주가 지나갔습니다!한 주를 정리하며 이번 주의 메인 테마(?) 였던 Context API 와 Redux-Toolkit 의 사용법을 다시한번 정리해 보려고 합니다.Context API기본설정Context 생성 : createContext()Provider 로 상위 컴포넌트 감싸기 : 사용할 컴포넌트에서 사용 : useContext(콘텍스트명)이게 끝! 인데, 편하게 사용하려면 파일을 커스텀 훅까지 2개 만들면 좋습니다.src/context/콘텍스트.tsxsrc/hooks/커스텀훅.tsx콘텍스트.tsx//context.tsximport { ReactNode, createContext, useEffect, useState } from "react";interface Props { childr..

벌써 3주차가 지나갔습니다. 이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다. HTMLcollection 과 NodeList, DOMcontentLoaded,js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다. 이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데, 테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다. 그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면 'https://p..

이번 주는 개인학습 주차였습니다.그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.이번 주차에 공부한 내용을 정리해보려고 합니다.실행 컨텍스트JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.실행 컨텍스트의 구성 요소실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:변수 환경(Variable Environment):..

첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다.  전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..