쑥쑥자라기🌱

Next.js는 App 컴포넌트를 사용하여 page를 초기화한다. 이를 재정의하고 페이지 초기화를 제어할 수 있다. 이를 통해 다음과 같은 놀라운 일을 할 수 있다. 1. 페이지 변경 간에 레이아웃 유지 2. 페이지 탐색 시 state 유지 3. componentDidCatch를 사용한 Custom 에러 처리 4. 페이지에 추가 데이터 삽입 5. Global CSS 추가 기본 App을 재정의하려면 아래와 같이 ./pages/_app.js 파일을 만든다. ``` export default function MyApp({ Component, pageProps }) { return } ``` https://nextjs.org/docs/advanced-feat..

Built-In CSS Support (내장 CSS 지원) Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있습니다. 이것은 Next.js가 import 개념을 JavaScript 이상으로 확장하기 때문에 가능합니다. CSS-in-JS 격리된 범위 CSS에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다. 목표는 불행히도 서버 렌더링을 지원하지 않고 JS 전용인 Web Components와 유사한 "Shadow CSS"를 지원하는 것입니다. https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js styled-jsx를 사용하는 컴포넌트는 다음과 같습니다. ``` {` ..

Array.prototype.join() join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('-')); // expected output: "Fire-Air-Water" https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join CSS Module 사용하기 1. className={`${styles.link} ${router.pathname =..

No HTML link for pages 페이지 간 클라이언트 측 경로 전환을 활성화하고 single-page app 경험을 제공하려면 Link컴포넌트가 필요하다. // 변경 전 About Us // 변경 후 import Link from 'next/link' About Us https://nextjs.org/docs/messages/no-html-link-for-pages useRouter() 앱의 함수 컴포넌트에서 router객체 내부에 접근하려면 userRouter()훅을 사용할 수 있다. useRouter는 React Hook입니다. 즉, 클래스와 함께 사용할 수 없습니다. withRo..

pages/about.js 생성 -> localhost:3000/about (O) localhost:3000/about-us(X) 다만 예외사항으로, index.js의 경우에는 앱이 시작하는 파일이라고 보면 된다. 즉 localhost:3000 그 자체다 뒤에 /index 로 붙이면 안된다. 이 강의를 들을 때는 import react from "react"를 쓸 필요가 없다. 다만 useState,useEffect, lifecycle method 같은 애들을 써야 할 경우에는 꼭 import를 해줘야 한다.

라이브러리와 프레임워크의 주요 차이점 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있습니다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

console.log(typeof 1); // number console.log(typeof 1.0); // number console.log(typeof '1'); // string console.log(typeof "1"); // string console.log(typeof `1`); // string // typeof 연산자 let name = 'Text'; function sayHello() { console.log('hello'); } console.log(typeof name); // string console.log(typeof sayHello); //function console.log(typeof 'Hello' + 'Codeit'); // stringCodeit // not a numb..

//불린 (Boolean) console.log(2 > 1); //true console.log(2 = 2); //true console.log(3