넥스트14 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 클론코딩하기 - 10 게시글 업로드 게시글을 올리기 위해 사용하는 textarea 의 크기가 자동으로 설정되게 해주는 라이브러리를 설치해줍니다. npm install react-textarea-autosize import reactTextareaAutosize from "react-textarea-autosize"; 그저 단순히 텍스트 에리어의 크기를 늘려주는 라이브러리라 따로 설정할 건 없습니다! 게시글 이미지 프리뷰 const [preview, setPreview] = useState([]); 우선 프리뷰 이미지를 담아줄 useState 를 지정해주고, 파일을 업로드하는 버튼에 onChangeFiles 함수를 만들어 줍니다. const onChangeFiles: ChangeEventHandler = (e) => { e.p.. 2024. 2. 12. 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.5 전 게시글에서 마쳤어야 했는데 너무 긴 내용을 담은 것 같고 애매하게 섹션 3의 1강의만 남아서 .5 게시글을 작성하게 되었습니다. 다음 섹션부턴 백엔드 개발자와 협업한다는 전제하로 들어가기 때문에 이번 글은 가볍게 확인하기 좋은 것 같습니다~ 넥스트 로딩과 에러 자동적으로 넥스트는 page.tsx 가 로딩 중일 땐 loading.tsx 를 보여주고, 에러가 발생했을 땐 error.tsx 를 보여주게 설계되어 있습니다. 이 기능은 기본적으로 리액트의 와 를 활용한 것으로 귀찮았던 과정을 줄일 수 있게 되었습니다. https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI a.. 2024. 2. 8. 이전 1 2 3 4 다음
