ㄱ 부터 ㅎ 까지

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

Next js 에서의 라우팅은 리엑트와 거의 유사합니다. 우선 components라는 폴더를 생성하고 그안에 라우팅을 할 네비게이션 바를 만들기 위해 NavBar.js라는 파일을 생성해주었습니다. 코드를 살펴보면 1. next/link로부터 Link를 import해옵니다. 2. a태그를 Link태그로 감싸고 href안에 url 주소를 작성했습니다. // next/link로 부터 Link를 받아옵니다 import Link from "next/link"; export default function NavBar(){ return ( Home About ) } 화면에는 다음과 같이 태그에 태그에 작성했던 href가 그대로 들어가서 렌더링 되게 됩니다. Link태그 안에 a태그를 작성하지 않아도 잘 동작은 하지만..

Static Pre Rendering react는 CSR(Client Side Rendering)으로 렌더링을 하게 되는데 이는 클라이언트측에서 javascript를 통해서 동적으로 렌더링을 하게되는 방식을 말합니다. 반면 Next는 SSR(Server Side Rendering)을 지원해주는데 서버사이드 렌더링이라고 서버측에서 HTML파일을 미리 만들어서 보내주는 방식입니다. Next js의 강점은 이 SSR과 같은 사전 렌더링 방식이라고 합니다. React Rendering vs Next Rendering react의 소스코드를 살펴보면 html 파일을 받아오고 안에 리엑트 자바스크립트 파일을 받아온 후에 렌더링을 해줍니다. 그 시간동안 브라우저의 화면은 하얀색 화면으로 깜빡할 때가 있게 됩니다. 반..