[Next.js] Section2 기획자와 디자이너가 기획서를 던져주었다!

Next 프로젝트 시작하기

클론 코딩의 장점은 억찌로 따라 해야 해서, 기획사가 없기 때문에 분석 하면서 해야 한다. 

새로고침을 하면 어떻게 변하는지 그런것도 고려 해야 한다. 

public 폴더에는 Next 서버에서 누구나 접근할 수 있다. 사이트에서 사용될 이미지들은 전부 다 public 폴더에 넣어두면 된다. 

Next15 부터는 next.conif.ts가 생성이 되었다. 

 

브라우저 주소 app 폴더에 반영하기

페이지가 바뀌는데 안바뀌는 부분이 레이아웃이다. 

다이나믹 라우팅을 제공한다. [username] / [id]

 

라우트 그룹

로그인 후 로그인 전을 구별해 주면 된다. 

(afterLogin/beforeLogin) 소괄호는 주소창에 관여를 안하지만 그룹을 만들 수 있다. 

 

template.tsx / Link / Image / redirect

페이지를 넘나들 때 레이아웃은 그대로 유지가 된다. 

페이지가 넘어갈 때 레이아웃도 리렌더링 되게 만들고 싶으면 template을 사용하면 된다. 

 

레이아웃 / 템플릿의 차이 :

페이지가 넘나들 때 리렌더링이 안되게 하고 싶으면 레이아웃

리렌더링이 되게 하고 싶으면 템플릿 

 

공식 문서에서는 페이지 넘나들 때 기록을 해야 하는 상황에서 사용하라고 되어 있다고 한다. 

 

Next에서는 a 태그 대신 Link를 사용을 한다. a 태그를 사용하면 새로고침 되면서 넘어간다. 

React / Next 에서는 페이지가 새로고침 되는 행동을 하면 안된다. 

 

Next에서는 png 파일을 임포트 해서 사용할 수 있다. 

 

css module을 선택한 이유

dvw / dvh 단위가 새로 나왔는데 가장 쉽게 전체 화면을 채울 수 있고 모바일에도 주소창이 생겼다가 없어지는 경우가 있는데 이거를 사용하면

주소창이 생기거나 주소창이 사라지는 그런게 상관없이 전부 다 전체 화면을 채울 수 있다고 한다. 

 

 

페러렐 라우트

app router에서 폴더 갖고 장난을 많이 친다. 페이지가 바탕이 되고 로그인 모달을 하고 싶으면 페라렐 라우트를 하면 된다. 

폴더를 @ 붙쳐 주면 된다. 

@modal / page.tsx

타입스크립는 변수 / 매개변수 / 리턴값이 타입을 지정을 해줘야 한다. 

타입을 쓰는게 다 정해져 있다. 

프론트엔드를 하면 타입스크립트 해야 하니깐 공부하는거 추천한다. 

 

 

클라이언트 컴포넌트로 전환하기

useclient 추가 하면 된다. 

모든 페이지를 클라이언트 컴포넌트로 변경을 하게 되면 서버 컴포넌트 사용 하는 이유가 없다. 

서버 컴포넌트는 데이터와 관련이 되어 있다. 

 

* 클라이언트 컴포넌트도 서버에서 실행은 되지만 훅은 실행이 안된다. 

 

default.tsx

 

인터셉팅 라우트

서로 주소가 다른데 같이 뜰 수 있게 해준다. 

 

private folder(_폴더)

_언더바를 붙침변 주소창에 안나온다. 

 

로그인 모달에서 발생하는 문제 해결하기(router.place)