제로초5 Next.js로 SNS x.com 클론코딩하기 - 15 Next 배포 모드 기존 페이지 라우터의 넥스트의 배포 모드에는 총 3가지의 모드가 있었다고 합니다. 앱 라우터에선 2가지 모드로 줄었다고 합니다. Static Mode Deploying: Static Exports | Next.js Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. nextjs.org next.config.js 파일 안에 아래와 같이 output 속성을 export 로 지정해줍니다. /** @type {import('next').NextConfig} */ const nextCo.. 2024. 2. 22. 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 클론코딩하기 - 4 섹션 3 지난 시간까지 최대한 x와 일치하게 클론 코딩을 진행하였습니다. 이번 섹션은 디자인 부분을 마쳤지만 API 명세서가 아직 없을 경우를 가정하고 진행됩니다. MSW 로 임시 API 만들기 https://mswjs.io/ Mock Service Worker API mocking library for browser and Node.js mswjs.io 그간 API는 직접 서버 안에 간단히 만들어서 Postman 으로 확인하거나 공공API만 사용했는데 해당 사이트에선 임시로 API를 만들 수 있다고 합니다. DB를 거치지 않고 요청에 대한 응답을 간단하게 예측하여 만드는 것이라 빠른 작업이 가능할 것 같습니다. 작업 전에 백엔드 개발자와 간단하게 소통하여 json 형태로 어떻게 올 것인지 얘기를 나눠보.. 2024. 1. 24. Next.js로 SNS x.com 클론코딩하기 - 3 Modal 구현 일전의 게시글에서도 한번 설명했다시피 Modal 구현을 복습해보도록 하겠습니다. 이 모달은 메뉴바에 있는 '게시하기' 버튼을 눌렀을 때 나올 모달을 구현할 것이며, 누르면 모달이 뜨면서 주소가 compose/tweet 이 됩니다. 우선 모달을 만들어줄 폴더를 생성해줍니다. @modal 해당 폴더 안에는 기본적으로 default.tsx가 있어야 한다고 했었죠? 그리고 compose/tweet 폴더를 생성해줍니다. 이 안에 모달이 만들어질 예정입니다. 다음으로 모달이 들어갈 layout.tsx에 자리를 마련해줍니다. 이때 @modal 폴더와 구현될 compose 폴더가 동일한 폴더 구조에 있어야 하며, 이 폴더 구조 안에 layout.tsx 또한 구조가 동일해야 합니다. 즉 아래와 같은 구조.. 2024. 1. 23. 이전 1 2 다음
