클론코딩15 Next.js로 SNS x.com 클론코딩하기 - 7 섹션 3의 막바지에 다다르고 있습니다. 내용이 알차서 그런가 강의 정리가 많네요. 사실 정리하는 것보다 직접 타이핑하면서 왜 이렇게 썼는지 생각하는 시간이 더 긴 것 같습니다. 그리고 새해를 맞이해 드디어 회사에서 반려노트북을 받게 됐는데 삼성 노트북... 생각보다 별론거 같습니다. 거금을 들였는데 아직 일주일도 안됐는데도 끊김이나 버벅임이 좀 있네요ㅜ 무게도 그램보다 무거워서 아쉽습니다만 전면 패널 터치 가능이니 그럴만도 싶습니다. (사실 이 가격이었으면 맥 프로를 사자고 했음 좋았을텐데 회사 분위기상 윈도우가 대부분이라... 슬프네요) 그래도 이번에 새로나온 인텔 cpu와 램 32기가라서 회사 다닐 동안은 열심히 써봐야지 싶습니다. 시작에 앞서 삽질했던 걸.. 지금 생각해보면 정말 간단한건데 배열 형.. 2024. 2. 2. Next.js로 SNS x.com 클론코딩하기 - 6 무한 스크롤링 무한 스크롤링을 위해선 특정 지점까지 마우스 스크롤을 내리면 서버에서 데이터를 받아오게끔 처리해줘야 합니다. 로직 자체는 서버에서 데이터를 받아옴 -> 받아온 데이터를 React Query에 담아서 관리 -> 무한 스크롤링 -> 반복 이 순서를 따릅니다. React Query 왜 리액트 쿼리인가? 먼저 리액트 쿼리와 리덕스의 차이를 보면, 리액트 쿼리의 경우 서버에서 데이터를 가져오는 것이 중점이고 리덕스의 경우 데이터를 컴포넌트간 공유한다는 차이가 있습니다. 특히나 리액트 쿼리의 장점으로는 캐싱을 잘해준다는 점이 있는데, 요청이 많아지면 트래픽 관리가 중요합니다. 즉 캐싱을 최대한 많이 해둬서(재사용 가능하게) 트래픽을 관리해주는 것이 중요해짐에 따라 리액트 쿼리를 사용하게 된다고 합니다.. 2024. 1. 30. 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. 이전 1 2 3 4 다음
