https://recoiljs.org/ RecoilA state management library for React.recoiljs.org   Recoil은 전역 상태 관리 라이브러리이다.  npm install recoil   모든 state 를 모아놓는  공간 atom은 상태의 단위로, atom에 저장된 상태는 여러 컴포넌트에서 구독할 수 있습니다.import { atom } from "recoil";export const userState = atom({  key: "userState",  default: {    email: null,    name: null,  },});   Recoil 상태를 사용하려면 useRecoilState와 useRecoilValue를 사용합니다.useRecoilSta..

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations Data Fetching: Server Actions and Mutations | Next.jsLearn how to handle form submissions and data mutations with Next.js.nextjs.org  서버에서 실행되는 서버 컴포넌트와 브라우저 실행되는 브라우저 컴포넌트로 나뉘어진다.  각 컴포넌트 중에서 import해서 그대로 사용할 수 있는 서버에서 실행되는 함수다. 라고 생각하면 됨  https://www.youtube.com/watch?embeds_referring_euri=https%3A..

https://nextjs.org/docs Docs | Next.jsWelcome to the Next.js Documentation.nextjs.org   14버전을 사용하기 때문에 app router를 사용함 pages router -> 9버전이라고 생각하면됨   Next.js는 “개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능)프로젝트 생성npx..

프로필 수정 버튼을 클릭하면 모달을 띄워서 프로필을 수정할 수 있게끔 기능을 만들어본다. 기존에 사용하던 TweetModal.vue의 내용들을 복사해서 ProfileEdeitModal.vue를 생성한다. 안의 html 부분들을 필요에 맞게 변경해주는데 프로필 수정 저장 현재 필요한 기능들은 아래와 같다. 1. 백그라운드의 카메라 버튼을 클릭하면 파일을 선택할 수 있게 만들고, 그 사진을 백그라운드에 적용시키는것 2. 백그라운드와 마찬가지로 프로필 파일을 선택 후 바로 프로필에 사진이 노출될 수 있도록 만들어야함 html 구성은 아래와 같다. button은 카메라 아이콘을 말하고 input은 위의 버튼을 클릭하면 이 input이 실행되어야 함 그래서 버튼에는 click 이벤트로 onChangeBackGro..

현재는 홈에서 다른 유저의 프로필을 클릭했을 때 다른 유저의 프로필을 볼 수 없다. 그래서 router의 추가로 profile/ :uid 파라미터를 주어서 각 유저에 맞게 프로필을 가져오도록 할거임 rotuer-> index.js에서 router를 추가한다. { path: "/profile", name: "profile", component: Profile, title: "프로필", icon: "far fa-user fa-fw text-2xl", meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true }, }, { path: "/profile/:uid", component: Profile, icon: "far fa-user fa-fw text-..

Profile페이지를 구현하도록 하겠다. import Trends from "../components/Trends.vue"; import Tweet from "../components/Tweet.vue"; import store from "../store"; import { computed, ref, onBeforeMount } from "vue"; import { onSnapshot, doc, collection, where, orderBy, query, } from "firebase/firestore"; import { db } from "../firebase"; import getTweetInfo from "../utils/getTweetInfo"; import moment from "moment"..

원하는 트윗을 클릭하면 트윗 페이지로 이동해서 트윗의 상세 정보와 댓글들을 확인할 수 있는 페이지를 만들거임 router -> index.js에 tweet 페이지를 추가한다. { path: "/tweet/:id", name: "tweet", component: Tweet, meta: { isMenu: false, layout: "DefaultLayout", requireAuth: true }, }, pages에서 Tweet 컴포넌트 생성 router import 해서 뒤로가기 버튼 클릭하면 router.go(-1)하면 이전페이지로 돌아감 (신기) 트윗 이메일 @id Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati cupiditate..

리트윗과 동일하게 좋아요 기능을 구현하면된다. utils에서 handleLikes.js추가 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 { //이미 좋아요된 상태인지 확인하기 if (tweet.isLiked) { const q = query( collection(db, "likes"), where("from_tweet_id", "==", tweet.id), w..

이번에는 리트윗 버튼을 클릭하면 리트윗 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" } } 이제 자동완성 뜬다 ㅠㅠ