OOP

1. 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ° (Object-Oriented Programming)?

❗️ ν”„λ‘œκ·Έλž¨μ„ μˆ˜λ§Žμ€ 객체 (Object)둜 λ‚˜λˆ„κ³ ,κ·Έ κ°μ²΄λ“€κ°„μ˜ μƒν˜Έμž‘μš©μ„ ν†΅ν•˜μ—¬ λ‘œμ§μ„ κ΅¬μ„±ν•˜λŠ” 것

이라고 μ •μ˜λ˜μ–΄ μžˆλŠ”λ° 처음 봀을 λ•ŒλŠ” 이해가 잘 μ•ˆκ°€μ„œ λͺ‡λ²ˆμ„ λ‹€μ‹œ λ΄€λŠ”μ§€ λͺ¨λ₯΄κ² λ‹€. 사싀 λ‚΄κ°€ μ§€κΈˆκ» κ³΅λΆ€ν•˜κ³ , μž‘μ„±ν–ˆλ˜ μ½”λ“œκ°€ λͺ¨λ‘ 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°μ΄λ‹€.

ν˜„μž¬ 진행쀑인 λΈ”λ‘œκ·Έ ν”„λ‘œμ νŠΈμ˜ 폴더이닀.

ν”„λ‘œκ·Έλž¨μ„ κ΅¬μ„±ν•˜λŠ” νŒŒμΌλ“€μ„ 크게 역할에 따라 ν΄λ”λ‘œ λ‚˜λ‰˜μ–΄ μžˆλŠ”κ²ƒμ„ 확인 ν•  수 μžˆλ‹€. pages ν΄λ”μ—λŠ” 각 νŽ˜μ΄μ§€κ°€ λ‚˜νƒ€λ‚΄μ•Ό ν•  ν•­λͺ©λ“€μ„ ν”„λ‘œκ·Έλž˜λ° ν•˜λŠ”λ°, 각 νŒŒμΌλ“€μ€

export const getServerSideProps: GetServerSideProps = async (context) => {
  const category = context.query.category;
  const res = await axios.get(url, {
    withCredentials: true,
  });
  return { props: { data: res.data } };
};

export default function Project({ data }: any) {
  const router = useRouter();

  const category_query = router.query.category;
  return (
    <>
      <header className="ex-header">
      .
      .
      .

μ΄λ ‡κ²Œ μ—¬λŸ¬ ν•¨μˆ˜λ“€λ‘œ 이루어져 있고, κ·Έ ν•¨μˆ˜μ•ˆμ—λŠ” λ³€μˆ˜, λ©”μ„œλ“œ λ“± μ—¬λŸ¬ 객체둜 이루어져 μžˆλ‹€.

μœ„μ—μ„œ μ •μ˜λœ 말을 ν•œλ²ˆ λ‹€μ‹œ 보자. ν”„λ‘œκ·Έλž¨μ„ μˆ˜λ§Žμ€ 객체 (Object)둜 λ‚˜λˆ„κ³ ,κ·Έ κ°μ²΄λ“€κ°„μ˜ μƒν˜Έμž‘μš©μ„ ν†΅ν•˜μ—¬ λ‘œμ§μ„ κ΅¬μ„±ν•˜λŠ” 것

λ™μΌν•˜λ‹€.

λΈ”λ‘œκ·Έλ₯Ό κ΅¬μ„±ν•˜λŠ” ν”„λ‘œκ·Έλž¨μ€ μ—„μ²­λ‚˜κ²Œ λ§Žμ€ ν•¨μˆ˜λ“€λ‘œ 이루어져 있고, κ·Έ ν•¨μˆ˜μ•ˆμ—λŠ” μ‚¬μš©λ˜λŠ” λ³€μˆ˜λ‚˜ λ©”μ„œλ“œ 객체듀이 μ •μ˜λ˜μ–΄ μ„œλ‘œ μƒν˜Έμž‘μš©ν•˜λ©° ν”„λ‘œκ·Έλž¨μ˜ λ‘œμ§μ„ κ΅¬μ„±ν•œλ‹€.

μ‰½κ²Œ λ‹€μ‹œ λ§ν•˜λ©΄ 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°μ€ ν”„λ‘œκ·Έλž¨μ„ κ°μ²΄λ“€μ˜ λͺ¨μž„μœΌλ‘œ λ³΄λŠ”κ²ƒμœΌλ‘œ μ΄ν•΄ν–ˆλ‹€

2. 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ νŠΉμ§•

2 - 1. 좔상화

μ •μ˜λ₯Ό λ¨Όμ € 보자면

κ°μ²΄μ—μ„œ κ³΅ν†΅λœ 속성과 ν–‰μœ„λ₯Ό μΆ”μΆœν•˜λŠ” 것

μ—­μ‹œλ‚˜ μ •μ˜λ§Œ λ³΄κ³ λŠ” ν•œλˆˆμ— μ΄ν•΄ν•˜κΈ°λŠ” νž˜λ“  것 κ°™λ‹€. κ°„λ‹¨ν•œ 예λ₯Ό λ“€μ–΄ μ΄ν•΄ν•΄λ³΄μž

좔상화

μ•„μš°λ””, λ‹ˆμ‹Ό, λ³Όλ³΄λŠ” λ‹€λ₯Έ μ™Έν˜•, λ‹€λ₯Έ λ‚΄λΆ€ ꡬ성을 μ§€λ…”μ§€λ§Œ κ²°κ΅­ 같은 μžλ™μ°¨μ΄λ‹€. μžλ™μ°¨κ°€ κ°€μ§€λŠ” 곡톡적인 νŠΉμ§•(μ „μ§„, ν›„μ§„, 브레이크 λ“±)을 κ°€μ§„ 각기 λ‹€λ₯Έ 객체라고 λ³Ό 수 μžˆλ‹€. 좔후에 λ‹€λ₯Έ μžλ™μ°¨ λΈŒλžœλ“œκ°€ μΆœμ‹œ λ˜λ”λΌλ„ μžλ™μ°¨λΌλŠ” 객체가 κ°–λŠ” 곡톡적인 νŠΉμ§•μ€ κ°€μ§€κ³  μΆœμ‹œ λœλ‹€.

μ•„μš°λ””, λ‹ˆμ‹Ό, 볼보 (객체듀)μ—μ„œ κ³΅ν†΅λœ 속성(μžλ™μ°¨)와 ν–‰μœ„(μ „/ν›„μ§„, 브레이크 λ“±)을 μΆ”μΆœν•˜λŠ” 것. 이것이 좔상화이닀.

2 - 2. μΊ‘μŠν™”

μΊ‘μŠν™”μ˜ μ •μ˜ λ¨Όμ € ν™•μΈν•΄λ³΄μž

객체에 λŒ€ν•œ ꡬ체적인 정보λ₯Ό λ…ΈμΆœμ‹œν‚€μ§€ μ•Šλ„λ‘ ν•˜κΈ° μœ„ν•΄ 데이터 ꡬ쑰와 데이터λ₯Ό λ‹€λ£¨λŠ” 방법듀을 κ²°ν•©μ‹œμΌœ λ¬ΆλŠ” 것 || λΉ„μŠ·ν•œ 역할을 ν•˜λŠ” 속성과 λ©”μ„œλ“œ 듀을 ν•˜λ‚˜μ˜ ν‹€(클래슀)에 λ¬ΆλŠ” 것

아직은 λ­”μ§€ 잘 λͺ¨λ₯΄κ² μ§€λ§Œ 무엇인가λ₯Ό λ¬ΆλŠ” 것인거 κ°™λ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ κ°„λ‹¨ν•œ μ˜ˆμ‹œλ₯Ό λ“€μ–΄λ³΄μž

var Score = function(math, eng){
	var coef = 1.2

    this.getMath = function(){
    	return math * coef
    }

    this.getEng = function(){
    	return eng * coef
    }
}

var my_score = new Score()

console.log(my_score.getMath(80,60))
console.log(my_score.coef) //undefined

μœ„μ˜ μ½”λ“œλ₯Ό 보면 Score둜 μ„ μ–Έλœ μƒμ„±μž ν•¨μˆ˜ μ•ˆμ— getMath와 getEngλΌλŠ” λ©”μ„œλ“œλŠ” this둜 μ„ μ–Έλ˜μ–΄ 객체의 ν”„λ‘œνΌν‹°λ‘œ μ μš©λ˜μ–΄ μƒμœ„ λ ˆλ²¨μ—μ„œλ„ μ°Έμ‘°κ°€ κ°€λŠ₯ν•˜λ‹€. ν•˜μ§€λ§Œ coefλΌλŠ” λ³€μˆ˜λŠ” 접근이 λΆˆκ°€λŠ₯ν•˜λ‹€.

μΊ‘μŠν™”λ₯Ό ν†΅ν•˜μ—¬ coefλΌλŠ” 객체의 μ€‘μš”ν•œ λ³€μˆ˜λ₯Ό 숨기기 μœ„ν•΄ ScoreλΌλŠ” ν•˜λ‚˜μ˜ 객체둜 λ¬Άμ—ˆλ‹€κ³  λ³Ό 수 μžˆλ‹€.(μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν΄λ‘œμ € μ°Έμ‘°)

2 - 3. 상속

μ˜€λžœλ§Œμ— μ΅μˆ™ν•œ 단어가 λ‚˜μ™”μ§€λ§Œ μ—­μ‹œ μ •μ˜ λ¨Όμ € ν™•μΈν•΄λ³΄μž

클래슀의 속성과 ν–‰μœ„λ₯Ό ν•˜μœ„ ν΄λž˜μŠ€μ— λ¬Όλ €μ£Όκ±°λ‚˜ ν•˜μœ„ ν΄λž˜μŠ€κ°€ μƒμœ„ 클래슀의 속성과 ν–‰μœ„λ₯Ό λ¬Όλ €λ°›λŠ” 것

λ‹€ν–‰νžˆλ„ λ‚΄κ°€ μ•Œκ³ μžˆλŠ” 상속과 같은 μ˜λ―Έλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” extendsλ₯Ό μ‚¬μš©ν•˜μ—¬ μƒˆλ‘œ μƒμ„±λ˜λŠ” μžμ‹ ν΄λž˜μŠ€κ°€ λΆ€λͺ¨ 클래슀의 속성을 κ·ΈλŒ€λ‘œ 이어받아 μ‚¬μš© ν•  수 μžˆλ‹€.

2 - 4. λ‹€ν˜•μ„±

ν•˜λ‚˜μ˜ λ³€μˆ˜λͺ…, ν•¨μˆ˜λͺ…이 상황에 따라 λ‹€λ₯Έ 의미둜 λ³€ν˜•ν•  수 μžˆλ‹€λŠ” 것

μ‰½κ²Œ λ§ν•΄μ„œ, ν•œ 객체의 속성/κΈ°λŠ₯이 λ§₯락에 따라 λ‹€λ₯Έ 역할을 μˆ˜ν–‰ ν•  수 μžˆλ‹€λŠ” 것이닀. λŒ€ν‘œμ μΈ μ˜ˆλ‘œλŠ” λ©”μ„œλ“œ μ˜€λ²„λΌμ΄λ”©μ΄ μžˆλ‹€.

μ˜€λ²„λΌμ΄λ”©(Overriding) : μžμ‹ ν΄λž˜μŠ€μ—μ„œ λΆ€λͺ¨ 클래슀의 κΈ°λŠ₯을 μž¬μ •μ˜ ν• λ•Œ μ‚¬μš©λ˜λŠ” κΈ°λŠ₯

κ°„λ‹¨ν•œ μ½”λ“œ μ˜ˆμ‹œλ₯Ό 보자

function testScore(math, eng){
	this.math = math;
    this.eng = eng
};

testScore.prototype.getScore = function(){
	return `My Math score is ${this.math}, English Score is ${this.eng}`
};

function Score (math, eng, korean){
	this.math = math;
    this.eng = eng
	this.korean = korean
}
Score.prototype = new testScore();

// getScoreλ₯Ό μƒμ†ν•œ μžμ‹μ—μ„œ μž¬μ •μ˜
Score.prototype.getScore = function(){
return `My Math score is ${this.math}, English Score is ${this.eng} and Korean Score is ${this.korean}`
}

testScoreλΌλŠ” λΆ€λͺ¨ ν΄λž˜μŠ€μ—μ„œ μ •μ˜λœ getScoreλΌλŠ” λ©”μ„œλ“œκ°€ testScoreλ₯Ό μƒμ†ν•œ μžμ‹ ν΄λž˜μŠ€μ—μ„œ μž¬μ •μ˜ λ˜μ—ˆλ‹€.

즉, ν•˜λ‚˜μ˜ ν•¨μˆ˜λͺ… (getScore)κ°€ μžμ‹μ—κ²Œ μƒμ†λ˜μ–΄ μž¬μ •μ˜λ¨μœΌλ‘œμ¨, λ‹€λ₯Έ 값을 κ°€μ§€κ²Œ λ˜μ—ˆλ‹€.

3. 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ μž₯/단점

μœ„μ—μ„œ μ‚΄νŽ΄λ³Έ 4κ°€μ§€μ˜ νŠΉμ§•μ€ λ² μ΄μŠ€λ‘œν•œ 객체 μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ μž₯/단점을 μ‚΄νŽ΄λ³΄μž

3 - 1. μž₯점

λ¨Όμ € 좔상화λ₯Ό 톡해 객체 λ‹¨μœ„λ‘œ λͺ¨λ“ˆν™”ν•˜μ—¬ ν”„λ‘œκ·Έλž¨μ„ μ„€κ³„ν•˜κΈ° λ•Œλ¬Έμ—, 업무 뢀담이 쀄어듀고 μ΄λ‘œμΈν•΄ λŒ€κ·œλͺ¨ ν”„λ‘œκ·Έλž˜λ°μ— μ ν•©ν•˜λ‹€.

λ˜ν•œ, 상속과 λ‹€ν˜•μ„±μ„ ν†΅ν•˜μ—¬ μ½”λ“œ μž¬μ‚¬μš©μ΄ μš©μ΄ν•˜μ—¬ ν”„λ‘œκ·Έλž¨μ˜ μœ μ§€λ³΄μˆ˜κ°€ νŽΈν•΄μ§„λ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ μΊ‘μŠν™”λ₯Ό ν†΅ν•˜μ—¬ 곡개λ₯Ό μ›μΉ˜ μ•ŠλŠ” 정보λ₯Ό 은닉할 수 있기 λ•Œλ¬Έμ— λ³΄μ•ˆμ„± μΈ‘λ©΄μ—μ„œ 높은 수치λ₯Ό λ‚˜νƒ€λ‚Έλ‹€.

3 - 2. 단점

κ°μ²΄λ“€μ˜ μƒν˜Έμž‘μš©μœΌλ‘œ ν”„λ‘œκ·Έλž¨μ΄ κ΅¬μ„±λ˜κΈ°μ— 초기 μ„€κ³„μ˜ λ‚œμ΄λ„κ°€ μ˜¬λΌκ°„λ‹€. λ˜ν•œ, ν”„λ‘œκ·Έλž¨μ˜ λͺ¨λ“ κ²ƒμ΄ 객체이기 λ•Œλ¬Έμ— 좔가적인 ν¬μΈν„°μ˜ 크기와 λ©”λͺ¨λ¦¬ 연산에 λŒ€ν•œ λΉ„μš©μ΄ λ“€μ–΄κ°„λ‹€.

4. 객체 μ§€ν–₯ 섀계 원칙 (SOLID)

λ§ˆμ§€λ§‰μœΌλ‘œ 객체 μ§€ν–₯ 섀계원칙 5개λ₯Ό μ‚΄νŽ΄λ³΄κ³  포슀트λ₯Ό 마무리 ν•˜κ² λ‹€.

4 - 1. 단일 μ±…μž„ 원칙 (Single Responsibility Principle)

λͺ¨λ“  ν΄λž˜μŠ€λŠ” ν•˜λ‚˜μ˜ μ±…μž„μ„ κ°€μ Έμ•Ό ν•œλ‹€. 즉, ν΄λž˜μŠ€λŠ” κ·Έ μ±…μž„μ„ μ™„μ „νžˆ μΊ‘μŠν™” ν•΄μ•Ό ν•œλ‹€. κ°„λ‹¨νžˆ 말해, `ν•˜λ‚˜μ˜ ν΄λž˜μŠ€λŠ” ν•˜λ‚˜μ˜ κΈ°λŠ₯λ§Œμ„ μˆ˜ν–‰ν•΄μ•Ό ν•œλ‹€λŠ” 것이닀.

4 - 2. 개방 / 폐쇄 원칙 (Open/Closed Principle)

기쑴의 μ½”λ“œλŠ” λ³€ν•˜μ§€ μ•ŠμœΌλ©΄μ„œ (Closed) κΈ°λŠ₯을 μΆ”κ°€ ν• μˆ˜ μžˆλ„λ‘(Open) 섀계가 λ˜μ–΄μ•Ό ν•œλ‹€λŠ” 원칙이닀.

4 - 3. λ¦¬μŠ€μ½”ν”„ μΉ˜ν™˜ 원칙(Liskov Substitution Principle)

μ„€κ³„λ˜λŠ” ν”„λ‘œκ·Έλž¨μ˜ κ°μ²΄λŠ” 정확성을 κΉ¨λœ¨λ¦¬μ§€ μ•Šμ€μ±„ ν•˜μœ„ νƒ€μž…μ˜ μΈμŠ€ν„΄μŠ€λ‘œ μΉ˜ν™˜λ μˆ˜ μžˆμ–΄μ•Ό ν•œλ‹€.

κ°„λ‹¨νžˆ 말해 μžμ‹ ν΄λž˜μŠ€λŠ” μ–Έμ œλ“ μ§€ λΆ€λͺ¨ 클래슀λ₯Ό λŒ€μ²΄ ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€λŠ” 말이닀. λΆ€λͺ¨ 클래슀 μžλ¦¬μ— μžμ‹ 클래슀λ₯Ό 넣어도 이상 없이 잘 μž‘λ™ν•΄μ•Ό ν•œλ‹€.

4 - 4. μΈν„°νŽ˜μ΄μŠ€ 뢄리 원칙 (Interface Segregation Principle)

λ²”μš©μ μΈ μΈν„°νŽ˜μ΄μŠ€ ν•˜λ‚˜λ³΄λ‹€ ν΄λΌμ΄μ–ΈνŠΈλ₯Ό μœ„ν•œ μ—¬λŸ¬κ°œμ˜ μΈν„°νŽ˜μ΄μŠ€κ°€ λ‚«λ‹€λŠ” 원칙이닀. ν΄λΌμ΄μ–ΈνŠΈκ°€ ν•„μš”λ‘œ ν•˜λŠ” μΈν„°νŽ˜μ΄μŠ€λ₯Ό λΆ„λ¦¬ν•˜μ—¬ 각각의 ν΄λΌμ΄μ–ΈνŠΈκ°€ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μΈν„°νŽ˜μ΄μŠ€μ— 변경이 μžˆμ–΄λ„ 영ν–₯을 λ°›μ§€ μ•Šλ„λ‘ λ§Œλ“€μ–΄μ•Ό ν•œλ‹€

4 - 5. 의쑴 관계 μ—­μ „ 원칙 (Dependency Inversion Principle)

의쑴 관계λ₯Ό λ§Ίμ„λ•Œ, λ³€ν™”κ°€ μ‰¬μš΄ 것보닀 λ³€ν™”ν•˜κΈ° μ–΄λ €μš΄κ²ƒμ— μ˜μ‘΄ν•˜λΌλŠ” 원칙 즉, ꡬ체적인 ν΄λž˜μŠ€λ³΄λ‹€, μΆ”μƒν™”λ‚˜ μΈν„°νŽ˜μ΄μŠ€μ— μ˜μ‘΄ν•˜λΌλŠ” 것

Last updated