React 관련15 [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. Node/React spawn einval 오류 단순히 CRA(create react app)을 해도 spawn EINVAL이라면서 명령어가 실행이 안되는 오류가 발생하였다.node.js를 LTS, v20.15.1 버전을 설치했더니 이런 오류가 발생하는 것이다. 이 이슈는 2024년 node의 보안 정책 업데이트로 발생한다. Node.js — Wednesday, April 10, 2024 Security ReleasesNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 단순히 node 버전을 다운그레이드해도 해결가능하다. 2024. 7. 15. 이전 1 2 3 다음
