Next js SSR : get server side props
지금까지 공부했던 화면들은 next js의 장점인 SSR( Server Side Rendering ) 보단 CSR( Client Side Rendering ) 으로 화면 렌더링을 해주었습니다. 따라서 해당 화면을 브라우저에서 inspect 하게 되면 다음과 같이 데이터가 없는상태로 Loading 컴포넌트가 붙여진 채로 서버쪽으로 부터 html 소스파일을 받아오게됩니다. 지금까지의 플로우 즉 html 을 받아오고 > 화면 렌더링을 하고 > data fetch를 시작하고 pending 상태에서는 loading 화면을 보여주고 > fetch가 완료되면 그때서야 받아온 데이터를 가지고 렌더링하게 됩니다. 지금까지의 화면 이미지는 다음과 같습니다. Server Side Rendering next js에서는 서버측..
Next js ( Redirect / Rewrite ) , Rewrite 로 API key를 숨기자
Styling 스타일링은 해당 강의에서 미리 완료하여 제공해주는 코드를 사용하겠습니다. export default function Home() { const [movies, setMovies] = useState(); useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}` ) ).json(); setMovies(results); })(); }, []); return ( {!movies && Loading...} {movies?.map((movie) => ( {movie.original_title} ))} ); } *..
Next js Fetching Data / public 경로
NavBar 스타일링 본격적으로 기초 영화 앱을 만들기 위해서 네비게이션 스타일링을 다시 해줍니다. 스타일링에 시간을 들이지 않기위해 기존 만들어진 스타일을 그대로 붙여넣어줍니다. // NavBar.js import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } public 폴더에서 가져와 쓰기 위 코드에서 img src="/vercel.svg" 를 보면 알 수 있듯이 Next js 에서는 public 폴더 내부의 파일의 경로를 쉽게 가져와 사용할 수 있습니다. 따로 상대경로로 ....
Next js Layout Patterns
이전 공부까지 1차 Next js 의 기본적인 구조를 알아보았습니다. 지금부터는 노마드코더분의 강의를 보며 영화 앱을 만들면서 Next js 공부를 진행해보려합니다. Layout Pattern 많은 사람들이 Next js 를 사용할 때 쓰는 패턴이 있다고합니다. custom app component에서 layout 패턴이라는것을 사용한다고합니다. 파일 생성하기 우선 components 폴더에 Layout.js 라는 파일을 생성하고 내부는 다음과 같이 코드를 작성합니다. Layout 컴포넌트의 children props를 받아서 자식 컴포넌트를 Layout 내부에 렌더링을 해주고 마찬가지로 NavBar을 같이 넣어줍니다. // Layout.js import NavBar from "./NavBar"; exp..
Next js Custom App , global style, _app.js
글로벌 스타일링 css 를 작성하면 공통적으로 적용할 reset style, global style 등이 있을겁니다. styled jsx에서는 scoped 된 스타일 작성말고 global한 스타일을 적용할수 있습니다. 놀랍게도 글로벌 스타일링을 아주 간단하게 작성할 수 있습니다. 다음과 같이 styled jsx 태그에 global 프로퍼티를 추가해주면 됩니다. export default function Home() { return ( hello ); } 그럼 다음과 같이 NavBar 안에 있는 a 태그에 white 색상이 적용이됩니다. 이것조차 scoped 된 스타일링 Home 컴포넌트인 index 페이지에서 만든 styled jsx global css는 인덱스 페이지에서는 적용이 되었지만, About ..
Next js Styles JSX로 스타일링 하기
공부를 진행하기 앞서 css module 에서 작성한 스타일링 코드는 모두 지워줍니다. 정리한 코드는 다음과 같습니다. import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar(){ const router = useRouter(); return ( Home About ) } Styled JSX styled JSX는 기존 리엑트에서 볼 수 없었던 방식인데, 그 이유는 Next JS의 고유 방법이라고 합니다. style 태그와 jsx 프로퍼티 스타일링 할 컴포넌트 내에 style 태그를 넣어주고 안에 jsx 프로퍼티를 넣어주어 스타일링 구조를 잡습니다. style 태그 안에 {} 와 ..