전체 글

이번엔 Firestore DB에서 데이터를 쿼리할겁니다.쿼리한다는 뜻은 'DB에서 원하는 정보를 가져오는' 코딩을 말합니다.components 밑으로 timeline.tsx를 만들어줍니다.우선 기본적인 틀을 먼저 작성하고 interface를 만들어줄겁니다.export interface ITweet { id: string; photo?: string; tweet: string; userId: string; username: string; createdAt: number;}export default function Timeline() { return ;}interface의 요소들은 이전에 작성한 폼 그대로 받아오면 되는데, firebase에서 확인 가능하고 각 자료형을 맞춰서..

모든 트럭이 조건을 맞추면서 다리를 지나게 한다음 시간을 출력하면 되는 문제다.보고 이전에 풀었던 백준문제와 똑같다는 생각으로 바로 큐로 접근했다.다리를 나타내는 큐를 생성하고 시간마다 뒤에서 넣고 앞에서 빼면서 트럭이 모두 없어질때까지 반복했다.트럭 리스트가 비게되면 반복문을 끝내고 시간 + 큐의 길이 해줬다.from collections import dequedef solution(bridge_length, weight, truck_weights): # bridge_length 최대 다리위 트럭 수, weight 하중, truck_weights 트럭별 무게 answer = 0 truck_weights = deque(truck_weights) queue = deque([0]*bri..

이제 트윗을 저장할 Firestore를 활성화 할겁니다.firebase홈으로 가서 Cloud Firestore를 클릭합니다.데이터베이스 만들기를 눌러서 위치를 가까운 곳으로 선택해줍니다.저같은 경우는 seoul이 되겠네요. 다음단계에서 Test Mode를 선택해줍니다.(30일 후 정지됩니다.)그러면 데이터베이스가 만들어집니다.이후 좌측 네브바에서 빌드 -> Storage로 가줍니다.똑같이 Test Mode로 선택하고 진행해주면 됩니다.만들어지는 동안, vscode로 돌아와 firebase.tsx로 가줍니다. 이제 데이터베이스와 스토리지에 대한 액세스 권한을 얻을겁니다.export const storage = getStorage(app);export const db = getFirestore(app);au..

이제 본격적으로 만들어볼겁니다.우선 홈페이지 UI제작을 할겁니다. 네브바를 만들기 위해 layout.tsx로 갑니다.그리고 각각의 div를 만들어줄겁니다.import { Outlet } from "react-router-dom";import styled from "styled-components";const Wrapper = styled.div``;const Menu = styled.div``;const MenuItem = styled.div``;export default function Layout(){ return ( ..

소셜로그인을 구현할겁니다.firebase 페이지 - Authentication - 로그인 방법 탭을 클릭합니다."새 제공업체 추가" 를 클릭하고 저는 Github 로그인을 넣을거기 때문에 github로 선택합니다. 사용설정은 켜줍니다.https://github.com/settings/developers GitHub: Let’s build from hereGitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea....

사용자가 잘못되거나 중복된 정보를 입력해서 계정을 생성하려 한다면 오류가 날텐데 이 오류를 나타내는 작업을 할겁니다.우선 create-account.tsx로 가서 catch 블럭에 console.log(e);를 작성하고 중복된 이메일로 계정을 생성해봅니다.결과는 화면에 보이는 것과 같이 콘솔창에 firebaseError가 찍힙니다.좀더 알아보기 위해 catch 블럭에 에러코드와 메세지를 찍어봅니다.catch (e) { if(e instanceof FirebaseError){ console.log(e.code, e.message); } }이 오류코드들을 이용해서 오류마다 보여줄 메세지를 설정할 수 있습니다.메세지를 사용자에게 보..