본문 바로가기

Web Study124

Next.js로 SNS x.com 클론코딩하기 - 5 서버 컴포넌트와 서버 액션 전의 글에서 서버 액션은 unstable 이므로 사용 안한다고 했지만, 강의 도중에 14버전이 나오면서 stable 하게 되었다고 합니다. 그래서 서버 액션을 회원가입과 로그인에서 사용해보겠습니다. 우선 서버 액션을 사용하기 위해선 서버 컴포넌트인지 클라이언트 컴포넌트인지 사용법이 상이하기 때문에 먼저 서버 컴포넌트 상에서 서버 액션을 사용하는 경우입니다. 아이디 이렇게 회원가입 컴포넌트 안에 input 필드가 존재하고 onChange는 당연하게도 클라이언트 컴포넌트 입니다. 서버 컴포넌트로 만들어주기 위해 과감하게 없애주고 상단의 form 태그 안에 action 속성을 추가해줍니다. action 속성에 들어가는 함수가 바로 서버 액션 함수이며, submit 을 수행하는 서버 .. 2024. 1. 25.
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.
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.

티스토리툴바