노마드 코더 next.js를 보면서 기억해야할만한 것을 정리해보자.
파일명이 url주소가 된다. 따로 react-router-dom을 설치하여 경로를 지정안해줘도 되니 참 쉽다.
그러나 index.js는 예외인데, 홈페이지의 메인에 해당하는 페이지가 되니 주의하도록 하자.
a태그에 href속성을 쓰지않는다.
바로 a태그에 줬을 때는 브라우저가 다른 페이지로 이동하기위해 전체 페이지를 로딩한다. 속도가 굉장히 느리다.
그래서 스샷처럼 Link태그를 임포트하여 사용한다.
클라이언트 사이드 네비게이션을 제공해주는 것이다.
그리고 Link는 오직 href속성만 사용하며, className같은 이외의 것은 모두 a태그에 직접 준다. (css속성등등....)
useRouter를 사용해봤다.
router를 선언해놓고, console.log를 찍어보면 useRouter로 얻을 수 있는 걸 알 수있다.
그중 pathname이라는 경로도 받을 수 있는데 이걸 이용해서 삼항연산자로 버튼의 색을 바꿀 수 있다.
스샷은 about을 눌렀을 때 참이되면서 about은 red가 되고,
home은 blue가 된 모습이다.
참 간편한다.
위에서부터 보면 파일명에 'module.css' 이거 정말 중요하다고 한다. 이유는 있다가 보고,
NavBar.js로 돌아와서 styles를 임포트하고, 맨아래에
nav태그에 className을 지정한 모양을 잘 보고 적용하도록 해보자.
개발자도구 열어서 확인하면 className은 알아서 지정해준다.
마치, styled-component같다고 느꼈다.
하여튼 다른 페이지에서도 .nav라는 같은 이름으로 Css를 줄 수 있다는 것이다!
한마디로 className충돌을 일으키지 않는다.
응용해서 삼항연산자를 이용하여, navBar의 글씨색깔을 바꿔준 모습.
module에 link클래스에 text-decoration: none을 추가했고, js파일에서 className에 백틱으로 묶고 두가지의 클래스명을 사용해준 모습이다.
하지만 위 방법은 추천하지 않는다고 한다.
다음강에서 추천하는 방법을 살펴보자.
jsx를 사용해서 css를 하는 모습이다.
이제보니 이게 더 styled-component같다.
그리고 이거 index.js에서 똑같은 방법으로 a태그에 효과줘도
적용안된다. 각자 독립적이기 때문.
.active를 쓴 것에 집중해보자. 매우 간편하다.
이 style들은 해당 컴포넌트 내부에서만 작동한다.
다른 컴포넌트에서 className을 active로 해도 안바뀐다 이말이다!
NavBar의 코드
파일명이 _app.js이다. 꼭 __이거 붙여야한다. 안쓰면 안되는 거 확인해봄.
전역적인 명령을 내려줄 때 사용하며, 인자에 Component와 PageProps을 넣어주는 것 기억하자.
style jsx global로 모든 컴포넌트의 a태그를 white로 지정했다.
NavBar를 전역으로 지정했기 때문에, 스샷에는 안나오지만, index.js와 about.js에서는 NavBar를 임포트 안해도 되고,
style-jsx도 없이 굉장히 깔끔하게 구성되어있다.
react의 router기능을 포함한 것 같으면서도 css까지 지정할 수 있는 매우 강력한 기능같다.
About 왼쪽에 home이 있지만 _app.js에서 a태그 글자색을 white로 지정했다.
그리고 선택했을 때 tomato색으로 나오는 것으로 보아, NavBar에서 지정한 것처럼,
각 컴포넌트에서 지정한 style들이 더 우선적으로 지정되는 것으로 보인다.
컴포넌트폴더에 Layout.js를 만들었다. children을 사용한 걸 눈여겨 보자. NavBar도 여기서 불러왔다.
_app.js에서 NavBar임포트 삭제하고, 본문에서 레이아웃으로 감쌌다. 이제 Layout.js의 children요소로 사용된다.
페이지 title기능을 사용하기 위해 Head를 임포트하고, 본문에서 감싸줬다. 그러나 모든 페이지마다 하기싫다.
요런 컴포넌트 하나 만들어서
이렇게 하면 간편!
TMDB의 API_KEY받아오는 것은 강의를 참고하자.
본문에 코드를 보면 기억해둘것은
!movie => '무비의 데이터가 안들어오면' 이란 뜻!
movies?.map => 무비데이터가 존재하지않으면 맵 실행안함.
redirect를 next.config.js에 적용해준모습.
웹페이지의 url에 /contact를 입력했는데 바로 /form으로 이동했다.
destination에 외부사이트 url을 입력해도 이동가능하다!
이렇게 path지정도 가능하다. path에 123같은 id지정이
가능하다는 얘기다.
근데 꼭 config.js 건들면 npm run dev로 서버 재시작 하자!
이번엔 밑에 Rewrite에 주목해보자.
바뀌는 url이 주소창에 안보이는 기능이다.
스샷은 API key값 숨기는 모습이다.
source에 url을 index.js의 fecth내부 url에 넣으면 된다.
그럼 초기 렌더될 때 destination이 렌더되겠지?
그리고 index.js에 있던 key값은 잘라내서 config.js에 붙여넣었다.
이렇게 하면 개발자도구로 열어봐도 key값이 안보인다.
이제 index.js에 key값이 없으니까!
위 방법 맘에 안들면 원래 API key값 관리하듯이 .env 파일 추가해서
작업하면 된다. git ignore에 넣는 것 잊지말고.
방법 생각안날때는 강의를 다시 보자.
getServerSideProps 이거 이름 중요하다! 이 이름 그대로 써야한다.
괄호안에 내용은 client가 아니라 server에서만 돌아간다.
이제 movie의 데이터가 없을 때 Loading... 이란 것은 뜨지않는다.
위 기능으로 화면에 API가 들어올 때 까지 아무것도 안보인다.
그러니까 선택을 하면 된다.
Server Side Rendering으로 데이터가 유효할 때 화면이 보여지게 할 것인지, 아니면 loaing화면을 보여준다음에 데이터를 받게 할 것인지 말이다.
근데 사실 이거 어려워서, 강좌를 다시보거나 다른 블로그를 참고 해봐야 할 것같다..
movies뒤에 /가 필요하면 폴더를 만든다. 좌측 폴더구조 참고.
movies까지만 들어가면 당연히 index.js의 movies index출력.
파일명에 대괄호를 주목하자.
이것이 변수를 포함하는 dynamic url이다 라는 것을 알려주는 방법이다.
웹페이지의 주소창을 보면 이해가 될 것.
Link태그와 a태그로 감싼 부분을 잘보도록 하자.
그러면 웹페이지의 상태처럼 메인에서 영화아무거나 누르면 해당 id값에 해당하는 페이지로 이동한다.
그러나 div를 a태그로 감싸면 안된다는 의견이 있나보다.
이렇게 변경해줬고, useRouter의 활용과 onClick함수의 내용과 사용방법을 확인해 보자.
이제 영화 제목뿐만 아니라, 이미지를 눌러도 디테일페이지로 이동한다.
next.config.js에 추가한 위의 코드를 추가하고, 실제로 웹페이지에서 찍어본 모습.
router.push로 이어주는 값을 객체형식으로 받은 모습.
url을 참고하면 금방 이해할 수 있다.
밑에 백틱안에 경로대로 나오는데 이게 'as'를 지정한다고 한다.
영화 title을 url상에서 감췄다.
