FE - Tools23 [Firebase] React에서 Storage로 프로필 사진 업데이트 하기 React에서 Storage로 프로필 사진 업데이트 하기 프로필 업데이트 기능은 Firebase의 Authentication에서, 이미지 업로드 기능은 Firebase의 Storage를 이용하여 구현할 수 있다. 우선 사용자 프로필 업데이트 기능을 구현하려면, 사용자가 존재해야 한다. 사용자를 생성하는 것, 즉, 계정을 생성하고 로그인을 할 수 있는 기능이 이미 있어야 한다. (Authentication 관련 내용 : 이전 글 참고 https://inthedev.tistory.com/37) firebase 9.16.0 버전 기준으로 작성되었습니다. 1. src에 firebase 파일 생성하기 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다. // src/fbase.js import { initi.. 2023. 1. 16. [Firebase] React에서 Authentication로 로그인 구현하기 React에서 Authentication로 로그인 구현하기 Firebase로 로그인 기능을 구현하기 위해 관련 강의도 들어보고 구글 검색도 열심히 해보았지만 이전 버전에 대한 내용이 많아서 공부하는 것에 어려움이 좀 있었다. 😥 그래서 Firebase 공식 문서를 읽어보며 최신 버전에 대해 공부했던 내용을 짧게나마 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. # 이메일로 로그인하기 1. src에 firebase 파일 생성하기 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다. // src/fbase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; cons.. 2023. 1. 13. [Redux Toolkit] Redux Toolkit이란 무엇일까 (+ React에서 사용하는 방법) Redux Toolkit이란 무엇일까 (+ React에서 사용하는 방법) Redux Toolkit 사용법이 궁금하신 분들은 아래의 ✅ 직접 해보기 (with React) 부분부터 읽으시면 됩니다😀 # Redux에 관심을 가진 계기 처음 React 프로젝트를 만들기 시작했을 때는 상태 관리의 필요성을 못 느꼈다. 어차피 작은 개인 프로젝트인데 뭐 그렇게까지 할 필요 있을까...? 라고 생각했기 때문. 그러나... 프로젝트를 진행하다 보니 갑자기 욕심이 생겨서 로그인 기능을 만들기로 했다. firebase에서 로그인 정보를 받고~ 로그인 여부를 확인 후 사용자의 마이페이지 화면도 보여주고~ 를 하려고 하니... props를 전달해주어야 하는데... 어.... 한순간에 복잡해졌다. 로그인 페이지에서 로그인을 .. 2023. 1. 10. [Tailwind CSS] Tailwind CSS 알아보기 (with React) Tailwind CSS 알아보기 (with React) # Tailwind CSS란 Tailwind CSS란 CSS를 쉽게 다룰 수 있게 해주는 CSS 프레임워크이다. 원래 React 프로젝트에 CSS를 적용하기 위해서는 CSS 파일을 따로 지정하거나, inline style으로 CSS를 적용하지만 Tailwind CSS는 className으로 스타일을 지정한다. 예시를 위해 개인 프로젝트의 코드 일부를 가져왔다. className로 작성된 것이 전부 Tailwind CSS로 작성한 스타일이다. CSS의 flex, width, height, overflow 등등의 요소들을 className으로 적어준 것이다. # 장점1 : 귀찮음 해결 사용해보고 가장 장점이라고 느꼈던 건 당연히 간단함이다. class의.. 2022. 12. 23. [React] useParams 이용하기 useParams 이용하기 useParams는 react-router-dom에서 지원하는 함수로, URL의 매개변수의 키/값 쌍의 개체를 리턴한다. 동적 라우팅 방식으로 페이지 이동 시 URL 속의 값을 이용해야 할 때 유용하다. 예시로 사용법을 알아보자. App.js import React from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./Home"; import User from "./User"; function App() { return ( ); } export default App; 우선 App.js에서 routes를 작성해준다. User/:id라고 작성하면 User 페이지를 동적으로 라우팅할 수 .. 2022. 12. 22. [React] useEffect와 useLayoutEffect의 차이 useEffect와 useLayoutEffect의 차이 (+ DOM) # useEffect와 useLayoutEffect의 차이 : 실행 순서 React hooks 중 useEffect와 useLayoutEffect는 비슷한 역할을 하지만 실행 시점에 차이가 있다. 우선 이 둘의 차이를 설명하기 전에 DOM에 대해 먼저 짚고 넘어가자. 브라우저 렌더링 엔진은 HTML 문서를 DOM 트리로 만든다. 그리고 DOM 트리를 이용하여 화면의 레이아웃을 계산하고, 계산된 결과를 화면으로 보여준다. 이 작업을 렌더링이라고 한다. (브라우저 렌더링과 DOM 자세한 내용 : https://inthedev.tistory.com/16) # useEffect useEffect는 렌더링을 마치고 실행된다. 만약 useEffe.. 2022. 12. 20. 이전 1 2 3 4 다음
