nextjs13 Next.js로 SNS x.com 클론코딩하기 - 11 useMutation react query 의 훅 중 하나로, 서버에 변경 작업을 요청할 때 사용합니다. 즉 Post 요청을 할 때 사용하게 됩니다. 선언적으로 데이터를 언제 업데이트 할 지 직접 지정해주어 useMutation의 반환값인 mutate 함수를 사용하여 mutation 작업을 수행할 수 있게 합니다. 사용방법은 간단합니다. 먼저 데이터를 fetching 하는 함수를 만든 다음 그 함수를 useMutation의 매개변수에 담아 return 하는 함수를 만들어줍니다. import {useMutation} from 'react-query'; const addPost = (post) => { return axios.post(url, post); } export const useAddPost = (.. 2024. 2. 16. Next.js로 SNS x.com 클론코딩하기 - 9 섹션4 돌입 드디어 섹션3 기획문서와 디자인은 있지만 백엔드 개발자의 API가 없는 상황에서 프론트엔드가 개발하는 경우를 다뤘습니다. 다음 섹션인4는 백엔드 개발자와 협업을 한다는 전제하에 이루어지므로 백엔드 세팅이 필요하다고 합니다. 백엔드 세팅 전제 조건 node.js PostgreSQL Memurai (윈도우에선 Redis 대용으로 사용됨/로그인 시 필요) https://www.memurai.com/?gclid=CjwKCAiAq4KuBhA6EiwArMAw1PfXLOrv-z6d3mQLJ5Oh9moFqgbksHBbD_b5Q8brrc_pkZe65TpYeRoC9soQAvD_BwE 백엔드 서버 깃헙 코드 다운로드 https://github.com/zerocho/nest-prisma 뭔가 부산스럽게 준비할게 .. 2024. 2. 9. Next.js로 SNS x.com 클론코딩하기 - 8 서버 사이드 렌더링 적용 기준 넥스트는 기본적으로 서버 사이드 렌더링이 되므로 서버 사이드 렌더링을 사용하지 않게 설정하는 경우가 잦다고 합니다. 그렇다면 서버사이드 렌더링의 적용 기준은 무엇일까요? 검색 페이지에 노출되어야 할 때 적용 즉 SNS 특성상 유저의 프로필에 로그인을 하든 안하든 접근할 수 있게끔 처리해주는 것이 필요하며 없는 계정에 대한 예외처리도 필요합니다. 사실 이 부분은 앞서 설명 드렸던 방식과 디테일만 다르지 거의 유사하므로 따로 설명드릴 부분이 없을 것 같습니다. 강의가 갈수록 앞서 했던 내용의 반복이네요. 따로 정리해둘 건 없지만 반복적으로 코드를 따라치면서 왜 이렇게 하는지 생각하고 공부하게 되는 것 같습니다. 강의에서 진행된 사항으론, 1. 게시글 상세 페이지 2. 각 게시글.. 2024. 2. 7. Next.js로 SNS x.com 클론코딩하기 - 7 섹션 3의 막바지에 다다르고 있습니다. 내용이 알차서 그런가 강의 정리가 많네요. 사실 정리하는 것보다 직접 타이핑하면서 왜 이렇게 썼는지 생각하는 시간이 더 긴 것 같습니다. 그리고 새해를 맞이해 드디어 회사에서 반려노트북을 받게 됐는데 삼성 노트북... 생각보다 별론거 같습니다. 거금을 들였는데 아직 일주일도 안됐는데도 끊김이나 버벅임이 좀 있네요ㅜ 무게도 그램보다 무거워서 아쉽습니다만 전면 패널 터치 가능이니 그럴만도 싶습니다. (사실 이 가격이었으면 맥 프로를 사자고 했음 좋았을텐데 회사 분위기상 윈도우가 대부분이라... 슬프네요) 그래도 이번에 새로나온 인텔 cpu와 램 32기가라서 회사 다닐 동안은 열심히 써봐야지 싶습니다. 시작에 앞서 삽질했던 걸.. 지금 생각해보면 정말 간단한건데 배열 형.. 2024. 2. 2. 이전 1 2 3 4 다음
