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로 실시간 업데이트 가져오기 컬렉션을 사용해 정리하기 내 환경설정..

트윗을 작성하고 firebase에 저장되는 것을 구현할거임 현재 Home 페이지의 트윗 컴포넌트에 currentUser정보를 전달해서 현재 접속중이 유저의 트윗들이 표시되게 prop로 보내줄거임 트윗 컴포넌트에는 props 로 ['currenUser']를 받아서 export default { props: ["currentUser"], }; 프로필사진과 이름을 현재 접속중인 유저의 정보로 표시할거임 {{ currentUser.username }} . {{ currentUser.username }} 7분 아래와 같이 반영되는 것을 확인할 수 있다. 다시 Home 페이지로 돌아와서 export default { components: { Trends, Tweet }, setup() { const tweetBod..

이제 현재 로그인 중인 유저의 정보를 사용하여 프로필카드 및 유저 정보가 필요한 곳에 사용해 보도록 한당 https://velog.io/@jcs526/Vue3-computed-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95 [Vue3] computed 사용방법 computed 함수를 사용하여 변수에 할당해주면 계산된 값이 지정된다. velog.io import { ref, onBeforeMount, computed } from "vue"; const currentUser = computed(() => store.state.user); return { routes, showProfileDropdown, onLogout, currentUser }; currentUser에 저장되어있는 ema..