본문 바로가기

React 관련/프로젝트8

[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.
[React-Redux] 실제 프로젝트에 적용하고, thunk로 비동기 통신 구현 서론props drilling기본적으로 local state를 이용하는 useState나 기타 훅은, props를 다른 컴포넌트로 넘겨줄 수 있는데, 이때 props를 필요로 하지 않는 컴포넌트에서 props를 넘겨줘야 하거나 아니면 props를 너무 깊게(depth 관련) 전달하면 추적이 어려워진다.global state이에 따라서, 프로젝트에서 local state와 global state(App-Wide State)의 구분이 필요해지고, redux를 이용해야하는 상황이 발생하였다.global state를 구분하고, 그에 따라서, 상태 관리 라이브러리 중 하나인 redux를 활용하게 되었다.https://github.com/ash9river/React-Learned/tree/main/section19.. 2024. 5. 8.
React 구글맵(googleMap) 최적화(with typescript) 지난 포스팅에서 useEffect 안에 ref.current를 업데이트 하는 방식으로 구글맵을 렌더링하였다.https://ash9river.tistory.com/36 React로 간단히 만들어보는 구글맵(with Typescript)구글 맵을 프로젝트에 이용하려고 했는데, 진짜 진짜 정보가 적어서 어떻게든 완성하였다.나는 @googlemaps/react-wrapper를 이용하였고, 기본적인 세팅은 다른 글에서 보았다. https://leirbag.tistory.com/158ash9river.tistory.com 그러나 이는 commit phase에서 React가 refs를 업데이트한 이후, componentDidMount의 시기에서 ref.current의 값을 변경하기에 비효율적이다. 이러한 문제를 타파.. 2024. 4. 26.

티스토리툴바