키모스토리

layout.tsx Next.js 의 모든 페이지(page.tsx) 들은 layout.tsx를 시작으로 조립 되어 실행됨  (LIke index.js, index.html) export const metadata = { title: 'Next.js', description: 'Generated by Next.js',}export default function RootLayout({children, }: { children: React.ReactNode}) { return ( {children} )} 이전 예제에서 /app/page.tsx, /app/about-us/page.tsx 에 import 했던 Navigation 을 layout.tsx 에서 한번만 import 하면모..

원본문서 : Next.js에서의 렌더링 방식 https://voyage-dev.tistory.com/130 Pre-Renderig이란?일반적인 React를 사용한 웹 어플리케이션은 CSR 렌더링 방식을 사용하며, 이는 처음에 브라우저가 빈 HTML 파일을 받아 아무것도 보여주지 않다가, JavaScript가 다운로드 완료되 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다.하지만 Next.js는 모든 페이지를 사용자에게 전해지기 전에 미리 렌더링 즉, Pre-Render 한다. 이는 Next.js가 모든 일을 클라이언트 측에서 모든 작업을 수행하는 것이 아니라, 각 페이지의 HTML을 미리 생성하는 것이다.생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 그후 브라..

navigation app/components 폴더 생성 후 navigation.tsx 파일 생성 후 아래 코드 코딩'use client'import Link from "next/link";import { usePathname } from "next/navigation";export default function Navigation() { const path = usePathname(); console.log(path); return ( Home {path === "/" ? "💖" : ""} About-us {path === "/about-us" ? "💖" : ""} ..

1. 프로젝트 폴더 생성 후  npm init-ynpm init -y root/tsconfig.json 파일 생성됨 2. 필수 라이브러리 설치npm install react@latest next@latest react-dom@latest * pakage.json 수정 (scripts 필드){ "name": "nextjs", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" // npm run dev 명령어로 컴파일 실행이 되도록 설정 }, "keywords": [], "author": "", "license": "MIT", "description": "", "dependencies": { "next..

keyof  :  인터페이스 멤버를 key값으로 사용가능Partial  : 인터페이스 멤버를 모두 optional 하게 사용interface User { id: number; name: string; age: number; gender: "m" | "f";}// keyof 인터페이스의 멤버변수를 key 값으로 사용. type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'const uk:UserKey = "id"; console.log(uk);// Partiallet admin: Partial = { id:1, name:"Bob",};// Patial은 아래와 같이 모든 멤버를 optional 로 선언한것과 같다./..

함수 매개변수 Generic// Genericfunction getSize(arr: T[]): number { return arr.length;}const arr1 = [1,2,3];getSize(arr1); // 3const arr2 = ["a","b","c"];getSize(arr2); // 3const arr3 = [false, true, false];getSize(arr3); // 3const arr4 = [{}, {},{name: "Tom"}];getSize(arr4); // 3 interface Generic // 인터페이스 맴버변수 타입을 generic으로 선언하는 예interface Mobile { name: string; price: number; option: T;..

// Classclass Car { color: string; constructor(color: string){ this.color=color; } start(){ console.log("start"); }}const bmw = new Car("red"); 접근 제한자 : public, private , protected다른 언어와 동일.public : 부모클래스 내부, 자식클래스 내부, 외부 객체에서 모두 접근가능private : 부모클래스 내부에서만 접근가능protected : 보모클래스, 자식클래스 내부까지만 접근가능 // Classclass Car { private name: string = "car"; color: st..

리터럴 타입 (Literal Types)// Literal typesconst userName1 = "Bob";let userName2: string | number = "Tom";userName2 = 3;type Job = "police" | "devloper" | "teacher";interface User { name : string; job : Job;}const user: User = { name: "Bob", job: "police", // type Job 의 값들 중에서만 선택가능}interface HighSchooleStudent { name: number | string; grade: 1 | 2 | 3;} 유니온 타입 (Union Types) ,  둘 중 ..

function 사용법// 함수// 매개변수 타입지정, 반환타입 괄호 뒤에 타입지정function add(num1:number, num2:number) : number { return num1+num2;}let c=add(10, 20);console.log(c);function isAdult(age: number) : boolean { return age>19;}console.log(isAdult(22));// 매개변수 optional (?)function hello(name?: string) { return `Hello, ${name || "world"}`; }const result = hello();const result2 = hello('Kim');// const result3..

object let user:object;user = { name: 'xxx', age: 30,}console.log(user.name);위 object 코드는 Property 'name' does not exist on type 'object'. 오류를 반환한다.object 에는 property 속성이 없기 때문이며 이럴때 interface를 사용한다. interface 로 object 구현// grade 의 value를 한정지으려함.type Score = 'A' | 'B' | 'C' | 'F';// property 에 ? 를 지정하면 optionaly 한 속성이 된다interface User { name : string; age : number; gender? : s..

타입스크립트란?타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 아네르스 하일스베르(Anders Hejlsberg)가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한, 프론트백 통합 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영..

https://axios-http.com/ AxiosPromise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.axios-http.comAxios란?Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 htt..