본문 바로가기

React 관련16

[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로 이미지 업로드 (with Blob, FileReader) 서론백엔드에서 이미지를 url로 보내주세요~라고 요청을 했는데, url?? 도대체 무슨 소리지...파일을 어떻게 보내지? 라는 생각이 들었다. Blob과 File 그리고 url 사이에서 무슨 소리지? 싶어서 찾아보았다.BlobBlob은 Binary Large Object의 약자로 주로 이미지, 오디오, 비디오와 같은 멀티미디어 파일 바이너리를 객체 형태로 저장한 것을 의미한다. 멀티미디어 파일들은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형이다. 이 Blob 객체는 blobpart와 optional type로 나누어져 있다. 먼저, blobpart는 Blob | BufferSource | String을 속성으로 지닌 값의 배열이다. optional t.. 2024. 7. 23.
React Do not use or you will be fired 리액트 관련 글을 작성하면서 여러 가지를 테스트 중에 발견함.쓰지말라면 쓰지말라구~~ 2024. 7. 23.

티스토리툴바