웹에플리케이션 만들기 – JS, PHP 프로그래밍 14 : 함수의 입력과 출력

이번 시간에는 함수에 좀 더 심화된 문법에 대해서 알아볼 건데요 이번 시간의 주인공인 입력과 출력입니다

이전에 우리가 했던 예제는 12php 였거든요 12php 그런데 이 12

php는 이거대로 좀 보관할 가치가 있어서 12php를 그대로 카피해서 저는 13php를 만들었습니다 어떻게 하면 되냐면 오른쪽 해서 Duplicate 하면은 똑같은 파일에 다른 이름을 만들 수 있습니다 Save As 같은 거죠 여기서부터 출발하겠습니다

우선, 간단하게 설명을 드리면 여기에 이거 지워버리고 여기다가 제가 1을 넣으면 여기에 1이 출력되게 할 수 있고, 여기에 2를 넣으면 여기에 2가 출력되도록 할 수 있게 하는 방법이 있어요 바로 함수에 입력 값을 주면 되는데요 예를 들어서 a라는 저기에다가 뭐라고 할까요? input이라고 할게요, input 저 이름은 아무거나 하셔도 상관없어요 input

그리고 여기도 input 그러면 제가 실행을 시켜보면 보시는 것처럼 2가 출력되고 제가 1로 바꾸면 1이 출력됩니다 이게 조금 덜 실용적이니까 제가 여기다가 더하기(+) 1 이라고 해볼게요 그리고 a에 1 이라는 입력 값을 주면 어떻게 화면에 표시가 되냐면 2가 됩니다 제가 만약에 얘를 5로 하면 5 더하기(+) 1은 6이죠

6이 나옵니다 어떻게 이게 동작하는 지를 살펴보죠 우선 a라고 하는 함수를 호출할 때 괄호에다가 5를 줬어요 그럼 이 5라고 하는 것은 일종의 입력 값이 돼서 이 함수의 선언부에 있는, 함수를 정의할 때 사용하는 괄호 어디 있어요? 바로 이거죠

이것 사이에 a가 들어가는 겁니다 그럼 거기에 지금 뭐가 자리 잡고 있나요? input 이라고 하는 문자가 자리 잡고 있습니다 그러면 저 문자에 5라고 하는 값이 들어간 거예요 다시 말해서 input은 변수입니다 그리고 그 함수가 호출될 때 중괄호 안에 있는 바로 이 구간이 호출이 될 건데 그때 여기에 있는 input에 저장되어 있는 5라는 값이 바로 이곳에 위치하게 되면 얘는 이제 5라는 값을 갖게 되고 5와 1이 더해진 결과는 6이니까 바로 6이 여기에 출력이 되는 겁니다

그리고 6을 하면 얘는 7이 되겠죠? 이것이 함수의 입력 값이에요 그럼 입력 값이 있으면 또 뭐가 있을까요? 출력 값이 있겠죠? 입력과 출력이니까 그러면 출력 값을 한 번 살펴보면 여기에 있는 documentwrite를 지워버렸어요 그리고 a를 document

write로 감싸줬습니다 그리고 input 앞에다가 return 이라고 적어 줬어요 그리고 실행을 시켜보니까 똑같습니다 아무런 차이도 없어요 그런데 훨씬 좋은 코드가 됐습니다

어떻게 된 영문인지 살펴보죠 보시는 것처럼 여기 있는 이 코드가 실행이 되면 이 부분은 이제 뭐가 되나요? 6이 입력 값으로 들어왔으니까 6 더하기(+) 1이니까 얘는 7이 됩니다 그런데 그 7 앞에 뭐가 붙어있어요? return이라고 하는 이 특수한 키워드가 들어가 있습니다 저거는 약속되어있는 이름이기 때문에 다른 걸 쓰시면 안 됩니다 그러면 이 return을 만나면 함수는 그 순간 종료가 되고 return 뒤에 있는, return 뒤에 있는 값이, return 뒤에 있는 이 값이 이 함수의 반환 값이 되서 지금 제가 녹색으로 표시한 부분이 바로 여기 있는 이 값, 여기에 있는 이 7이라고 하는 값이 이 녹색으로 표시한 부분의 값이 되는 거예요

즉, 이 7이 return을 만나면서 반환이 되서 여기가 7이 되는 겁니다 그 결과로 얘가 이렇게 화면에 표시가 되는 겁니다 바로 이 return 뒤에 있는 이 부분이 출력 값이 되는 거예요 이것이 여러분들이 함수를 위해서 알아야 될 모든 것입니다 그리고 이것은 굉장히 중요한 내용이에요

여러분의 상상력을 또 빌려주세요 여기에 있는 이 코드가, 이 코드가 이렇게 간단하고 하찮은 코드가 아니고 굉장히 복잡하고 아주 거대한 코드라고 생각해보세요 그런 경우에 바로 이 입력 값, 입력 값이 있는 이 부분과 출력 값이 나오는 바로 이 부분으로 인해서 우리는 이 a라고 하는 함수의 내용을 수정하지 않고도 이 함수가 입력 값에 따라서 다르게 동작해서 그 결과를 출력해서 documentwrite에 담을 수도 있고 또, 우리 예전에 배웠던 거 기억나세요? 프롬프트에, PROMPT에 a(6)을 담을 수도 있다는 거죠 얘를 실행을 시키면 보시는 것처럼 얘가 실행된 결과는 얘고, 얘가 실행된 결과는 얘인데, 그 중에서 여기에 있는 입력 값은 바로 이 7이 되는 것이죠

바로 이것이 함수의 메커니즘입니다 그러면 여기서 제가 질문 드릴게요 우리가 함수를 처음 썼거든요? 그런데 우리가 함수를 써 본적이 있을까요, 없을까요? 한 번 잘 생각해보세요 이 화면에 우리가 정리한 함수 말고 함수가 있을까요, 없을까요? 있습니다 함수가 있어요

잘 찾아보세요 누구일까요? 얘가 함수입니다 얘가 함수에요 prompt라는 이름, 그리고 괄호 열고 괄호 닫고 라는 형식 이거는 뭐죠? 함수를 호출 할 때 사용하는 거니까 이 함수의 이름은 프롬프트라는 것을 알 수 있어요

그럼 우리가 프롬프트를 어디서 정의한 적이 있나요? 없죠 우리가 prompt를 정의한 적이 없습니다 그럼 이 prompt는 누가 정의한 걸까요? 바로 이 웹브라우저의 내장되어있는 함수에 요 여러분들은 그 내장되어있는 함수를 사용을 한 거구요 그 내장되어있는 함수에 입력 값을 이렇게 주게 되면, 그게 이런 식으로 prompt라는 창을 띄우면서 이렇게 동작되도록 미리 만들어져있는 함수라는 것이죠

그래서 여기 있는 이 prompt라는 함수는 내장된 함수, 다른 말로는 Built-in Function이라고 하고요 우리 집에 있는, 집을 살 때 내장되어있는 가구를 빌트인이라고 하잖아요? 여기 있는 이 a라는 펑션(Function)은 사용자가, 우리가 정의한 함수라는 의미에서 사용자 정의 함수라고 부릅니다 그리고 또 함수가 있어요, 이 문서에는 어디 또 있을까요 바로 얘도 함수에요

얘도 똑같이 앞에 있는 document는 빼시고 똑같이 write()가 있잖아요? 얘 역시도 입력 값을 받아서 그것을 이렇게 화면에 출력해주는 함수입니다 우리는 write를 정의한 적이 없기 때문에 write는 역시 마찬가지로 내장되어 우리에게 제공되는 함수인거에요 그럼 이 document라는 것은 뭐냐면, 웹브라우저를 켰습니다 F11을 눌러서 개발자 도구를 켰어요 그리고 이런 화면, 요거 따라하지 마세요

이거 누르시면 얘가 나옵니다 따라하지 않으셔도 됩니다 여기에다가 제가 document라고 입력하면 document가 뜨죠 document도 이 브라우저에 내장된 무엇인가이기 때문에 저렇게 뜨는데요 여기서 제가 점을 찍었어요

그러면 엄청나게 많은 무언가가 나옵니다 그 중에서 내려가 보면 뭐가 있냐면 documentwrite라는 것이 있어요 이게 바로 우리가 호출한 건데, 얘가 함수에요 그러면 얘도 함수겠죠? 여기 있는 게 다 함수는 아니지만 꽤 많은 것들이 함수입니다

그러면 앞에 있는 얘는 뭐냐면 이 웹브라우저는 기본적으로 여러 개의 함수를 갖고 있어요 굉장히 많은 함수들을 내장하고 있는데, 그 함수들이 만약에 예를 들어서 한 천개라고 해보세요 그러면 천개 함수가 그냥 이름만 가지고 있으면 좀 찾기가 어려울 거 아니에요? 분류가 하기가 어려울 거 아니에요? 그래서 뭐 document라고 하는 함수, 뭐 예를 들면 document라고 하는 카테고리 안에 write라는 함수를 두고, 또 writeln이라는 함수도 두고, 뭐 getElementById 뭐 기타 등등의 것들을 주는 거죠 또 document가 아니라 window라고 하는 무엇인가가 있어서 거기에는 또 window와 관련되어있는 여러 가지 함수들이 있는 거예요 그래서 함수 천개를 그냥 풀어 놓으면 관리하기가 힘들기 때문에 서로 연관되어있는 성격이 비슷한 것들끼리 document로도 묶고, window로도 묶고, 또 다른 걸로도 묶고 해서 분류를 해놓은 거라고 생각을 하시면 됩니다

이렇게 연관되어있는 것들을 묶어주는 이 단위를 뭐라고 하냐면 객체라고 불러요, 객체 그런데 우리는 그 객체에 대해서는 자세하게 설명하는 거는 우리 수업의 범위를 넘어서기 때문에 나중에, 제가 만든 강의에서 객체 지향 프로그래밍을 보시면 객체에 대한 얘기가 나옵니다 거기서 참조하시면 될 거구요 지금 단계에서는 적정 개념만 이해하고 계시면 됩니다 즉, 여기에 있는 document라고 하는 객체에 소속되어있는 write라는 함수에요

document는 메소드(method)들을 효율적으로 관리하기 위해서 비슷한 성격끼리 카테고라이징(categorizing)했다고, 그 정도로 생각하시면 됩니다, 지금 단계에서는 결국에 얘도 함수고, 얘도 함수라는 것을 알 수 가있죠 이렇게 해서 우리가 함수에 대해서 알아봤는데요 어때요? 사용자 정의 함수를 알고 나니까 이 write라고 하는 우리가 잘 몰랐던 뭔가 그냥 미지의 문법이 이제 눈에 들어오죠? 제가 너무 유명해서 잘 쓰고 싶지 않은 말인데, 그래서 우리가 아는 만큼 보인다는 말을 쓰는 거죠 어때요? 함수가 무엇인지 아니까 우리가 지금까지 기계적으로 사용해왔던 write, prompt라는 것이 다르게 보이지 않나요? 바로 그 다르게 보이는 그 느낌, 그 느낌이 좋아서 공부를 하는 거잖아요? 그럼 우리 불쌍하게 소외되고 있는 php도 마무리를 해서 위에 있는 코드와 똑같은 코드를 만들어보죠

우선 입력 값을 6을 줬을 때 그 6을 받기 위해서는 여기에 input이 기다리고 있어야겠죠? 그리고 이 input을 return하고 input 더하기(+) 1을 하면 위에 있는 Javascript 코드와 동일한 내용이 됩니다 그리고 이 a가 출력 값을 echo로, return된 값을 echo로 출력해주면 이렇게 Javascript와 php가 같은 결과를 갖게 되죠 그래서 php의 함수라고 하는 것은 여기에 들어오는 게 이제 입력 값, 그리고 얘가 나타내는 값이 얘가 계산된 결과가 출력 값이 되는 거니까, 우리 수학에서, 수학을 좀 잘 아시는 분들은 금방 이해가 되실 겁니다 수학에서 입력 값, 출력 값이 있죠? 정의역, 공역, 치역 이런 얘기하잖아요? 그거에 해당되는 개념이라고 할 수 있어요

물론 수학 못하신다고 이거 이해 못하는 거 전혀 아니니까 그냥 양념 같은 이야기였습니다 이렇게 해서 함수에 대한 얘기는 여기까지 하겠습니다