웹에플리케이션 만들기 – JS, PHP 프로그래밍 10 : 반복문

이번 시간에는 반복문에 대해서 알아보겠습니다 반복문

반복이라는 거 반복이 뭘까요? 반복적인 작업 우리 인간이 컴퓨터나 기계를 사용하는 이유 중의 하나는 인간이 잘못하는 것을 기계는 잘하기 때문일 겁니다 그 중의 하나가 바로 반복적인 작업일 것인데요 사람은 반복적인 작업을 잘못하죠

실수도하고, 졸기도하고, 지루해하기도하고 그런데 기계는 반복을 너무나 좋아해요 그래서 이 조건문이라고 하는 것이 기계를 똑똑하게 하는 아주 결정적인 것이었다면 이 반복문은 이 반복적인 작업을 통해서 무언가 많은 일을 처리할 수 있도록 하는, 이 기계를 아주 강력하게 하는 그런 요소라고 볼 수 있습니다 이 반복문까지 하면 우리가 프로그래밍의 기본적인 가장 중요하다고 하는 본질적인 것들은 다 배우는 거예요 그리고 이 반복문 이후에 나오는 뭐 함수니 객체 지향이니, 각종 디자인 패턴이니 하는 여러 가지 개념들이 어마어마하게 있긴 한데 바로 반복문 뒤에 나오는 다른 개념들은 우리가 앞에서 데이터

데이터 문자 뭐 이런 거 배웠잖아요? 그리고 반복문까지 크게 그 딱 거기까지에서 만들어지는 그 도구들을 이용해서 우리가 실제로 무언가를 만들게 되는데 그 과정에서, 이 프로그램이 커지는 과정에서 어마어마하게 많은 문제들이 발생을 합니다 아주 복잡해지기 때문에 생기는 문제에요 바로 그러한 복잡해져서 생기는 문제들을 뒷수습하는, 아니면 예방하는 그런 것들이 이 뒤쪽으로 있는 기술들입니다 뒤쪽으로 기능들이에요

그래서 여기까지 하셨다면 여러분은 이 프로그래밍을 위한 가장 중요한 트레이닝은 다 끝난 겁니다 Javascript와 php의 반복문의 차이를 보면 없어요 예 거의 똑같습니다 최소한 이거는 똑같아요

보시는 것처럼 while이라는 것이 나타나면 이 두 언어 모두 해석하는 엔진이 “아 이제, 음

반복문이 시작이 되겠구나” 그리고 괄호가 나오면 이 안에는 if랑 똑같습니다 if도 이런 구조죠 마찬가지잖아요 그래서 여기에는 true나 false 둘 중의 하나가 올 수 있는데 이런 데이터 타입을 boolean이라고 부른다고 했죠? true 아니면 false 둘 중의 하나가 온다

그래서 여기에 위치하는 이곳에 오는 정보가 true라면 여기에 있는 이 중괄호에 있는 구문이 반복적으로 실행이 됩니다 언제까지? 이곳이, 자 여기 이 부분이 false가 올 때까지 true면 반복되고 false가 올 때까지 아시겠죠? php도 마찬가지 지금부터 실습으로 들어가 보죠

반복문을 한번 사용해보죠 우선 Javascript에서부터 해볼게요 여러분들, 저 따라하지 마시구요, 일단은 while 그리고 true를 넣으면 저 반복문은 끝나지 않는 반복문이 됩니다 document

write 그리고 “hello world”라고 이렇게 하고 실행을 하면 끝나지 않는 반복문이기 때문에 컴퓨터에게 큰 누가 돼요 실행하기 전에 작업관리자를 띄워서 어떤 일이 생기는 지를 한번 볼까요? 실행을 시켰습니다 어때요? 계속해서 삥글삥글 돌면서 끝나지 않고 있어요 그리고 지금 제가 실행한 이 이 탭은 CPU 점유율이 12% 꽤 높게 유지되고 있는 것을 볼 수가 있습니다

메모리도 계속해서 올라가고 있어요 뭔가 컴퓨터에 자원을 탈탈 털어가고 있는 상황입니다 이게 계속되면 영원히 계속되지 않고요 보시는 것처럼 웹브라우저는 예, 사용자들이 아주 헤비(heavy)한 일을 처리하지 않을 거라고 간주하기 때문에 적당한 시점에서 이렇게 경고창을 띄웁니다 대기를 누르면 계속되고 그리고 페이지 종료를 하면 페이지가 끝나게 될 거예요

그럼 이런 에러 페이지가 뜨죠? 이거는 이제 그 무한루프가 돈 겁니다 이 무한루프는 여러분이 프로그래밍을 하는 과정에서 생길 수 있는 큰 에러(error) 중의 하나에요 물론 이렇게 true는 그냥 딱 때려 박으면 당연히 무한루프가 생기지만 저렇게 하지 않는 경우에도 무한루프가 생길 때도 있습니다 또는 작업이 너무 헤비(heavy)하면 무한루프인 것 같은 상황에 빠질 수도 있기 때문에 그런 경우를 잘 처리하기 위한 여러 가지 기법들이 또 존재하는 거죠 그리고 반면에 여기다가 false라고 이렇게 적어 주면 어떻게 될까요? 실행시켰을 때 아무것도 출력되지 않습니다 왜냐? false기 때문에 얘가 실행될 기회조차 없었던 것이죠

그러면 이렇게 한번해볼까요 $i 아니죠 I죠 헤깔렸어요 i의 값을 0을 줍니다

i라는 변수는 현재 0이에요 그리고 i가 10보다 작으냐고 되어있습니다 여기 띄어쓰기는 가독성을 위해서 에요 그러니까 띄어 써도 되고 안 해도 됩니다 얘도 마찬가지로 이렇게 해도 되고요

이렇게 되어 있고요 그리고 i가 i를 I+1이라고 이렇게 주면 어떻게 될까요? 결론적으로 말씀드리면 실행을 시키면 이렇게 “hello world”가 쭉 찍히는 것을 볼 수 가있어요 그런데 이게 좀 줄바꿈이 되면 더 좋겠죠? 안 배웠던 거 HTML에서 <br /> 이렇게 하면 이것은 뭐냐면 줄바꿈이라는 의미의 태그(tag)입니다 HTML 태그(tag)에요

이렇게 됩니다 “hello world”가 쭉 내려오죠? 어떻게 된 건지 한번 풀어볼까요? 이게 실행이 되면 현재 i의 값은 뭘까요? 0입니다 i의 값은 0 그리고 여기 있는 while이 실행이 되면 제일 먼저 요기가 실행이 되요 그러면 현재 i의 값은 0인 상태죠? 0과 10을 비교합니다

0이 10보다 작은 가요? 작죠! 그러니까 여기에 있는 이 값은 true가 되죠 그러면 여기가 true가 되니까 이 부분이 실행이 돼서 “Hello World”가 이렇게 실행이 되고 그 다음에 현재 i의 값이 뭐에요? 0이죠? 0에다가 1을 더했어요 그럼 1이죠? 1이 i의 값이 됩니다 그렇게 한 바퀴 돌면 그 다음에 다시 여기에 있는 이 값을 체크합니다 현재 i의 값은 뭐에요? 1이고 1은 10보다 작죠? 그럼 true가되는 거죠

true기 때문에 여기가 실행이 되고요 hello world<br />이 실행이 돼서 얘가 출력이 됩니다 그럼 i의 값은 현재 1이죠? 1+1은 2죠? 그럼 이제 i는 2가돼요 그런 식으로 계속 반복, 반복, 반복을 하다가 i의 값이 9가 된 상태에서 10이랑 비교하면 얘 참이니까, 얘 실행이 되고, 여기에서 i는 9고 9+1이면 10 i는 10이 된 상태에요

그러면 10이 10보다 작나요? 아니죠 그러면 false가 되기 때문에 여기는 false가 되죠 자연스럽게 이 반복문은 종료되게 됩니다 이 흐름을 잘 이해하셔야 돼요 반복문은 아주 중요한 부분이에요

php도 똑같습니다 i는 0이라고 하고요 while i가 10 보다 작은 지를 체크하고 10 보다 작다면 10 보다 작은 동안에 echo “hello world” 그리고 <br /> 이렇게 하고 여기에서 i의 값을 i+1이라고 주고 실행을 시키면 보시는 것처럼 php도 Javascript처럼 똑같이 실행되는 것을 볼 수 가 있습니다 이게 반복문의 기본적인 동작이에요 그런데 이것만으로는 별로 효용이 느껴지지 않죠

하지만 진짜 효용은 우리 뒤에 데이터베이스를 하는 쪽에서 데이터베이스를 배우는 부분에서 여러분들이 알게 될 거구요 한 가지 더 장식 삼아서 좀 한 번 해볼 만한 거는 여기 있는 이 그 태그(tag)들을 출력되는 것들을 지금 그냥 <br /> 태그로 구분하고 있거든요? 이 줄바꿈을 하는 <br /> 태그 그런데 그게 아니고 리스트(list)로 한번 표현을 해보자는 거죠 <ul>, </ul> 태그를 이렇게 감싸줍니다 그리고 document

write 안에 있는 hello world를 <li>로 감싸줘요 이렇게요 그리고 실행을 시켜볼까요? 보시는 것처럼 리스트로 표현이 되고 있습니다 그리고 여기에서 php쪽도 마찬가지로 <ul> 그리고 </ul>이라고 이렇게 해주고요 echo에다가 <li> 그리고 이 부분도 닫히는 </li>라고 해주면 보시는 것처럼 php도 이런 for문, 아니 이런 반복문을 이용해서 이렇게 리스트 형태로 표현할 수 가있는 것이죠

즉, php나 Javascript나 웹 위에서 동작하도록 기본적으로 고안된 언어들이기 때문에 여러분들이 이런 언어들을 이용해서 HTML을 프로그래밍적으로 잘 생성할 수 있는 테크닉들을 잘 익히셔야지 좋은 웹프로그래밍을 할 수 있게 되는 거예요 이렇게 해서 반복문에 대한 얘기는 여기까지 하겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 5 : 디버깅

이번 시간에는 디버그라는 이야기를 진행을 할 건데요 버그라는 것은 프로그램이 오동작하는 것을 버그라고 합니다

그래서 오동작되는 현상을 해결하는 행위를 디버그라고 부르는데요 디버그하는 방법에 대한 얘기라기보다는 여러분들이 오류가 발생됐을 때 어디에서 오류가 생겼는지를 찾는 방법을 알고 계셔야지 실습을 하는 과정에서 문제가 생겼을 때 도움을 요청할 수 있게 되는 것이기 때문에 디버그수업을 여기쯤에서 넣습니다 새로운 파일을 하나 만들죠 new File 3

PHP 이고요 파일의 내용은 탬플릿을 이렇게 적용을 했고요 잘 따라오셨나요? 여기서부터 시작하겠습니다 우선 자바스크립트부터요

<script></script> 여기에다가 화면에 어떤 정보를 표현할 때 출력할 때 사용하는 documentwrite("hello world") 이런 코드를 여러분이 작성하고 싶었는데 여기에다가 오타를 낸 거에요 원래 여기가 m이어야 하는데 e를 넣어버린거죠? 그럼 이 상태에서 실행을 해보면 아무것도 되지 않습니다 이런 문제를 찾는 거는 대단히 어려운 일이에요 그럴 때는 이 웹브라우저의 도움을 받으시면 됩니다

여기에서 여기 메뉴를 선택하시고 저는 크롬 기준으로 설명을 드립니다 여기에서 도구 더보기를 들어가시면 자바스크립트 콘솔이라는 것이 있어요 얘를 클릭해보세요

그럼 화면이 이렇게 분할되면서 여기에 빨간색으로 강조표시 되는 거 보이시죠? 에러가 있다는 얘기입니다 여기에 docueent는 정의되어 있지 않은 키워드다 라는 뜻이에요 그리고 3PHP 파일에 여덟 번째 행에서 발생한 에러라는 뜻입니다 그러면 여기 여덟 번째 행은

얘거든요? 그리고 여기 있는 doucueent가 정의되어 있지 않는다는 얘기는 쟤가 뭔가 의심스럽다는 것을 우리한테 알려주는 겁니다 그럼 의심하시고 이렇게 m으로 수정하시면 이런 문제를 해결할 수 있게 되죠 그렇죠? 그럼 PHP에서 여러분이 이렇게 PHP코드를 작성하는데 지금보시는 것처럼 닫기를 안한 거에요

이렇게 닫기를 해야 되잖아요? 닫으면 이렇게 잘 되는데 닫기를 안하면 아예 아무것도 출력이 안 됩니다 코드가 몇 개 없으면 그나마 찾을 만한데 코드가 길어진 상태에서 찾으려면 굉장히 어려워져요 그런 경우는 어떻게 하면 되냐면

여기서 오픈 파일을 하셔서 winampstack > apache2 > logs라는 디렉토리가 있습니다 저 디렉토리에 errorlog라는 파일을 열어보세요 그럼 이렇게 긴 내용이 나옵니다

그러면 이 내용 중에서 제일 밑으로 내려가 보시면 가장 최근에 추가된 에러메시지가 제일 밑에 나옵니다 이 에러에 보시면 에러를 같이 보시죠 제일 끝에 있는 에러가 발생했다고 나오는 것이고요 그리고 syntax는 문법에러라는 뜻이에요

문법상에 에러가 있으며 '<'라는 기호가 기대되는데 이 위치에 있는 이 경로에 있는 3PHP에 11번째 라인에서 ‘<’ 기호가 있어야 하는데 없다 라는 에러에요 우리에게 도움을 주기 위한 정보죠 얘를 클릭해보면 11번째라인

즉 여기에 이 라인에 뭔가 꺽세가 닫히는기호가 없다 라는 그런 뜻이겠죠? 정확하게는 여기에 있는 얘가 기대하지 않은 뭐랄까요? 기호가 나왔다 라는 뜻이겠죠? 그래서 여기에다가 이렇게 추가를 해주면 에러가 해결이 됩니다 한번 보죠? 에러가 해결되어서 잘 출력되는 것을 볼 수가 있죠 이렇게 해서 에러를 찾는 방법에 대해서 살펴봤고요 좀 더 자세한 디버깅 방법론은 여기서는 우리 수업의 범위를 넘어 섭니다

아무튼 문제가 생기면 방금 보셨던 그런 방법들을 통해서 해결하시면 되고요 또 누군가에게 저런 문제에 대해서 질문할 때는 꼭 저런 로그같은 것들을 여러분들이 에러메시지를 확인하고 그것을 바탕으로 해서 질문을 하셔야지 문제를 해결할 수가 있습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 6 : 변수

이번시간에는 변수에 대해서 알아보도록 하겠습니다 변수란 바뀔 수 있는 어떤 값이란 뜻이죠

javascript에서 변수라는 것은 name=“이고잉”; 이렇게 되면 이제부터 저 name 이라고 하는 문자는 "이고잉" 이라는 값을 갖게 됩니다 php도 똑같이 동작하는데 php는 문법이 조금 특이해요 앞에 달러($)를 붙이시면 그게 변수 이름이 됩니다 달러($)를 붙이지 않으면 변수가 아니에요 그럼 실습을 한번해보죠

phpjs(디렉토리)에서 새로운 파일을 만듭니다 4php 그리고 탬플릿의 내용을 복사해서 이것을 붙여넣기하고요 그 다음에 우선 javascript부터 하죠 <h1> javascript</h1> 라고 하고 그리고 javascript는 <script> 로 시작해서 </script>로 끝나야지 javascript죠

여기다가 이제 제가 코드를 작성해보겠습니다 javascript에서 변수의 이름은, 예를 들면 name 이라고 이렇게 하고 그리고 "egoing" 이라고 이렇게 하겠습니다 그리고 제가 documentwrite(name) 이라고 하면 뭐가 화면에 출력될까요? 4번을 해 보면 egoin 이라고 출력이 됩니다 이것만으로는 조금 정보가 부족한 것같아요

그래서 여기다가 친절하게 “안녕하세요” 라고 하고 이 상태로 하면 안돼죠 왜냐하면 앞에 있는 문자와 뒤에 있는 문자를 더해야하니까 더하기(+) 표시를 하셔야합니다 그리고 실행을 해보겠습니다 “안녕하세요 egoing" 이렇게 되죠? 이렇게 되는 거에요 아시겠죠? 그다음 이번에는 php를 한번 해보죠

똑같습니다 <h1>php</h1> 그리고 여기에다가 php는 ‘$’로 시작해서 화면을 출력할 때는 echo를 쓰셔야죠 이렇고 하고 출력해볼까요? 이렇게 화면에 출력이 되죠! 이걸로는 또 부족하죠? 조금 더 친절하게 “안녕하세요” 라고 하고 php는 문자와 문자는 점()으로 연결해줘야지 점 연산자를 써서 이 연결을 해줍니다 이것을 실행해보면 이렇게 화면에 출력이 돼죠

여기다가 점을 붙여서 맞춤표를 붙였습니다 우리가 이렇게 변수를 사용하는 거는 알겠는데, 왜 변수를 써야할까요? 왜?, 항상 우리는 왜? 라는 거에 대해서 굶주려있잖아요? 왜 변수를 써야되냐면 변수를 써야되는 이유는 굉장히 다양합니다 아주다양해요 그런데 지금 단계에서 여러분들에게 말씀드리고싶은 것은 말하자면 이 프로그램을 최대한 변경하지 않기 위해서 우리는 변수를 쓴다고 생각하시면 됩니다 예를 들어서 여기 “안녕하세요” 라고 되어있는 이 부분을 제가 변수를 쓰지 않고 이렇게 한 번 표현해볼게요

"안녕하세요 이고잉님” 이렇게 하고 실행을 시키면 잘 작동을 합니다 그런데 누군가가 그리고 여기에 “안녕하세요 이고잉님” 이라고 되어있는 저부분이 지금은 한 줄짜린데 여러분이 상상력을 발휘해서 저기 한 줄이 아니라 수천 줄이고 그 안에 수많은 곳에 이 “이고잉”이라는 이름이 언급되고 있다고 생각해보세요 그런데 누가와서 ‘이거 오타가 있다‘ 라고 얘기하는 거에요 “이고잉” 이라는 이름에 또는 이거를 “이고잉”이라는 사람뿐만 아니라 다른 사람들에게도 볼 수 있게 해달라고 하면 여러분들은 이 코드의 “이고잉”이라고 되어있는 거를 다 수정을 해야 될겁니다

그러면 이 프로그램은 안정적인 프로그램이 아닌거죠 최대한 변할 수 있는 부분과 변하지 않는 부분을 구분해서 변할 수 있는 부분에만 집중하도록 하는 것이 좋은 프로그래밍이라고 할 수 있어요 예를 들어서 여기있는 “이고잉”이라고 하는 것을 이렇게 $name으로 하고요 저는 이 프로그램에 처음 시작되는 부분에 이렇게($name="egoing";) 처리를 하는 거죠 그리고 여기에 한 줄로 되있지만 아까 말씀드린 것 처럼 한 줄이 아니고 천줄, 만줄정도된다라고 생각해주세요 프로그램은 금방 복잡해지니까요 이런 상황에서 누군가가 여러분에게 이 프로그램을 수정해달라고 하면 여러분은 여기에서 그 긴 코드에서 그 내용을 찾으실 필요가없이 위에 있는 내용만 “egoing”에서 한글로 “이고잉”으로 이렇게 바꿔주시면 된다는 것이죠 그렇게 되면 우리에게 있어서 이 프로그램은 이 부분은 가변적인 것

변할 수 있는 부분 이 밑에 부분은 변하지 않는 부분 우리가 신경쓸 필요가 없는 부분으로 나눠지기 때문에, 우리는 프로그램의 수정이나 변경이 있을 때 이 부분에 집중해서 수정을 하면 된다는 장점이 생기기 때문에 우리가 변수를 쓴다고 할 수 있어요 물론 그것만으로 변수를 얘기하기에는 변수는 너무나 중요합니다 하지만 지금여러분이 체감할 수 있는 부분은 고정적인 것과 확정적인 것과 변할 수 있는 부분을 구분하는데 변수가 매우 요긴하다 라는 정도로 변수의 쓰임을 생각해두시면 되겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 4 : 데이터타입과 연산자

이전 시간에 우리가 좀 어려운 얘기를 했어요 사실 어려운 얘기는 나중에 나와야 되는데 가장 어려운 얘기가 처음에 나왔는데 순서상 좀 어쩔 수 없는 면이 있으니까 이해를 좀 부탁드립니다

이번 시간에 우리가 배울 것은 문자를 표기하는 방법인데요 저기 큰 따옴표가 있는 것처럼 이 Javascript에서도 문자를 표기할 때는 큰 따옴표로 시작해서 생활코딩이라고 적고 큰 따옴표로 닫아줘야 됩니다 PHP도 마찬가지에요 어때요? 두 개가 똑같죠? 그런데 만약에 여러분이 숫자를 쓰고 싶다면 큰 따옴표를 쓰시면 안 됩니다 여기 보시면 위쪽에 일십백천, 일십백천만, 십만

십만이라는 숫자가 있는데요 이 십만이라는 숫자는, 이거는 숫자를 의미하게 됩니다 PHP도 마찬가지에요 따옴표를 쓰시면 안 됩니다 그런데 Javascript의 경우에는 보시는 것처럼 따옴표로 묶어서, 따옴표로 이렇게 묶어 주게 되면, 이것은 숫자일까요, 문자일까요? 문자 십만이 됩니다 PHP도 마찬가지에요

따옴표로 묶어주게 되면 이것은 문자 십만이 되요 그럼 그게 어떤 차이가 있는 지를 우리 코드로 살펴보죠 New File에서 2php라고 하고요 그리고 template의 내용을 copy해서 붙여넣기를 합니다

그 다음에 2php를 열고요 여기에 <h1></h1> 이번에는 Javascript부터 할까요? Javascript는 <scripst> 태그로 시작해서 </script> 태그로 끝나야 되죠? 뒤에 있는 건 없어도 되고 있어도 됩니다 그 다음에 document

write() 이거는 Javascript에서 화면에 무언가를 출력할 때 쓰는 코드라고 말씀을 드렸죠? 저 괄호 안에다가 뭔가를 넣어주면 그게 화면에 표시되는 겁니다 10 더하기(+) 10은 뭘까요? 죄송합니다 무시하는 게 아니고 10 더하기(+) 10은 20이죠 그런데 여기 있는 10과 10을 따옴표로 묶었어요

그리고 결과를 보면 뭘까요? 1010(일공일공)이 나옵니다 왜냐하면 이 따옴표로 묶어주게 되면 그것은 문자고, 문자와 문자를 더하면, 그냥 이 두 가지를 그냥 그대로 읽어주는 게 되는 거죠 1010 이 되는 거죠 왜냐하면 문자로 처리되었기 때문입니다 그런데 PHP는 어떤지를 한번 살펴볼까요? <?php ?> PHP의 시작을 알리는 코드는 저거죠? 그리고 끝나는 것을 알리는 것은 저거고요

echo는 PHP에서 출력하는, 출력할 때 사용하는 명령이고 여기에 10 더하기(+) 10 이라고 하고 뒤에 세미콜론(;)이라는 기호를 찍어준 다음에 reload를 하면 보시는 것처럼 20이 화면에 출력되는 것을 볼 수가 있죠 그런데 PHP에서는 이렇게(echo “10”+“10”;) 해주면 이 10은 문자 10 인데 더하기(+)를 했음에도 불구하고 숫자로 간주되어서 20으로 출력되고 있어요 왜냐하면 이 PHP에서 여기에 있는 이 더하기(+)라고 하는 이것은, 이런 것을 연산자라고 하거든요 이 연산자는 숫자를 더할 때 사용하는 연산자라는 고정적인 기능을 가지고 있습니다

그렇기 때문에 얘가 문자이긴 하지만 여러분이 숫자, 숫자를 더할 때 사용하는 더하기를 쓰면 PHP는 여러분이 실수한 줄 알고 이거를 자동으로, 지 마음대로 숫자를 바꿔서 계산하는 거예요 그러면 문자와 문자를 더할 때 사용하는, 사용하고 싶다면 점()을 쓰시면 됩니다 십점십(“10”“10”)

문자열 “10”“10”을 하면 보시는 것처럼 1010(일공일공)이 화면에 출력이 되요 그래서 여기서 Javascript와 PHP의 차이점이 하나 드러나는데요 Javascript는 문자를 더할 때도 더하기를 쓰고, 숫자를 더할 때도 더하기를 씁니다 하지만 PHP는 문자를 더할 때는 이렇게 점(

)을 써야 되고요, 숫자를 더할 때는 더하기(+)를 써야 됩니다 그냥 대충 알아들으시면 되요 여기 있는 내용을 꼼꼼히 암기하실 필요는 없는 내용입니다 지금 단계에서는요 그리고 이 두 개의 언어 모두 연산자라는 것이 있는데요

연산자는 두 개의 항을 뭐 더하거나 빼거나 계산할 때 쓰는 것이 연산자죠 그래서 Javascript도, PHP든 Javascript든 거의 비슷합니다 더하기는 뭐 이렇게 하면 얘는 결과가 이죠? 얘도 마찬가지입니다 얘는 결과가 0일 테고요 얘는 프로그래밍에서 이런 별표(*)는 곱하기의 의미를 갖습니다

2 곱하기(*) 2 니까 4가 될 것이고요 이거는 나누기(/)라는 뜻이니까 4 나누기(/) 2 니까 이거는 2가 됩니다 여기까지 해서 이 PHP와 Javascript에서 우리가 문자와 숫자라는 가장 기본적인 데이터를 다루는 방법에 대해서 알아봤습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 11 : 배열

이번시간은 배열이라는 것을 알아보겠습니다 배열은 영어로는 Array라고도 하고요

어떤 정보를 담는 그릇이라고 할 수가 있어요 우리가 지금까지 살펴본 정보를 담는 그릇은 변수였죠? 변수라고 하는 그릇에다가 정보를 담는 거였습니다 이 배열은 변수와 비슷하면서도 달라요 변수 안에는 하나의 값만 담을 수 가있죠? 그런데 배열안에는 서로 연관되어있는 여러 정보들을 연속된 그릇에 담아서 체계적으로 관리하는 도구입니다 배열은 다시 변수에 담겨서 사용이 되기도 하지만 그런 관계는 이제 코드를 통해서 살펴보도록 하죠

보시는 것처럼 이런 문법으로 여러분이 배열을 생성하시면 됩니다 자, 여기에 있는 new라고 되어있는 부분이 문법적인 요소인데요 우리는 아직 저러한 문법적 요소를 배우지 않았기 때문에 여러분들은 그냥 단순히 배열을 생성할 때는 이 부분에다가 데이터를 넣어주면 배열이 만들어진는것만 이해하시면 됩니다 그리고 값과 값 사이에는 이렇게 ","를 해서 여기 있는 "one","two","three"라는 문자열을 문자를 배열로 만들어서 그것을 리스트에 담아주고 있는 겁니다 자, php도 마찬가지에요

php는 new가 없어졌죠? 그냥 어레이라고 이렇게 작성을 하시고 그리고 끝부분에는 이렇게 똑같이 괄호를 닫아준 다음에 괄호와 괄호사이에는 값들을 콤마로 구분해서 넣어주면 되는 거죠 현재 이 두개의 언어들 javascript, php모두 세 개의 값으로 이루어져있는 배열을 생성을 한 것이 고요 그 배열을 리스트라고 하는 하나의 변수에 담은 겁니다 그래서 그 리스트에 담겨있는 값을 가져올 때는 이런 문법을 사용하시면 되는데 이 문법에 대해서는 우리가 코드를 직접 짜보면서 좀 더 자세한 얘기를 진행해보도록 하죠 자 저는 10php라는 파일을 만들었고요

여기서 실습을 진행하도록 하겠습니다 php,js에서 10php파일을 열었고요 javascript와 php를 실행할 예제를 동작시킬 코드를 이렇게 준비를 했어요 자, 그러면 우선 javascript에서 배열을 한번생성해보도록 하겠습니다

배열을 생성할 때는 많은 방법들이 있어요 몇 가지방법들이 더 있는데 new Array() 여기까지는 우리가 문법을 배우지 않았기 때문에 그냥 저렇게 하는 것이다라고 일단은 기계적으로 생각해두시면 되고요 그 다음에 여기다가 "one","two","three"라고 입력하면 이 부분이 실행이 되면 배열이 만들어져요 그런데 그렇게 만들어진 배열을 우리가 제어하기 위해서 그 만들어진 배열을 변수에 담아 주셔야합니다 자, 이렇게 하면 만들어진 배열이 리스트라고 하는 변수에 담아지게 되요 자 엔터 다음에 documentwrite()해서 리스트에 담겨진 배열을 한번 화면에 출력해보겠습니다 자, 리로드를 해보면 보시는 것처럼 one,two,three 이렇게 화면에 뜨죠? 즉 이 배열에 포함되어있는 정보들을 화면에 다 출력을 해주는 겁니다

자 그런데 이렇게는 잘 사용을 안 하고요 이 각각의 정보들을 우리가 정확하게 뽑아내야돼요 만약에 여러분이 여기에 있는 첫 번째 배열을 화면에 출력하고 싶다 배열에 들어가 있는 첫 번째 정보를 바로 여기에 출력하고 싶다면 이렇게 하시면 됩니다 리스트[0] 닫고, 문법이에요

자 그리고 실행을 시켜보면 보시는 것처럼 one이 출력되는 것을 볼 수 가있습니다 바로 여기에 있는 이 0이라고 하는 것은 무슨 뜻이냐면 리스트라는 변수에 담겨있는 배열의 0번째 값을 의미합니다 자, 프로그래밍에서는 숫자를 0부터 세는 습관이 있어요 오늘 반복문할 때도 제가 카운트를 셀 때 0부터 줬는데 그 얘기를 안했던 것 같아요 0부터 카운팅을 합니다

자 그래서 여기에 있는 이 첫 번째인 정보 one이 바로 0번째 정보가 되는 거예요 우리가 일상생활에서는 1부터 숫자를 많이 세지만 인도 같은 경우는 엘리베이터에 첫 번째 층이 0층입니다 그냥 기준이라고 볼 수 가있는 거예요 자 그럼 만약에 이 세 번째에 있는 정보를 화면에 출력하고 싶다 그러면 여기에다가 2라고 하면 되겠죠? 자, 한번 실행시켜보죠 보시는 것처럼 three가 화면에 잘 출력됩니다 이게 javascript에서 배열을 생성하고 그 배열 안에 포함되어있는 어떤 정보를 화면에 출력하는 방법입니다

그럼 php에서는 어떻게 하면 될까요? 거의 똑같습니다 자, list에 php에서는 new를 하지 않고 그냥 array()를 하면 됩니다 자, 그리고 "one","two","three" 라고 하고 echo $list[0]이라고 하면 어떻게 될까요? 똑같이 나오죠 그리고 [2]라고 하면 보시는 것처럼 three가 화면에 출력되는 것을 볼 수 가있습니다 왜 배열을 써야 되는가

라는 거에 대해서도 여러분들이 좀 이해를 하셔야 합니다 배열을 쓰는 이유는 너무나 다양해요 그것도 한마디로 정리하기는 어렵습니다 그런데 약간비유해서 표현하자면 이 변수라고 하는 것이 학교를 예들 들어볼게요 각각의 학생들 한명 한명은 일종의 데이터라고 할 수 있어요 데이터라고 비유를 해보자는 거죠 자 그런데 우리가 편의에 의해서 어떤 일이 학교에서는 벌어지냐면 어떤 특정한 학생을 반장이라고 지정을 해요 또 어떤 학생은 부반장 이렇게 지정을 하는 거죠 이 교실에 선생님이 들어왔을 때 선생님은 이모든 학생들의 이름을 정확하게 몰라도 반장이라고 얘기하면 반장이 누군지 몰라도 반장을 찾을 수 있는 거죠

바로 이반장이라는 것이 말하자면 변수라고 할 수 있는데, 제생각에 이 비유는 굉장히 어려운 비유에요 그래서 편안한 마음으로 듣고 흘리시면 됩니다 그런데 학교에 사람들이 많잖아요? 학교에서는 그 학생들을 관리하기 위해서 어떤 체계들을 도입 하냐면 1,2,3반 이런 체계를 도입합니다 자, 그런데 그걸로도 부족하니까 이렇게를 묶어서 뭐라고 부르나요? 1학년, 2학년, 3학년 이렇게 있겠죠? 그리고 그걸 묶으면 교육부 같은데서는 무슨 무슨 학교라고 부르는 거죠 자 이렇게 하면 뭐가 좋은 가요? 이 학교에서 그룹으로 어떤 것을 관리할 때 편리합니다 예를 들면 1학년 1반 학생들 예방접종 맞으러 오세요 라고 하면 학생들이 다 우르르 움직일 수 있잖아요? 만약에 이런 체계가 없다면 한명 한명의 학생들을 다 호출해서 불러야겠죠? 자 보시는 것처럼 이 프로그래밍에서 배열이라는 것도 아직 실용적인 예제가 아니기 때문에 공감하기는 좀 어려우시겠지만 서로 관계성이 있는 정보들을 이렇게 그룹핑을 해서 list라고 하는 이름으로 그룹핑을 한거라고 할 수 가있어요

그래서 그 그룹에서 특정한 학생을 호출할 때는 이렇게 숫자를 저렇게 대괄호 사이에 넣어서 특정한 학생을 호출할 수도 있고 뭐 여러 가지 작업들을 할 수 가있는 거죠 그래서 말하자면 우리가 학교에서는 이 학생들을 관리할 때 각각의 학생들의 이름을 잘 모르니까 1번 2번 3번 4번이렇게 번호를 메기잖아요? 그러면 선생님은 학급에 들어와서 27번 책 읽어! 20번 숙제했어? 뭐 이런 것들을 선생님이 할 수 가있게 되는 거죠 학생들의 이름을 잘 몰라도 그런 비슷한 일이 벌어지는 거라고 또 생각할 수 있겠지만 이 비유는 말씀드린 것 처럼 쉬운 표현은 아니니까 그냥 흥미삼아서 얘기를 듣고 흘리시면 되겠습니다 그리고 우리가 선생님이 학급에 오면 또 필요한게 뭔가요? 학생이 전체 몇명인지 그걸 알아야지 책상을 뺀 학생들, 결석한 학생들 이런 학생들을 관리할 수 가있겠죠? 이 배열에서도 그 배열에 포함되어있는 정보가 몇 개인지를 알아낼 수 있는 방법이 있습니다

자, 이렇게 listlength라고 해주면 보시는 것처럼 배열에 몇 개의 값이 있는 지를 화면에 출력할 수 가있어요 여기3이라고 되어있는 이 부분이 바로 length를 실행한 결과입니다 length는 길이라는 뜻이죠? php는 조금방법이 다른데요 count()라고 하는 것을 작성하셔서 그 괄호안에 여러분이 알고 싶은 배열을 가르키는 변수를 담아주시면 count를 알 수 가있습니다

자 여기에 있는 저 3이라고 되어있는 이 결과는 바로 여기에 있는 이 count()의 실행결과입니다 자 이렇게 해서 배열이 무엇인지 배열을 사용하는 기본적인 방법을 알아봤는데요 이 배열은 이것뿐만 아니라 여러분이 배열을 생성한다음에 어떤 특정한 데이터를 추가,삭제,이동하거나 이런 여러 가지 그 방법들이 이 도구들이 배열안에는 포함되어있어요 바로 이런 편의기능으로 인해서 우리가 배열을 사실은 사용을 하는 건데 그걸 우리가 짚어보면 너무 수업이 장황에 집니다 우리수업에서 필요한 만큼 만 딱 컴팩트하게 만든 배열에 대한 이야기이니까 이 정도만 있다는 걸 아시면 됩니다 자 그러면 다음시간에는 이 배열과 우리가 앞에서 배웠던 반복문을 결합해서 뭔가 배열안에 들어있는 정보들을 우리가 효율적으로 처리하는 방법에 대해서 알아보도록 하겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 16 : 프로그래밍 접근방법

지금부터 어떻게 프로그래밍을 공부하는게 좋을 것인가 라고 하는 주제이야기를 좀 해볼까합니다 자 어떻게 공부하는게 좋을까에 대한 정답은 없을 거에요 상황에 따라서 사람의 성향에 따라서 다를 겁니다

다만 저의 사견을 듬뿍담아서 저는 이렇게 생각한다는 거죠 우선 제일먼저 해야 할 것은 언어를 배우는 겁니다 그런데 제가 좀 강조하고 싶은 것은 적정용도 또는 적정수준으로 배우는게 필요하다고 생각해요 여기에서 이야기하는 적정용도라는 것은 여러분이 하고 싶은 것이 무엇이냐에 따라서 적합한 언어를 선택할 필요가있다는 겁니다 만약에 여러분이 웹개발을 하고 싶은데 C를 공부한다 아 조금 잘못된 선택이에요 효율적인 선택이 아닙니다 그런데 여러분이 운영체제를 내가 직접 만들어보겠다

그런데 php를 배워요 이건 완전히 잘못된 선택입니다 php는 운영체제를 만들 수 없다고 봐야겠죠 그리고 웹서버가 아니라 서버가 아니라 웹브라우저에서 동작하는 어떤 이 로직을 만들려고하는데 여러분이 Javascript를 안배우고 자바를 사용하려고 한다 이거는 완전히 잘못된 선택입니다 바로 그런 점에서 적정용도의 언어를 선택해야 된다 라는 것이 고요 적정수준이라는 것은 처음 프로그래밍를 시작하면 대부분의 사람들은 서툰 코딩실력을 갖게 될거에요 그런데 그 서툰 코딩실력에 대한 그 걱정 때문에 너무 공부에만 집중하다보면 무언가를 만드는 과정이 뒤에 등장하게 될 수 있습니다

그래서 저 같은 경우는 투트랙 전략을 쓰시는 게좋을거 같아요 다시 말해서 두 가지 전략인데 첫 번째는 장기전략 장기전략은 장기적으로 능숙한 언어의 사용자가되는 것 그리고 단기전략은 서툰코딩의 실력으로 무언가를 만들어보는 것 우리가 언어를 공부하는 것은 언어를 공부하기 위해서가 아니잖아요? 언어를 공부하는 것은 그것을 통해서 어떤 문제를 해결하고 싶어서 또는 이것을 통해서 무언가를 만들어보고 싶어서 라고 하는 겁니다 그 목표를 잊으시면 안돼요 그래서 수단과 목적을 혼동하면 안된다는 것이죠 그 다음에 해야 할 것은 API를 탐험해보는 건데요 API라는 것은 프로그래밍을 통해서 제어할 수 있는 대상들을 얘기하잖아요? 제가 이전 시간에도 말씀드린것처럼 오늘날에는 API가 폭발적으로 증가하고 있습니다

바로 그런 맥락에서 이 프로그래밍이라는 것이 주목받고 있는 것이고 이 세상에 어떤 API들이 존재하는 가를 끊임없이 호기심을 가지고 탐구하는 것 탐험하는 것 그것은 프로그래머에 있어서 아주 중요한소양이라고 생각합니다 마치 견문을 넓히는 것과 같은 일이라고 생각해요 그래서 우리가 배운 우리가 익힌 이 서툰 프로그래밍실력과 그리고 우리가 알게 된 API들을 조합해서 어떤 애플리케이션을 좀 기민하게 만들어보는 거죠 그리고 이 과정에서 굉장히 중요한 것은 그것을 좋아할 관객을 찾는 겁니다 애플리케이션을 만든다는 것도 일종의 표현이고 저는 인간에게 표현이라는 것은 단지생각을 표현하는 것 뿐만 아니라 표현자체가 인간에게 굉장히 중요한 욕망이라고 생각합니다 심지어 그 욕망을 잘하기 위해서 사람들은 생각한다고도 보거든요

그래서 여러분들이 어떤 표현의 욕망을 한껏 끌어올리기 위해서는 좋은 관객들이 필요하고 그 좋은 관객들을 더 잘 만족시키기 위해서 끊임없이 고민하고 숙고하고 노력하게 되는 것이죠 그런데 그 관객이 꼭 전 지구적인 엄청난 규모의 시장 뭐 이런 거창한 것이 아니래도 일단은 자기 자신이 관객이 될 수 있죠 자기 자신에게 필요한 무언가 문제를 소소하게 해결해본다던지 아니면 주변에 있는 친구들 가족 또는 주위에 있는 어려운 사람들 그 사람들을 프로그래밍을 통해서 좀 더 그 사람들의 삶의 질을 높여 주는 것 그것을 통해서 그분들이 기뻐하는 모습을 보는 것 바로 그것이 우리가 처음 프로그래밍을 시작하는 단계에서 일을 재밌게 느끼게 하는 또 지속하게 하는 핵심적인 원동력이 되지 않을까 싶어요 그렇게 해서 우리가 무언가를 끊임없이 만들어가는 과정에서 꼭 거쳐가야할 관문은 바로 한계를 경험하는 겁니다 처음에는 조그만 프로그램이었어요 기능도 별로없었고 또 혼자만들었습니다 그런데 시간이 지나면서 코드도 많아지고 기능도 많아지고 많은 사람들이 프로젝트에 참여하면서 여러 가지 한계들이 생기게됩니다 바로 그 한계로 인해서 절망감이 생기죠 그리고 그 절망감은 차곡차곡 누적이 될겁니다

그럼 그게 어느 정도의 임계점에 지났을 때 이런 생각을 하겠죠 아 정말 이렇게는 할 수 없겠다 다시 말해서 더 잘만들고 싶다 이런 생각이 들겠죠 그때 더 잘할 수 있는 방법을 찾는 게 중요합니다 그리고 더 잘할 수 있는 방법들에 대한 우리 선배 프로그래머들의 여러 가지 성취들이 있어요 연구들이 있는데 그런 연구들을 찾아볼 수 있는 좋은 곳이 바로 대학의 전공과정이겠죠

여기서 이야기하는 대학이라는 것은 대학교에 진학하라는 얘기가 아니고요 대학교에 다니고 계시다면 너무 좋은 환경에서 공부하고 계신거고 그렇지 않다고 하더라도 대학에서 무엇을 배우는지를 유심히 보시고 그 배우는 것들 각각의 취지가 무엇인지를 좀 파악해놨다가 여러분들이 경험하고 있는 그 한계를 느꼈을 때 그것을 해결해줄 수 있는 분야를 찾아서 공부하시면 됩니다 그리고 이 프로그래밍의 세계는 그 어떤 분야보다도 오픈된 공부 방법들이 오픈된 지식들이 아주 풍부하기 때문에 여러분들이 혼자서 공부하려고 해도 다른 분야에 비해서는 훨씬 더 수월할겁니다 그리고 저역시도 그런 어려움을 느끼는 분들을 위해서 이런 심도있는 분야에 대한 수업을 만들기 위해서 노력할거니까요 제가 도와드릴테니까 또 저 뿐만 아니라 여러분들을 도와주는 많은 사람들이 프로그래밍 세계에서는 많이 있을 겁니다

그분들과 잘 협력해서 이 난관을 잘 헤쳐나가지면 되는 거죠 그리고 최근의 화두중의 하나는 Computational Thinking 이라고 해서 이 컴퓨터적 사고라고 하는 것이 좀 화제가 되고 있는데요 이런 분야에 대한 정보들도 좀 찾아보셔서 이게 뭘 이야기하는 건지도 한번생각해보시면 좋을 것같습니다 그래서 이런 분야들이 이야기하는 것들 우리 선배 개발자들의 성취는 이런 것들이 있을거같아요 알고리즘 데이터 스트럭터, 디자인패턴, 프래임 웍크, 컴퓨터구조 여러 가지 성취들이 있는데 여러분들이 어떤 한계를 충분히 경험하고 그것으로 인해서 절망감이 충분히 성숙됐을 때 이러한 분야들을 접하면 마치 박하사탕을 눈으로 먹은 것처럼 시야가 뻥 뚤리는 느낌이 들겁니다 그리고 뭔가 막연하게 둥둥둥 떠다니던 그런 생각들 또는 어떤 가능성들이 이런 분야들을 만나면서 아주 견고하게 응집되는 느낌을 받을 수 가있고 그때 느껴지는 그 지적 짜릿함이 저는 굉장히 크더라고요 그런데 중요한 것은 제가 생각하기에 순서입니다 처음부터 방금 보셨던 디자인패턴, 데이터 스트럭쳐 또 알고리즘 이런 것들을 여러분들이 공부하는 것이 나쁜건 아니에요 너무나 좋은 건데 제가 생각하기에 이렇게 공부를 처음부터 저런 학문적 성취들을 접하게 되면 제가 걱정되는 것은 무엇이냐면 잘 이해가안가는 것도 문제겠지만 무엇보다도 문제는 공감하기가 어려울수가 있습니다

왜냐하면 저런 학문적 성취들은 거대한 데이터 늘 효율적으로 처리하기 위해서 아니면 무언가를 빠르게 처리하기 위해서 아니면 엄청나게 많이 늘어난 이 코드를 그래서 생긴 그 코드에 복잡도를 줄이기 위해서 그리고 많은 사람이 프로젝트에 참여할 때 발생하는 수많은 문제들을 낮추기 위해서 고안된 방법들이라는 것이죠 저러한 방법들을 공감하기 위해서는 저 방법을 고안한 사람들이 느꼈던 그 절망감을 여러분들도 느낄 필요가 있다는 것이죠 그래야지만 이러한 공부들이 그냥 지루하게 아주 평면적으로 보이는 것이 아니라 그 안에 그 학문들 속에 들어있는 그 리듬감 아니면 그 도도하게 흐르는 그 흐름들 그런 것들을 경험하면서 무슨 대하드라마를 보는 것처럼 정말 재미있게 공부할 수 있거든요 그래서 제가 얘기하고 싶은 것은 우리가 처음부터 꼭대기층으로 도약할 수는 없어요 일단은 그 다음 도약지점으로 도약하고 그러면 그 다음 지점에서 다음 지점에 도약지점이 보이잖아요? 그럼 거기를 또 올라가고 올라가고 이런 식으로 차근차근 차근차근 올라가다보면 어느 순간에 자기가 생각하기에는 꼭대기라고 생각했던곳에 올라와있을 수도 있고 알고보니까 거기가 꼭대기가 아니라 거기도 그냥 도약지점중의 하나였을 뿐 일수도 있는것이죠 자 그렇게 해서 이번시간에는 우리가 어떻게 프로그래밍을 공부하면 좋을까 또 어떻게 프로그래머로서의 그 뭐랄까요 경험을 쌓아가는 것이 좋을까에 대한 저의 어디까지나 주관에 담아서 이야기를 해왔습니다 이거는 저의얘기고 저도 이걸 잘하고 있는 사람이 아니고 아 나도 이렇게 해봐야겠다 라는 생각에서 여러분들이랑 같이 이야기를 해본것이기 때문에 자신의 방법을 찾으셔야해요 그리고 그 방법을 찾는 것을 게을리해서는 안된다고 저는 생각합니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 1 : 복습과 수업 예고

지금부터 프로그래밍 수업을 시작하겠습니다 이번 시간에 우리가 배울 내용은 PHP, 그리고 Javascript입니다

이 두 가지 언어를 통해서 이 프로그래밍에 대한 이야기들을 좀 더 진전시켜 볼 건데요 우리가 지금까지 살펴보았던 HTML, CSS 물론 프로그래밍 언어이긴 하지만 이런 언어들은 문서를 만드는데 적합한 언어에요 우리가 이번에 배울 PHP나 Javascript는 사람들이 프로그래밍이라고 하면 일반적으로 떠올리는 형태의 전형적인 프로그래밍, 프로그램들이라고 할 수가 있습니다 그래서 이 프로그래밍 언어들을 익히면 여러분은 Java나 Python이나 뭐, C나 이런 언어들을 익히는데도 큰 도움을 받을 수가 있습니다

지금까지 우리 배운 거를 좀 복습 겸 정리를 좀 하고 넘어가죠 우선 웹브라우저, 웹서버 뭐 이제 지겹게 보셨죠? 웹브라우저, 웹서버 사이에 상호 작용을 우리 한번 다시 살펴봐요 보시는 것처럼 웹브라우저에서 누군가가 주소에다가 acom/a

html이라고 입력하면 웹브라우저는 acom에 해당되는 웹서버를 찾아서 그 웹서버에게 ahtml을 내놓으라고 요청을 합니다 그러면 웹서버는 그 웹서버에 하드디스크나 SSD에 저장되어 있는 ahtml 파일을 읽어서 그것을 웹브라우저에게 다시 전송을 해주죠

그럼 웹브라우저는 웹서버가 전송한 ahtml이라는 내용의 파일을 해석하겠죠 그러면 웹브라우저는 위에 있는 HTML부터 차근차근 읽어 나갈 겁니다 이렇게 이런 순서로

그러다가 <style>이라고 하는 Tag를 만났어요 그리고 여기에는 생략되어있다는 얘기에요 어떤 CSS Tag가 들어간다는 것이죠 <style> Tag를 만나면 웹브라우저는 어떻게 동작 하냐면 여기서부터 <style> Tag고 끝나는 여기서부터 여기까지를 CSS의 문법에 따라서 해석하겠죠 그리고 그거에 따라서 화면에 표시를 할 겁니다

어디까지 이렇게 </style> Tag가 닫히는 지점까지 그 다음에 <script>라는 Tag가 나타났어요 이거 우리 아직 안 배운 겁니다

그러면 CSS랑 똑같이 웹브라우저는 이 <script> Tag가 끝나는 여기에서부터 시작 Tag가 끝나는 여기에서부터 이 부분을 Javascript의 문법에 따라서 해석하게 됩니다 그에 따라서 동작하겠죠 그리고 </script> Tag가 끝나는 이 지점 끝나는 </script> Tag가 나타나면 이제 다시 이 밑에 부분을 HTML 부분으로 해석하기 시작할 겁니다 그리고 여기에 또 <link> Tag를 만났어요

<link> Tag가 뭐였나요? CSS를 외부로 분리할 때 분리되어 있는 CSS를 사용할 때 사용하는 Tag가 <link> Tag 였죠 거기에 href라고 적혀있는 것을 웹브라우저가 보고 이 주소에 존재하는 acss라는 파일을 일단은 읽어야겠죠 그래서 여기 있는 acss라고 하는 파일은 어디에 있냐면 a

com이라고 하는 웹사이트에 있겠죠 그러면 웹브라우저는 다시 acom에게 acss라는 파일을 내놓으라고 요청을 합니다 그러면 웹서버는 이 서버 컴퓨터의 하드디스크에서 a

css라고 하는 파일을 찾아서 그것을 읽은 다음에 그것을 웹브라우저에게 다시 쏘아줍니다 그러면 웹브라우저는 acss라는 파일을 보고 그 파일에 있는 CSS 내용을 CSS 문법에 따라서 해석을 하겠죠 그래서 이 <body> Tag의 폰트 컬러를 붉은 색으로 지정한다 뭐 그렇게 적혀 있잖아요 그 작업이 끝난 다음에 다시 웹브라우저는 <script> Tag를 해석해서, 이 <script> Tag는 역시나 우리가 아직 배우지 않은 Javascript를 가져오는 Tag인데요

src라고 하는 속성에 있는 acom/ajs라고 하는 저 부분을 웹브라우저는 보고서 acom에게 ajs 파일 요청합니다

그럼 웹서버는 웹서버의 저장 장치에 들어 있는 ajs 파일을 읽어서 그것을 웹브라우저에게 전송을 하고요 웹브라우저는 ajs 파일의 내용을 보고서, 이게 뭔지 우리는 지금 몰라요 여기 있는 내용을 Javascript의 문법에 따라서 실행한 다음에 그 실행이 끝나면 여기 있는 이 HTML 코드를 다시 해석하기 시작하는 거죠

그렇게 쭉 내려가다가 hello world가 나오면 hello world를 이 화면에다가 적어 주겠죠 이렇게요 그 다음에 </body>까지 하고 HTML 해석이 끝나면 그러면 모든 해석 작업을 끝내게 되고 화면에는 요청한, 화면에는 사용자가 요청한 모든 정보가 표현되게 됨으로써 모든 작업이 끝나게 됩니다 이거는 지금까지 우리가 배웠던 내용을 총정리한 겁니다 그리고 여기에는 아직 우리가 배우지 않은 Javascript에 대한 언급도 일부 나와 있어요

지금 잘 모르는 부분은 우리가 뒤에서 배울 거니까 불안해하지 마세요 방금 우리가 살펴 본 언어들은 웹브라우저에 의해서 해석되는 그리고 웹브라우저 위에서 동작하는 언어들입니다 그래서 얘를 클라이언트(client) 쪽에서 동작하는 언어들이라고 하고요 지금부터 우리가 볼 것은 서버(server) 쪽에서 동작하는 언어들을 살펴볼 거예요 우선 웹브라우저가 있고 웹서버는 익숙하죠

그런데 없었던 것들이 생겼어요 PHP, 데이터베이스 이런 것들이 출현했는데 바로 이제부터 우리가 서서히 PHP, 데이터베이스라는 것들이 우리 수업에서 이렇게 부각되기 시작할 겁니다 그러면 어떻게 이것들이 상호작용하면서 이 웹 애플리케이션이 동작하는 가를 살펴보죠 그 전에 한 가지 여기에 있는 PHP, 데이터베이스라고 하는 것들은 다 설치해야 되는 소프트웨어들이에요 웹서버도 웹브라우저처럼 소프트웨어라는 겁니다

그거 잘 기억하셔야 되요 우선 웹브라우저에 누군가가 이렇게 주소를 입력했어요 뭐라고 했냐면 acom/aphp 저 얘기는 a

com에 해당되는 웹서버를 찾아가라는 뜻이죠 그리고 웹서버한테 aphp라는 파일을 요청하라는 뜻이에요 그러면 웹브라우저는 그것을 하겠죠 그럼 웹서버는 무엇을 보냐면 웹서버는 바로 a

php에서 php라고 하는 부분을 봅니다 그리고 웹서버는 HTML이 아니라는 것을 알 수 있겠죠 그러면 자신이 할 수 없는 일이라는 것을 웹서버는 알고 있어요 그러면 이것을 할 수 있는 담당자를 부를 겁니다

그 담당자가 바로 PHP인데요 PHP 우리가 이 PHP 인터프리터라고도 하고 또는 PHP 엔진이라고도 합니다 이 PHP 엔진에게 aphp라는 파일을 처리하라고 명령하는 거예요

웹서버가 이렇게요 그러면 PHP 엔진은 이 서버 컴퓨터에 저장장치, 뭐 하드디스크나 SSD죠 거기에서 aphp 파일을 읽어서 저 파일에 적혀있는 내용을 해석합니다

그런데 해석할 때 요 위에 있는 부분들은 그냥 그대로 쭉 넘어가요 그러다가 뭐가 있어요? 이렇게, 이렇게 생긴 기호가 나타나면 이 PHP 엔진은 이 아래쪽에 이렇게, 이 부분을 어떻게 해석 하냐면, 이상한 놈이 자꾸나오네요 어떻게 해석 하냐면 PHP의 문법에 따라서 해석합니다 즉 여기에 있는 이 기호는 그리고 이 기호는 지금부터 PHP가 시작된다, PHP가 이제 끝났다라는 것을 PHP 엔진에게 알려주는 그런 특수한 기호에요 약속된 기호

그러면 PHP 엔진은 여기 있는 이 부분을 해석하겠죠 여기에 데이터베이스에 topic에서 수업 제목들을 가져온다고 적혀있습니다 실제 PHP의 문법이 저렇지는 않아요 다만 여러분들한테 우리가 아직 PHP 문법을 배우지 않은 상태이기 때문에 제가 한국말로 그냥 적은 거예요 그러면 PHP 엔진은 저기에 있는 저 코드에 적혀있는 내용대로 데이터베이스에게 topic이라고 하는 테이블(table)에 제목들을 달라고 요청을 합니다

테이블이라는 것은 뭐냐면 이런 표에요 테이블이 영어로는 표라는 뜻입니다 그래서 이 데이터베이스에는 저런 표들이 저장이 되어 있습니다 그래서 그 표에서 이 제목에 해당되는 이 내용들을 데이터베이스가 찾아서 그것을 PHP 엔진에게 돌려줍니다 그러면 PHP 엔진은 여기에다가 이 구간에다가 이 정보들을 이렇게 결합을 시켜서 이런, 이렇게 HTML로 완성을 하는 거예요, PHP가

그 다음에 PHP에 해석이 끝나면 여기 PHP가 끝났다는 얘기죠 나머지를 그대로 출력해줍니다 이렇게요 그러면 PHP는 하나의 HTML 파일을 이렇게 만들 수 있게 되요 HTML 파일을 만들었습니다

그리고 그 HTML 내용을 뭐 파일이라기보다는 HTML을 만들어서 그것을 웹서버에게 전달해요 그러면 웹서버는 그 HTML의 정보, 완성된 HTML이라고 하는 이 정보를 웹브라우저에게 전송합니다 그러면 웹브라우저는 여기에 있는 이 코드, 이 HTML 코드를 해석해서 바로 이 웹브라우저의 화면에 출력하게 되는 것이죠 이것이 바로 서버 쪽에서 동작하는 흐름이에요 전체적인 흐름

그런데 우리가 아직 배우지 않은 것들에 대해서 언급을 했기 때문에 아마 여러분들의 입장에서는 추상적인 느낌이 드실 겁니다 그 추상적인 거는 어쩔 수 없고 일단은 두시고 그리고 곧 우리가 수업을 하면서 PHP, 데이터베이스를 배울 겁니다 그러면 그 때 배운 것들을 그렇게 추상적으로 비어있는 공간에다가 채워 넣는 것을 통해서 이 전체적인 흐름의 흐름을 완성하는 것이 우리 수업의 궁극적인 목표입니다 제가 계속해서 전체적인 맥락들, 전체적인 구조를 보여 드리고 있는데 우리 수업의 핵심은 바로 이 구조에요

그렇기 때문에 이 구조에 여러분들은 집중하셔야 되고 그리고 이 안에 있는 HTML, PHP, Javascript 이러한 각각의 구체적인 기술에 대한 이 세부적인 문법이나 이런 것들은 소홀히 하셔도 됩니다 아시겠죠? 이 전체적인 구조를 여러분들 마음속에 세우기 위해서 그 각각의 각론들을 우리가 도구로 활용하고 있는 것 뿐이라는 거 잘 염두에 두시고 수업을 따라와 주세요

웹에플리케이션 만들기 – JS, PHP 프로그래밍 13 : 함수의 기본 문법

이번 시간에는 함수에 대해서 알아보겠습니다 함수라는 말 아마 처음 들어보는 말은 아닐 거예요

언제 들어봤을까요? 기억 못하시는 분들 많겠지만 함수는 우리가 학교 다닐 때 이 수학 시간에 함수라는 걸 배웁니다 수학이라는 체계 안에서 함수는 굉장히 중요하게 다루어지는 그런 체계라고 할 수 가있잖아요? 물론, 저 같은 경우에는 학교 다닐 때 수포자였기 때문에 그게 중요한 건지 몰랐습니다 그런데 이제 학교 다닐 때 배웠던 함수를 저는 어렵게 느꼈는데요 프로그래밍을 공부하고, 프로그래밍을 익히고, 프로그래밍에 함수라는 게 있거든요? 배우기 어렵지도 않습니다 그 함수를 익히고서 수학에서 얘기하는 함수를 보니까 함수가 그렇게 추상적인 게 아니고 굉장히 중요한 도구더라고요

그래서 수학을 잘하면 프로그래밍을 하는데 큰 도움이 됩니다 하지만 프로그래밍을 하면 수학을 좀 더 구체적인 느낌으로 배울 수 가있어요 그래서 수학과 프로그래밍이라는 것은 꼭 뭐를 먼저 해야 한다, 뭐를 나중에 해야 한다는 선후 관계가 아니고 서로가 서로에게 도움을 주는 그런 협력적인 관계이기 때문에 혹시 제 수업을 듣는 분들 중에 수학을 잘못하시는 분들이라고 해서 걱정하실 필요가 없습니다 오히려 수학 공부를 더 잘하는데 큰 도움을 줍니다, 프로그래밍이라고 하는 것이 무엇보다도 우리는 수학을 못하는 사람이 아니고 수학을 잘 할 사람들이잖아요? 그러니까 나중에 언젠가 하면 됩니다

그래서 이번 시간에 배울 함수는 수학에서 배우는 개념과는 완전히 좀 어떤 느낌이 다를 거예요 하지만 본질은 같을 겁니다 그래서 함수를 배울 건데요 함수라는 것을 조금 구체적으로 얘기를 해보자면 자판기가 있어요 그럼 자판기에 우리가 어떤 버튼을 누르면 그 버튼에 해당되는 음료수나 과자나 그런 것들이 튀어나오죠? 그런 것들이 함수의 메커니즘이라고 할 수 있습니다

물론 이건 비유적인 표현이기 때문에 비유는 비유일 뿐이죠 그럼 이제 함수가 무엇인가라는 것에 대한 프로그래밍적인 의미를 우리가 집어볼 때가 됐는데요 여기에 여러 부품들이 있어요 이 부품들, 변수 또 데이터 그리고 또 뭐가 있었나요? 조건문, 반복문, 배열 이런 것들이 다 하나하나의 부품이라고 할 수 가있고 제가 앞서 말씀드린 것처럼 이런 부품들을 이렇게 저렇게 조합해서 우리는 하나의 프로그램을 만들게 됩니다 그런데 프로그램을 만드는 과정에서 수많은 부품들이 사용이 돼요

그러면 그 부품들이 만들어 내는 복잡도로 인해서 프로그램이 더 많은 기능성을 갖는 데에 점점 한계가 나타납니다 그 한계는 누구의 한계냐 하면 기계의 한계가 아니라 사람의 한계입니다 사람은 인지 능력에 한계가 있기 때문에 인간이 감당할 수 있는 복잡도에는 한계가 있어요 그렇기 때문에 이 복잡해지는 이 프로그램에 어떤 질서를 부여하기 위해서 여러 가지 정리정돈의 기술들을 발전시키게 되는 것이죠 그 정리정돈의 기술 중의 하나가 바로 함수입니다

이렇게 서로 연관되어 있는 어떤 부품들, 다시 말해서 변수 또 데이터, 조건문, 반복문 이런 것들을 연관되어있는 것들을 함수라고 하는 테두리로 묶어서 이 부품들을 모아서 하나의 작은 완제품을 만드는 것이 함수라고 할 수가 있습니다 그런데 그 함수는 다시 하나의 부품이 되서 다른 함수나 또는 다른 부품들과 결합 되서 더 큰 프로그램을 만들거나 아니면 이것이 다시 어떤 함수가 되거나 그렇게 되는 겁니다 마치 원자로부터 출발해서 인간이 있는 것이고, 또 인간이나 우리가 보이는 이 모든 물체들이 모여서 지구가 만들어지고, 그런 행성들이 모여서 태양계가 만들어지고 이런 것과 똑같은 원리입니다 이 함수라는 것은 방금 말씀드린 것처럼 부품들을 결합해서 그것들을 하나의 부품으로 만드는 것이 함수라고 할 수 있어요 추상적인 이야기는 여기까지 하고 함수의 문법을 한 번 살펴보죠

함수의 문법은 Javascript나 php나 거의 비슷합니다 이게 함수를 만드는 문법이고요 그리고 이것이 그 만들어진 함수를 사용하는 문법입니다 그래서 함수를 만들 때는 펑션(function)이라고 적어줘요 저거는 약속되어있는 키워드이고요

그 다음에 우리가 만들려고 하는 함수의 이름을 여기에 적습니다 저기는 아무 이름이나 들어와도 됩니다 그리고 괄호가 있고요 그 다음에 중괄호로 시작해서 중괄호로 끝나게 됩니다 그리고 여기에서 만든 함수의 이름을 괄호와 함께 실행하면 우리가 정의한 이 함수의 본체, 본문 부분에 있는 로직들, 조건문일 수도 있고 반복문일 수도 있고 변수일 수도 있는데요, 그 로직들이 실행되게 되는 거예요

그것을 통해서 우리가 중복을 제거하고 재활용성을 높이고 여러 가지 장점들이 생겨나는 것이 바로 함수의 취지라고 할 수 가있습니다 그래서 이 함수의 문법은 Javascript나 php나 거의 똑같기 때문에 하나를 배우면 두 개가 아니라 뭐 열 개, 백 개를 알 수 있는 것이 또 함수라고 할 수 있습니다 12php라고 하는 파일을 만들었어요 그리고 여기에 제가 함수를 Javascript로 먼저 정의해보겠습니다

함수를 정의할 때는, 함수를 만들 때는, 사용할 때가 아니라 만들 때는 제일 먼저 펑션(function)이라고 하는 약속되어있는 키워드를 쓰셔야합니다 그 다음에 멋지지 않은 이름을 하나 정할게요 a 간단하고 좋잖아요? 이렇게 하면 우리가 함수를 하나 정의한 겁니다 이렇게 보면 그러면 이거는 a라는 이름의 함수를 정의한 거고 이 함수의 실제 동작되는 코드는 여기에 위치하게 됩니다

그래서 제가 여기에다가 documentwrite(“Hello Function”) 이라고 적겠습니다 되죠? 그 다음에 여기에서 a 이렇게 하면 어떻게 될까요? 실행해보겠습니다 보시는 것처럼 “Hello Function”이라고 하는 이 내용이 출력되고 있어요 이 내용은 어떻게 출력됐는지를 한 번 살펴보죠

이 Javascript를 Javascript 해석기, Javascript 인터프리터라고 하는 웹브라우저에 들어있는 Javascript를 해석하는 엔진이 해석을 시작합니다 펑션을 만났어요 아! 펑션이 나오네? 그럼 이 다음에 있는 것은 이 사람이 함수를 정의하려고 하는 거구나 이 만큼이라는 걸 알 수 가있겠죠 그리고 그 다음에 있는 a가 아, 그 함수의 이름이고, 그리고 이거는 그냥 쓰는 거라고 생각하세요

이건 쓰임이 있습니다 그 다음에 중괄호와 중괄호 사이에 있는 이 부분은 함수를 호출했을 때 실행되어야 되는 부분이구나 하는 것을 기억해두는 거죠 그리고 이 구문이 끝나면, 여기까지 가면 함수에 대한 정의가 끝난 거예요 함수를 만든 겁니다 그리고 웹브라우저가 이 부분을 만나면 a, 일단 a를 보겠죠? a

a가 뭘까? 뒤에 괄호 열고, 괄호 닫고가 나옵니다 그러면 웹브라우저는 어떻게 생각 하냐면 아, 함수를 호출하는 거구나 라는 것을 알 수 가있어요 만약에 여러분이 여기에 이렇게만 적었다면 이것은 뭐냐면 a라는 변수가 되요 그런데 뒤에다가 이렇게 붙여주면 얘는 바로 이것으로 인해서 변수가아니라 함수라는 것을 웹브라우저가 알 수 가있게 됩니다 그 다음에 여기 있는 이 코드를 제가 copy, copy, copy, copy를 하고 실행을 해보면 어떻게 되겠어요? 저 a라는 함수가 다섯 번 호출되겠죠? 실행

이렇게 됩니다 그럼 이게 반복문이랑 뭐가 다르냐 라는 생각이 드실 수 있어요 다릅니다 반복문은 만약에 여러분이 반복문을 쓴다면 한 곳에서만 사용을 해야 돼요 그런데 여기에 있는 이 함수를 여기에서도 호출할 수 있고, 또는 이 문서의 제일 끝에서 Javascript를 이렇게 정의하고요

이렇게 해서 이 끝에서 또 호출할 수 있다는 거죠 이게 바로 함수입니다 별거 아니죠? 그러면 php에서의 함수도 있다는 우리 간단하게 살펴보죠 php도 펑션 그리고 a, 이렇게 하면 함수에요 그리고 document

write(“Hello Function”); 이렇게 하고, a를 이렇게 하면 결과는, 아이고 죄송합니다 제가 두개를 쓰니까 이렇게 헤깔리네요 이렇게 실행을 하면 보시는 것처럼 펑션이 나오죠? 헤깔리니까 Hello PHP Function, Hello Javascript Function 이렇게 되는 거죠 이게 함수의 기본적인 사용 방법입니다

함수를 정의하고, 함수를 호출하고, 문법도 똑같죠 이렇게 해서 함수에 대한 기본적인 문법을 우리 두 언어 모두 살펴봤는데요 함수는 여기서 끝내면 안 됩니다 조금 더 나가야될 내용들이 있는데 그 내용들이 좀 길어서 일단 여기까지 끊고 다음 영상에서 나머지 이야기 계속 하겠습니다

웹에플리케이션 만들기 – JS, PHP 프로그래밍 8 : 조건문

지금까지 우리가 이런 저런 프로그램과 관련된 것들을 살펴봤는데요 지금부터 배우는 내용은 굉장히 중요한 부분이에요

앞에서 우리가 배웠던 것들은 어떻게 보면 계산기에도 있는 기능입니다 그런데 지금 우리가 배우는 이 조건문이라고 하는 것부터는 정말로 컴퓨터 영역이라고 할 수 있는 부분으로 접어들고 있는 거예요 조건문이라는 것은 어떠한 이 상황에 따라서 이렇게도 되고 저렇게도 되는 겁니다 어떤 조건에 따라서 컴퓨터가 이렇게도 동작하고 저렇게도 동작하게 하는 것이 바로 조건문입니다 그래서 Javascript와 php의 조건문은 거의 똑같아요

사실상 똑같습니다 문법을 한 번 살펴보면 조건문은 이렇게 if로 시작합니다 if로 if가 나오면 프로그래밍 언어를 해석하는 엔진들은 웹브라우저나 또는 php 엔진 둘 다 마찬가지로 “아, 이제부터 조건문이 나오겠구나” 라고 예측하게 되는 거죠

그 다음에 여기보시면 중괄호가 있습니다 중괄호 아니, 괄호죠, 괄호 괄호와 괄호 사이에는 어떤 값만이 올 수 있냐면 true와 false 둘 중의 하나만 올 수 가있어요 둘 중의 하나

참이냐, 거짓이냐 둘 중의 하나만 올 수 있어요 그 다음에 중괄호가 이렇게 나오고요 그리고 중괄호가 또 나오는데요 이 중괄호와 중괄호 사이에 있는 이 구간에는 구간에 있는 어떠한 코드는 바로 이 부분이 true인 경우, true인 경우에 여기가 실행이 되고요 만약에 if문 안에 if문 뒤에 있는 괄호에 어떤 값이 false라고 한다면 그러면 else 뒤에 따라 오는 중괄호 사이에 있는 이 구간이 실행되도록 약속되어있습니다

그리고 이런 약속은 거의 모든 프로그래밍 언어가 다 비슷비슷합니다 직접 한번 살펴보겠습니다 실습 파일을 하나 만들어주세요 6php요

이제부터는 실습 파일을 만드는 얘기는 제가 만드는 과정을 생략하겠습니다 이렇게 우리가 실습을 할 수 있는 파일을 준비했어요 script와 php 명령이 들어가는 구간까지 이렇게 만들어놨습니다 우선 Javascript에서 조건문을 먼저 사용을 해볼게요 if 그리고 중괄호에는 true 아니면 false 둘 중의 하나만 올 수 있다고 했죠? true라고 하고 그리고 document

write 그리고 참이라고 한 다음에 이것을 실행해보죠 6php 어때요? 여기에 참이라고 표시가 되는 것을 볼 수 가 있죠? 아주 중요한 내용입니다 보시는 것처럼 if 화면을 좀 키우죠

여기에 if라고 되어있는 것 보이시죠? if가 나타나면 이제 그 Javascript를 해석하는 웹브라우저는 이제 조건문이 나오는 구나 그리고 여기에 어떤 값이 들어있어요? true 죠? 제가 아까 제가 저번 시간에 비교의 결과는 true 아니면 false라고 했죠? 여기다가 여러분이 직접 true라고 써도 됩니다 그런데 여기다가 따옴표 같은 거를 하면 문자가되니까 안되죠 true 그 다음 중괄호가 이렇게 있고 중괄호가 이렇게 있어요 그런데 여기의 값이 true이기 때문에 첫 번째 중괄호에 있는 이 부분이 실행이 돼서 그 결과가 여기에 출력되고 있는 겁니다

만약에 저기에 있는 true를 false로 바꾸면 그 결과는 없죠 왜냐하면 얘가 false 기 때문에 이 구간이 실행되지 않았기 때문입니다 만약에 이런 상황에서 참이면 어떤 것을 실행하고 거짓이면 다른 것을 실행하게 하도록 할 수 있어요 그때 사용하는 것이 else 입니다 이걸 다시 true로 바꿔볼게요

true 그리고 else 안쪽에 있는 부분은 false 로 이렇게 바꿔보겠습니다 그리고 실행을 하면 보시는 것처럼 참이 나왔어요 왜 그럴까요? 여기가 true기 때문에 이 구간이, 이 구문이 실행이 된 거죠 만약에 얘를 false로 하면 어떻게 될까요? 예상해보세요 거짓이 나옵니다

아시겠죠? 그러면 조금 더 개선된 예제로 저기 true, false 라고 저렇게 적어 놓은 것은 아무런 의미가 없어요 왜냐하면 if문 조건문이라는 것은 상황에 따라서 이렇게도 동작하고 저렇게도 동작하게 하는 건데 지금 여기는 상황이 고정돼 있잖아요 true 나 false 라고 딱 박혀 있잖아요? 물론 지금도 고정돼있는 상황이긴 합니다 이렇게 하면 이 결과는 뭐에요? 이 만큼이 true 이기 때문에 얘는 참이 됩니다 그리고 얘가 2라면 이 만큼은 false가 되기 때문에 얘는 거짓이 출력됩니다

됐죠? 여전히 이 부분은 고정된 상태에요 저 부분은 고정되지 않은 상태로 바꾸려면 저기에다가 우리가 변수를 넣어주면 되겠죠? 예를 들면 result 라는 이름의 변수를 넣어주겠습니다 위에 있는 result 는 아무 이름이나 쓰셔도 상관없는 거예요 result 라는 변수 이름을 쓰고요 아이고

이렇게죠? 달러는 php에서 그리고 result 에다가 result = 1 이렇게 하면 좀 보기 편하겠죠? 이렇게 해주면 어떻게 될까요? 우리가 컴퓨터가 되서 실행시켜보죠 괄호 안에 있는 게 먼저 실행이 되잖아요? 수학처럼 여기 있는 게 실행이 되면 얘는 결과가 true 그러면 이 true 라고 하는 결과가 이 =(이퀄)로 인해서 result의 값이 되면 result는 이제 true의 값을 갖게 됩니다 얘가 true기 때문에 참을 출력하겠죠? 한 번 실행을 시켜볼까요? 실행 결과는 참입니다

어때요? 보시는 것처럼 여기 있는 이 영역은 이제 우리가 더 이상 신경 쓸 필요가 없는 영역이 됐어요 왜냐하면 result 에 따라서 참이 될 수도 있고 거짓이 될 수도 있으니까 그럼 이제 우리는 이 result 값을 결정하는 이 부분에만 집중을 하면 되는 상황이 됐다는 거죠 만약에 여기에 있는 값이 2라고 한다면 거짓이 되겠죠? 한 번 잘 따져 보세요 자 이번에는 php를 살펴보죠

보시는 것처럼 제가 php 코드를 추가해놨습니다 왜냐하면 Javascript나 php나 사고의 흐름은 같기 때문에 그냥 문법만 살짝 확인해보면 되는 거예요 지금 보고 계신 이 내용은 위에 것과 동일하기 때문에 실행을 하면 Javascript랑 똑같은 결과가 화면에 출력이 되어야 합니다 거짓이 출력이 됐죠? 그리고 여기에 있는 1이 2라고 한다면 어떻게 되겠어요? 참이 출력이 될 겁니다 아시겠죠? 보시는 것처럼 이 Javascript와 php는 굉장히 닮아있어요

그런데 그게 Javascript와 php만 닮아있는 게 아니라 C나 Java나 뭐 C#이나 이런 많은 언어들이 문법이 거의 비슷하거나 아니면 다르다고 하더라도 이런 개념적인 측면, 조건문이라고 하는 그 개념 자체는 모든 언어가 다 가지고 있다고 보시면 됩니다 그래서 하나를 알면 열이 아니라 백 개를 아는 걸 수도 있어요 아시겠죠? 다음 시간에는 조건문에 대해서 조건문을 이렇게만 살펴보는 것은 너무 추상적인 얘기고요 이거를 조금 활용해서 조금 더 실용적인 예제를 한 번 간단하게 만들어 보겠습니다

웹에플리케이션 만들기 – 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의 함수라고 하는 것은 여기에 들어오는 게 이제 입력 값, 그리고 얘가 나타내는 값이 얘가 계산된 결과가 출력 값이 되는 거니까, 우리 수학에서, 수학을 좀 잘 아시는 분들은 금방 이해가 되실 겁니다 수학에서 입력 값, 출력 값이 있죠? 정의역, 공역, 치역 이런 얘기하잖아요? 그거에 해당되는 개념이라고 할 수 있어요

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