넥스트14 Next.js로 SNS x.com 클론코딩하기 - 8 서버 사이드 렌더링 적용 기준 넥스트는 기본적으로 서버 사이드 렌더링이 되므로 서버 사이드 렌더링을 사용하지 않게 설정하는 경우가 잦다고 합니다. 그렇다면 서버사이드 렌더링의 적용 기준은 무엇일까요? 검색 페이지에 노출되어야 할 때 적용 즉 SNS 특성상 유저의 프로필에 로그인을 하든 안하든 접근할 수 있게끔 처리해주는 것이 필요하며 없는 계정에 대한 예외처리도 필요합니다. 사실 이 부분은 앞서 설명 드렸던 방식과 디테일만 다르지 거의 유사하므로 따로 설명드릴 부분이 없을 것 같습니다. 강의가 갈수록 앞서 했던 내용의 반복이네요. 따로 정리해둘 건 없지만 반복적으로 코드를 따라치면서 왜 이렇게 하는지 생각하고 공부하게 되는 것 같습니다. 강의에서 진행된 사항으론, 1. 게시글 상세 페이지 2. 각 게시글.. 2024. 2. 7. 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. 이전 1 2 3 4 다음
