본문 바로가기

프론트엔드 관련24

[React] 카카오맵 도로명 주소를 통한 위치 정보 검색(존재하지 않는 위치정보 포함) 기술 환경React, Vite, Typescript, react-kakao-maps-sdk, Maps Javascript API(Google)카카오맵 도로명 주소를 통한 위치 정보 검색세간에 나와있는 도로명 주소를 통한 위치 정보 검색은 다음과 같다.물론 매개변수 타입은 따로 정의되어있지 않아, 내가 찾아보면서 따로 추가하였다.function getPositionFromAddress(searchAddress: string) { const geocoder = new kakao.maps.services.Geocoder(); const callback = function ( result: Array, status: kakao.maps.services.Status, pagination: ka.. 2024. 12. 11.
[React][Vite] 프로젝트 vercel 배포 후, 새로고침 404 에러 이전 글과는 다른 이슈 [React] vercel 배포시 http, https axios 통신 제대로 하는법create-react-app으로 vercel 배포시 axios 오류가 발생했다.create-react-app으로 만든 리액트 웹 어플리케이션을 vercel를 통해서 간단히 배포할려 했는데 axios에서 제대로 url이 보내지지 않는 오류가 발생하ash9river.tistory.com  라우터 새로고침 404리액트 바이트 프로젝트를 버셀을 이용하여 배포를 하였는데, "/"가 아닌 경로에서 새로고침을 하면 404 NOT FOUND error가 발생한다. 이는 verecl이 정적 웹사이트 호스팅을 하기 때문이다. React는 SPA라서 동적 라우팅을 하는데, 동적 경로에서 새로고침을 하면, vercel.. 2024. 12. 9.
[React] 비대화형 요소(td, div)에 마우스 이벤트(onFocus, onBlur) 넣기 HTML 요소 포커스 HTML에서 , , , 와 같은 요소는 대화형 요소는 기본적으로 포커싱이 된다.그러나 대화형 요소가 아닌 비대화형 요소(div, td, ul, li, span, p...)는 포커싱이 발생하지 않는다.  즉, onFocus와 onBlur 이벤트가 발생하지 않는다. 비대화형 요소에 onFocus, onBlur 이벤트를 발생시키고 싶으면  2가지 방법이 있다. 1. tabIndex 속성 활용2. 직접 마우스 이벤트 제어 직접 하나씩 알아보자 tabIndex 속성tabIndex 속성은 요소의 종류와는 무관하게 포커스 가능함을 나타내는 속성이다.Tab 키를 사용하는 연속적인 키보드 탐색(tab 탐색)에서 어느 순서에 위치할 지 지정한다. tabIndex=-1로 표현되는 음의 정수 값은 tab.. 2024. 9. 23.
[React] figma 디자인 적용하기 피그마 디자인 적용로그인 페이지를 만드는데, 피그마로 디자인된 페이지를 리액트로 적용해야 할 일이 생겼다. 다음과 같은 디자인을 리액트에 적용해야하는데, 문제는 피그마 디자인이 제대로 되어있지 않고, 애니마를 통해서 리액트로 import 할 수는 있으나 결제를 해야한다... 그래서 CSS를 보고 디자인을 적용시켜야 하지만, 디자이너가 만든 것이 코드로 바로 적용이 될 수가 없지...   단순 적용만 하면 다음과 같이 괴작이 탄생한다...   다음과 같이 픽셀단위로 분석하고 알잘딱하게 코드를 짠다.  결과 완성!!참 쉽죠? 2024. 9. 11.
[React] 우리집 고양이도 할 수 있는 카카오 로그인 구현(with firebase OAuth 2.0 소셜 로그인) React Firebase Kakao Authentification with OAuth 지난 글에서 구글 소셜 로그인을 해보았는데, 이어서 이번에는 카카오 소셜 로그인을 구현해보자.  [React] 구글 로그인 기능 구현(with firebase 소셜 로그인 인증)React Firebase Google Authentification리액트로 구현할 때, 파이어베이스를 이용하면 구글과 같은 소셜 로그인 기능을 쉽게 구현할 수 있다고 해서 적용해보았다. 구현은 쉬우나, 정보가 별로 없어서 글ash9river.tistory.com  구글 소셜 로그인과는 다르게, 리다이렉션을 사용해서 만들 건데, REST API 방식을 활용한다. REST API 방식을 활용하기 때문에 스크립트 태그를 추가할 필요가 없다. 하지만.. 2024. 8. 12.
[React] 구글 로그인 기능 구현(with firebase 소셜 로그인 인증) React Firebase Google Authentification리액트로 구현할 때, 파이어베이스를 이용하면 구글과 같은 소셜 로그인 기능을 쉽게 구현할 수 있다고 해서 적용해보았다. 구현은 쉬우나, 정보가 별로 없어서 글로 작성해보았다. 이번 글은 구글 로그인을 다루고, 다음 글에서 카카오톡 로그인을 다루겠다. 1. 파이어베이스 프로젝트 생성가장 처음에 할 일은 파이어베이스 콘솔로 가서 파이어베이스 프로젝트를 생성한다. 다음과 같은 이미지에서 프로젝트 만들기를 클릭한다.  프로젝트 이름을 입력하고, 구글 애널리틱스 설정을 사용할거냐 묻는데, 나는 연습 프로젝트이기에 사용을 안한다고 체크했다. 프로젝트 만들기를 클릭했으면 다음과 같이 홈이 나온다. 여기서 빌드>Authentification을 들어간다.. 2024. 8. 7.

티스토리툴바