본문 바로가기

전체 글74

[Firebase] React에서 Firebase로 database 이용하기 React에서 Firebase로 database 이용하기 React에서 Firebase로 데이터베이스에 데이터 추가하기, 데이터베이스에 있는 데이터 불러오기, 데이터베이스에 있는 데이터 삭제하기를 구현하는 방법을 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. 1. firebase 파일 만들기 (src 폴더 하위에 생성하면 됨) // src/fbase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain:.. 2023. 1. 26.
[React] React에서 네이버 지도 API 사용하기 React에서 네이버 지도 API 사용하기  1. public/index.html에 script 넣어주기   index.html의 안에 위와 같은 script를 넣어준다. ClientId= 뒤에 발급받은 Key를 넣어준다. 환경변수를 사용하고 싶다면 으로 적어주면 된다.   단, 개발자 도구에서 key 값이 다 보인다는 단점이 있다... 그래서 실제 서비스되는 웹 사이트에 적용하기엔 적절하지 않을 테니 참고해주시길! 😅  2. 지도 생성하기  // src/Map.js const mapRef = useRef(null); const lat = // 위도 숫자로 넣어주기 const lng = // 경도 숫자로 넣어주기 useEffect(() => { const { naver } = win.. 2023. 1. 19.
[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.
[네트워크] HTTP HTTP # HTTP (Hyper Text Transfer Protocol) HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규칙이다. 클라이언트는 서버에게 정보를 요청하고, 서버는 이에 응답한다. 이렇게 서로 데이터를 주고 받을 때는 일정한 규칙이 필요한데, 이 규칙이 바로 HTTP이다. HTTP에는 두 가지 특징이 있다. 1. 무상태성 (Stateless) 서버가 클라이언트의 상태를 보존하지 않는다. 로그인을 하고 난 뒤 마이페이지로 이동하는 상황을 가정해보자. 서버는 로그인을 한 사용자와 마이페이지로 이동하는 사용자가 같은 사용자인지 알지 못한다. 서버와 클라이언트는 계속해서 통신을 하지만 서버는 클라이언트가 누구인지 기억하지 못하기 때문이다. 따라서 클라이언트 쪽에서 서버.. 2023. 1. 8.
[TypeScript] TypeScript 알아보기 TypeScript 알아보기 # 타입스크립트란 자바스크립트의 확장된 언어로, 자바스크립트에 타입이 부여된 언어이다. 자바스크립트는 동적인 언어로, 변수 선언 시 타입을 따로 지정하지 않고 런타임할 때 타입이 결정된다. 따라서 유연하게 이용할 수 있다는 편리함이 있지만 그만큼 에러 발생의 위험이 높다. 개인적으로 타입스크립트의 필요성을 정말 느꼈던 적이 있다. 프로젝트를 제작할 때, 아이템의 index를 지정해주고 버튼을 클릭할 때마다 index를 더하거나 빼서 다른 아이템을 보여주는 기능이 있었다. index가 1일 때는 1번 아이템, index가 2일 때는 2번 아이템, 이런 식으로! 그래서 index를 +하는 버튼과 -하는 버튼을 구현했는데, 자꾸 제대로 동작하지 않는 것이다. 한참을 헤매던 결과 타.. 2023. 1. 5.
[JavaScript] 실행 컨텍스트 실행 컨텍스트 # 실행 컨텍스트 (excution context) 실행 컨텍스트란, 자바스크립트에서 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 여기서 환경이란, 코드 실행에 영향을 주는 조건, 상태를 의미한다. 실행 컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단으로서, 이를 이해하면 자바스크립트의 주요 개념인 스코프, 클로저, 호이스팅 등을 이해할 수 있다. 자바스크립트 코드를 실행시키면, 자바스크립트 엔진은 콜스택이라는 공간에 실행 컨텍스트를 생성한다. 전역 범위에 해당하는 실행 컨텍스트를 생성하고 난 뒤, 그 속에 있는 함수A, 함수B, ... 들의 실행 컨텍스트도 생성한다. 이렇게 생성된 실행 컨텍스트는 위에서부터 차례대로 실행된다. 실행을 마친 실행 컨텍스트는 사라진다. 각 실.. 2023. 1. 3.

티스토리툴바