반응형 Vite + React에서 Kakao Maps API 사용하기 카카오맵 API 사용은 키 발급을 받아야 사용할 수 있다.또한, 키 발급에는 카카오 계정이 필요하다. 아래 과정을 통해 먼저 키를 발급하자.준비하기1. 카카오 개발자사이트 접속 및 로그인2. 내 애플리케이션 클릭3. 애플리케이션 추가하기 클릭4. 앱 이름, 회사명 등 필요한 정보 입력/체크 후 저장5. 플랫폼 - Web 플랫폼 등록 - 저장(Vite dev 서버의 기본 포트는 5173이다.)기본적인 사용 준비는 완료가 되었다. 참고로, 앱 키는 JavaScript 키를 사용한다.아래 "시작하기"부터는 Vite와 React를 사용하여, 웹브라우저에 간단한 지도를 띄워본다.단계별로 하나씩 진행을 해보자.시작하기01. 지도를 담을 영역 만들기가장 먼저, 지도를 담기 위한 영역이 필요하다. 500x400의 크기.. 2024. 9. 16. CRA에서 Vite로 마이그레이션: 차세대 툴로 개발 환경 개선하기 회사에서 '바쁜 기간 지나면 이건 꼭 해봐야지'했던 것 중에 하나가 바로 빌드 도구 마이그레이션 하기였다. 시간이 지남에 따라 프로젝트의 크기가 점점 커지면서, 변경 사항에 대한 소스 코드 갱신 시간이 계속해서 조금씩 증가했다. 그래서 그 잠깐 사이에 개발 흐름이 끊기는 불편함을 너무 개선시키고 싶었다. Vite를 선택한 이유 내가 현재 프로젝트에 마이그레이션할 빌드 도구로 Vite를 선택한 이유는 다음과 같다: Vite 공식문서의 Vite를 사용해야 하는 이유를 읽고 크게 공감했다. 현재 프로젝트(어드민 서비스)와 잘 맞는 SPA/CSR에 친화적인 빌드 도구이다.(SSR도 지원한다.) 공식문서가 한글 번역으로도 잘 되어 있다. 버전이 5까지 나와서 어느 정도 안정화가 되었다고 생각. 현재 프로젝트가 W.. 2024. 2. 22. [React] API 응답 시간이 너무 길다면 어떻게 해야 할까? 만약 API 응답 시간이 너무 오래 걸린다면 어떻게 처리해야 할까? 사용자가 버튼을 클릭 했는데 아무 반응이 없거나, 무한 로딩만 표시되고 있다면 아마 몇 초도 안돼서 이탈할 것 같다. 이 글에서 React를 사용한 여러 예시를 통해 어떤 방법이 더 좋을지 알아보자. AbortController로 요청 중단하기 응답 시간이 너무 오래 걸리면 웹 요청을 중단하는 것은 어떨까? "불러오는 중"과 같은 로딩 화면만 보여주는 것이 아닌 시간을 제한하여 사용자를 마냥 기다리게 하지 않고, 이렇게 함으로써 네트워크 트래픽도 줄일 수 있다. AbortController는 Fetch API와 같은 웹 요청을 중단 할 수 있게 만들어준다. AbortController() 생성자를 통해 객체를 생성한 다음, 해당 객체의 .. 2023. 11. 4. React 페이지네이션 UI 직접 만들기 페이지네이션(pagination)은 큰 데이터를 사용자가 보기 편하도록 작은 부분으로 나누어 여러 페이지로 표시하는 것을 뜻한다. 사용자는 이 페이지들을 순차적으로 또는 선택적으로 볼 수 있다. 요즘은 비즈니스나 UX적인 측면에서 무한 스크롤이 더 많이 쓰이는 것 같지만, 사용자가 특정 정보를 찾기 위해 몇 페이지를 건너뛰어야 하거나, 어드민의 데이터 테이블 UI와 같이 내용이 많고 구조화된 정보를 제공해야 하는 경우에는 페이지네이션이 더 적합할 수 있다. 페이지네이션 핵심 로직 이해하기 페이지네이션의 일반적인 예를 들자면, 사용자는 페이지마다 보여지는 데이터의 양을 선택할 수 있고, 원하는 페이지 번호를 클릭함으로써 해당 페이지로 즉시 이동할 수 있다. 또한, 앞뒤 페이지로 쉽게 이동할 수 있는 네비게.. 2023. 8. 2. React에서 Swiper Element 사용 시 TypeScript 에러 해결하기 스와이퍼 리액트 페이지에 들어가보면 가장 먼저 눈에 띄는 문구가 있다. Swiper React components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead. If you are upgrading from Swiper 8 to Swiper 9, check out Migration Guide to Swiper 9 If you are looking for v8 docs, they are here v8.swiperjs.com 스와이퍼 리액트 컴포넌트는 향후 버전에서 제거될 가능성이 있으니, 웹 컴포넌트로 만든 스와이퍼 엘리먼트로 마이그레이션하라는 것이다. 빨간색 배경에다가 .. 2023. 6. 18. [React] null vs empty fragment 리액트에서는 종종 다른 조건에 따라 아무것도 렌더링 하지 않고 싶을 때가 있다. 그럴 때 쓰는 반환값이 바로 null과 empty fragment( )이다. 이 둘 중에 무엇을 쓰는 게 더 나은 선택일까? function Item({ name, isPacked }) { if (isPacked) { return null; // 또는 } return {name}; } null을 사용하는 것이 리액트 렌더링 프로세스에 아무 영향을 끼치지 않기 때문에 성능상으로 좋아서 사용하는 개발자가 있고, "빈 엘리먼트를 반환한다"라는 개념에서 를 의미론적으로 사용하는 개발자도 있다. 이 문제에 대한 힌트가 담긴 내용이 공식 문서에도 나와있다. 역시 이럴 땐 공식 문서 먼저 살펴보는 것이 좋은 것 같다. 공식 문서에서는 '.. 2023. 5. 19. React에서 셋(Set)으로 체크박스 재정의하기 체크박스 기능 구현, 이게 이렇게나 복잡한 퍼즐이 될 줄은 몰랐다. 그래도 두 개의 구현 방법을 알아내긴 했다. 그 중 하나인 '셋(Set)' 자료구조를 활용한 방식은 신기하고 인상 깊었다. 셋은 알고리즘 공부할 때나 가끔 봤었는데, 예전에 면접에서 써봤다고 괜히 얘기 꺼냈다가 라이브로 관련 문제까지 풀었었던 아찔한 기억이 있다.(물론 떨어졌다.) 그래서 이 글에서는 제대로 이해하고자 체크박스 기능 구현을 통해 알아보려고 한다. 우선, 배열을 사용하여 구현한 방식을 살펴보고, 이를 개선하기 위해 셋을 이용한 방식까지 소개한다. 따라서, 이 두 가지 방식을 비교하고, 셋을 이용한 체크박스 기능 구현이 어떻게 기존의 배열을 사용한 방식을 개선할 수 있는지에 대해 살펴보자. 잠깐, 체크박스 UI란? 체크박스 .. 2023. 5. 14. 이전 1 2 3 다음 반응형
