[초보자들] S70 스터디 첫번째 후기

짧게 느껴질 것 같은 6주간의 S70 강의가 시작되었습니다. 자바스크립트를 통해 프로그래밍의 기본 원리와 개념을 배우게 됩니다. 특히 이번엔 자바스크립트 언어의 기초(?)인 함수와 객체의 사용을 집중적으로 알려주신다니.. 너무 너무 기대가 됩니다!
알아갈수록 재밌고 신기하고 아름답기까지한 자바스크립트에 빠져보도록 하겠습니다.

Computer

이번 강의는 함수의 개념에 대한 내용이었습니다. 프로그래밍에서 함수를 배우기 전에 우리는 과연 컴퓨터가 무엇인지, 프로그램이 무엇인지는 알고 있는 걸까요?

강의 시작 후 실장님께서 말씀하셨습니다. 컴퓨터가 무엇이냐고.. 바로 대답하긴 힘들었습니다.
저의 주변 사람들에게도 물어봤습니다. ‘정보 검색하는 것’, ‘문서 편집하는 것’, ‘게임할 수 있는 것’, ‘계산할 수 있는 것’이라고 대답을 해주었습니다. 그 외에도 ‘출근하면 손이 가는 것’ 등 다양한 대답이 있었습니다.

우리는 컴퓨터를 노트와 펜 대신 문서 편집의 문제를 해결할 때 사용하기도 하고, 게임기 대신 심심함이라는 문제를 해결할 때 사용하기도 하고, 계산기 대신 복잡한 산술계산 문제를 해결할 때 사용합니다. 즉, 컴퓨터는 문제를 해결하는데 도움을 주는 기계입니다.

그렇다면 어떻게 도움을 받을까요?
바로 컴퓨터에서 나에게 필요한 프로그램을 더블 클릭해 메모리에 적재하고 실행을 하는 것이죠. 여기서 프로그램은 컴퓨터에게 ‘어떤일을 어떻게 처리하라’는 내용을 적어 놓은 것으로 이 내용들을 프로그램 명령이라고 부릅니다.
컴퓨터는 메모리에 적재된 프로그램의 명령을 한줄씩 읽어나가며 CPU(Central Processing Unit:중앙처리장치)나 AP(Application Processor:스마트폰, 태블릿 PC 등의 메인 칩)와 같은 처리장치를 통해 연산하고(①) 그 결과를 저장하는(②) 생각했던 것보다는 단순한 작업을 반복합니다. 그리고 이를 폰노이만 머신이라고 합니다.

< 폰 노이만 머신 >

Programming

이제 프로그램을 실행시켜 컴퓨터가 열심히 일을 할 수 있도록 우리는 프로그램을 만들면됩니다. 프로그래밍이 바로 프로그램을 만드는 행위입니다. ‘프로그래밍?! 컴퓨터한테 명령만 내리면 되는거 아냐?’

< ‘자연언어(한국어, 영어 등…)’로 명령을 해보자! >

컴퓨터는 2진수(0과 1로 구성된 수)밖에 알지 못 합니다. 그래서 자연언어를 이용하여 명령을 내려도 컴퓨터는 무슨 의미인지 모르죠. 이를 해결하기 위해 컴퓨터 프로그래밍 언어가 개발된 것입니다. 사람과 컴퓨터가 대화를 할 수 있도록 만든 언어인거죠. 자바스크립트도 그 중 하나이구요.
프로그래밍 언어 덕분에 프로그래머들은 좀 더 쉽게 Code를 작성해 원시 프로그램(Source Program)을 만들고 이를 번역기(Interpreter & Compiler)에 의해 Machine Language(2진수)로 변환된 프로그램이 만들어져 Run을 할 수 있게 되었습니다.

이제서야 컴퓨터가 무엇인지, 프로그램이 무엇인지, 프로그래밍 언어와 기계 언어라는 기본적인 개념을 알게된 것 같습니다.

우리에게 필요한 능력

요즘 컴퓨터만 있으면 웬만한 문제는 척척 해결할 수 있습니다. ( ͡° ͜ʖ ͡°)훗
저의 주머니에 500원짜리 동전이 7개 있습니다. 이 돈이 얼마인지 계산하는 것은 간단하죠. 5랑 7이랑 곱해서 뒤에 0을 두개붙이면 되잖아요? 그쵸?

< 컴퓨터는 구구단을 몰라요 >

저는 몰랐습니다. 수 많은 프로그램들이 너무 간단하게 문제를 해결한다고 느꼈기에 쉬울 것이라고 생각했습니다. ‘간단한 것이 결코 쉬운 것은 아니네요.’
그렇다면 우리는 복잡하고 어려운 문제를 어떻게 해결할 수 있을까요? 어떻게 단순하게 만들어 컴퓨터에 명령할 수 있을까요?

여기서 알 수 있었습니다. 우리에게 필요한 것이 무엇인지.
복잡하고 어려운 문제를 단순한 작업으로 세세하게 쪼갤 수 있는 센스! 빠밤!

복잡한 세상에서 생기는 문제들은 고작 주머니에 있는 돈 액수를 계산하는 것과는 비교가 안될 정도로 해결하기가 어렵습니다. 예를 들어 수천개의 기업과 수천명의 딜러와 수십만명의 거래자가 사용하는 증권거래시스템을 뚝!딱! 해결하는 것은 감히 제 두뇌로는 감당할 수 없습니다ㅠㅠ 도망이라도 가야하나요..

어떻게하면 큰 문제를 작은 문제로 묶어내느냐가 도망가지않고 해결할 방법일 것입니다. 여기서 작은 문제로 묶어내는 것이 바로 함수입니다. 모든 어려운 문제를 함수라는 단위로 세세하게 묶어내면서 해결하는 것이죠. 그래서 우리는 이번 S70 강의를 통해 함수를 배우고 센스를 키워나가는 연습을 할 것입니다.

Function : 함수

컴퓨터에서 Function은 수학적 function에서 온 것입니다. 그게 무엇이냐고? y = f(x) 라는 함수식을 본 적이 있죠? 네. 이겁니다.
여기서 x(정의역 : 함수의 값이 정의된 집합)에 값을 넣으면 그 값에 따라 y(치역 : 출력되는 값의 집합)가 나오죠. 즉 들어가는 값이 있다면 나오는 값이 있는 것입니다. 이와 같이 Function에는 입력과 출력이 있습니다.

강의 때 보여주셨던 예제 구구단 출력 프로그램을 참고로 하여 Function을 살펴보도록 하겠습니다. 강의 예제. 구구단 코드 보러가기!
구구단의 1단부터 9단까지 출력하기 위해 반복문을 사용해 코드를 작성했습니다.

for (var i = 1; i <= 9; i++) {
     for (var j = 1; j <= 9; j++) {
          console.log(i, 'X', j, '=', i * j);
     }
}

문제를 쪼개서 함수로 분리하기 위해 문제가 무엇인지를 봅시다. 여기서 문제는 1단부터 9단까지를 출력하는데 각 단마다 1부터 9까지를 곱하는 것입니다. 문제가 무엇인지를 알았다고 한들 어느 부분을 쪼개야할지는 아직 센스 부족인 저는 감이 잡히지 않았지만, 어디에 집중해야할지를 알려주셨습니다. 바로 ‘각 단마다’에 집중을 합니다. 즉 ‘단마다 출력하기’라는 것을 분리했습니다.

var printDan = function(n) {
     for (var i = 1; i <= 9; i++) {
          console.log(n, 'X', i, '=', n * i);
     }
}

몇 단(n)인지를 입력받아 결과값으로 하나의 단을 출력하는 printDan이라는 함수가 만들어졌습니다. 1단부터 9단까지만 출력하는 문제를 입력받은 n이라는 값에 따라 1단이든 2단이든 20단이든 상관없이 출력하는 문제로 바뀌게 되었습니다.

for (var i = 1; i <= 9; i++) printDan(i); // 1단부터 9단까지 출력
printDan(20); // 20단만 출력
for (var i = 1; i <= 10; i += 2) printDan(i); // 홀수 단(1, 3, 5, 7, 9)을 출력

이렇게 특수한 문제를 일반적인 문제로 바꾸는 과정을 일반화(generic)시킨다고 합니다. 위의 간단해 보이는 예제를 통해서 일반화의 파워가 대단하다는 것을 조금이나마 느낄 수 있었고, 함수를 잘 활용하려면 일반화시키는 사고의 훈련이 필요함도 알게되었습니다.
더 나아가 배열을 입력 받아 여러개의 단을 출력하는 multiDan 함수를 만들어 일반화의 파워를 더 느껴볼 수 있었습니다.

var multiDan = function(dan) {
  for (var i = 0; i < dan.length; i++) {
    printDan(dan[i]);
  }
}

여기까지 특수한 케이스로 부터 점점 일반화된 케이스를 발견해 함수를 만들어 나가는 것을 보았다면, 이번엔 일반화된 함수로 부터 더욱 다양한 형태의 함수들을 만들어 나가는 것을 보겠습니다. 즉 일반화된 함수에서부터 특수한 함수를 창발하는 것이죠.

var rangeDan = function(min, max) {
  var arr = [];
  for (var i = min; i <= max; i++) arr.push(i);
  multiDan(arr);
}
var oddDan = function(min, max) {
  var arr = [];
  for(var i = min; i <= max; i++) {
    if(i%2 !== 0) arr.push(i);
  }
  multiDan(arr);
}
var evenDan = function(min, max) {
  var arr = [];
  for(var i = min; i <= max; i++) {
    if(i%2 === 0) arr.push(i);
  }
  multiDan(arr);
}
rangeDan(1, 9);
oddDan(1, 10);
evenDan(1, 10);

multiDan이라는 함수로 부터 더 발전시켜 특정한 범위의 단을 출력하는 rangeDan 함수, 홀수 단을 출력하는 oddDan 함수, 짝수 단을 출력하는 evenDan 함수를 만들 수 있었습니다.

여기서 또 하나 Function에서 중요한 것을 알 수 있습니다. 바로 이름이죠! printDan, multiDan, rangeDan, oddDan, evenDan이라는 이름을 보고 함수가 무엇을 할지 예상되지 않나요?
컴퓨터는 함수의 이름을 a, b, lalala 등 무엇으로 하든 상관없습니다. 이름은 사람을 위한 것입니다. 그래서 큰 문제를 작은 문제로 쪼개고 작은 문제를 정의할 수 있는 기똥찬 이름을 짓는 것이 중요합니다.

이로써 함수에서 중요한 3가지 요소로 입력, 출력, 이름을 알게되었습니다.

I need Function

함수의 중요한 3가지 요소에서도 설명했듯이 컴퓨터 프로그래밍에서 제일 중요한 것은 이름입니다. 이름의 용도가 무엇이길래 이토록 중요할까요?
이름의 용도는 바로 식별입니다. 식별자는 변수, 함수 등 기타 많은 것들에 적용됩니다.

그런데 식별자에는 큰 문제가 있습니다. 바로 충돌이죠.
예를들어 어떤 그룹에 철수가 여러명이 있다면 어떻게 구별할 수 있을까요?

< 철수가 너무 많아ㅠㅠ >

아마도 철수1, 철수2, 철수3이라고 하거나 큰철수, 작은철수, 못 생긴 철수 등 새로운 식별자를 부여해 구별할 것입니다. 근데 만약.. 철수가 30명이 있다면?!!!! 철수28이 누군지 기억할 수 있나요?
이는 사람이 이해하고 기억할 수 있도록 정하는 식별자의 의미가 없어지게 되는 것입니다. 이 모순을 해결하기 위해 우리는 고유한 범위를 지정해 식별자의 충돌을 해결하게 됩니다.

< 그래! 바로 너! >

이 범위를 우리는 Scope라고 부릅니다. 효과적으로 식별자를 분리하기 위한 방법으로 가둬두는 공간을 의미하죠.

이 공간은 어떻게 만들어질까요? JavaScript에서는 함수를 사용해 Scope를 만들 수 있습니다. 그리고 이 공간은 단단한 방어막이 있는 것 처럼 내부의 식별자를 외부의 그 누구에게도 알려주지 않습니다. 이를 Capsulize(캡슐화하다)라고 하죠.

즉 함수로부터 만들어진 각각의 Scope에서 Capsulize로 인해 위의 구구단 코드에서 eachDan, printDan, rangeDan 함수 안에 똑같은 이름의 i라는 변수를 사용하고 있지만 전~~혀 충돌되지 않는 것입니다.

그럼 함수가 꽁꽁 쥐고 속에 숨겨놓은 저 변수는 언제 사용될까요?
바로 함수가 호출되었을 때입니다. 함수가 호출되어 실행될 때 내부의 변수들이 살아나고 함수가 끝이날 때 변수는 죽음을 맞이합니다.

위의 이미지를 보면 g, a, b 세개의 변수가 있습니다. 변수 g는 함수 바깥쪽에 있고, 변수 a는 fscope라는 함수 내부에 있고, b는 inner 함수 내부에 있습니다. 각 변수마다 자신을 포함하고 있는 함수가 실행됐을때부터 끝날때까지 살아있게 됩니다. 즉 변수의 생명은 각 함수의 형태에 따라 정해지게됩니다. 이를 변수의 Life Cycle(생명주기)이라고 합니다.

함수를 사용하는 큰 이유는 중복을 제거하기 위함이라고만 생각했었습니다. 그래서 아마 저는 함수라는 주제로 진행될 6주간의 강의를 중복제거 코드 작성 연습이라는 생각으로 바라보았을 것입니다.
첫번째 강의 시간을 통해 컴퓨터에 대한 생각과 함수가 왜 이토록 중요한지에 대한 생각을 다시 할 수 있게 되었습니다. 강의를 듣는 내내 그리고 후기를 작성하면서 여러차례 ‘우와..’를 반복했습니다. 앞으로의 남은 5주동안의 강의에 얼마나 더 놀라운 개념들을 배우게 될지 기대됩니다^^

——–S70 스터디 1회차 강의 영상 공유

s70 자바스크립트 함수와 객체 1강 1/1

s70 자바스크립트 함수와 객체 1강 1/2

---

dimanche | bsidesoft 신입사원
좋은 개발자가 뭔지도 모르고 좋은 개발자가 되고 싶은 초보 개발자입니다.
회사에서는 열심히 교육받고 발전하는 운 좋은 개발자로 일하고 있습니다.