bracket

자, 지금부터 브라켓(brackets) 이라고 하는 도구의 사용법을 알아보겠는데요 제가 실습을 할 때에 사용하려고 합니다 그래서 이거는 필수는 아닙니다

그냥 단지 코딩을 조금 편하게 해줄 뿐입니다 그래서 여러분들 이거 궁금하시면 보시고 궁금하지 않고 좀 빨리 진도 나가고 싶으시면 이거 안 보셔도 우리 수업 진행하는데 아무런 문제가 없습니다 잘 선택하셔서 할지 안 할지 결정하시면 되겠습니다 bracketsio라고 하는 주소로 들어오시면 이 브라켓이라는 프로그램을 다운로드 받아서 설치할 수 있는 화면이 나옵니다

자, 이거는 지금까지 제가 썼던 아톰(Atom) 에디터와 같은 에디터고 기능상의 큰 차이는 없는데 이 브라켓은 아무래도 html/css 코딩하는 데는 최적의 것들을 가지고 있습니다, 현 시점에서는 이거 다운로드 받아서 한번 설치해 보세요 저 같은 경우는 실습에서 이제부터 이걸 쓸거라서 여러분들한테 먼저 말씀드리고 가는 게 좋을 것 같아서 이거를 써보는 거고 또 하나의 취지는 여러분들이 지금까지 텍스트 에디트나 아톰과 같은 툴을 이용해서 코딩을 하셨다면 이 시점에서 브라켓을 한번 사용해 보시면 좀 행복하실 거예요 그 이유는 여러분이 직접 느껴보시기 바랍니다 브라켓을 설치하시면 저랑 비슷한 화면을 보게 되실 건데요 여기쯤에 보시면 이렇게 버튼이 하나 있을 겁니다

이걸 클릭하시면 폴더 열기가 나와요 자, 그 폴더 열기를 선택하시면 자, 이렇게 여러분의 프로젝트 폴더를 선택할 수 있는데요, 저도 선택할테니까 여러분도 각자 자신의 프로젝트 폴더를 선택해 보세요 저는 이 src라는 디렉토리가 프로젝트 폴더거든요 이 폴더를 선택하고 오픈 버튼을 누르면 보시는 것처럼 왼쪽 화면에는 파일 목록, 오른쪽에는 여러분이 편집하고자 하는 코드가 등장합니다 여기서 파일을 하나 만들어 볼까요? 여기 구석탱이 아무데나 파일 만들기 아무데나 마우스 올려놓고 오른쪽 클릭 그다음에 파일 만들기를 하시면 이렇게 파일이 생성이 되고요 거기에서 bracket

html 하고 엔터를 치면 이렇게 brackethtml이라는 파일이 생성됩니다 자, 그럼 밑에 있는 것과 위에 있는 이 화면의 차이는 밑에 있는 부분은 현재 여러분이 선택한 프로젝트 폴더에 속해 있는 파일 목록입니다 그리고 위쪽에 있는 것은 여러분이 지금 열어 놓은 파일이예요 말하자면 탭 기능인데, 브라켓은 그 탭 기능을 이러한 독특한 방법으로 처리합니다

자, 그래서 만약 cascading_1을 더블 클릭해서 열면 보시는 것처럼 위쪽에 탭은 없지만 왼쪽에 탭이 생기는 걸 볼 수가 있습니다 어떻게 보면은 탭이 많아지게 되면 수평으로 있으면 금방 화면을 다 쓰는데 브라켓은 이렇게 수직으로 배치를 해서 좀 더 공간 효율적으로 탭을 관리하는 나름 독창적인 방법이라고 할 수가 있겠죠? 자, 파일을 닫고 싶으면 여기에 있는 X 버튼을 누르거나 그렇게 하시면 되구요 그리고 제가 여기에다가 html 코딩을 좀 해 볼게요 <! DOCTYPE> '<html' 하고 태그를 닫으면('<html>') 자동으로 나머지 html 코드('</html>')가 완성이 됩니다 그리고 에디팅할 수 있는 위치로 커서가 자동으로 가 있습니다

여기서 엔터 치면 줄 바꿈이 되고요, 그리고 '<body' 하고 이렇게 하면('<body>') 역시나 줄바꿈이 되는 걸 볼 수가 있죠 그리고 브라켓은 기본적으로 html에 대한 자동완성 기능을 제공을 해서 여기서 마우스 커서가 깜빡거리는 곳에서 이렇게 한 칸 띄우면 보시는 것처럼 여러분이 지금 선택할 수 있는 여러 html 속성을 보여줍니다 그중에서 'style' 이라고 하고 엔터 치면 자동으로 에디팅할 수 있는 화면으로 이동을 하고요, 그리고 여기서 color: red;를 하면 이제 바디 태그 바디 태그 밑에 있는 폰트들이 붉은색이 되겠죠 그다음에 이 브라켓이 가지고 있는 킬러 아이템이랄까 킬러 function이랄까 아무튼 굉장히 좋은 기능이 여기 있는 이 번개 기능입니다 저건 이제 실시간 미리보기라는 기능인데요, 라이브 프리뷰라는 기능입니다

저걸 이제 한번 클릭해보시면 이렇게 브라우저가 뜨면서 앞에 127001 이렇게 적혀 있습니다 이거는 웹서버가 어디선가 동작하고 있다는 뜻인데 브라켓이 자체적으로 가지고 있는 웹 서버가 구동하는 겁니다

그 의미는 모르셔도 됩니다 제가 하는 말이 무슨 말인지 모르셔도 괜찮아요 자, 그리고 여기다 head 태그 하나 만들고 여기에다가 'style' 이라고 한 다음에 body 태그에 대해서 font-size를 뭐 예를 들면 300px 이라고 이렇게 줬다, 그러면 이렇게 화면이 라이브 프리뷰가 되는데, 여기서 더 재밌는 거, 브라켓은 이런 기능이 있습니다 여기에 bocy 태그에 대한 선택자가 있죠? 자, 이때에 여러분이 body 태그를 마우스 커서를 갖다놓은 상태에서 오른쪽 클릭을 해 보시면 빠른 편집이라는 기능이 있습니다 저걸 클릭해 보시면 이 body라는 태그에 지정된 css 효과를 브라켓이 찾아서 여러분한테 보여줘요

여러분이 여기서 만약에 100으로 바꾸면 보시는 것처럼 여기서 바꿨지만 이 위쪽에서 바뀝니다 css가 파일로 떨어져 있어도 브라켓이 그걸 찾아 주기 때문에 만약에 복잡한 css인 경우에는 여러분이 편집을 굉장히 편리하게 할 수 있다라는 것이죠 자 그리고 또 여기에 그 css의 효과 이 프로퍼티 위에다가 마우스를 올려놓고 오른쪽 클릭한 다음에 빠른 문서보기를 하시면 보시는 것처럼 이렇게 이 font-size에 대한 설명과 뭐 여러 가지 용법들이 나옵니다 즉 우리가 사용설명서를 빨리빨리 볼 수 있다라는 것이죠 이것도 브라켓이 갖고 있는 중요한 기능 중의 하나입니다

자 그리고 또 하나는 이 브라켓은 여러 가지 그, 확장 기능을 가지고 있어요 자, 그래서 요 오른쪽에 보시면 레고 블록 모양으로 생긴 게 있는데, 저걸 클릭하시면 이렇게 생긴 화면이 뜹니다 자 그중에서 이거 한번 찾아보세요

emmet 그리고 설치 (전 했는데, 설치 안 돼 있으면 설치 버튼이 있을 건데요) 클릭해서 설치를 한번 해보세요 자 그럼 이제 우리가 코드를 어떻게 작성할 수 있냐면 이거 한번 지워 볼게요

<! DOCTYPE>은 똑같죠 (타이핑 중) 이렇게 하고 자, 이전에는 제가 html 이렇게 태그를 열고('<' 입력) html을 했거든요 자 이제는 html이라고만 입력하고 탭 키를 누르면 자동 완성이 됩니다 그리고 여기서 body 라고 누르고 탭 키 그리고 ul 이라고 한 다음에 탭 키를 누르면 돼요 그리고 여기 li 하고 적고 뒤에다가 *3 이라고 한 다음에 탭 키를 누르시면 보시는 것 처럼 3개의 리스트가 자동 완성이 됩니다

이것도 emmet이 갖고 있는 기능입니다 그리고 여기서 여러분의 html 이라고 입력하고 그 다음으로 갈 때 클릭해서 커서를 이동하는데 emmet을 설치하고 나면 이런 메뉴가 생기거든요 그 메뉴에 보시면 Next Edit Point라고 돼 있는거 보이시죠? 저기에 있는 Next Edit Point에 해당되는 단축키를 클릭하시면 그러면 다음 에디팅 포인트로 자동으로 emmet이 이동을 시켜주기 때문에 여러분이 복잡하게 마우스 컨트롤을 하지 않아도 된다라는 겁니다 바로 이런 기능을 emmet이 제공해요 그리고 만약에 여러분이 이걸 조금 더 단축해서 사용하고 싶으면 나는 html 태그 밑에 body 태그 밑에 ul 태그 밑에 li 태그를 곱하기 3개 하고싶다 라고 쓰고 탭 키를 누르면 이게 한 번에 완성됩니다

대박이죠? 감동적이지 않으신가요? 이런데서 감동 안 받으면 자기 손해입니다 ㅎㅎ 공부하는 재미잖아요 여러분이 지금까지 브라켓이나 에밋과 같은 도구를 쓰지 않고 여기까지 고생해서 오셨다면 지금 이 수업이 굉장히 행복하실 거고 만약에 우리 수업에 처음부터 이 도구를 도입해서 했다면 여러분 별로 안 행복할 거예요 지론이 하나 있는데요 행복은 불행을 재물로 삼는다, 우리는 불행했던 만큼 행복하다, 뭐, 좀 흉한 말인데 앞에서 여러분이 고통받은 만큼 지금의 행복이 큰 거죠 자 그래서 에밋라고 하는 도구 확장 기능으로 설치하긴 했지만 이건 이제 별도의 사이트가 있습니다 자 emmet이라고 하는 docs

emmetio 라는 사이트로 오시면 이 에밋이라고 하는 이 기능의 홈페이지가 있고 이 기능은 브라켓의 기능이 아니라 emmet이라는 독자적인 어떤 체계가 있고, 그 체계를 브라켓 버전으로 만든 게 우리가 설치한 확장 기능이었을 뿐입니다 아톰에서도 에밋을 쓸 수 있고 여기저기서 에밋을 쓸 수 있어요 여기 매뉴얼을 보시면 어브리비에이션즈(Abbreviations) 발음이 너무 어려워요 여기 Syntax를 보시면 자 'div>ul>li' 는 div, ul, li, 이런 태그를 만듭니다 그리고 'div+p+bq' 를 하게 되면 이렇게 형제 관계에 있는 태그를 만든다는 거예요

그래서 여러분이 이런 문법에 따라서 이렇게 단축된 코드를 작성하면 이 emmet이 한방에 코드를 작성을 해준다는 것이죠 여기에 여러 가지 설명서가 있으니까요 그걸 참조하셔서 에밋을 사용하는 법을 익혀서 하시면 되겠습니다 그리고 에밋이 갖고 있는 또 다른 신박한(대박 참신한) 기능이 있는데요 확장기능에서 extract라고 한번 검색해보세요 extract라고 검색해 보시면 Extract for Brackets 라고 되어 있는게 있습니다 그걸 설치하시면 이렇게 생긴 아이콘이 생기거든요

그 아이콘을 클릭하면 이렇게 생긴 화면이 뜹니다 자, 여기에서 제가 이 밑에 있는 파일은 예제 파일인데요 예를 들면 여기 있는 Open PSD를 누르면 Sign in for free 라고 해서 Adobe ID를 입력하는 화면이 뜨거든요 여기에다가 여러분이 이메일과 비밀번호를 입력하시면 됩니다 자 그러면 이렇게 생긴 화면이 뜨는데 이건 뭐냐면 Adobe의 계정에 올려 놓은 이미지들, PSD 파일들을 보여주는 겁니다 Adobe에는 클라우드라는 서비스가 있더라고요 그래서 예를 들어서 이 중에서 제가 이렇게 생긴 이미지를 이렇게 클릭하면 보시는 것처럼 저 psd 파일이 이렇게 화면에 뜨고 그리고 약간의 시간이 지나면 이 오른쪽에 이 이미지에 해당되는 레이어가 다 쪼개져서 이렇게 화면에 보입니다 그러면 여기에 있는 레이어들을 우리가 선택해서 웹 페이지에 삽입하는 것을 쉽게 해주는 기능이에요 제가 여기에 있는 body 태그에 여기 있는 이 영역을 header 라고 표시해 볼게요 아니죠

html 이니까 header (입력), 탭 (누름) 그리고 이 헤더라는 부분에 이 부분을 한번 넣는다고 하면 (조금만 해볼게요) 그러면 스타일시트에는 헤더 태그에 이 부분을 제가 div로 표시하고 싶다 그러면 # 그리고 logo 라고 하고 탭 키를 누르면 에밋은 이렇게 생긴 코드를 생성해줘요 자 저기에다가 지문 모양의 저 로고를 한번 넣어 볼게요 저걸 넣으려면 일단은 이미지를 선택합니다 그리고 그 상태에서 header 밑에 있는 아이디 값이 logo인 저 엘리먼트에 대해서 여기다가 편집으로 가서 코드 힌트 표시를 선택하시면, 저건 뭐냐면, 여러분한테 코드를 추천해주는 기능이거든요 단축키를 쓰시는 걸 권장합니다

자 그럼 이렇게 생긴 목록들이 나오는데 여기 있는 것들이 다 힌트들이예요 그래서 첫 번째 나온 이거는 지금 우리가 선택한 이 이미지를 이 웹 페이지에 삽입하는 css 코드를 추천해 주는 겁니다 자, 여기서 제가 클릭하면 이렇게 url이 나오는데 즉 백그라운드 이미지로 url를 사용할 건데 images 폴더 밑에 있는 fingerprintpng이란 뜻입니다 근데 아직 우리의 현재 화면에는 fingerprint

png라는 파일이 없단 말이에요 자 이 상태에서 제가 엔터를 그냥 치면 보시는 것처럼 잠시 후에 images라는 폴더가 만들어지고 거기에 fingerprintpng 파일이 생성이 됩니다 그리고 그 파일은 이렇게 생겼어요 자, 무슨 말인지 아시겠나요? 이 포토샵 PSD 파일에 있는 이 레이어를 이 Extract라는 이 플러그인이 추출해서 그것을 images 폴더에다가 갖다 놓아라 라는 것이죠

그리고 제가 예제 파일을 우리 작업하는 이 코드를 보면 요렇게 아무것도 안 보이는 것 같지만 그렇지 않아요 왜 그러냐면 아직 여기 있는 div 태그가 부피가 없기 때문에 화면에 안 보이는 겁니다, background에 이미지가 자 그럼 여기서 제가 엔터를 치고 다시 그 코드 추천 기능을 실행시키면 보시는 것처럼 여기에 보면 height: 43px; 이라고 나오는데 이 추천한 43px은 바로 지금 여기 있는 이 이미지의 높이입니다 자, 선택하면 이렇게 되고 그리고 지금 이미지가 막 반복되고 있죠? 우린 반복되는 게 필요 없거든요 자 그런 경우에는 역시 마찬가지로 추천 기능을 열어서 여기서는 background, 요거를 안 배웠지만 여기서 배우면 되죠 repeat, 아이고, background-repeat: no-repeat repeat 하지 않는다라는 것을 선택하면 됩니다 그리고 여기에 있는 이 이미지는 이 만큼에 그 어떤 간격이 있죠 그런 경우에는 여기서 left: 238px; 이것보다는 margin-left 아 이것도 안 되네요 이거는 그냥 우리 아직 안 배웠지만 이 기능을 본다고 생각하시고 보시면 되겠습니다 left: 238px; top: 60px; 을 추천해 주는데 그리고 높이, 폭 width를 이렇게 43px로 하면 보시는 것처럼 이 위치에 오는데 이 위치에 오기 위한 이 수치 있죠? 여기 있는 psd 파일상에서의 길이 그것들을 이 Extract라고 하는 저 플러그인이 추천해주고 있습니다 그런 식으로 해서 우리가 이 디자이너가 포토샵 파일로 만든 것을 이 퍼블리싱을 할 때, 보시는 것처럼 이렇게, 빨리빨리, 여러분이 수치를 재지 않고도 정확하게 위치에 갖다 놓을 수 있는 기능을 제공합니다 자, 이것도, 이 Extract라는 기능도 브라켓이 갖고 있는 중요한 킬러 서비스 중의 하나예요

물론 이건 포토샵이라고 하는 Adobe가 갖고 있는 어떤 기술과 아주 밀접하게 관계 되어 있긴 하지만 실제로 그, 웹 사이트를 포토샵으로 제작하시는 경우에는 이런 기능을 이용하시면 상당히 편리하겠죠? 자, 이렇게 해서 제가 브라켓에 대한 여러 가지 기능들을 살펴, 설명드렸는데요, 이중에 어떤 것들은 제가 아직 설명하지 않은 것들이 좀 나와서 제가 살짝 좀 걸리긴 하는데, 그냥 그러려니 하고 들으시면 되겠습니다 이 수업 한 번 볼 거 아니지 않아요 여러 번 보실 거니까 천천히, 천천히 하시면 되겠습니다

HTML – 검색엔진최적화 1

지금부터 검색 엔진 최적화 라는 주제에 대한 이야기를 해보겠습니다 '검색 엔진'은 무엇인지는 알고 계시죠? 구글이나 네이버나 바로 이런 회사에서 하는 것이 '검색 엔진'인데요

이 검색 엔진이 동작하는 방법은 여러분이 어떤 웹사이트를 만들어서 공개하면 이 검색 엔진을 만드는 회사들이 로봇을 보냅니다 여기에서 얘기하는 로봇은 몸체가 있는 로보트 태권브이 같은 것이 아니고 그냥 소프트웨어예요 어떤 소프트웨어가 여러분의 사이트에 마치 브라우저처럼 접속해서 여러분 사이트에 있는 html 파일을 다운로드 받아서 거기에 있는 정보를 해석해서 자기들의 필요 자기들의 기준에 따라서 그것을 분류해서 사용자들이 검색했을때 사용자가 검색한 것에 가장 적합한 컨텐츠를 제공하는 것 이것이 바로 검색 엔진들이 하는 역할입니다 검색 엔진 최적화라는 것은 바로 이 검색 엔진들이 여러분의 컨텐츠를 잘 해석할 수 있도록 또 여러분의 컨텐츠가 사용자들로 하여금 검색되었을때 상위에 노출될 수 있도록 하는 여러가지 노력들을 '검색 엔진 최적화' 라고 부릅니다

그래서 이번 시간에 우리가 살펴볼 것은 검색 엔진을 최적화하기 위해서는 무엇을 해야 되는가 라고 하는 주제에 대한 이야기를 할 건데요 결론적으로 말씀드리면 여러분이 html 코드를 의미론적으로 타당한 태그로 잘 설명하는 것이 검색엔진 최적화의 기본입니다 그리고 가장 대표적인 검색엔진 중의 하나 라고 할 수 있는 구글의 검색엔진 최적화 가이드에도 이렇게 적혀 있어요 '검색엔진에게 잘 보이려고 하지 마세요 html 코드를 의미론적으로 잘 쓰면 그것이 가장 좋은 검색엔진 최적화입니다

' 라고 적혀 있습니다 그리고 검색엔진 최적화를 한다고 해서 검색 엔진이 좋아할 만한 것을 너무 과하게 하게 되면 검색 엔진이 그것을 뭐랄까요? 스팸이나 또는 사기, 이렇게 간주해서 아예 검색 결과에서 차단해버릴 수가 있기 때문에 적정한 수준의 검색 엔진 최적화의 균형을 잡는 게 상당히 중요한 문제입니다 자, 그래서 지금부터 우리가 할 것은 무엇이냐면 제가 찾아봤어요 검색엔진 최적화 관련된 자료들을 찾아봤는데 그 중에 딱 걸린 게 뭐냐면 구글에서 공개한 검색 엔진 최적화 가이드입니다

아시다시피 현 시점에서는 구글이 검색 엔진에서 말하자면 글로벌 스탠다드 같은 역할을 하고 있는 회사이기 때문에 구글의 검색 엔진 최적화 기법은 다른 검색 엔진에게도, 사실은 적용된다고 할 수가 있겠죠 구글에서 제공하는 검색엔진 최적화에 대한 매뉴얼을 저랑 같이 읽어나가면서 여러분들이 이해하기 어려울 만한 부분을 제가 해석해드리고 같이 실습도 해보면서 검색 엔진 최적화 관련된 수업을 지금부터 진행을 해볼 생각입니다 자 그럼 지금부터 출발해보죠 우리 수업에서 검색엔진 최적화라고 하는 항목을 찾아보시면 이렇게 제가 페이지에 링크를 걸어놨습니다 저 링크를 클릭하시면 구글에서 공개한 검색엔진 최적화 관련된 pdf 파일이 있어요

이 파일을 열어보겠습니다 여기있는 내용을 저랑 같이 읽어가면서 검색엔진 최적화가 무엇이고 또 왜 웹사이트를, html을 의미론적으로 잘 표현해야 되는가 라고 하는 이야기도 여기에서 중요하게 다뤄질 것 같아요 여기 나와 있는 안내 및 목차를 전체적으로 살펴볼까요 일단 SEO의 기초라고 되어 있는 부분에서 SEO는 Search Engine Optimization 의 약자입니다 한국말로는 검색엔진 최적화에요 앞으로 SEO라고 하면 검색엔진 최적화라고 생각하시면 됩니다

자, 여기 명확하고 독창적인 타이틀의 사용과 'discription' 메타 태그를 활용하기 라고 되어있는 부분은 여러분이 태그를 잘 사용해라 라고 하는 의미의 챕터구요 '사이트 구조를 개선하기'로 되어있는 부분에서는 여러분의 사이트에 접근할 수 있는 URL을 어떻게 해야지 검색엔진 최적화에 도움이 되는가 그리고 사이트 내에서 어떻게 이동할 수 있는 동선을 설계해야지 검색엔진이 좋아하는가 이런 이야기들이 나와 있습니다 '콘텐츠 최적화'라고 되어 있는 부분은 이것 역시 마찬가지로 여러분이 컨텐츠를 작성할 때 태그를 적합하게 사용하여야 한다는 그런 의미이구요 그리고 '검색 로봇에 대한 대처' 라고 되어 있는 부분은 검색 엔진들이 여러분의 사이트의 접근해서 여러분의 사이트에 담겨 있는 정보들을 가져가게 되는데요, 그 중에 어떤 정보들은 검색엔진에 노출되지 않았으면 하는 정보들이 있을 수 있잖아요 어떤 것들은 노출되었으면 하는 것이 있고

바로 그런 것들을 검색엔진에게 알려줘서 여러분이 원하는 형식으로 검색 결과가 나타날 수 있도록 하는 방법들에 대한 챕터입니다 그리고 모바일의 최적화라고 되어 있는 부분은 아시다시피 데스크탑의 시대는 가고 있죠 오늘날에는 'mobile first'라고 해서 사이트를 만들 수 있을 것인가 라고 하는 내용이 나와 있습니다 '사이트 홍보와 분석'이라고 하는 것은 웹 사이트를 홍보하는 방법 또 웹 사이트에 어떤 문제가 있는 것들을 여러분이 쉽게 검출할 수 있게 구글에서 제공하는 솔루션들이 있습니다 그러한 것들을 사용하는 방법들에 대한 이야기가 나와 있어요

이 부분은 우리가 지금부터 검색엔진 최적화 에 대한 얘기를 할 건데 그러면 아무래도 샘플이 필요하겠죠 그 샘플에 대한 이야기입니다 그리고 여기 나와 있는 검색엔진 최적화가 어디에 영향을 미치는가 라고 되어 있는 부분이 있는데요 유료광고 애드워즈라고 하는 부분은 여러분이 구글에 돈을 내면 광고를 집행할 수 있어요 그러면 어떤 특정한 키워드, 다시 말해서 '검색어'에 따라서 적합한 광고들이 나타나게 되는데요

이것은 검색엔진 최적화와 상관없다는 이야기입니다 그리고 검색엔진 최적화에 영향을 미치는 부분은 바로 이런 부분 기본 검색 결과에 대한 부분만 검색엔진 최적화에 영향을 미친다는 이야기예요 자, 그러면 조금 길어질 것 같으니까요 다음 영상에서 이 챕터들을 하나하나 확인하면서 여러분들에게 의미가 있을 만한 또 html이라는 주제와 관련이 있을 만한 하지만 너무 구글에 특화되어 있지 않은 이야기를 제가 선별해서 여러분들에게 들려 드리도록 하겠습니다

웹 애플리케이션 만들기 – 웹 에플리케이션을 만드는 순서

이번시간에는 웹 애플리케이션을 만드는 순서에 대해 살펴보는 시간을 갖도록 하겠습니다 우리가 웹 애플리케이션을 만든다고 하면 제일 먼저 해야할것은 당연히 구상이겠죠 "뭘 만들 것인가" 라는 거에 대해서 생각하는 단계입니다

그 다음에는 그 구상을 바탕으로 해서 좀더 세부적인 실행계획을 세워가는 단계인데요 그걸 보통 현업에서는 기획이라고 부르고요 기획적인 일을 전문적으로 하는 분들을 기획자라고 부릅니다 그리고 기획에서는 무엇을 만들것인가를 보다 분명하게 정의하고 또 어떤 기능들이 있어야 하고 각각의 기능은 어떤 사용성을 가져야 하는가 이런 얘기까지 정의하는 것을 기획자들이 하는 일인데요 물론 기획자와 디자이너의 경계는 불분명하긴 합니다 하지만 어쨌든 한국에서는 기획자라는 별도의 직군이 존재하는 경우가 대부분이고 기획파트에 계신 분들은 이런 일들을 담당 하세요 그 다음에 기획이 끝나면 그 기획을 바탕으로 해서 디자인 작업이 들어가는 것이죠 디자인은 웹사이트를 아름답게 보이도록 하는것 또는 사용자가 편리하게 사용할수 있도록 하는 사용자 경험을 향상시키는 것 그러한 작업을 하는것이 디자인 파트가 하는 일이죠 그 다음에 개발이 시작이 됩니다 우리의 관심사인 Development라고 하고 또는 프로그래밍이라고도 합니다 또는 엔지니어링이라고도 할수 있겠죠 그래서 실제 이 서비스가 동작하도록 하는것이 바로 개발이 하는 일인데요

물론 개발과 디자인은 기획이 끝난 다음에 동시에 진행되는 경우도 있기 때문에 그 순서는 꼭 엄격하게 지켜지라는 보장은 없습니다 그리고 개발이 다 끝나면 최종적으로 테스트라는 작업을 하죠 작은조직에서는 개발자나 아니면 그 회사의 구성원 들이 테스트를 함께하지만 조금 체계가 잡혀있거나 조금 큰 조직의 경우에는 테스팅을 전문적으로 하는 직군이 따로 있습니다 또 테스트라는 것은 QA(Quality Assurance)라고도 부릅니다 그래서 하는 일의 핵심은 버그를 찾는게 가장 중요한 것일거구요

그리고 뭔가 놓쳤던 부분들 그런 부분들을 잡아내는 역할을 하시는분들이 테스트 단계에서의 일을 하는 분들이죠 그리고 가장 중요한 것은 앞에서 구상부터 테스트까지의 과정을 끊임없이 반복하면서 현실의 필요를 충족시켜가는 과정을 계속해서 꾸준히 해나가는 것이 아주 중요한 부분이라고 생각이 됩니다 그리고 이러한 반복적인 작업을 잘 하기 위해서는, 제가 생각하기 굉장히 중요한 개념이 하나 있는데요 뭐냐면 Start Small이라는 것입니다 처음부터 크게 만들지 말고 작게 시작해서 끊임없이 개선하는 반복적인 작업을 통해서, 정말로 필요한 웹 애플리케이션을 만들었으면 좋겠다 라는 뜻입니다 그런데 처음 서비스를 만들거나 아니면 웹에 대한 이해가 없는 분들이 경영쪽에 있거나 그런 경우에는 뭔가 좀 현실과는 동떨어진 실행 계획이 만들어지는 경우가 많이 있습니다

물론 그게 틀렸다고 할 순 없어요 하지만 제가 생각하는 주관에서는 그것보다는 Start Small하게 시작하는게 좋다라는 얘기를 저는 하고 싶은겁니다 왜냐하면, 개발이라는 것은 실제로 굉장히 복잡한 일입니다 그렇기 때문에 개발은 1차적으로 가장 신경써서 해야할 것은 일단, 완성하는 것이에요 제가 하는 수많은 프로젝트들이 완성조차 하지 못하고, 시간과 돈을 낭비하고 또 사람들이 빠져나가면서 프로젝트가 Drop되는 것을 너무나 많이 봐왔습니다 완성이 가장 쉬운거면서 또 가장 어려운것이 일단 완성하는 것입니다 그리고 이런 얘기가 생각나요 정확하게는 기억이 안나는데 제가 옛날에 학교에서 수업시간에 들었던 얘깁니다

사람들이 잔디밭에 이렇게 길을 내놨더니 사람들이 그 길을 이용하지 않고 다른데로 다니는 거에요 그래서 사람들이 많이 다니는 길은 (이렇게) 까져가지고 거기에는 이제 잔디가 안살게 되는 그런 상황이 되는거죠 그런데 그때 어떤 사람이 사람들이 다녀서 까진 그 길에다 실제로 길을 내보니까 사람들이 더 좋아하더라 대충 그런 얘기였던걸로 기억하는데 서비스도 저는 비슷하다고 생각합니다 물론 처음에 서비스를 만드는 사람 입장에서는 이 서비스가 어때야한다라는 주관이 당연히 있을겁니다 그건 굉장히 중요한 것이고 그게 흔들리면 안된다고 생각해요 하지만 실제로 사용자들이 이 서비스 안에서 여러가지 활동들을 할텐데 그 활동들을 하는 과정에서 생겨나는 여러가지 필요들 또 여러가지 문화들 그런 것들을 잘 뒷받침 해주는 것이 제가 생각하기에는 좋은 접근방법이 아닐까 라는 생각이 들어요 그래서 처음부터 모든 기능을 만드는것보다는 최소한의 기능으로 시작해서 정말 필요하다고 생각하는 기능을 신중하게 추가하는 것이 좋은 접근방법이 아닐까 싶습니다 그리고 또하나 제가 얘기하고 싶은 중요한 주제인데요 바로 복잡도 라는 것이 존재하고요 아주 중요한 개념이에요 예를 들어서 체크박스, 이렇게 생긴게 체크박스입니다

그래서 보통 체크박스는 어디서 쓰냐면 회원 가입 같은걸 할때 수신동의 같은걸 할때 체크 하잖아요 아니면 체크 안하면 수신거부가 되는 것이고 그때 사용하는 그것이 바로 체크박스인데요 만약에 체크박스가 하나라고 한다면 일어날 수 있는 상황은 두가지 입니다 체크가 되거나 체크가 안되거나 즉 하나의 체크박스는 두가지의 경우 좀더 수학적으로 표현하자면 두가지의 경우의 수를 가질수가 있습니다 그럼 체크박스가 두개인 경우에는 몇가지의 경우가 생길까요? 이렇게 네가지의 경우가 생깁니다 체크가 안되어 있거나 체크가 왼쪽만 되있거나 체크가 오른쪽만 되있거나 체크가 다 되어있거나 요렇게 네가지의 경우가 생겨요 즉, 두개의 체크박스는 네가지의 상황이 생긴다는 것이고, 그 얘기는 뭐냐면 네번의 테스트를 해야지 정확한 테스트가 이루어 졌다고 볼수 있다는 것이죠

그 다음에 체크박스가 3개가 되면 몇가지의 경우가 생기냐면 바로 여덟가지의 경우의 수가 생깁니다 따져볼 필요는 없겠죠 그렇다면 좀 극단적인 상황을 상정해서 체크박스가 50개라면 몇가지의 경우가 생길까요? 한번 상상해보세요 좀 많을수도 있을것 같죠 1000개? 1000개만해도 엄청나게 많은 숫자이긴 한데 천조개의 경우의 수가 생깁니다 천조 이 천조라는 숫자의 크기는 인간이 가늠하기 힘든 숫자입니다

그깟 체크박스 50개를 사용했을 뿐인데 천조개의 경우의 수가 실제로는 생긴다는 거에요 그래서 만약에 정말 제대로, 무식하게 테스트를 한다면 천조번 테스트를 해야하는 거에요 그러다가 다시 뭔가가 바뀌면 다시 천조번 테스트 천조번 테스트 그리고 뭔가 오류가 있어서 오류를 수정하면 다시 천조번 테스트 이렇게 해야된다는 것이죠 물론 실제로 천조번을 테스트하진 않죠 여러가지 테스팅 쪽에서도 다양한 방법론과 다양한 요령들이 있기 때문에 천조번을 테스트하지 않고도 어느정도 문제가 없다라고 간주할수 있는 그런 테스트방법들이 존재하겠죠 그래서 제가 지금까지 말씀드렸던 경우의 수는 이렇게 계산하시면 됩니다 50개의 체크박스는 2의 50승을 하시면 구할수가 있어요 그 결과가 천조 인거죠 그리고 저기에 있는 저 50이라는 숫자를 수학에서는 지수라고 부릅니다 그리고 저 지수의 값이 커짐에 따라서 이 수가 폭발적으로 증가하는데요 지수의 크기가 커짐에 따라서 수의 크기가 폭발적으로 증가하는 그것을 바로 지수폭발이라고 부르는 것이죠 그리고 기능 하나가 추가되는 것은 바로 이 지수폭발을 의미하는 것이기 때문에 정말 중요하게 우리가 생각해야 되는것은 기능 하나를 추가하는 것에 신중에 신중을 기할 필요가 있다는 겁니다 그래서 제가 결론적으로 하고싶은 얘기는 Start Small하게 가벼운 마음으로 시작하자는 거죠

물로 이건 저의 주관입니다 이렇게 해서 웹사이트를 구축하는 전체적인 순서 그릭고 구축하는 과정에서 제가 강조하고 싶은 것은 Start Small이라는 사실 그 두가지에 대해서 알아보는 시간을 가졌습니다

생활코딩

안녕하세요 생활코딩입니다 생활코딩은 일반인에게 프로그래밍을 알려주는 비영리 활동이고요

온라인을 통해서 주로 강의가 진행되고 있습니다 또 오프라인에서도 비정기적으로 강의를 진행하고 있으니깐요 생활코딩 홈페이지를 참조하시면 오프라인에서 진행하는 강의에 대한 소식을 들을수가 있습니다 생활코딩의 목적은 일반인에게 프로그래밍을 알려주는 것이고요 또한 처음 시작하시는 분이 중급으로 넘어가고 중급인 분들이 고급으로 넘어갈 수 있는 연결점들을 제공해드리는 것이 생활코딩이 하고자 하는 일입니다 이 동영상은 프로그래밍을 처음 시작하시는 분들에게 왜 지금이 프로그래밍을 하기 좋은 때인지, 또 왜 지금이 프로그래밍을 해야되는 때인지에 대해서 설명을 드리기 위한 영상입니다 이게 뭔지 아시나요? 컴퓨터 학원입니다

제가 어렸을때는 김밥천국만큼이나 컴퓨터 학원이 이렇게 많이 있었습니다 그런데 오늘날은 컴퓨터 학원이 많이 없죠 그래서 곰곰히 생각해봤어요 왜 그 당시에는 컴퓨터 학원이 그렇게 많았을까 아마 부모 입장에서는 자식들이 이사람처럼 되길 원했을 겁니다 그리고 자식들은 이게 하고 싶었을 겁니다

그래서 부모와 자식의 욕망이 절묘하게 맞아 떨어지는 지점에 컴퓨터 학원이 있었던 거죠 그덕에 제가 어렸을때는 이렇게 어린 꼬꼬마들조차도 프로그래밍을 할 수 있는 이른바 고수들의 시대였습니다 그런데 오늘날 이런 친구들이 프로그래밍을 한다고 하면 천재, 신동 이런 말을 듣죠 당시에는 제가 사용했던, 제가 어렸을때 사용했던 프로그래밍 언어는 GW베이직과 같은 이런 언어였는데요, 이런 언어들은 생산성이 좋지 못했기 때문에 많은 코드를 작성해도 쪼끄만 프로그램을 만들수 있었습니다 그래서 당시에는 그 소프트웨어를 만든다는 것은 많은 시간과 많은 자본과 많은 사람들이 필요한 일이었던 것이죠 그래서 지금 우리가 알고있는 대표적인 소프트웨어 기업들, 마이크로소프트, 어도브, 오라클 이런 회사들은 어찌보면 이런 시대의 산물이었다고 할 수 있습니다 그러다가 아주 큰 사건이 있었죠

바로 모바일의 혁명이 일어납니다 그래서 지금까지 PC를 중심으로 완만하게 성장하던 IT가 모바일을 기점으로 폭발적인 성장을 이루게 됩니다 그 와중에서 이사회 구석구석에서 아주 많은 변화들이 일어나게 되죠 그런데 그 변화중에서 제가 주목하는 부분은 바로 자영업 개발자들이 등장하기 시작했다는 겁니다 다른 말로는 프리랜서 개발자라고도 하죠

그래서 이분들 보면 대단해요 혼자 개발도 하고 또 사업도 운영하고 그리고 홍보도하고 마케팅도 하고 심지어 디자인을 할뿐만 아니라 심지어 다른 회사의 직원으로 다니는 경우도 많이 봤습니다 이러한 일들은 이전에 제가 아까 말씀드렸던 어도브나 마이크로소프트와같은 회사들이 시작했던 시절에는 상상도 할수 없었던 일이었습니다 혹시나 그런것들이 가능하다고 한다면 그런일을 해내는 사람들은 그당시에는 천재라고 불렸던 것이죠 그리고 오늘날 이런 일을 할수 있는 사람들을 우리는 일을 잘하는 사람이라고 합니다 명칭이 어떻게 바뀌었느냐가 시대의 변화를 암시하는데, 그렇다면 이러한 변화는 어떻게 가능했던 것일까요 과연 10년, 또는 20년만에 사람들이 똑똑해지기라도 한걸까요? 그렇지 않겠죠

아시다시피 사람은 한세대 안에서 진화가 이루어지지 않죠 그러면 무엇때문에 이러한 변화가 일어났을까요 저는 이것때문이라고 생각합니다 즉 생산성이 드라마틱하게 변화한 것이죠 그 어떤 분야도 이 IT 또, 그중에서도 소프트웨어만큼 극적인 생산성의 향상을 이루지 못했고 이루지 못할겁니다 그것은 아마도 이 소프트웨어라는 분야가 다른 분야와는 다르게 물질적인 기반이 아니라 정신적이고 지식기반위에 서있는 산업이기 때문일겁니다

그리고 이러한 생산성의 극적인 변화, 극적인 향상을 상징하는 몇가지 중요한 풍경들을 제가 준비해봣는데요 같이 보시죠 우선 API라는 것이 있습니다 API는 Application Programming Interface의 약자인데요 이것이 무엇인지는 여러분들이 생활코딩을 과정에서 여러분들이 배우게 될겁니다 여기보시면 지도서비스가 나옵니다 지도서비스, 과거에는 군사정보였습니다

그래서 일반인들은 접근조차 할수 없었던 이런 정보들을 우리는 너무 쉽게 사용할수 있죠 그리고 이런 서비스들이 제공하는 API라는 것을 이용하면 자신의 서비스, 자신의 앱, 또는 자신의 웹페이지에 이런 대단한 지도서비스를 불과 1분,2분만에 장착할수 있게 됩니다 그것을 가능하게 해준 것이 바로 API라는 겁니다 그리고 Cloud Computing이라는 것이 있습니다 Cloud Computing 이라는 것은 Computing 작업들을 로컬의 컴퓨터에서 하는 것이 아니라 인터넷 너머에 있는 아주 거대한 컴퓨터 그룹에 의해서 실행한다라는 그런 개념인데요 이 Cloud Computing은 모바일 혁신만큼이나 굉장히 큰 변화이지만 이것이 기업시장에서 일어나는 변화이기때문에 일반인에게는 잘 알려져있지 않은 변화이기는 합니다

만약에 여러분들이 어떤 웹서비스를 운영한다고 생각해보죠 그런데 서비스를 오픈한지 일주일만에 100만명이 들어왔어요 그럼 대박이죠 그런데 전통적인 관점에서 그것은 대박이 아니라 쪽박입니다 심지어 슬픈 쪽박이에요

왜냐하면 준비되지 않은 성공이기 때문에 그렇습니다 불과 1주일만에 이 스타트업이 100만명의 접속자를 버틸수 있는 환경을 infra를 구축하는 것은 불가능하기때문에 그렇습니다 그런데 오늘날은 이 Cloud Computing과같은 사업들이 있어서 여러분들이 어떤 서비스를 운영하는데 1주일만에 100만명이 접속했고 1000대의 컴퓨터가 필요하다면 그 서비스에 웹을 통해서 접속해서 클릭만하시면 불과 1분만에 1000대의 컴퓨터가 만들어져서 서비스되기 시작합니다 그러다가 그 서비스가 다시 사용자가 줄어들게 되면 그것 역시도 과거의 관점으로는 망한겁니다 왜냐하면 이미 사놓은 컴퓨터를 어떻게 처분하기가 쉽지가 않기 때문이죠

그런데 Cloud Computing을 이용하면 여러분들이 클릭만하면 1000대의 컴퓨터가 순식간에 사라지면서 그때부터 과금이 발생하지 않습니다 그리고 너무나 잘아시는 App Store가 있어서 과거에는 자신이 소프트웨어를 만들었다면 스스로 홍보도 해아되고 결제도 붙여야되고 홈페이지도 만들어야하는 여러가지 복잡한 작업들을 직접 해야되었던것에 비해서 AppStore가 다양한 플랫폼 위에서 구현되면서 여러분들은 그냥 소프트웨어를 만드는것에 집중하면 되고 판매, 결제 ,운영 이런것들은 App Store로 여러분들은 아웃소싱하게 되는 거겠죠 물로 30%나 띄어가겠지만요 그리고 Open Source라는게 있습니다 저는 이것이 아주 중요한 것이라고 생각하는데요 우선 소스라는것 무엇이나면 코드라는 말과 같은 뜻입니다

그러면 소스, 코드라는것은 무엇이냐면 일종의 소프트웨어의 설계도라고 할수 있습니다 여러분들이 건물을 만든다고 하면 제일 먼저 하는것은 무엇이겠어요 바로 그 건물이 어떤 모양이고 어떤 기능성을 갖고 있어야하는지에 대한 설계도를 먼저 만들겠죠 소프트웨어도 마찬가지입니다 여러분들이 만들고자하는 그 프로그램의 생김세, 동작방법을 여러분들이 코드라는 것에 텍스트로 작성해서 설계도를 작성을하시면 컴퓨터는 그것을 이용해서 프로그램을 만들어줍니다

그런데 이 소프트웨어에서의 설계도와 건축에서의 설계도는 똑같은 말로 비유하긴 했지만 사실은 완전히 다릅니다 왜냐하면 건축에서는 설계도만으로 건물을 만들진 않죠 설계도를 시작으로 해서 많은 사람, 많은 자본, 많은 자원들이 투입되서 하나의 건물이 아주 힘겹게 만들어지기 때문에 건축은, 건설은 아무나 할수있는 일은 아니죠 하지만 이 소프트웨어라는 것은 코드만 있으면, 설계도만 완벽하다고 하면 프로그램은 순식간에 만들어지기 때문에 소프트웨어에서의 설계도라는 것은 곧 제품이라고 할수 있습니다 하지만 건축에서의 설계도는 설계도일 뿐이지요

바로 오픈소스라는 것은 설계도에 해당하는 코드를, 소스를 공개하자는 운동 또는 공개하는 정책이라고 할수가 있습니다 그래서 오픈소스가 초창기에는 아주 독특한, 특이한 선각자들에 의한 문화적인 운동이었다고 한다면 오늘날은 오픈소스가 소프트웨어 세계를 지배하는 가장 중요한 전략, 또는 정책으로 자리잡았다고 할수가 있습니다 그 증거로 여러분이 지나가는 개발자를 아무나 붇잡고 당신의 생계에 특허와 오픈소스중에 무엇을 많은 공헌을 했나요하고 물어본다면 대부분의 개발자는 오픈소스라고 대답할겁니다 그리고 생활코딩에 다양한 수업이 올라와있는데요 그중에 오픈소스가 아닌것은 불과 5%도 되지 않습니다 그만큼 오픈소스가 개발자들의 문화에 차지하는 비중은 실로 크다고 할수 있는 것이지요 지금까지 제가 설명 드린것은 생산성이 드라마틱하게 향상되었다라는 것을 제가 보여드리기 위한 여러가지 현상들, 변화들을 보여드렸습니다

이것을 통해서 제가 여러분들께 드리고 싶은 이야기는 바로, 지금이 코딩하기 좋은 날이라는 겁니다 저는 프로그램을 10년전에 했습니다 그리고 약간은 후회가 되요 왜 그렇게 프로그램을 일찍 시작해서 그렇게 고생을 했을까 물론 저보다 10년 전에 시작하신 분들이 더 큰고생을 했겠지만요 그래서 제가 여러분들께 드리고 싶은 말은 쉬워진 것은 프로그램 밖에 없습니다

그리고 전통적인 분야는 예나 지금이나 어렵기는 마찬가지 그래서 여러분들이 이미 가지고 있는 필드에서의 경험, 통찰력 그런것들에 쉬워진 소프트웨어 기술을 결합한다면 여러분들은 아주 강력한 날게를 갖게되는 겁니다 그런 의미에서 지금이 코딩하기 좋은 날이라는 것이죠 얘기의 분위기를 조금 바꿔보겠습니다 자 이것은 그래프죠

여기 그래프에 40만, 9만7천, 5만3천, 4천600, 900, 13이라고 적혀있는데요 저 숫자가 의미하는 것은 무엇일까요? 당연히 맞추기가 힘들죠 제가 힌트를 드리겠습니다 제일 밑에 있는 40만은 IBM이고요, 제일 위에있는 13이라는 숫자는 인스타그램이라는 회사를 의미합니다 이숫자가 의미하는 것은 바로 종업원의 수 입니다

IBM은 40만명 , MS는 9만7천명, 구글은 5만3천, 페이스북은 4천6000, 인스타그램은 13명의 직원수를 가지고 있다는 것이죠 인스타그램은 얼마전에 1조2천억원인가 그 돈에 인수가 되었습니다 직원수는 불과 13명에 불과하고요 인스타그램을 사용하는 사용자는 과거에 제가 본 자료만으로도 5천만명의 사용자를 가지고 있는 서비스입니다

그런데 이런 서비스를 13명이 운영하고 있다는 거에요 그중에서 디자이너 1,2명이 있을수 있겠죠 그리고 경리를 보는 분이 있을수 있습니다 그럼 한명을 빼야겠죠 그리고 대표는 처음에는 코딩을 했을지 몰라도 지금은 코딩을 하고 있지 않을 가능성이 크죠

그럼 그분도 뺀다고 하면 이 인스타그램이란 회사는 불과 4,5명밖에 되지 않는 프로그래머 또는 엔지니어에의해서 운영되었을거라고 저는 추정을 해봅니다 정확하진 않습니다 5,000만명이 사용하는 인프라를 불과 4,5명이 되는 엔지니어가 지탱하고 있다는 것 이것은 과거로서는 상상할수 없던 일입니다 그리고 이러한 변화가 가능하게 된 것은 아까 제가 보여드렸던 API, Open Source, Cloud Computing, App Store

로 이러한 것들이 복합적으로 작용한 결과가 드라마틱한 생산성의 향상을 가져왔고 그러한 것을 10분 활용해서 기회를 잘 잡은 회사가 인스타그램, 트위터, 페이스북이라고할수 있는 것이죠 그리고 그래프를 자세히 보시면 밑에 있는 기업은 위에 있는 기업들에게 인프라를 제공합니다 그리고 위에 있는 기업은 아래쪽에 있는 기업의 인프라를 사용합니다 생각해보세요 IBM

아주 오래된 기업이고 존경받는 기업입니다 그리고 인스타그램, 아주 핫한 기업이죠 IBM과 인스타그램중에 어떤 회사가 더 유명한 회사일까요 물론 IBM이 유명한 회사라고도 할수 있겠지만 최소한 저희 조카나 제 친구들은 IBM이라는 회사를 더이상 알지 못할 겁니다 특히나 IBM이 일반 소비자 시장에서 철수했기 때문에 더더욱 그렇겠죠

오히려 저희 조카에게는 인스타그램이 IBM보다 더 유명한 회사일수 있습니다 세월이 바뀌면서 그 세월의 주인공도 달라지고 있다는 것이죠 저도 이 그래프를 만들면서 이 그래프의 결과가 충격적으로 느껴졌습니다 그리고 이것이 생각이 났는데요 바로 우리가 살고 있는 지구입니다 옛날에는 이 지구를 지배하는 사람의 수가 이렇게 많았는데 오늘날은 이렇게 적어지고 있다는 것이죠

이른바 슈퍼개인이 출현하고 있다는 겁니다 그 대표적인 사람으로 주커버그를 들수 있을것 같아요 페이스북의 창업자고 최연소 억만장자고 아주 젊은 나이에, 보시는 것처럼 타임지의 표지를 장식하고 있습니다 그리고 떠오르는 사람들이 또 있는데요 바로 이분들입니다 여기 뭐라고 써있나요

하이패스 확대개통이라고 써 있습니다 제가 명절때마다 톨게이트를 지나가는데요 톨게이트를 지나갈때마다 하이패스가 한칸씩 늘어나고 있더라고요 그리고 이런 생각 안해보셨나요 그러면 저 매표소에서 표를 받던 분들은 어떻게 지내고 있을까? 어떻게 살고 계실까 이런 생각 해본적 없으신가요 자, 그렇게 보면 이 톨게이트라는 공간은 다수의 편리와 소수의 생존이 치환되고 있는 공간이라고 할수가 있을겁니다 그리고 과연 이러한 현상이 톨게이트에서만 일어나는 것일까요? 주커버그, 물론 똑똑한 사람입니다

하지만 이 톨게이트에서 일하고 계셨던 노동자들도 각자 자신의 위치에서는 유능한 사람이었을 겁니다 그럼에도 불구하고 이러한 불평등과 이러한 소외가 일어나는 이유는 바로 기술때문입니다 권력이라는 것은 힘에 대한 문제이고 오늘날 가장 강력한 힘은 바로 기술에서 나오기 때문에 오늘날 가장 중요한 권력은 저는 기술이라고 생각합니다 창입니다 그럼 뭐가 나올까요? 방패가 나오죠

창과 방패 모순을 의미합니다 여러분이 어떤 사업을 일으켜서 큰 부를 이루고 싶다면 기술을 알아야 합니다 그리고 누군가가 휘두르는 권력으로부터 자기자신과 자기가 사랑하는 사람들과 또는 많은 사람들을 보호하고 싶다면 역시나 기술을 알아야 합니다 뭔가 모순되는 것이지만 잘 아시다시피 우리 현실이라는 것이 언제나 이런 모순되는것 사이에 있잖아요 그렇다면 어떤 기술을 배워야 될까요? 세상에는 다양한 기술들이 있습니다

하지만 그 기술들도 나름의 위계를 가지고 있는데요 바로 기술을 지배하는 기술이 있는데 그것이 바로 프로그래밍입니다 다른말로는 코딩이라고도 하죠 그래서 제가 하고싶은 말은 바로 지금은 코딩해야하는 날이라는 겁니다 그런데 그 많던 컴퓨터학원은 다 어디 갔을까요? 그런말이 있죠 개똥도 약에 쓰려면 없다고요

그래서 시작한 개똥같은 캠패인이 바로 생활코딩입니다 고맙습니다

deepsleep – 쉽다의 다형성 (PHP VS JAVA)

지금부터 '쉽다'라는 말이 상당히 다양한 얼굴을 가지고 있을 수 있다, 라는 이야기를 php와 java라는 언어의 비유를 통해 해보려고 합니다 우선 php는 처음부터 큰 포부를 가지고 시작한 언어는 아니었어요 원래 이름도 상당이 소박했습니다 Personal Homepage Tools 였습니다 개인의 홈페이지를 만드는 도구라는 뜻이죠 나중에는 이 이름이 좀 없어 보이잖아요 그래서 php가 이름을 바꿉니다 약자는 같지만 그 의미를 Php는 Hypertext Preprocessor이다, 라는 이름으로 그 이니셜을 바꿉니다 그 안에 또 php라는 말이 들어 있으니까 다시 php는 hypertext preprocessor다, 라는 뜻이 되죠 재귀적인 유머라고 할 수 있는데 이 얘기를 이해하실 수 있을지는 모르겠습니다 글로 보면 더 편하실 텐데 그런데 예상 외로 큰 성공을 해서 지금은 컴퓨터 언어 중에서 10위 권 안에는 꼭 들어가 있고 이걸 웹과 인터넷으로 범위를 좁힌다면 그 영향력은 더욱 더 커집니다 말하자면 php는 작게 시작해서 크게 성공한 말하자면 자수성가형 언어라고 할 수 있습니다 그런데 php는 처음에는 그냥 가벼운 마음으로 시작했고 또 그 언어가 발전해 나가는 과정에서 정교한 검증 과정을 거쳐서 발전한 언어가 아니기 때문에 일관성 같은 것들이 많이 부족합니다 그래서 자연스럽게 php가 성장하면서 많은 시스템에서 사용되면서 php는 그 언어가 갖고 있는 정통 언어가 가져야하는 엄격함, 또 일관성같은 것들이 부족했기 때문에 그런 것들에 대한 요구를 받게 됩니다 그래서 그런 요구를 하나하나 받아들이면서 지금의 상태에 도달했습니다 예를 들어 php는 처음에 객체지향 기능이 없었어요 근데 나중에 객체 지향을 도입했죠 반면에 java는 '썬'이라고 하는 아주 큰 회사의 엄선된 엔지니어들에 의해 정교하게 설계되어 만들어진 언어입니다 그리고 처음부터 기존의 언어들이 갖고 있었던 객체지향이라고 하는 특성과 여러 가지 특성들을 언어들이 다양하게 가지고 있었는데 java는 처음부터 '우리는 객체지향 언어를 만들겠어'라고 선언을 하고 만든 언어이기 때문에 java라는 언어는 객체 지향의 화신 같은 언어입니다 그래서 이 언어는 객체지향이라고 하는 것을 강제합니다 그래서 java는 '객체지향'이라는 산을 어떻게든 대충이라도 꼭 넘어야만 이 언어를 쓸 수 있다는 점에서 초심자한테는 상당히 어려운 언어라고 할 수가 있습니다 하지만 이 언어는 객체지향이라는 목적성을 처음부터 세팅해서 그 외의 것들은 다 배제했기 때문에 비교적 일관된 언어적 특성을 가지고 있습니다 그 얘기는 뭐냐하면 이 언어는 일단 잘 다루게 되면 제가 생각하기에 php같은 언어보다 기억해야 할 것이 오히려 적다, 라는 그런 장점을 가지고 있습니다 말하자면 php는 진입하기는 쉽지만 진입 후에는 어려울 수 있는 측면이 있고 java 같은 경우는 진입하기는 어렵지만 진입한 후에는 오히려 쉬운 면이 있는 것 같습니다 그런데 오해하시지 않으셨으면 좋겠다는 생각이 드는 것은 처음에 진입하기 쉬운 것도 굉장히 중요한 특성입니다 그리고 진입한 후 나중에 중급자가 되어서 쉽다라는 것도 굉장히 중요한 특성이기 때문에 php와 java 중 어떤 언어가 더 좋다, 라는 얘기를 이 글에선 하지 않습니다 java와는 다르게 php는 원래는 없었던 객체지향을 나중에 채택했습니다 그래서 기본적으로 함수를 중심으로 해서 언어가 설계되어 있어요 자연스럽게 여러분이 함수까지만 알면 이 언어를 충분히 사용할 수 있습니다 객체 지향은 선택사항이에요 여러분이 쓰고 싶으면 쓰고, 쓰기 싫으면 안 쓰면 되거든요 그래서 초심자는 php를 사용하는 것이 이론적으로는 쉽습니다 왜냐하면 객체지향이라는 것은 나중에 필요할 때 쓰면 되니까요 생각해보면 객체지향이라는 것이 하늘에서 뚝 떨어진 것이 아니고 역사적인 발전 과정을 통해서 함수가 먼저 있었고 함수가 많아짐에 따라 연관된 함수를 그룹핑해서 정리정돈 하기 위해서 만들어진 것이 객체지향의 중요한 측면 중 하나라고 생각하기 때문에 처음에는 함수로 시작해서 나중에 실력이 좋아짐에 따라 객체지향을 채택할 수도 있고 채택하지 않을 수 있다, 라고 하는 것은 제 생각에는 php가 가진 중요한 장점입니다 하지만 객체지향 이전의 프로그래밍 패러다임 그리고 객체지향 이후의 패러다임이 동시에 공존하고 있는 상태이기 때문에 그러면서도 함수형 언어가 갖고 있는 클로저 같은 특성들도 채택하고 있기 때문에 어떻게보면 php라는 언어는 문법적인 표면적이 상당히 낮은 편입니다 그래서 이것은 코드를 쓰는 쪽, 즉 초심자가 자기가 알고 있는 범위에서 자기가 아는 문법을 사용해서 코드를 작성하는 것은 유리하지만 다른 사람이 만들어 놓은 코드를 보고 그 코드가 어떤 내용인지를 읽는 쪽에서는 불리한 면이 있는 것 같아요 다르게 말하면 초심자 입장에선 진입하기 쉽지만 진입 후에는 어려운 면이 있는 것 같습니다 그래서 제가 생각하기에 '쉽다'라는 말은 사실은 다양한 '쉬움'이 있을 수 있다고 봅니다 어떤 '쉬움'은 초심자에게 쉬운 걸 수도 있구요 어떤 '쉬움'은 중급자에게 쉬운 것일 수도 있죠 자신이 어떤 상황에 있느냐에 따라서 그 사람의 상황에 따라 그 사람에게 적합한 언어가 있을 수 있고 환경이 있을 수 있다라는 생각도 듭니다

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