programming study (889) 썸네일형 리스트형 NextJS(5) - Patterns, Head Component 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Patterns Layout Pattern Layout 컴포넌트란 페이지들의 전반적인 Layout 정의(Navigation 등) global로 import할 것들을 불러옴(Google Analytics, SEO 관련 모듈 등) Global style 적용 정의한 Layout component를 App Components에서 불러오기 import NavBar from "../components/NavBar"; export default function Layout({ children }) { return ( {children} ); } 2. Head Component NextJS에서 Head를 관리하기 위한 .. NextJS(4) - Global Style, App Components 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Global Style Style Jsx를 Global하게 적용 가능 App Components에서 사용해야 모든 페이지에서 적용됨 NextJS의 각 페이지는 독립적이기 때문 2. App Components 어떤 컴포넌트의 청사진(템플릿) 프레임워크 내에 포함된 기능 렌더링 되기 전에 먼저 보는 컴포넌트 _app.js 형식의 네이밍 NextJS에서는 Global.css를 import할 수 없음 반드시 module이어야 함 App Components에서는 Global.css를 import할 수 있음 Styles JSX Global 또한 적용 가능 // NextJS는 페이지를 렌더링하기 전 자동적로 이 컴포넌트를 .. NextJS(3) - Routing, CSS Modules, Styles JSX 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Routing NextJS 어플리케이션에서 a태그를 네비게이팅에 사용하면 안 됨 a태그로 인한 이동은 전체 어플리케이션이 새로고침 됨 NextJS에서 앱 내에 네비게이팅에 사용해야만하는 컴포넌트가 있음 Link 컴포넌트 router 관련 proptery, function을 사용하기 위해서는 useRouter Hook을 사용 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { // NextJS에서 제공하는 라우터 훅 // location에대한 정보 // path, back,.. NextJS(2) - Pages, Static Pre Rendering 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Pages NextJS에서 Pages 아래의 파일들을 라우팅 처리 해줌 단, 해당 컴포넌트들은 export default 해야 함 index.(js|ts)는 앱의 홈(/)으로 연결 됨 JSX 사용하여도 React를 import 하거나 확장자를 바꿀 필요 없음 useState, useEffect와 같은 hook은 import 해야 함 2. Static Pre Rendering NextJS는 앱에 있는 페이지들을 미리 렌더링 정적으로 생성 됨 React.js vs Next.js CSR : Client Side Rendering 브라우저가 유저가 보는 모든 UI를 만드는 일을 함 React는 기본적으로 CSR id가.. NextJS(1) - Initialize, Framework Vs. Library 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Initialize npx create-next-app 2. Framework Vs. Library 라이브러리 사용하는 것 원하는 대로 코드를 작성 프레임워크 추상화된 코드를 불러오는 것 정해진 방식대로 구현 자유도의 차이 라이브러리 > 프레임워크 대표적으로 NextJS의 경우 pages 디렉토리 안에서 파일을 기준으로 라우팅을 할 수 있음 NextJS가 파일명에 맞추어 라우팅을 해줌 Inversion of Control(통제의 역전) 개발자는 라이브러리를 사용 개발자는 프레임워크의 규칙을 지킴 Reference Nomad Coders - NextJS 시작하기 TypeScript(8) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. tsconfig.json TypeScript 설정 파일 IDE가 이를 감지하여 프로젝트에서 TypeScript로 작업하는 것을 알게 됨 자동완성기능 제공 예시 { // where, 어디에 타입스크립트 파일이 있는 지 // TypeScript -> JavaScript로 컴파일하고 싶은 모든 디렉터리 넣기 "include": ["src"], // 컴파일 옵션 "compilerOptions": { // JavaScript 파일이 생성될 디렉터리 지정 "outDir": "build", // 어떤 버전의 JavaScript로 컴파일 할 지 "target": "ES6", // TypeScript가 어떤 런.. TypeScript(7) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 다형성을 활용한 클래스 정의 예시 다형성이란, 다양한 형태를 가질 수 있도록 하는 것 제네릭을 활용 // 제네릭이 지정되어 있어 해당 인터페이스가 적용된 객체는 value가 제네릭으로 넘겨받은 T로 적용되어야 함 interface CustomStorage { [key: string]: T } // 클래스 정의 // 제네릭을 지정함으로써 new 키워드를 사용할 때, 특정 타입을 넘겨 받음 class LocalStorage { // 넘겨받은 제네릭은 storage 프로퍼티에 지정된 인터페이스 CustomStorage에 전달 됨 private storage: CustomStorage = {} set(k.. TypeScript(6) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. readonly property에 읽기 전용 속성 부여 public property이어도 내용을 수정할 수 없음 TypeScript keyword 2. static JavaScript keyword 인스턴스 메서드가 아닌, 클래스 생성자 자체에 정의된 메서드 클래스를 생성하지 않아도 사용할 수 있음 3. interface typer과의 차이 object의 형태만을 정의 type은 다양한 목적으로 사용 가능 상속(extends)의 대상이 될 수 있음 type의 경우에는 &(and)으로 표현 객체지향 프로그래밍과 유사한 문법 클래스의 모양도 정의 가능 같은 interface를 여러번 선언하면, 합쳐.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 112 다음