메서드 오버라이딩은 하위 클래스에서 상위 클래스의 이미 정의된 메서드를 재정의하는 과정을 의미한다.
이때, 하위 클래스에서 재정의된 메서드는 상위 클래스의 메서드와 '시그니처'가 반드시 동일해야 한다.
만약 시그니처가 동일하지 않다면, 이는 오버라이딩이 아닌 새로운 메서드를 정의한 것으로 간주된다.
메서드 오버라이딩에서 '시그니처'는 매우 중요한 역할을 한다. 시그니처는 메서드의 이름, 매개변수의 타입 및 개수 등을 포함한다. 오버라이딩된 메서드는 상위 클래스의 메서드와 시그니처가 동일해야 하지만, 메서드의 구현 내용은 하위 클래스에서 자유롭게 재정의될 수 있다. 이렇게 되면, 하위 클래스에서 오버라이딩된 메서드를 호출할 때 상위 클래스의 메서드 시그니처를 사용하게 된다.
public class Animal {
public void makeSound() {
System.out.println("The animal makes a sound");
}
}
public class Cat extends Animal {
@Override
public void makeSound() {
System.out.println("Meow");
}
}
public class Dog extends Animal {
@Override
public void makeSound() {
System.out.println("Woof");
}
}
public class Main {
public static void main(String[] args) {
Animal animal1 = new Cat();
Animal animal2 = new Dog();
animal1.makeSound();
animal2.makeSound();
}
}
위 코드에서, Animal 클래스 makeSound() 메서드가 정의..
Cat 클래스와 Dog 클래스는 Animal 클래스를 상속받고, makeSound() 메서드를 오버라이딩하여 재정의. 각 클래스의 makeSound() 메서드는 다른 메시지를 출력...
main() 메서드에서는 Cat와 Dog 인스턴스를 생성하여 Animal 타입의 변수에 저장하고, 각각의 makeSound() 메서드를 호출합니다. 이때 makeSound() 메서드의 시그니처는 Animal 클래스에 정의된 것과 동일. 따라서 컴파일러는 Cat 인스턴스의 makeSound() 메서드와 Dog 인스턴스의 makeSound() 메서드를 각각 호출하며, 출력 결과는 각각 "Meow"와 "Woof"가 된다.
①PDT (Primitive Data Type): 기본 자료형이라고도 불리며, Java에서 제공하는 8가지 기본 자료형을 의미 한다.
PDT는 8가지 형태가 있다.
boolean, byte, double,short,int,long,float, char
이러한 기본 자료형은 정수, 실수, 문자,논리 등의 값을 저장할 수 있는 데이터 타입이다.
객체가 아니기 때문에, 메소드를 호출하거나 속성에 접근할 수 없다. 따라서, 기본 타입을 객체로 다루기 위해서는 해당 타입을 참조 타입으로 변환해야 한다. Java에서는 이를 위해 오토박싱(Auto-boxing)이나 오토언박싱(Auto-unboxing) 기능을 제공한다.
상세
boolean : 논리값을 저장하는 데이터 타입으로, true와 false만을 값으로 가진다.
byte : 8비트 정수 값을 저장하는 데이터 타입으로, 범위는 -128부터 127까지 이다.
short : 16비트 정수 값을 저장하는 데이터 타입으로, 범위는 -32,768부터 32,767까지 이다.
int : 32비트 정수 값을 저장하는 데이터 타입으로, 범위는 -2,147,483,648부터 2,147,483,647까지 이다.
long : 64비트 정수 값을 저장하는 데이터 타입으로, 범위는 -9,223,372,036,854,775,808부터 9,223,372,036,854,775,807까지 이다.
float : 32비트 실수 값을 저장하는 데이터 타입으로, IEEE 754 표준에 따라 부동소수점 값으로 표현 된다.
double : 64비트 실수 값을 저장하는 데이터 타입으로, IEEE 754 표준에 따라 부동소수점 값으로 표현 된다.
char : 16비트 Unicode 문자 값을 저장하는 데이터 타입으로, 범위는 0부터 65,535까지 이다.
UDDT(User-Defined Data Type)
UDDT (User-Defined Data Type): 사용자 정의 자료형이라고도 불리며, 프로그래머가 필요에 따라 자신이 원하는 데이터 타입을 정의하여 사용할 수 있다.
이를 위해 클래스를 선언하고, 이를 이용하여 객체를 생성하여 사용한다.
즉, 클래스를 사용하여 사용자가 원하는 자료형을 만들 수 있는 것.
예를 들어,
학생(Student)이라는 자료형을 만들어 이름, 학번, 전공 등의 정보를 저장할 수 있다.
PDT와 UDDT는 모두 Java에서 데이터를 다룰 때 사용되는 개념이며, 이들을 잘 이해하고 사용하는 것이 Java 프로그래밍에 있어서 중요한 요소 중 하나 이다.
아래 코드들을 복사하자. 그리고 blog파일의 root에 "post" Folder를 만든 후
pre-rendering.md File 생성한다. 그 이후 아래 코드를 넣어준다.
---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---
Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
이후 하나 더.. ssg-ssr.md file도 만들어서 아래 코드를 복사 붙여 넣기 한다.
---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---
We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
You can use Static Generation for many types of pages, including:
- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation
You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---
이렇게 -으로 감싸진 것을 YAML Front Matter라고 한다. Head component에 넣어야 되는 Meta data처럼, 이 블로그 글에 대한 metadata를 담고 있다.
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
//Service가 돌고 있는 root 즉 blog에 있는,'posts' 파일(md file저장 해놓은 곳)
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData()/*정렬된 데이터를 가져옴*/ {
// Get file names under /posts
//fs는 파일 시스템을 읽어오는 node.js의 라이브러리다.
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
// .md를 제거하면 pre-rendering ssg-ssr만 남고
//그것을 id로 삼는다.
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
//fileName은 여전히 md가 있다.
//fullPath는 root에서 pre-rendering.md가 만들어질거고
const fullPath = path.join(postsDirectory, fileName);
//직접 utf-8형식으로 읽어서 fileContents에 담는다.
const fileContents = fs.readFileSync(fullPath, 'utf8');
//담고난 뒤엔 -으로 감싸진 부분만 해석 하기 위해 grey-matter 설치했다.
//matter로 감싸주면 matterResult로 metadata를 다 읽어낸다.
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents);
// Combine the data with the id
//id는 파일 이름이었고, 그것을 빼내주는 것이 getSortedPostsData 함수다.
return {
id,
...matterResult.data,
};
});
// Sort posts by date
//날짜가 느린것을 앞에보내고 날짜가 빠른 것을 앞에 보내는 것
//즉 최신 순이다.
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1;
} else {
return -1;
}
});
}
이후 index.js에서
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import { getSortedPostsData } from '../lib/post'
import utilStyles from '../styles/utils.module.css'
//ssr로 바꾸고 싶으면 getServerSideProps로 바꾸면 끝임
export async function getStaticProps() {
//ssg Data가 담겨져 있다.
const allPostsData = getSortedPostsData()
return {
//ssg가 담겨있는 props retrun
props: {
allPostsData,
},
}
}
export default function Home({ allPostsData }) {
return (
{siteTitle}
I love coding 😍
(This is a sample website - you’ll be building a site like this on {' '} our Next.js tutorial.)
Blog
{title} {id} {date}
)
}
//allPostsData를 map으로 돌면서 id key로 주고 title,id(파일이름),date를 준다.
CSR로 바꾸는 방법
root경로의 pages 폴더에서 에서 api 폴더를 하나 더 만들고
posts.js 파일 생성. 이후 아래 참조.
//getSortedPostsData 가져온다.
import { getSortedPostsData } from "../../lib/post"
export default function handler(req, res) {
const allPostsData = getSortedPostsData()
res.status(200).json({allPostsData})
}
이후 index.js로.. 여기서 getSortedPostsData import를 제거해줘야 한다.
import Head from 'next/head'
import { useEffect } from 'react'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import React, { useState } from 'react';
//ssr로 바꾸고 싶으면 getServerSideProps로 바꾸면 끝임
//export async function getStaticProps() {
//ssg Data가 담겨져 있다.
//const allPostsData = getSortedPostsData()
//return {
//ssg가 담겨있는 props retrun
//props: {
//allPostsData,
//},
//}
//}
//CSR로 바꾸는 방법.
export default function Home() {
const [allPostsData, setAllPostsData] = useState([])
useEffect(()=>{
//posts에서 response가 오면 json으로 바꿔주고.data가 오면 A
fetch('/api/posts')
.then((res) => res.json())
.then((data) => setAllPostsData(data.allPostsData))
}, [])
return (
{siteTitle}
I love coding 😍
(This is a sample website - you’ll be building a site like this on {' '} our Next.js tutorial.)
Blog
{title} {id} {date}
)
}
//allPostsData를 map으로 돌면서 id key로 주고 title,id(파일이름),date를 준다.
이렇게 CSR로 바꾸면 File System에서 읽은 값들이 Client Network tap에 보인다.
