[React/Vite] 카카오맵 API 사용 설정하기

초기 설정1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!)  간단 테스트 - 지도 띄우기 (API 연결 확인)// index.htmlimport { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = documen..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms

[React/JS] 캐러셀 구현하기 (Tailwind)

캐러셀!! 계속 구현해보고싶었는데 시간에 밀려 시도를 못해보다가 이번 MBTI 테스트 프로젝트를 만들면서 드디어 적용해봤다 기존 코드는 데스크탑 기준으로 너비나 배치 등을 적용해둬서 모바일로 확인했을 때 왼쪽과 같이 조각조각 잘리고 가려지고 ㅋㅋㅋ 이상한 배치가 됐다 반응형 UI도 꼭 적용해보고싶었기 때문에 아예 width 1024 이하인 경우에는 테스트에대한 가이드를 캐러셀로 보여주기로 했다.  구현 방법1) 캐러셀로 보여줄 컨텐츠가 담긴 배열에서 인덱스를 증가/감소하며 해당하는 내용의 카드가 가운데에 오도록 한다2) 이전, 다음 버튼을 눌렀을 때 0번 인덱스에서 이전 버튼을 눌렀거나, 마지막 인덱스에서 다음 버튼을 누른 경우 각각 마지막, 첫 인덱스로 변경한다.3) 캐러셀이 보여지는 범위를 컨테이너로..

• format_list_bulleted React
• · 2024. 9. 12.
• textsms

개인프로젝트 발생한 문제와 해결

https://nninyeong.tistory.com/109 [Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도nninyeong.tistory.com 지난번 작성한 글에 이어서 조금 더 추가! 정확한 API 명세 확인과 formData 객체 활용하기문제: 로그인 요청 시 헤더에 인증 토큰이 없다는 에러 발생로그인 요청을 보낼 때 서버에서 "Authorization 토큰이 없다"는 에러가 발생했다. 하지만 네트워크로 전송하는 데이터를 출력했을 땐 헤더에 토큰이 잘 들..

• format_list_bulleted 일지
• · 2024. 9. 11.
• textsms

[디자인패턴] JS로 발행-구독 (Pub-Sub) 패턴 구현해보기

옵저버 패턴발행-구독 패턴에 대해 공부하기 전 챌린지반에서 옵저버 패턴을 공부했다. 어떤 변화가 일어났을 때 그 변화를 감지해야할 곳에서 변화 상태를 구독하는 방식으로 구현하는 것을 의미한다.이 패턴을 구현하기 위해 특정 요소의 업데이트가 발생할 때 호출할 함수들 목록(구독자/관찰자 목록이라고 할 수 있다!)을 만들어두고, 구독할 요소들에서 변경된 값을 반영하기위한 함수(변화시 호출될 콜백함수)들을 그 구독자 목록에 push해주면 된다. 옵저버 패턴의 특징- 상태 변화가 발생하는 요소(주체)가 자신의 변화가 미칠 영향을 몰라도 된다.- 주체와 그 관찰자의 결합도가 낮다.- 옵저버로 등록(구독)해야하므로 두 요소는 완전히 모르는 상태가 아니다. 구현 예제// Subject.js -> 주체const crea..

• format_list_bulleted 디자인패턴
• · 2024. 9. 10.
• textsms

[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도하는 버튼들은 Link로 처리했는데 hover 이벤트를 주려니 문제가 생겼다! 문제상황이렇게 Link 태그의 영역이 아니면서, 부모요소인 div 태그의 영역에 hover되면 동시에 hover 스타일 속성이 적용되지 않는 현상이 있었다. Link 태그의 width, height를 full(100%)로 설정해줘도 되지만, 경우에따라 이와 같은 구조이지만 크기는 부모와 달라야하는 상황이 있을 것 같아 좀 더 알아보았다. 해결tailwind에서 hover, focus 등의 상태를 그룹지어주기위해 group을 사용할..

• format_list_bulleted HTML + CSS
• · 2024. 9. 10.
• textsms

[TanStack Query] Query Cancellation, Optimistic Updates

Query Cancellation불필요한 네트워크 요청을 제거하기 위해 사용대용량 fetching을 중간에 취소하거나, 사용하지 않는 컴포넌트에서 fetching이 진행중인 경우 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있음 QueryFunctionContext queryFn이 매개변수로 받는 객체export const getTodos = async (queryFnContext) => { const { queryKey, pageParam, signal, meta } = queryFnContext; // queryKey: 배열형태의 쿼리키 // pageParam: useInfiniteQuery 사용 시 getNextPageParam 실행 시 적용 // signal: AbortSignal 을 의..

• format_list_bulleted React
• · 2024. 9. 7.
• textsms