이번에는 리트윗 버튼을 클릭하면 리트윗 db생성과 동시에 리트윗 숫자도 늘려줘야함 utils에 handleRetweet이라는 함수를 따로 만들어서 관리함 import { doc, setDoc, collection, updateDoc, increment, deleteDoc, query, where, getDocs, } from "firebase/firestore"; import { db } from "../firebase"; import store from "../store"; export default async (tweet) => { try { //리트윗 하지 않은 상황 //retweet 저장하기 const newRetweetRef = doc(collection(db, "retweets")); awai..

React, vue, next.js까지 여러 프레임워크를 사용하니까 그런지 몰라.. 언제부터인가 html 태그가 자동완성 안돼.... 원래 div만 쳐도 닫는태그까지 자동완성 됐는데 말이지.. 그래서 찾아봤다. vsCode에서 f1을 누른 뒤에 기본 설정에 설정열기 (JSON)을 선택해야하는데 나는 UI밖에 뜨지 않아서 찾아보니 UI 클릭한 후에 오른쪽 상단에 있는 설정 열기를 클릭하면 된다고 함 드디어 세팅 창이 떴당 그리고 아래에 이 부분 추가하면 "emmet.includeLanguages": { "javascript": "javascriptreact" } } 이제 자동완성 뜬다 ㅠㅠ

npm run build를 통해 배포용 파일을 만들 수 있음. 그리고 배포용 파일은 npm run start를 통해 실행도 가능함 npm run build로 실행되는 개발 파일에 비해 리소스 용량이 줄어

https://www.youtube.com/watch?v=smAU6-ZdcoQ&list=PLuHgQVnccGMCwxXsQuEoG-JJ7RlwtNdwJ&index=2 생활 코딩 유튜브 설치 따라함 vscode와 node.js 설치 필요 실행은 npm run dev 파일 정리 layout.js import "./globals.css"; export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( {children} ); } page.js import Image from "next/ima..

왼쪽에 댓글 아이콘을 클릭하면 트윗 모달과 비슷하게 답글 모달창의 띄워 댓글을 달아줄 수 있도록 만들것이다. CommentModal.vue를 생성하여 Tweet.vue에서 컴포넌트 등록을 한다. import moment from "moment"; import CommentModal from "./CommentModal.vue"; import { ref } from "vue"; export default { components: { CommentModal }, props: ["currentUser", "tweet"], setup() { const showCommentModal = ref(false); return { moment, showCommentModal, }; }, }; 그리고 showComment..

현재 트윗 버튼을 클릭하면 추가가 안된다. 그래서 트윗 버튼과 트윗 함수를 연결할거임 홈페이지에서 새로운 트윗을 추가하는거랑 코드가 동일하다 하지만 만약에 트윗 추가 코드가 수정되면 트윗 모달과 홈페이지 코드를 각각 수정을 해줘야하는 번거로움이 있기 때문에 이 코드를 분리해서 import하여 사용하는 방법으로 코드 수정을 최소화 하도록 한다. src 폴더 내에 utils 폴더를 만들어서 addTweet.js파일을 만들었다. addTweet 에는 Home에서 사용했던 addTweet함수를 그대로 복사하여 붙여넣기함 그리고 코드를 조금 수정한다. 1. export default를 붙여 다른 곳에서도 사용이 가능하도록 만들어주고 2. 트윗 내용, 현재 사용중인 유저 정보를 받아서 사용해야한다 그리고 Promi..

자바에서는 Scanner 를 사용해서 입력을 받는데, 파이썬에서는 input() 함수를 사용해서 키보드로 입력받도록 한다. 이렇게 입력할 수있도록 input이 생성된다. input()으로 입력받은 값은 모두 문자열로 취급한다. (아래의 예시처럼) 이럴때는 int()함수로 정수로 바꿀 수 있다. 정수로 변환하고 위와 같이 num1 과 num2 을 더하면 정상적으로 잘 더해지는 것을 확인 할 수 있다. userName = input("이름 ==>") userPhone = input("전화번호 ==> ") print("제 이름은 ", userName, "이고 , 연락처는 ",userPhone,"입니다.")

트윗 버튼을 클릭하면 tailwindcss를 활용해서 모달 팝업을 만들어보도록 하겠 TweetModal.vue -> 트윗 모달 컴포넌트를 만든다. tailwindcss 홈페이지에 들어가면 무료로 제공되는 다양한 코드들이 있는데 그 중 아래의 예시를 사용해볼거임 https://tailwindui.com/components/application-ui/overlays/dialogs Tailwind UI - Official Tailwind CSS Components & Templates Beautiful UI components and templates by the creators of Tailwind CSS. tailwindui.com html코드를 받아서 template에 붙여넣기함 그리고 트윗 모달 컴포넌..

트윗 컴포넌트에 props로 데이터를 넘겨줄 때 그 트윗을 작성한 유저의 정보( email, username)도 함께 넘겨줘야 한다. 그래서 getUserInfo라는 함수를 사용하여 트윗을 작성할 때 uid로 유저정보를 문서에서 검색해서 그 유저의 정보도 tweets에 함께 담아서 props에 전달하면된다. //트윗 실시간 가져오기 onBeforeMount(() => { const q = query(collection(db, "tweets"), orderBy("created_at", "desc")); const unsubscribe = onSnapshot(q, (snapshot) => { snapshot.docChanges().forEach(async (change) => { let tweet = awa..

이제 작성한 트윗들을 가져올거임 firestore에는 onsnapshot이라고 실시간으로 문서를 가져오는 기능이 있음 https://firebase.google.com/docs/firestore/query-data/listen?hl=ko&_gl=1*1x1q27w*_up*MQ..*_ga*ODIwMDU5NDc2LjE3MTA4MzI2MTE.*_ga_CW55HF8NVT*MTcxMTA3NDI4OS4yLjAuMTcxMTA3NDI4OS4wLjAuMA.. Cloud Firestore로 실시간 업데이트 가져오기 | Firebase 5월 14일, Google I/O에서 Firebase를 다시 만나보세요. 지금 등록하기 의견 보내기 Cloud Firestore로 실시간 업데이트 가져오기 컬렉션을 사용해 정리하기 내 환경설정..