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 태그 안에 {} 와 ..