[Next.js] Section 03 본격 클론 시작

레이아웃 클론하기 

엑스 닷컴에 들어가서 개발자 도구 들어가면, 어떻게 코딩을 했는지 알 수 있고 그거를 똑같이 만들어서 학습을 하면 된다. 

 

가운데 정렬 flex-grow1 사용하면 균현을 맞춰준다. (왼쪽, 오른쪽 사이즈가 서로 다를 때에도 가운데 정렬을 할 수 있는 방법이여서 알아두면 좋다.)

 

useSelectedLayoutSegment로 ActiveLink 만들기 

Next에 useSelectedLayoutSegment 훅을 제공을 해주는데, 이 훅은 URL의 특정 레이아웃 segment를 가져오기 위해 사용하는 훅이고, 자식들만 나오게 하고 싶을 때 사용 하면 된다. 

 

useSelectedLayoutSegments 이 훅은 손주까지 필요할 때 사용하면 된다. 

 

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

스크롤할 때, 탭을 보면 배경이 실루엣 처럼 보이는거는 backdrop-filter:blur(백드롭 필터)를 사용 하면 된다. 

 

PostForm 만들기 

TS에서는 useRef<HTMLInputElement>(null) 넣어줘야 하는데, JS랑 똑같이 사용하면 안되기 때문에 주의!

(JS랑 똑같이 사용하면 안된닥도 해서 찾아 봤는데 TS에서는 DOM 요소와 관련된 작업에서 타입 안정성을 보장하기 위해 null 가능성을 항상 명시하도록 되어 있기 때문이라고 한다 )

 

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

게시글을 작성할 때 몇초전, 몇시간전에 작성이 됐다 이런거는 dayjs 라이브러리를 사용해주면 좋다. (모멘트와 동일한 역할을 한다.) 

라이브러리를 사용할 때 비교를 하면서 사용 하면 좋다. 모멘토랑 dayjs 사용법이 똑같다. 

 

transition 태그는 마우스 커버를 올렸을 때 자연스럽게 색깔이 회색으로 변하게 된다. 

 

Classnames로 클래스 합성하기 

classnames라는 라이브러리가 있다. 하나의 div가 클래스를 여러개 가질 수 있고, 클래스를 조건부로 만들 수 있다. 

 

/compose/tweet 만들기

modal을 만들 때 default를 넣어주면 좋다. 

상호작용이 많은 버튼 같은거는 클라이언트 컴포넌트로 만들어도 되지만, 나중에 필요에 따라서 서버 컴포넌르로 만들어도 된다. 

기본적으로 상태를 사용하거나 클릭 같은걸 하면 웬만해서 클라이언트 컴포넌트로 두면 된다. 클라이언트 컴포넌트를 쓴다고 해서 서버 사이드 렌더링이 안되거나 그런거는 전혀 없다. 

 

usePathname과 / explore 페이지

Next15 주소창에 정보를 넣어 놓는거를 searchParms라고 하는데, 파람을 사용할 때 비동기로 바뀌어서 앞에 await를 적어주면 된다. 

 

클라이언트 컴포넌트에서 SearchParms를 사용을 하는 방법이 두개다. 

부모인 서치페이지에서 프롭스로 갖고 오거나 클라이언트 컴포넌트에서 유즈서치파람스로 편하게 갖고 올 수 있지만, 사용법이 다르기 때문에 사용을 할 때 get('q)를 작성을 해야한다. 

 

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

전부 다 서버 컴포넌트로 만들기 좀 그렇다고 하면 일부분만 클라이언트 컴포넌트로 빼고 서버 컴포넌트 부분을 다시 서드레벨로 넣어주면 된다. 서버 컴포넌트랑 클라이언트 컴포넌트를 같이 쓰는 방법이다. 

부모는 클라이언트 컴포넌트인데 자식은 서버 컴포넌트라면 클라이언트 컴포넌트에 {children}이나 props로 넘겨주면 서버 컴포넌트가 제대로 작동을 한다. 근데 만약 클라이언트 컴포넌트에서 서버 컴포넌트를 import해서 사용을 하면 서버 컴포넌트가 클라이언트 컴포넌트로 성격이 바뀌게 된다. 항상 서버 컴포넌트는 클라이언트 컴포넌트 자식일 때 children, props로 보낸다는걸 기억하면 된다. 

 

fakes.js/ photo/[photoid]

npm 라이브러리 설치를 할 때 실수로 잘못 받으면 컴퓨터 해킹이 될 수 있기 때문에 항상 맞는지 잘 봐야 한다. 

faker 라는 라이브러리가 실제로 한동안 소동에 휘말렸던 그런 라이브러리다. 

faker-js faker 라이브러리는 더미 데이터를 쉽게 넣어주는 라이브러리이다.