[TIL] 노마드코더 nextJS - 3 / Invalid <Link> with <a> child 에러 / title error

이미지는 public에 넣으면 되고 그 안에 있으면 ../public/파일명

이렇게 안하고 바로 /파일명 이렇게 쓰면 됨

 

이렇게 이미지가 깨지는데 이미지 경로를 위에 설명처럼 넣어보면

이미지가 잘 나오는걸 확인할 수 있다.

 

---

참고로 지금 Next.JS 13버전이 나온 상황에서 

강의에서처럼 <Link><a>이렇게 링크 안에 에이태그를 쓰면

에러를 뱉어주는데 link는 a로 렌더링 되므로 a태그가 유효하지 않다고 한다.

해결법도 친절하게 알려주는데 a태그를 지우거나

Link 태그 안에 legacyBehavior를 추가하라고 한다

 

legacyBehavior 

를 추가하고 나니 잘 작동되는 모습을 볼 수 있다.

 

---

(근데 내거는 왜 이 경고메세지가 안뜨지...)

쩄든 Next JS는 내장되어있는 Image 태그를 사용해야 되는데 지금은 다루지 않는다고 한다.

 

 

지금 할 거는 Next.js를 이용해서 API keys를 숨기는 것!!

API key를 숨기지 않으면 크롬에서 개발자도구로 보거나 소스코드를 보거나 하면서

우리의 API key가 공개될 수 있다.

Next.js에서 이걸 숨기는 걸 할 수 있다!

 

https://www.themoviedb.org

The Movie Database (TMDB)

여기서 API를 사용해서 영화 정보를 가져올 거!

회원가입 하고 API 키를 생성 받장 

 

docs 읽어보면

영화말고도 이것저것 많음 티비로 해볼깜ㅋㅋㅋ,,

https://developers.themoviedb.org/3/tv-episodes/get-tv-episode-details

API Docs

어떤 요청을 어디에 넣어야 하는지,

base url은 뭔지 다 잘 나와있당

 

 

우선은 키를 안가린채로 만들어보기

근데 그 전에

계속 title에서 경고가 뜨길래 뭐지 하고 봤더니

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

 

<title> 태그가 수신할 수 있는 텍스트노드는 1개 뿐인데(공백이거나 최대 1개의 텍스트노드) 지금 내가 썼던 형태는

<title>{title} | Next Movies</title>

 

이거였다.

해결법은 간단하다

 

<title>{`${title} | Next Movies`}</title>

 

이렇게 백틱을 사용해서 하나로 써주면 된다!

 

에러가 사라진 걸 볼 수 있다.

 

useEffect로 데이터를 받아오는데

const data 해서 받아오면 네모칸처럼 뜬다. 내가 필요한 건 results 안의 내용이니까

{ results } 로 받아오면 제대로 results만 뜨는 걸 볼 수 있다.

 

 

여기서 useState에 빈 array를 넣지 않으면 에러가 난다. movies.map에서 movies가 undefined라고

로딩을 만들어주기 위해 아예 비워주고

 

      {!movies && <h4>Loading....</h4>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}

 

이렇게 movies가 없을 때는 Loading... 이라는 글을 띄워주고

movies가 있으면 map을 돌아서 title을 출력해준다.

 

loading은 나중에 중요한거 할거!

> loading을 아예 안보여주고 싶을 때 ? 이런거 하는 듯,,,!!