분류 전체보기

이번엔 사용자의 프로필을 만들어 볼겁니다.profile.tsx로 가서 기본적인 폼을 작성합니다.import styled from "styled-components";import { auth } from "../firebase";const Wrapper = styled.div``;const AvatarUpload = styled.label``;const AvatarImg = styled.img``;const AvatarInput = styled.input` display: none;`;const Name = styled.span``;export default function Profile() { const user = auth.currentUser; return ..

Edit 기능을 만들때 저는 updateDoc을 사용했습니다. const onEdit = async () => { if (user?.uid !== userId) return; try { await updateDoc(doc(db, "tweets", id), { tweet: editedTweet }); setIsEditing(false); } catch (e) { console.log(e); } };Delete와 마찬가지로 해당 사용자가 맞는지 확인했습니다.이후 try-catch문을 이용하여 updateDoc을 해주었습니다.또한, 수정하다가 cancel을 생각하여 버튼을 만들어줬습니다. ..

트윗을 작성했다면 삭제할 수 있어야 합니다. 이번엔 Delete 버튼을 만들겠습니다.우선 tweets.tsx로 가줍니다.const DeleteButton = styled.button` background-color: tomato; color: white; font-weight: 600; border: 0; font-size: 12px; padding: 5px 10px; text-transform: uppercase; border-radius: 5px; cursor: pointer;`;export default function Tweet({ username, photo, tweet }: ITweet) { return ( ..

이번엔 트윗을 실시간으로 적용되어서 화면에 보이게 하는 작업을 할겁니다.export default function Timeline() { const [tweets, setTweet] = useState([]) useEffect(() => { let unsubscribe : Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) )..

이번엔 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 ( ..