클론코딩15 Next.js로 SNS x.com 클론코딩하기 - 3 Modal 구현 일전의 게시글에서도 한번 설명했다시피 Modal 구현을 복습해보도록 하겠습니다. 이 모달은 메뉴바에 있는 '게시하기' 버튼을 눌렀을 때 나올 모달을 구현할 것이며, 누르면 모달이 뜨면서 주소가 compose/tweet 이 됩니다. 우선 모달을 만들어줄 폴더를 생성해줍니다. @modal 해당 폴더 안에는 기본적으로 default.tsx가 있어야 한다고 했었죠? 그리고 compose/tweet 폴더를 생성해줍니다. 이 안에 모달이 만들어질 예정입니다. 다음으로 모달이 들어갈 layout.tsx에 자리를 마련해줍니다. 이때 @modal 폴더와 구현될 compose 폴더가 동일한 폴더 구조에 있어야 하며, 이 폴더 구조 안에 layout.tsx 또한 구조가 동일해야 합니다. 즉 아래와 같은 구조.. 2024. 1. 23. Next.js로 SNS x.com 클론코딩하기 - 2 지난 시간에 이어 본격적인 디자인 클론을 시작합니다. 사실 디자인 요소는 메모하고자 하는 부분이 별로 없어서... 간만에 테일윈드가 아닌 CSS를 직접 사용해서 신선했습니다. 역시 근본이 좋긴하네요. 테일윈드는 가독성이 좋지 않은 편이고 특정 속성이 기억 안나서 공식문서를 종종 보기도 했는데...ㅎㅎ 레이아웃 클론 flex-glow & flex-shrink 레이아웃을 막연히 따라 만들다가 보니 flex-glow 의 이해가 부족함을 느꼈습니다. 그럼 어떻게 하나? 당연히 공식문서와 서칭을 해봐야겠죠. https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow flex-grow - CSS: Cascading Style Sheets | MDN flex-grow CSS .. 2024. 1. 22. Next.js로 SNS x.com 클론코딩하기 - 1 https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard Next + React Query로 SNS 서비스 만들기 강의 - 인프런 리액트18 & 넥스트14 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!,... www.inflearn.com 해당 강의를 보고 정리한 내용입니다. 왜 Next.js 인가? 이번에 들어가게될 프로젝트에서 React 기반의 Next.js 를 사용하기로 하였습니다. SEO가 장점이긴 하지만 제가 맡을 프로젝트에선 중요사항은 .. 2024. 1. 18. 이전 1 2 3 4 다음
