z.com
1.[Next.js] Next.js를 이용하여 x (twitter) 클론 코딩하기
Parallel, Intercepting, Layout, Page 등의 Next.js 알아보기
2.[Next.js] Next.js Page, Layout, Template 배우기
Next.js에는 page.tsx, layout.tsx, template.tsx가 존재합니다.(js일 경우엔 .jsx)Page.tsx는 말그대로 페이지를 구성하고, Layout.tsx는 그 페이지를 감싸는 레이아웃을 지정해줍니다.(자세한 내용은 공식문서 참고)이렇게 다
3.[Next.js] 소괄호를 이용하여 그룹 분리하기
소괄호를 이용해서 url에 포함되지 않는 layout.tsx를 만들어보자!
4.[z.com] Z.COM 클론 코딩 해보기 - OT
클론 코딩을 안 한 지 1년이 넘은 것 같다.클론 코딩 영상을 보면 분명 배울 것이 있을테지만 늘 이런 저런 핑계를 대며 강의를 듣지 않아왔다.그러던 어느날!유튜브를 돌아다니던 중 제로초님이 z.com 클론 코딩을 실시간으로 하고 있다는 소식을 듣고 후다닥 달려가보았다
5.[z.com] Z.COM 클론 코딩 해보기 - 404 페이지, Redirect
앞서 말했다시피 라이브로 몇 가지 부분은 본 부분이 있어, 없는 내용만 정리할 것이다!페이지 잡기page, layout, template소괄호로 그룹 지어주기not-found.tsx 파일로 설정해줄 수 있다.app 폴더 하위에 바로 선언해주면 됨!\-> 검색이라고 적혀
6.[z.com] Z.COM 클론 코딩 해보기 - 패러렐 라우트
next.js Parallel Route를 Z.com 클론코딩하면서 배워보장
7.[z.com] Z.COM 클론 코딩 해보기 - 인터셉팅 라우트
(이전편 읽고 오세용)우리가 지금 궁극적으로 해야하는 것은 children은 밖에 있는 루트 페이지를 보여주고, modal은 @modal 안에 있는 /i/flow/login을 보여주어야 한다.다시 정리하면, 현재 우리 상황은루트 페이지일 때 -> 밖에 있는 루트 페이지
8.[z.com] 레이아웃 잡기 - flex-grow
이 글은 제로초님의 z.com 클론코딩(https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4저번엔 로그인이 안 된 상태의 화면을 구성했고, 이제는 로그인이 된 상태의 화
9.[z.com] Z.com 구현 - useSelectedLayoutSegment, Backdrop Filter, Dayjs, Context API
왼쪽 섹션을 구현하려고 하는데, 필요한 기능이 있다.바로 현재 내가 있는 곳이 어딘지를 구하는 것이다.그것을 도와주는 게 useSelectedLayoutSegment이다.사용법은 이와 같이 사용하면 된다.내가 있는 페이지의 layout의 가장 처음 URL이 나온다.현
10.[z.com] next.js 13 hook 알아보기
z.com 하면서 저번엔 useSelectedLayoutSegment를 알아봤었다.이번에는 usePathname을 사용하였는데, 또 무슨 훅이 있을지 궁금해서 공식문서를 파헤쳐보도록 하겠다!usePathname은 클라이언트 구성 요소 훅으로 현재 URL의 경로 이름을
11.쿼리 스트링 받아오기
page.tsx 일 경우 Props에 searchParams로 값이 들어있다. 이런 식으로 적어주면 끝!컴포넌트일 경우useSearchParams 훅을 이용한다!
12.[z.com] 가짜 데이터 생성해주는 라이브러리 - @faker-js/faker
하드코딩을 통해서 가짜 데이터를 만들 수도 있지만, 규모가 커진다면 어떻게 해야할까?
13.[z.com] MSW
MSW란 Mock Service Worker로, 백엔드를 모킹하는 방법 중 하나이다.백엔드 개발자가 아직 API를 완성하지 못하였을 때 완성 될 때까지 임시로 사용하기 위한 가짜 API를 만들어 놓는 것이다.백엔드 개발자가 만들어야 하는 API를 우리가 만드는 셈 !
14.[z.com] env 파일
개발을 하다보면, 키 같은 비밀로 해야하는 값이든 혼자서만 알아야하는 값이 생길 수 있다.그럴 때 사용하는 파일인데우리는 저번에 했던 msw를 실행시키는 데 이것을 한번 활용해보자!env는 배포 후, 배포 전 모두가 다 돌아가는 파일이다.그에 반해 env.local은
15.[z.com] react-textarea-autosize
기본으로 제공하는 textarea를 사용하면 textarea가 늘어나지 않고, 스크롤바가 생긴다.이전에도 이런 문제들이 있어서 여러 에디터, UI 프레임워크를 뒤졌었던 걸로 기억나는데, 이걸 해결해줄 수 있는 라이브러리를 소개시켜주었다 !!npm 문서는 이곳 참고!속성
16.[z.com] React Query : useMutation
react query에서 제공하는 것 중 하나인 useMutation에 대해서 알아봅시당위의 코드가 아무 속성도 안 줬을 때 작성 값입니다.mutationFn -> 뮤테이션 함수를 정의해줍니다.onMutate -> 뮤테이션 함수가 호출됐을 때 발생할 일을 정의해줍니다.
17.[z.com] Optimistic Updates
공식문서 는 이곳을 참고하세용이전 포스트에서 useMutation의 속성들을 알아보았다.그것을 이용해서 Optimistic Updates를 적용해볼 것이다.Optimistic Updates란?성공하든 안 하든 유저한테는 일단 성공했다고 보여준 다음, 실패했으면 그 때서
18.[z.com] React Query V5
z.com 강의를 보며 내가 몰랐던 내용과 V5로 업데이트 되면서 바뀐 내용을 coin 프로젝트에 업데이트 해보자!useQuery 문법 수정이전 버전에는 useQuery를 사용할 때 객체를 이용하여 지정해주는 방식이 아니라, 바로 'coin'과 같이 적는 방식이었습니다