섹션 2: 본격 클론 시작!

[yeobi01]

• 레이아웃 클론하기
• useSelectedLayoutSegment로 Active Link 만들기
• 오른쪽 섹션 클론코딩
• 홈탭 만들면서 Context API 적용해보기
• PostForm 만들기(타이핑 외우기)
• 게시글 만들며 dayjs 사용해보기
• classnames로 클래스 합성하기(feat. npmtrends로 라이브러리 고르기)
• /compose/tweet 만들기
• usePathname과 /explore 페이지
• useSearchParams와 프로필, /search 페이지
• 이벤트 캡처링과 /status/[id] 페이지
• faker.js와 /photo/[photoId]
• /messages 페이지 라이브 클론
• 다중 이미지 구역 만들기
• 반응형 만들기

[yeobi01]

레이아웃 클론하기

• flex-grow: 1 씩 주면 다른 크기의 컴포넌트를 중앙 정렬 가능
• css width, height : inherit 쓰면 부모 그대로 상속받음

[yeobi01]

useSelectedLayoutSegment로 ActiveLink 만들기

• 현재 있는 폴더 기준으로 동일한 레벨에 있는 애들을 걸러줌.
• 모든 경로를 다 받고 싶으면 useSelectedLayoutSegments를 이용하면 됨
• svg 복사하는 방법: 개발자 도구에서 svg를 선택한 다음 outerHTML 을 이용해서 복사하기.

[yeobi01]

홈탭 만들면서 Context API 적용해보기

• css backdrop-filter: blur(12px); 이거하면 약간의 블러 처리 해줌
• ContextAPI 사용해보기
• Provider는 공통으로 스테이트를 사용할 컴포넌트의 부모 위치에 해줘야 사용가능하다

[yeobi01]

PostForm 만들기(타이핑 외우기)

• css transition-duration: 0.2s; transition-property: background-color; 해서 bg 효과에 애니메이션 주기

[yeobi01]

게시글 만들며 dayjs 사용해보기

• dayjs 플러그인 사용하기
• dayjs 상대시간 알아내는 플러그인: import relativeTime from "dayjs/plugin/relativeTime";
• dayjs 한국어 설정을 위한 플러그인: import "dayjs/locale/ko";

[yeobi01]

classnames로 클래스 합성하기(feat. npmtrends로 라이브러리 고르기)

• class를 조건부로 가질 수 있도록 하는 라이브러리

[yeobi01]

/compose/tweet 만들기

• @modal/(.)compose/tweet 폴더 구조를 이용해서 패러랠라우트와 인터셉팅라우트를 동시에 사용하기

[yeobi01]

이벤트 캡처링과 /status/[id] 페이지

• react onClickCapture

[yeobi01]

faker.js와 /photo/[photoId]

• faker.js 를 이용해서 더미 데이터를 넣을 수 있다