ㄱ 부터 ㅎ 까지

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} ))} ); } *..

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 폴더 내부의 파일의 경로를 쉽게 가져와 사용할 수 있습니다. 따로 상대경로로 ....

이전 공부까지 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..

글로벌 스타일링 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 ..

공부를 진행하기 앞서 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 태그 안에 {} 와 ..

Next js 에서의 스타일링은 리엑트에서와 같이 jsx 태그에 style={{ color:"#000000" }} 과 같이 작성을 할 수 있지만, module이라는 것을 사용할 수 있습니다. CSS Module 파일 생성 다음과 같이 NavBar.module.css라는 파일을 생성해주고 css를 작성합니다. 이때 앞의 NavBar의 이름은 중요하지 않지만 뒤의 .module.css는 Next js에서 css 모듈을 만들때엔 고정 패턴입니다. CSS Module 사용 그리고 css 모듈을 사용할 컴포넌트에서 다음과 같이 사용합니다. 먼저 생성한 module 파일을 styles로 import 해옵니다. nav에 className에 .nav로 css를 작성했으니 styles.nav를 작성합니다. import ..