https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com 회원가입 진행해야함  나는 github로 인증함    new Project     비밀번호는 Generate a password를 사용해서 랜덤으로 만들어줬고 copy하여 따로 보관   생성되는데 로딩 시간이 조금 소요된다.    완료가 되면 아래와 같이 화면이 변한다.     1..

https://www.material-tailwind.com/docs/html/installation Get Started with Material Tailwind - Tailwind CSS Components LibraryRoots of UI/UX Design By Creative Tim Learn to Develop Intuitive Web Experienceswww.material-tailwind.com  npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --savenpm install @tailwindcss/typography autoprefixer --save-dev  Material Ta..

https://tanstack.com/query/v3 TanStack QueryInstead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how muchtanstack.comhttps://tech.kakaopay.com/post/react-query-1/ 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카..

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..