반응형 Next.js14 Custom App Component (.pages/_app.js) 모든 홈페이지에서 공통으로 보이는 헤더를 표현할때 리액트에서는 src/App.js에 다음과 같이 작성했다. import React from "react"; import { Route, Switch } from "react-router-dom"; import Header from "./components/Header/Header"; export const App = () => { ..(생략).. return ( ); }; 이런식으로 모든 화면에서 렌더링 될 Header, 그리고 react-router-dom 라이브러리를 활용하여 동적 페이지 라우팅을 구현하였다. 하지만 Next.js에서는 파일이름이 곧 url이 되어 자동으로 동적 페이지 라우팅이 된다. Header도 리액트의 App.js처럼 어떤 한 공통.. 2022. 1. 29. Next.js 고유의 CSS : Styled jsx Styled jsx Styled jsx는 Next.js 고유의 CSS 사용법이다. .modue.css 보다 더 간단하다.(module.css도 사실 엄청 간단하다.) className을 무작위 알파벳으로 만들어주기 때문에, class 이름짓는 걱정을 하지 않아도 된다. => CSS 반영되는 범위가 현재 컴포넌트의 스코프에 한정된다. => 하위 컴포넌트로 CSS속성이 전달되는 것을 걱정하지 않아도 된다. 아래 코드의 리턴문을 보면 ); } nav태그의 배경색이 tomato 색으로 변경되었다. 부모요소의 css에도 영향을 받지 않는다. html 소스코드를 보면 class가 무작위 알파벳들로 만들어져 있다. 때문에 개발자는 중복걱정을 하지 않아도 된다. 한번 부모요소에서도 styled jsx 태그를 이용하여 .. 2022. 1. 29. Next.js에서 css module사용 파일구조는 아래와 같이 components폴더안에 NavBar.js와 NavBar.module.css를 만들었다. NavBar.module.css를 아래와 같이 작성 .nav { display: flex; justify-content: space-between; background: green; } NavBar.js를 아래와 같이 작성 import Link from "next/link"; import { useRouter } from "next/router"; import styles from "./NavBar.module.css"; export default function NavBar() { const router = useRouter(); console.log(router); return ( Hom.. 2022. 1. 28. Pre-rendering (직접 실험하면서 확인) Next.js의 장점중 하나는 Pre-rendering 된다는 것이다. Pre-render를 통해 얻을 수 있는 장점은 다음과 같다. UX향상 SEO 향상(SEO는 초기 HTML의 meta 태그를 분석) CSR - 리액트 Create-react-app으로 만든 앱의 경우, 브라우저가 UI를 만드는 client-side-render를 한다. 즉 UI가 HTML 코드에 들어있지 않다는 것이다. Create-react-app으로 만든 앱의 경우 바디태그에는 이외에는 전부 자바스크립트이다. 위를 보면 사실상 비어있는 body태그이다. create-react-app으로 만든 페이지가 있다면 네트워크 탭에서 통신속도를 느린3G로 설정하고 새로고침을 해보자. 처음에는 하얀화면만 보이다가 서서히 구성요소들이 렌더링되는.. 2022. 1. 27. 이전 1 2 3 4 다음 반응형
