1. 재귀 함수?

• 재귀 함수는 자기 자신을 다시 리턴하는 재귀 함수를 가지는 자기 자신을 다시 리턴하는 재귀 함수를 가지는 자기 자신을 다시 리턴하는 재귀 함수를 가지는 자기 자신을 다시 리턴하는 재귀 함수를 가지는...
• 자기 자신을 다시 리턴하는 함수이다.
• 이게 무슨 의미인가?
  • 반복문과 똑같이 작동한다.
  • 반복문처럼 '조건'을 가지고 그 조건에 맞으면 함수를 끝내게 된다.
  • 가독성이 다른 반복의 코드보다 좋다.

2. 예시

• 한동안 우리를 한참 괴롭히던 피보나치 함수의 재귀 함수 버전이다.

function fibonacci(num) {
  if(num === 0) {
    return 0;
  } else if(num === 1) {
    return 1; // 앞의 if와 else if로 탈출 조건을 만들어 주었다.
  } else {
    num = fibonacci(num - 2) + fibonacci(num - 1) // 우리가 원하는 답을 다시  num에 넣는다.
    return num;
  }
}

• 반복문 버전보다 훨씬 간단하다.
• 하지만 효율적이지는 않다. 계속해서 함수를 불러오기 때문에 스택에 무리가 간다.

3. 재귀 함수를 어떻게 쓸 수 있을까?

입력값과 출력 값을 확인한다.

• 어떤 입력을 받아서 출력을 하는지를 정확히 알아야 함수가 리턴하는 값이 다시 자신으로 들어와 작동할 수 있는지를 알아야 한다.

문제를 쪼개서 생각한다.

• 입력값을 기준으로 경우의 수를 생각해 본다.
• 원하는 답으로 가기 위해 한 단계씩 진행되는 과정을 생각해 본다.

탈출 지점 만들기

• 재귀 함수를 돌다가 원하는 답이 리턴되는, 즉, 가장 작은 단위로 해결된 결과를 리턴한다.
• 이를 base case라고 한다.

문제를 계속 쪼개어 준다.

• 더 작은 단위로 문제를 쪼개어 준다. 재귀함수를 탈출하지 못하고 돌 때마다 해결해야 할 문제가 계속 줄어드는 것이다.
• 이를 recursive case라고 한다.

대충은 알겠지만 계속 사용해 보아야 부족함 없이 쓸 수 있을 것 같다. 재귀 함수는 반복문으로 사용할 수 도 있는데 이것도 생각을 해 보아야 할 문제이다.

1. 문제의 발단

• 지금도 계속 헷갈리고 있는 재귀함수를 사용하기 위해 일반적으로 사용되는 탬플릿을 외운다
• 아직 문제를 계속 풀고 있어서 다른 블로깅은 하지 못 할것 같다.

function 재귀함수(처음 입력받거나, 아까 받은 값) {

let [head, ...tail] = arr; // 배열의 가장 앞의 arr[0]를 head, 나머지 요소를 배열안에 tail로 담는다.

	if('탈출 조건') {
		return '마지막에 리턴하게 될 답'
	} else {
		return 재귀함수(다시 매게변수로 넘겨줄 값)
	}
 }

1. class

• 구성이 비슷한 여러 개의 객체를 만들려고 할 때 사용하는 ''blueprint"가 된다.
• 예를 들어, 게임 캐릭터의 스킬을 정리해 놓은 리스트를 만들려고 한다.

const Garrosh = {
	passiveSkill : 'Armor Up',
    q : 'Groundbreaker',
    w : 'Bloodthirst',
    e : 'Wrecking Ball',
}

const Artanis = {
	passiveSkill : 'Shiield Overload',
    q : 'Blade Dash',
    w : 'Twin Blades',
    e : 'Phase Prism',
}

const ...

• 이런 식으로 만들다가는 끝이 없을 것이다.
• 그렇기 때문에 class를 이용한 객체를 만들 수 있는 생성자를 만들 것이다.

class Hero {
	constructor(passiveSkill, q, w, e) { //constructor를 하나 만들어서 매개변수들을 정해준다.
		this.passiveSkill = passiveSkill;
        	this.q = q;
        	this.w = w;
        	this.e = e;
	}
}

const Nova = new Hero('Permanent Cloak', 'Snipe', 'Pinning Shot', 'Holo Decoy');

// Nova === Hero {
//	  passiveSkill : 'Permanent Cloak',
//    q : 'Snipe',
//    w : 'Pinning Shot',
//    e : 'Holo Decoy',
// }

• 이는 ES6 문법에서부터 적용된다. 과거의 방법인 함수를 만드는 방법도 있다.

function Hero(passiveSkill, q, w, e) { // 첫번째 글자는 대문자로 쓴다.
	this.passiveSkill = passiveSkill;
    this.q = q;
    this.w = w;
    this.e = e;
}

const Diablo = new Hero('Black Soulstone', 'Shadow Charge', 'Fire Stomp', 'Overpower');

// Diablo === Hero {
//	  passiveSkill : 'Black Soulstone',
//    q : 'Shadow Charge',
//    w : 'Fire Stomp',
//    e : 'Overpower',
// }

• 위의 class와 똑같이 작동하게 된다. 이렇게 간단하게 계속 캐릭터 정보를 입력할 수 있다.
• 즉, 엄청난 재사용성을 가지게 된다.
• 함수와 같은 모든 타입의 데이터도 넣을 수 있다.
• 이렇게 생성된 객체들을 'instances'라고 한다.

2. prototype

• 이때, 생성자를 만들면 생성된 자식 object에는 'prototype'이 생성된다. 만들지 않아도 자동으로 생긴다.
• 간단하게 '유전자'라고 생각하면 된다. 부모가 자식에게 물려주는 것이기 때문이다. 그래서 위의 예시에 Hero에 prototype에 키와 값을 주면 모든 자식에게 영향을 주게 된다.

Hero.prototype.gameTitle = 'Heroes of the Storm'

// Nova.gameTiltle === 'Heroes of the Storm'
// Diablo.gameTitle === 'Heroes of the Storm'

• 이렇게 숨겨진 prototype에는 우리가 매번 사용하던 기본 함수들이(ex: length, sort 등등) 이미 저장되어 있다.
• 우리가 평상시에 한 자료를 만들 때 그 타입에 따라 const arr = [1, 2, 3, 4,]로 만들지만, const arr = new Array(1, 2, 3, 4,)로도 만들 수 있다. 똑같은 방식이다. 말하자면, 위에서 보았던 Hero와 Array는 똑같은 역할을 하게 되는 것이다!
• 그러므로, Array에 prorotype에 있던 각각의 기본 함수들을 그대로 새로 만든 arr에서도 사용할 수 있게 된다.
• 이를 그대로 응용하면, 우리는 새로운 기본 함수를 Array.prototype.funcA = function() {...}과 같은 식으로 만들어 줄 수 도 있다!

3. OOP

 객체지향 프로그래밍의 주요 콘셉트이다.

1. 캡슐화(Encapsulation)
   • 데이터를 어떠한 기능이 동작하면 조작할 수 있도록 연결하는 것.
   • 데이터를 일부러 은닉시키기도 한다.
2. 추상화(Abstraction)
   • 내부 기능은 복잡하게 되어 있을지 몰라도, 우리가 보는 환경에는 단순하게 하여 사용자로 하여금 이용을 편하게 할 수 있게 한다.
   • 옛날에 만들었던 계산기를 생각해 보자. 겉으로 보기에는 사칙연산의 혼합이 가능하거나 소수점 계산이 가능하더라도 생긴 건 불가능한 계산기와 똑같고, 단순하게 숫자와 연산자로 이루어진 모습이다.
3. 상속(Inheritance)
   • 말 그대로 상속. 부모의 속성과 특징을 자식에게 물려주는 것이다. 위의 예시로 보았듯이, 부모가 가지고 있던 속성을 자식에게 줄 수 있다. 공통되는 부분을 가직 자식 객체들의 똑같은 부분을 계속 적어줄 필요가 없다.
4. 다양성(Polymorphism)
   • 상속받은 자식들 중에 하나에만 다른 속성을 추가하거나 수정하고 싶을 때는 필요한 함수만, 혹은 속성만 뽑아서 수정하면 된다. 각각 하나하나 따로 수정을 해 줄 필요가 없다.

1. 사건의 발단

• 코드를 짜기 전에 수도 코드를 쓰게 된다. 이것처럼 모든 일에는 계획이 중요하다. 그래서 노션을 사용해 짜는 습관을 들이려고 한다.

2. 슬레시의 사용

• 노션에서 슬레쉬는 명령어 키이다.
• 블로그 글 쓸 때처럼 리스트를 작성하거나, 체크박스를 만들거나, 스타일도 바로 넣을 수 있다.
• 이미지, 동영상, 깃 헙도 바로 연결할 수 있다.
• 토글을 활용해서 글을 줄여보자. 매우 깔끔하겠지?
• 주 용한 내용은 콜 아웃으로 강조한다.

3. 트렐로

• 프로젝트의 형태로 진행과정을 공유하게 된다.
• 이걸로 프로젝트 진행상황을 공유하는 기업들이 많다고 한다. 사용하면서 익숙해지면 될 것 같다.

4. 템플릿

• 디자인적인 요소 모든 것을 저장해 두고 언제든지 꺼내 쓸 수 있다.
• 템플릿을 이용해 아주 다양한 폼들을 받아와서 아예 기업 홈페이지를 없애고 노션을 사용해 대체하기도 한다. 엡에서 공유를 설정해 놓으면 팀이 아닌 인원도 볼 수 있는 홈페이지가 되기 때문이다. 심지어 구글에 검색도 된다!
• 템플릿은 자신이 직접 만들어 쓸 수 도 있다.

간단하게 노션에 대해 정리해 보았다. 일단 사용하면서 여기저기에 사용해 봐야 익숙해질 것 같다.