jaeserrr.log

현재 날짜와 시간을 구해봅시다! 00. new Date() const today = new Date(); console.log(today); new Date()는 현재 날짜와 시간을 가지는 객체를 리턴합니다🌞 01. 현재 연도/월/일/요일 import * as React from "react"; export default function App() { const today = new Date(); const year = today.getFullYear(); // 년도 const month = today.getMonth() + 1; // 월 const date = today.getDate(); // 날짜 const day = today.getDay(); // 요일 console.log(year + "/" ..

React Hook는 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능하게 해줍니다. 리액트는 useState, useEffect 같은 내장 Hook을 제공해주는데, 이 중 useNavigate를 사용해서 페이지를 이동해볼게요~! 저는 Hook을 직접 만들건데, 한 함수형 컴포넌트 내에서 useNavigate()를 선언하여 사용할 것입니다. => 이렇게 하는 이유는 맨 밑에서 소개 드리겠습니다! 00. useNavigate usePage 라는 함수형 컴포넌트를 만들어 사용하겠습니다. usePage.js import { useNavigate } from "react-router-dom"; function usePage() { /** 페이지 이동 hook */ const navigate = useN..

watch?v= 이런 식으로 url에 변수를 어떻게 줄까! https://avoc-o-d.tistory.com/71 [React] useNavigate, useParams로 동적라우팅(Dynamic Routing) 하기 (GET - URL에 파라미터) 페이지는 똑같은데, 안에서 렌더되는 데이터만 다른 페이지들 있죠! 예를 들어, 유튜브의 각 영상 상세페이지가 있겠네요. 🤩 이렇게 Routes의 경로(URL)에 특정 매개변수를 넣어서 해당 페이지로 avoc-o-d.tistory.com 저번에 작성한 동적라우팅 방법 중 하나인, useParams 로도 가능한데 URLSearchParams로도 가능합니다!! https://developer.mozilla.org/en-US/docs/Web/API/URLSearc..

페이지는 똑같은데, 안에서 렌더되는 데이터만 다른 페이지들 있죠! 예를 들어, 유튜브의 각 영상 상세페이지가 있겠네요. 🤩 이렇게 Routes의 경로(URL)에 특정 매개변수를 넣어서 해당 페이지로 이동할 수 있게 하는 거죠. 제가 구현한 방법을 작성하겠습니다. 우선 순서는 이렇게 됩니다. url의 매개변수를 통해 데이터가 다르게 렌더될 페이지(A) 구현 (A)로 갈 수 있도록 추가 페이지(B)에서 데이터의 id를 매개변수로 useNavigate 사용하여 (A)로 이동 (A)의 현재 url에서 매개변수를 뽑아서 데이터 GET 요청 보내기 00. 렌더할 페이지 구현 A.js import * as React from "react"; export default function A() { return ( (A)..

각 키의 이름에 매핑하여 토글을 구현할 수 있도록, map 자료구조를 사용해서 선택여부라는 state를 object로 저장해 관리해보겠습니다. 기본적인 map 자료구조를 먼저 살펴보고 가봅시다. 주의해주실 점은! Object는 Key를 문자형으로 변환합니다. 반면에, Map은 Key의 타입을 변환시키지 않고 그대로 유지합니다. let map = new Map(); map.set('1', 'str1'); // 문자형 키 map.set(1, 'str2'); // 숫자형 키 map.set(true, 'str3'); // 불린형 키 console.log(map.get('1')); // 'str1' console.log(map.get(1)); // 'str2' console.log(map.size); // 3 m..

https://firebase.google.com/docs/reference/rest/auth#section-refresh-token Firebase 인증 REST API FirebaseVisionOnDeviceAutoMLImageLabelerOptions firebase.google.com 이런 짓을 하게 된 배경 익명 유저로 서비스를 즐긴다.(예를 들어, 퀴즈 사이트인 경우에 문제를 100개 푼 경우) - 현재 Auth: 익명 유저 -> 익명 토큰 refresh 가능 로그인을 한다. - 현재 Auth: 로그인 유저 -> 익명 토큰 refresh 불가능(현재 Auth는 로그인 유저한테 있으니까) -> 그럼 익명 토큰 refresh는 어떻게 해주지?!?!? 로그아웃을 한다. 다시 익명 유저로 돌아온다. ..

00. 동기와 비동기 동기적 : 요청이 끝날 때까지 기다림 비동기적 : 요청이 끝날 때까지 기다리지 않고, 동시에 여러 가지 요청을 처리 가능 01. Async & Await JS는 기본적으로 비동기적입니다. 그래서 서버에 요청하거나 순차적으로 수행되어야 하는 코드는 Async & Await으로 동기적으로 처리하도록 합니다. /** 동기적 */ async function sync() { /** 첫 번째로 실행될 함수 */ await f1(); /** 두 번째로 실행될 함수 */ await f2(); /** 세 번째로 실행될 함수 */ await f3(); } 만약 f2는 f1, f3 의 결과와 상관없는 함수일 경우는 비동기적으로 처리해도 상관없기 때문에 아래와 같이 구현합니다. /** 동기적 */ asy..

https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools View and edit local storage - Chrome Developers How to view and edit localStorage with the Local Storage pane and the Console. developer.chrome.com Local Storage는 직접 브라우저 청소를 하지 않으면 사라지지 않기 때문에, 사용자를 식별하기 위해 이용하는 토큰 등을 저장해놓는 데에 쓰입니다. 00. Local Storage에 데이터 저장, 접근, 삭제 https://developer.mozilla.org/en-US/docs/Web/..

https://firebase.google.com/docs/auth/admin/verify-id-tokens?hl=ko ID 토큰 확인 | Firebase 인증 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 사용자별로 다르게 서비스가 제공되어야 하는 경우가 있죠. 예를 들어, 퀴즈 사이트인 경우엔 본인이 푼 문제가 아닌 새로운 문제가 제공되어야 하는 일이 있겠네요. 혹은 프로필 페이지라든가...🐒 이럴 때엔, 현재 로그인한 사용자의 token값을 Bearer타입 혹은 jwt로 header Autho..

https://firebase.google.com/docs/auth/web/password-auth?hl=ko#create_a_password-based_account 자바스크립트에서 비밀번호 기반 계정을 사용해 Firebase로 인증하기 Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 의견 보내기 자바스크립트에서 비밀번호 기반 계정을 사용해 Firebase로 인증하기 컬렉션을 사용해 firebase.google.com firebase에서 제공해주는 API를 이용해서, 이메일과 비밀번호로 회원가입하기를 구현해보겠습니다! 00. 신규 사용자 생성 방법 Firebase 프로젝트에서 신규 사용자를 생성할 때는 아래와 같은 방법이 있습니다. createUserW..