💡 이번에 배운 내용
- Section3. 사용자 친화적이고 안전한 Web App을 만들 수 있다.
- Unit 1. [자료구조/알고리즘] 재귀: 재귀를 학습하고 연습하면서, 이를 활용할 수 있다.
느낀점
내용 자체는 많지도 않고 블로깅 하는데도 큰 시간이 걸리지 않았지만, 연습 문제를 풀거나 과제를 할 때 꽤나 난이도가 있었던 유닛이었다. 특히 레퍼런스를 보며 아직 공부가 부족함을 느꼈다. 최대한 익숙해지자!
특히 stringify를 직접 구현해보는 과제는 정말 이번 유닛의 꽃이라 할 만 했다.
코딩테스트 실력 향상을 위해서라도 재귀는 잘 연습해두어야 겠다.
키워드
재귀함수, recursive case, base case, JSON, JSON.stringify, JSON.parse, 직렬화(serialize), 역직렬화(deserialize)
학습내용
Ch1. 재귀의 이해
재귀란 원래의 자리로 되돌아온다는 의미로,
자바스크립트에서 재귀함수는 다음과 같이 자기자신을 호출하는 함수이다.
function replay(){
replay();
}재귀함수를 잘 이용하면 반복작업을 좀 더 효율적으로 처리할 수 있다.
► 재귀는 언제 사용할까?
- 주어진 문제를 같은 형식을 가진 작은 문제로 나눌 수 있는 경우
- 중첩된 반복문이 많고 중첩횟수가 많아지거나 예상이 힘든 경우
► 재귀로 문제푸는 방법
말이야 쉽지... 일단은 여러 번 해봐야 익숙해지는데 어느 정도 문제푸는 규칙이 있다.
- 재귀함수의 입력값, 출력값 정의하기
- 문제를 작개 쪼개기
- 경우의 수 구분하기 - 가장 쉬운 경우, 그렇지 않은 경우
- 가장 쉬운 경우 해결하기 - 재귀의 기초(base)이자 탈출 조건
- 그렇지 않은 경우 해결하기 - 재귀의 recursive
...일단 제쳐두고
만약 팩토리얼(factorial. n!)을 구하는 함수 fact가 있다고 가정하자.
함수를 구하기 전, 팩토리얼은 무엇인가? 생각해본다.
팩토리얼은 1부터 n까지의 곱으로 만약 n!이라고도 표현한다.
식을 풀어보면 다음과 같다.
4!=1*2*3*4
이 식을 활용해서 잘게 쪼개보자. 나같은 수알못에게는 가장 쉬운 것 - 무조건 0이나 1부터 다 써보는 것이 이해에 좋다.
1!=1
2!=1*2
3!=1*2*3
4!=1*2*3*4
음 이렇게 나열해보니 어느 정도 패턴이 보인다.
이 패턴으로 정리해보면
1!=1
2!=1*2 -> 2!=1!*2
3!=1*2*3 -> 3!=2!*3
4!=1*2*3*4 -> 4!=3!*4
이렇게 문제가 쪼개지는 것을 알 수 있다.
그럼 이 사실을 안 채로, 팩토리얼 함수 fact를 만드는 과정을 위의 규칙에 적용해보자.
- 재귀함수의 입력값, 출력값 정의하기
필요한 값은 1부터 '몇'까지 구했을 때의 '값'을 구하는 것이다.
'몇'은 n, '값'은 n!이 될 것이니까
fact 재귀함수의 입력값은 n, 출력값은 n! 이다. - 문제를 작개 쪼개기
위에서 이미 잘 쪼개 놓았다. - 경우의 수 구분하기 - 가장 쉬운 경우, 그렇지 않은 경우
위에서 쪼개놓은 것을 토대로 가장 쉬운 경우, 그렇지 않은 경우를 나눠야 한다.
1!=1
2!=1*2->2!=1!*2
3!=1*2*3->3!=2!*3
4!=1*2*3*4->4!=3!*4
여기서 가장 쉬운1!=1을 제외하고 나머지의 패턴은 비슷해 보인다.
그럼 가장 쉬운 경우와 나머지로 경우를 나누되,
가장 쉬운 경우를 base, 나머지를 recursive 라고 한다. - 가장 쉬운 경우 해결하기 - 재귀의 기초(base)이자 탈출 조건
가장 쉬운1!=1이 해결할 게 뭐가 있는가??
근데 왜 이 쉬운 것에 주목해야 하냐면, 이 쉬운 경우인 base가 바로 재귀의 기초이자 탈출 조건이 되기 때문이다.
재귀함수는 별다른 조건이 없으면 자기 자신을 끝없이 호출한다.
그래서 이 재귀를 탈출시키기 위한 base가 필요하다.
base를 제외한 나머지는 계속 같은 패턴으로 호출될 것이므로
base만 다음처럼 조건 처리한다.
if(n===1) return 1;- 그렇지 않은 경우 해결하기 - 재귀의 recursive
쉬운 경우를 제외한 나머지 recursive는 반복된다.
2!=1*2->2!=1!*2
3!=1*2*3->3!=2!*3
4!=1*2*3*4->4!=3!*4
이 패턴을 정리해보면n!=(n-1)!*n이다.
근데 아까 재귀함수 fact(n)의 값은 n! 이고,
fact(n-1)!의 값도 n-1!일 것이다.
그렇다면 fact(n)! 함수가 리턴해야 하는 값은 아래와 같을 것이다.
return fact(n-1)!*n위 내용을 정리하여 fact함수를 최종 정리하자면 다음과 같다.
function fact(n) {
// base : 가장 쉬운 경우
if (n===1) {
return 1;
}
// recursive : 그렇지 않은 경우
return fact(n-1)!*n;
}► 재귀함수 template
위의 예시를 토대로, 앞으로 문제풀 때 재귀함수를 다음 template처럼 놓고 연습하면 편하다.
function 재귀함수(input1, input2, ...) { // base case : 가장 쉬운 경우. if (가장 쉬운 경우의 조건) { return 가장 쉬운 경우의 값; } // recursive case : 그렇지 않은 나머지 경우 return 나머지 경우의 값을 구하기 위한 패턴; }
Ch2. JSON 메서드
JSON(JavaScript Object Notation)은 데이터 통신을 위한 객체 형태의 데이터 포맷이다. 주로 네트워크 통신에 사용되며 형변환이 가능하며 문자열처럼 읽을 수 있다.
이 JSON이 뜬금없이 왜 재귀함수와 함께 나오냐면, JSON.stringify(), 즉 직렬화 메서드가 인자가 다차원 객체여도 모두 탐색하여 문자열로 변환해야 하는데 이 때 재귀함수가 사용되기 때문이다.
(그리고 타이밍이 요상할 뿐 사실 JSON은 중요한 개념이다.)
► JSON 메서드
자바스크립트의 객체는 JSON으로 변환이 가능하며 JSON은 객체로 변환이 가능하다.
이 때 사용하는 메서드는 다음과 같다.
- JSON.stringify : 직렬화(serialize).
객체를 JSON으로 변환한다. - JSON.parse : 역직렬화(deserialize).
JSON을 객체로 변환한다.
만약 자바스크립트의 객체를 발신할 때는 객체를 JSON으로,
수신할 때는 JSON을 객체로 변환해야 한다.
► JSON과 type
객체를 그냥 문자열로 변환하면 타입은 string이지만 값은[obejct Object]로 변한다.
때문에 내용을 유지한채 문자열로 바꾸려면 형태는 좀 다르지만 JSON 형태로 변환시켜야 한다.
- 객체 -> JSON으로 변환:
타입은string이며 값은 JSON형태로 변한 객체의 내용이 담겨있다.
ex)'{"name":"jean","age":22,"hasMoney":false}' - JSON -> 객체로 변환:
객체로 변환되었으니 당연히 타입은object이며 값은 무사히 객체로 변환된다.
► JSON 규칙
JSON은 자바스크립트의 객체와 비슷해 보이지만 다른 규칙을 가지고 있다.
'{"key":"value"}' '{"key":234}'
- 문자열은 반드시 큰따옴표로 감싸야 한다.
- 키는 반드시 쌍따옴표를 붙여야 한다.
- 키와 값 사이 공백이 없어야 한다.
- 키-값 쌍 사이 공백도 없어야 한다.
추가학습
1. JSON 공식문서
빡빡한 영어와 말이 필요없는 디자인, 숨막히는 이미지들로 구성되어 있어
쉽게 학습하라고 강력하게 추천할 수는 없지만 자세한 내용은 확인할 수 있다.
🔗 JSON
2. JSON viewer (chrome 확장프로그램)
json 데이터를 보기 쉽게 보여주는 확장프로그램이다. 네트워크 통신으로 받은 데이터를 볼 때 편하다.
🔗 JSON viewer 추가 페이지
3. 재귀 심화학습
아직 복습이 더 필요해 도전하지는 못했지만 심화학습으로 알아봐야할 목록을 아래와 같이 적어놓았다. 추후 레벨이 오르면 작성할 예정이다.
- 재귀 함수와 메모리 사용량 간의 관계 (javascript recursion memory leak)
- 꼬리 재귀 (tail recursion in js)
- 하노이의 탑 재귀 (js tower of hanoi in recursion)
- 조합 재귀 함수 (js combination in recursion)
