웹 에플리케이션 만들기 – 구상

이번 시간에는 구상에 대해서 알아볼 겁니다 구상은 무엇을 만들가를 고민하는 과정이겠죠

우리가 만들려고하는 애플리케이션은 저의 이야기입니다 제가 지금까지 생활코딩이라는 활동을 진행하는 과정에서 여러분들이 지금 보고계신 opentutorialsorg라는 사이트를 어떻게 만들게 되었는가 라고 하는 것을 출발점으로 해서 우리수업은 이 생활코딩의 홈페이지와 같은것을 만드는 과정을 같이 한번 해볼거에요 그래서 그 시작점으로 어떻게 이 사이트를 구상하게 되었는가 에 대한 이야기를 하는것이 이번시간입니다 제가 처음 일반인을 위한 프로그래밍 수업을 기획했을때는 오프라인으로 수업을 했어요 오프라인으로 몇번 수업을 해보니까 좀 쉽지도 않고 무상한 생각이 들더라구요 왜냐하면 수업이 끝나면 딱 끝나버리니까요 그래서 이걸 영상으로 만들어서 수업을 만들면 좋겠다는 생각을 했었고요 그때 제가 한 첫번째 선택은 블로그였습니다 제가 오래동안 블로그를 운영해왔기때문에 그런데 블로그는 문제가 있었어요 뭐냐면 블로그의 정렬이 좀 문제였습니다

아시다시피 블로그는 최신순으로 컨텐츠를 정렬해줍니다 즉, 작성하지 얼마 안된것이 먼저 나오게 되는데 아시다시피 이러한 방식의 정렬방법은 뉴스나, 일기 이런것처럼 한편한편이 독립적인 완결성을 가지고 있는 컨텐츠에게는 적합한 정렬방식인데요 하지만 프로그래밍처럼 규모가 있어서 순차적으로 수업을 봐 나가야하는 선행과 후행이 존재하는 그러한 컨텐츠에는 좀 적합하지가 않더라구요 그래서 고민을 하다가 직접구현하자 라는 생각을 하게되었습니다 그래서 opentutorials라는 사이트를 처음 만들때는 이런 부분을 중요하게 생각했어요 "오래된 순으로 정렬이 된다" 즉, 수업이라는 것은 먼저 만드는 것은 사용자들이, 또 학생들이 처음 봐야되는 컨텐츠인거죠 그 얘기는 뭐냐면 오래된 컨텐츠일수록 먼저 나올 필요가 있다는 것이죠 아마 이런 이유로 이 사이트를 구축하기 시작했고요 여러분들도 저의 입장이 되어서 한번 자신이 직접 사이트를 구축한다라는 마음에서 우리 수업을 찬찬히 따라가 보시기 바랍니다 사실 이거보다 더 많은 이야기가 있지만 더 많은 이야기가 궁금하신분이 있다면 제가 만든 ㅋㅋㅋ전략이라는게 있어요 좀 이름이 이상하죠? 저기 있는 저 url로 들어가시면 더 많은 이야기를 만나보실수 있습니다

WEB1 부록 – 코드의 힘 : 댓글 기능 추가

자 지금 우리가 만든 웹 사이트는 굉장히 중요한 기능, 즉 방문자들에게 정보를 제공할 수 있게 되었지만 방문자들이 우리에게 정보를 제공하지는 못하죠 상호작용을 하지는 못한다는 겁니다 우리가 일반적으로 웹사이트가 있으면 그 웹사이트에서 가장 중요한 방문자와의 교류수단 댓글, 바로 그 댓글 기능을 여러분이 직접 구현하는 것은 HTML로는 불가능하고 여러분이 소위 백 엔드라는 기술을 아셔야합니다 예를들면 php, jsp, 파이썬의 장고 이런 기술들을 이용하셔서 데이터 베이스까지 활용해서 구현하는것이 필요해요 높은 산을 넘어야 합니다 그런데 그 기술들만 있어서 되는것이 아니라 이 댓글 서비스는 상당한 기술력을 요구해요 왜냐하면 특히나 댓글은 스팸이 달립니다 그러면 이제 스팸이 달렸을때 사용자가 하나하나 수정하는 것은 어느 시점에서는 불가능해요 왜냐하면 기계가 스팸을 달거든요 그러면 우리에겐 뭐가 필요하냐, 들어온 댓글이 스팸인지 아닌지를 기계가 판단할 수 있게 하는 그런 스팸 차단 기능과 같은 것들이 필요해집니다 그리고 또 사용자들이 이미지도 업로드 할 수 있게 했으면 좋겠고 또 페이스북이나 구글 플러스같은 서비스랑 연동했으면 좋겠고 이런 여러가지 기능들이 추가되면 이 댓글이라는게 별거 아닌 것 같지만 굉장히 많은 기능성이 필요한 것이죠 그래서 이제 댓글을 우리가 직접 구현하는 것은 아주 아주 어려운 일입니다 그러면 어떻게 해야 할까요? 개발을 해야 할까요? 하면 좋죠

하세요, 하시는데 개발을 우리가 직접 하기 전에 그전에 우리가 한번 해봐야 될 것은 남들이 만든 댓글을 우리 웹사이트에 포함시키면 여러분이 직접 구현하지 않고도 이런것이 가능하다는 겁니다 자 그래서 저는 DISQUS라고 하는 서비스를 사용해서 우리 웹페이지 하단에 댓글을 추가해 보겠습니다 그리고 DISQUS 말고도 LiveRe라고 하는 아주 훌륭한 서비스가 있습니다 이 서비스도 추천 드리니까요 이것도 한번 살펴보시면 좋겠습니다 자 DISQUS에서 로그인을 일단 하시고요 그리고 관리자로 들어가 보면 여기에 'Your Sites'라고 되어있는거 보이시죠 클릭하면 지금 30이라고 되어있는건 저는 30개나 되는 웹사이트를 지금까지 만들었고 그 웹사이트들에게 필요에 따라서 이 DISQUS라는걸 이용해서 댓글들을 넣어놨거든요 그래서 여러분이 웹사이트 하나를 만든다 그러면 여기다가 하나를 추가합니다 아이템을 NEW를 누르겠습니다 자 그러면 이렇게 생긴 화면이 뜨는데 여기에서 웹사이트의 이름 웹사이트의 이름에다가 저는 WEB-1이라고 쓰겠습니다 그리고 카테고리는 적당히 하시면 됩니다 저는 어 뭘로할까요 'tech' 자 'create site'하면 여러분이 어떤 특정 사이트에 달 수 있는 댓글이 만들어진겁니다 자 그러면 여기서 Let's get started라고 되있는 부분을 클릭해볼게요 그러면 보시는 것처럼 이렇게 생긴 화면이 뜨는데요 이거는 이제 여러분이 사용하고있는 서비스가 있다면 그걸 사용하시면 좀 더 편하게 할 수 있는건데 이 밑에, 'Universal cord'라고 되있는 버튼이 있을겁니다 저버튼을 클릭합니다 자 그러면 이렇게 생긴 코드가 나오는데 이 코드의 내용 몰라도 됩니다 저도 몰라요 저는 관심도 없어요 그냥 얘가 코드고 얘가 HTML이기 때문에 웹페이지에다가 이것만 추가하면 댓글이 추가되나? 딱 그 정도를 추론을 통해서 알 수 있는 것이죠 한번 여기 있는 코드를 카피해서 우리 웹사이트 하단에다가 자 이렇게 이렇게 다시 한번 해볼게요 우리 웹사이트 하단에 이렇게 추가했습니다 이만큼이 추가가 된거죠 내용은 몰라도 됩니다 중요한건 HTML코드고 이 DISQUS에서 이렇게 하라고 하면 이렇게 하면 된다고 이해하시면 됩니다 자 그럼 웹페이지를 열고 밑에를 보면 DISQUS를 로드할 수 없다고 나옵니다 그 이유는 뭐냐하면 여기 주소를 보시면 주소가 현재 저 같은 경우는 자 보시는 것처럼 'file'로 시작합니다 지금 웹 서버를 통하지 않고 우리가 DISQUS를 열려고 하면 안열려요 보안상의 이유가 있습니다 자 그래서 이러면 어떻게 해야되냐면 우리가 웹 서버를 이용해서 웹페이지를 열어야되요 자 그럼 주소를 예를들면 이렇게 바꾼다면 되겠죠 자 여기서 localhost localhost는 자기 자신의 컴퓨터 127

001과 같은 뜻입니다 indexhtml 하고 엔터를 땅! 치면 자 밑으로 쭉 내려가 보면 자 보시는 것처럼 이렇게 생긴 화면이 뜹니다 신기하죠? 자 여기다가 제가 'first comment' 댓글이라는 뜻입니다 첫번째 코맨트 하면은 댓글이 달립니다(!) 그리고 제가 뭐 필요에 따라서 이렇게 이미지를 드래그하면 보시는 것처럼 이미지를 업로드할 수 있어요 그러면 이렇게 삽입이 되는거죠 그리고 이걸 하는데 무료입니다(중요) 그러면 이제 여러분은 어떻게 하면 되겠어요? 여기있는 이 코드를 모든 웹페이지에 전파하시면됩니다 여러분이 웹페이지가 많지 않다면 충분히 이걸로도 여러분이 많은 일을 할 수 있습니다 정말로 그러면 모든 웹페이지에서 보시는 것처럼 댓글 기능을 사용할 수 있게 됩니다 자 보시는 것처럼 이런 댓글 서비스를 만드는 것은 굉장히 어려운 일입니다 앞서 말씀드린 것처럼 누군가는 이 서비스를 만들기 위해서 10년이 넘는 시간동안 자신의 돈과 시간과 젊음을 갈아 넣은 거대한 부품 을 우리는 단지 몇 줄의 코드를 우리 웹페이지에 추가하는걸 통해서 그런 어마어마한 기능을 갖는 웹사이트를 만들 수 있게 된겁니다 그것이 바로 무엇이냐? '코드의 힘'입니다 자 이렇게 해서 우리 사이트에 댓글을 다는 방법을 살펴봤습니다

리액트 네이티브로 투두앱 만들기 #3 Coding the UI part One

이 강의에서 디자인 부분을 세팅할거야 타이틀, 카드, 인풋, 등등 작업을 할거임

스타일 그리고 마크업 위주의 강의가 될거임 이 텍스트 지우고 status bar의 색상을 좀 바꾸자 status bar status bar from react native bar style of light content! 아직은 안보일거야 배경색상 바꾸자 핑크로 바꿀꺼거덩 F 2 3 6 5 7 색상 저장

쨘 그래서 status bar 색상을 저렇게 설정한거야 이제 심플한 타이틀을 만들것이여 title Kawai to do 라고 입력 그다음 스타일타이틀 이부분을 스타일링 해보자 타이틀을 이쁘게 만들어보자구 배경색상 이미 있고 이건 가운데에 위치하여 있어 justify 되어있으니까

그런데 이걸 원하지 않아 위로 올라가야해서 타이틀 폰트색상은 흰색 폰트 사이즈를 크게 해야지 20? 30! margin top

40? 50? 좋아 굵게 만들어보자 font weight

600 ? 400 ? 오타 수정하고 새로고침 400은 너무 두꺼우니까 200으로 조정하자 더 카와잉~(기여워) 하니까 좋아 그다음 뭐하지

음 카드를 맹그러보자 텍스트 인풋이 상단에 위치해야해

그다음 투두 리스트가 밑에 있어야해 view styles card text input 생성 그리고 여기 styles

new to do아냐 인풋으로 하자 그다음 placeholder 에는 new to do라고 작성 아무것도 안보여

왜냐 카드 뷰가 없으니까 찌그러졌거덩 텍스트 인풋은 기본적으로다가 높이가 있어야해 디폴트로

그걸 해보자고 카드 배경색 흰색

flex 1 width 는 스크린의 width (길이) 그리고 마진을 줘야겠지 휴대폰의 폭 만큼 있고 그다음 약간의 마진이 있으면 좋겠어 import dimensions

height 그리고 width 를 가져오자 dimensions from dimensions get window 여기서 페이지 전체의 width를 원한다고 쓰고 거기서 – 50 자

이렇게 페이지 전체에서 마이너스 50 한거임 그리고 가운데로 정렬해놨음 50은 너무 크고 25로 변경 margin bottom 을 주자

50? 노노 30으로 조정 그다음 카드가 좀 귀여워야함 그래서 board radius 를 추가 10을 주겠음 문제는 그러나 상단은 괜춘한데 하단은 원하지 않음 이게 리스트처럼 보여야하니까 border top-left radius 라고 변경! 그리고 border top right radius 추가 잉? 오타 있음 수정 새로고침 (ㅉㅉㅉ) 자 이렇게 원하는 모습이 되었음

이제 쉐도우를 추가해야하는데 쉐도우는 플래폼마다 약간 달라 ios / android 마다 말이지 즉, platform-specific code 를 해야함 안드로이드 타겟하거나

ios 타겟하거나 말이지 ios를 할라면 위와 같이 입력 그러나 안드로이드에서는 달라 동일하게 작성하면 쉐도우 생성이 안됨 안드로이드에서는 elevation 이라는걸 사용해야함 이는 0에서 5까지 있어 숫자가 커질수록 쉐도우가 커짐

안드로이드는 좀더 제한적이지 이렇게 그럼 각각 다른 파일을 만들어야하나? if condition 을 써야하나? 어떤 플래폼을 사용하는지 확인하는건 겁내 빨라 여기에 플래폼이라고 쓰고 위와 같이 작성

이렇게 하면 고를수가 있어 platform select 이게 ios면 해당 버전을 고르고 안드로이드면 해당 스타일을 적용하는거지 이렇게 플래폼과 각기 다른 스타일을 고를 수 있는것이야 ios는 쉐도우 칼라

색상은 50 50 50 shadow opacity 05 shadow radius 10? 5! shadow offset 은 높이는 0으로 설정 위 아래로 움직이는게 싫으니까 그래서 -1 로 설정 쉐도우가 위에 있는게 좋거등

이걸 1로 설정하면 이쪽으로 이동할거야 그러면 안되니까 -1로 설정 width는

zero! 보더에 있기를 원하거등 내가 이걸 1로 설정하면 움직이게될거야

shadow offset 0 안드로이드는 elevation 3 자 이렇게 하면 됨 여기까지 카드 작업이였어

다음 강의에서 인풋을 만들거야 그래서 인풋을 작성하고 제출 할 수 있도록! 씨유!

웹에플리케이션 만들기 – HTML 실습1 : 모델링을 HTML로 만들기

이번 시간은 우리가 이전에 배웠던 HTML에 대한 기초적인 어떤 문법적 이해를 바탕으로 해서 HTML을 실제로 적용해 보는 그런 시간을 갖도록 하겠습니다 우리 ~~ 수업에서 하려고 하는 것은 이렇게 생긴 웹사이트를 한 번 만들어 보려고 하는 거예요 이것을 우리가 구축하기 위한 첫 번째 단계는 우리가 구상한 우리가 기획한 저 웹사이트를 바로 정보의 형태로 바꿔줘야 합니다

정보는 뭔가요 HTML이죠 이 HTML로 저 그림을 바꿔주는 작업을 해야 돼요 그러면 제일 먼저 메모장을 열고요 우리 실습 환경을 먼저 세팅을 좀 하죠 이 파일은 어디에 저장하면 되겠어요 다큐먼트 루트에 지정하면 되겠죠 다큐먼트 루트에 indexhtml이라는 확장자의 파일로 저장을 해주세요 저는 메모장에다가 indexhtml이라는 파일을 다큐먼트 루트에 저장을 한 상태입니다

그리고 여기 있는 입력되어 있는 것은 우리가 항상 기본적으로 입력하고 시작하는 기본 탬플릿이구요 그리고 이 body 쪽 에다가 지금부터 제가 설명 드리는 내용들을 하나하나 추가해 나가겠습니다 우리가 만들고 있는 사이트는 이렇게 생겼잖아요 저기에서 저 JavaScript라고 되어있는 부분은 이 페이지에서 가장 큰 틀의 주제라고 할 수 있습니다 그리고 주제를 우리가 다른 말로는 이렇게 얘기할 수 있겠죠 대제목이라고 할 수 있을 건데요 우리가 아직 배우진 않았지만 HTML에서 제목을 나타내는 태그는 H1, 2, 3, 6 이런 태그들이 있습니다 바로 그 태도를 사용을 해서 저 JavaScript라는 것을 태그로 묶어주면 됩니다 실습 환경으로 돌아가 보죠 여기에다가 일단 JavaScript라고 제가 써 볼게요 이것은 이 수업의 제목 이름이예요 그 다음에 이것을 브라우저로 표시를 해보겠습니다

자 ~ localhost/indexhtml 엔터 보시는 것처럼 JavaScript라고 이렇게 떴어요 그리고 여기에다가 h1 이라고 해 볼게요 그리고 화면을 리로드 해보면 보시는 것처럼 h1으로 감싸지면 이 텍스트가 더 진하게 표시됩니다 만약에 제가 여기에다가 h1 h2를 이렇게 해보면 어떻게 될까요? 보시는 것처럼 더 작은 하지만 여전히 두꺼운 그런 텍스트가 만들어 지고요 아무것도 묶지 않은 텍스트와 한 번 비교를 해 보세요 보시는 것처럼 이렇게 아무것도 감싸주지 않으면 이렇게 얇게 이 문자가 표시가 되는 거죠 즉 h1, 2, 3라는 것은 h는 뭐 헤드 뭐 이런 뜻일 테구요 즉 그 문서의 주제어들을 나타내는 것이고 제목들이고 그리고 h1은 가장 큰 제목, h2는 그 다음 제목 이렇게 되는 것이죠

아시겠죠? 그러니까 h1은 이렇게 해주시면 됩니다 이번에 살펴볼 것은 왼쪽에 이 각각에 수업들에 대한 리스트가 표시되는 항목을 HTML화 시킬 건데요 저거는 딱 보시면 뭐처럼 생겼어요 벌써 앞에서 말을 하긴 했는데 바로 리스트 라고 할 수 있겠죠 그럼 저 리스트 어떻게 표현하면 될까요 이건 우리가 배웠던 내용입니다 저기 있는 것들은 순서대로 공부해야 되는 항목이기 때문에 제 생각에는 순서가 있는 리스트로 표현하면 더 좋을 것 같아요 그래서 ol 태그를 써서 각각에 항목들을 li 로 묶어주고 있는 것이죠 코드를 한번 작성해보죠 여기에서 음 ~~ ol 그리고 ol 여러분이 태그 작성할 때는 항상 열리는 태그와 닫히는 태그를 쌍으로 작성을 해 나가셔야지 나중에 까먹는 일이 없습니다 li 그리고 이렇게 제가 미리 입력을 해놨습니다 이렇게 해서 화면을 한 번 표시를 해 볼까요 리로드를 하면 저장을 안했네요 이렇게 이 항목들이 이렇게 리스트로 표현되고 있는 것을 볼 수가 있습니다

물론 우리가 보았던 그 디자인과는 많이 달라요 그런데 지금은 우리는 정보의 의미를 명명백백하게 코드로 태그로 나타나는 단계이고요 다음에 css 수업에서 디자인은 나오게 됩니다 그 때까지는 정보에 집중을 해야 되는 상황, 집중을 해야 되는 거예요 그 다음에 변수와 상수라고 되어있는 저 부분은 이 문서상에서 역시나 제목이지만 조금 더 작은 상대적으로 작은 제목입니다 소제목이라고 할 수가 있겠죠 그러면 소제목은 대제목보다는 작기 때문에 h로 시작하지만 숫자는 2를 붙여서 저것이 h1보다는 작은 제목이 되는 겁니다 그리고 옆에 있는 블랙화이트라고 되어있는 부분은 나중에 자바스크립트 수업 때 설명 드릴 거니까 지금은 이 HTML로 만들지 않겠습니다

그러면 여기에다가 음 ~ h2 변수와 상수라고 이렇게 입력하고 그리고 페이지를 리로드를 해보면 이렇게 나눠 버리는게 낫겠네요 리로드를 해보면 보시는 것처럼 변수와 상수가 화면에 이렇게 표시가 되죠 대신에 JavaScript라는 가장 큰 틀의 제목보다는 작은 크기로 표시되는 것을 볼 수가 있습니다 그 다음에는 변수와 상수에 대한 좀 더 자세한 내용들이 나오는 부분인데요 저기 있는 내용은 사실 뭐 저 안에 리스트도 포함되어있고 하지만 저기 있는 내용은 이 왼쪽에 있는 항목들을 선택하는 어떤 걸 선택하느냐에 따라서 내용은 바뀌는 부분이기 때문에 중요한 부분이라고 할 수는 없지만 어쨌든간에 비워둘 순 없으니까 그냥 무언가를 채워두겠습니다 이렇게 이런 식으로 내용이 추가가 될 것 이라는 것이죠 여기에 제가 미리 준비한 코드를 붙여넣기를 하고 좀 보기 좋게, 이렇게 들여쓰기를 해서 좀 정렬을 시켰어요 그리고 리로드를 해보면 보시는 것 처럼 변수란 이런 것이다라는 내용이 화면에 보시되는 것을 볼 수가 있죠 이렇게 해서 기본적인 HTML 코드화 시키는 작업을 끝냈습니다 이거 따른 말로는 마크업한다 라는 말도 쓰는데 비슷한 뜻이라고 생각하시면 돼요 그런데 이것으로는 조끔 더 이것보다 조금 더 개선할 수 있는 여지가 있어요 그래서 우리 이번 시간은 조금 시간이 지났기 때문에 여기서 끊고 이 다음 영상에서 여기 있는 이 코드를 조금 더 의미론적으로 적합한 형태로 개선하는 작업을 진행하도록 하겠습니다

나의 첫번째 GraphQL서버 만들기 #12 Wrapping a REST API with GraphQL Part Two

schema에 필요 없는 건 다 지우고 resolvers에는 하나만 있어 DB에도 하나만 있고 여기서 할 건 movies이고 받을 건 id, 제목, 평점 등이 있네 id, 제목, 평점을 받자 다 괜찮아 클릭! null이 가능하지 않은 영역에서 null을 리턴 할 수 없습니다 내가 data를 리턴하지 않아서 그래 미안 이렇게도 할 수 있어 더 낫네 누르고 좀 기다리면 영화 정보를 줘 보이지 REST API를 GraphQL API로 감쌌어 그리고 내가 뭘 보고 싶은 지도 정할 수 있지 summary를 추가하자 내 인터넷이 겁나 구려서 그래 나왔다 요약본(summary) 좋아 이런 방식으로 Backend에서 URL들을 이용할 수 있어 그리고 이런 URL들을 이용하는 많은 client들도 만들 수 있어 오래된 서버를 가지고 있거나 GraphQL을 넣을 수 없다면 이런 식으로 하면 돼 데이터베이스 에서

뭔가 확인해보고싶어 먼저 URL을 만들고 위와 같이 입력 limit이 0보다 크면 요청한 url에 `limit=${limit}` limit이 0보다 크면 요청 URL에 해당 string을 추가할 거야 rating도 같은 식으로 하자 rating이 0보다 크면 요청 URL에 minimum rating을 추가 하자 `&minimun_rating==${rating}` 그리고 마지막에는 retrun fetch request URL 위와 같이 입력 난 fetch가 겁나 싫어 다음 강의에서 더 멋진 걸 보여줄게 이제 영원히 fetch는 안 쓸 거야 getMovies는 2개의 argument가 필요해 limit과 rating limit은 Int형이고 rating은 Float형 그리고 필수사항은 지워줄게, 필수사항이 아니야 위와 같이 입력 limit이 먼저지 그리고 rating 그리고 이건(_) 그냥 variable 이름이야 parent도 될 수 있고 root이 될 수도 있고 뭐든 난 그냥 _를 써 왜냐하면 이걸 안 쓸 거니까 저장, 제대로 되는지 확인해보자

새로고침얼마나 지났지? 좋아 limit? rating! rating은 Float형 이였지? 8

5 yeap! 아니 이거는 필요 없잖아 rating 85이상 뭐지? 안 좋은데 평점이 66, 64? 아냐 아냐 아 찾았다 바보 같았네 수정! == -> = 좋아 이제 제대로 돌아간다 이거 때문에 안 돌아갔던 거야 limit도 해보자 위와 같이 입력 기쁘다 기뻐~! 보다시피 멋진 API를 다음 코스에 쓸 것이기 때문에 여기서 조금만 더 확장할 거야, 모든 영화를 가져오는 것과 영화 하나를 가져오는 것 이걸 가지고 Frontend로 가자고 내 Reactjs 코스를 이수했는 지 모르겠네 거기서 같은 API로 영화 게시판을 만들었어 하지만 이번에는 fetch를 안 쓸거고 client에서는 훨씬 쩌는 GraphQL을 쓸 거야 이 코스는 여기까지야 GraphQL이 뭘 의미 하는 지 이해했길 바라고 어떻게 사용하는 지 알고 이게 얼마나 쉬운 지 알길 바래! 그리고 GraphQL에 빠졌으면 좋겠어 이게 뭐든지 엄청 빠르게 해주거든 네가 Django를 알고 Express를 알아도 네가 요청하고 정보를 보내는 정도까지 다다르려면 시간이 겁나 오래 걸려 Django에서는 Framework를 설치해야 하고 parse해야하고 app을 만들어야 하고 URL을 만들어야 하고 View를 만들어야 하고 여기서는 4개 파일이면 끝이야 index, schema, resolvers, 그리고 여기 있는 것들 다음 강의에서 보자고 질문 있으면 언제든지 물어보고

웹에플리케이션 만들기 – JS, PHP 프로그래밍 15 : UI, API

이번 시간에는 UI와 API라고 하는 주제에 대해서 알아보겠습니다 UI와 API라고 하는 이 개념은 여러분이 프로그래밍을 하는데 있어서도 상당히 유용한 개념이고 또 이 정보기술이 우리의 삶에 어떤 영향을 미치는가 라는 것을 이해하는데도 꽤나 유용한 인식의 틀을 제공하는 그런 개념이라고 할 수 있어서 제가 이 프로그래밍에 대한 기본적인 트레이닝을 끝낸 이 지점에서 이런 이야기를 좀 준비해봤습니다

UI라고 하는 것은 아마 들어본적 있는 분들이 많을 거예요 UI는 User Interface의 약자입니다 User는 사용자 라는 뜻이고요 Interface는 우리가 뒤에서 살펴볼 겁니다 그럼 API라는 것을 무엇일까요? API는 Application Programming Interface의 약자입니다 여기서 이야기하는 Application은 애플리케이션 앱, 프로그램 이렇게 불리는 것들을 이야기하는데요

다시 말해서, 어떤 프로그램이 어떤 프로그래밍 언어를 이용해서 무언가를 제어하려고 할 때 사용하는 그런 수단이라는 뜻인데 조금 뒤에 전체적인 의미를 알게될 것 입니다 그래서 이 UI라는 말과 API라는 말 좀 눈치가 빠르신 분들은 느꼈겠지만 뭔가 공통되는 부분도 있고, 다른 부분도 있었어요 우선 다른 부분은, 하나는 Application Programming이고, 하나는 User라고 하는 말의 약자라는 거죠 그리고 공통점은 둘 다 Interface라고 하는 뜻을 가지고 있습니다 그러면 이 공통 분모인 Interface라고 하는 것은 어떤 의미인지에 대해서 살펴볼까요? 이거는 좀 비유적인 표현인데 보통 이것을 Interface라고 하지는 않지만 사람과 사람이 서로 교류할 때 사용되는 가장 기본적인 도구, 기본적인 접점이 무엇일까요? 여러 가지가 있겠지만 언어이겠죠? 말이라고 하는 이 도구를 통해서 사람과 사람은 서로에 대한 정보를 주고받고 상대방에게 무언가를 요청하고, 뭐 이런 것들을 할 수가 있는 것 이죠 마찬가지로 이 위쪽에 있는 사람과 아래쪽에 있는 기계가 서로 소통하기 위한 서로 교류하기 위한 접점, 또는 그 접점에 해당되는 장치들이 있을 건데요 어떤 것이 있을까요? 이를테면 컴퓨터나 스마트폰은 전원버튼이 있어요 그 전원 버튼이 하는 역할은 이 시스템에게 "전원을 꺼라" 라는 것을 명령할 수 있는 채널인 것이죠 그리고 디스플레이라고 하는 것은 시스템의 상태를 사용자에게 알려주는 것이라고 할 수가 있습니다

바로 이러한 것들을 우리가 Interface라고 부르는 것이죠 그리고 이렇게 장치와 장치가 서로 소통하기 위한 접점에 존재하는 것으로는 이런 것을 들 수 있을 거에요 USB Interface 입니다 그리고 우리의 주제라고 할 수 있는 이런 웹 애플리케이션이 아래쪽에 있는 웹브라우저와 교류할 수 있는 접점들이 존재하는데 그 접점을 살펴보자는 거죠 이 코드는 우리가 이전에 JavaScript를 공부하면서 배웠던 코드입니다 즉, prompt 라고 하는 저 코드를 통해서 “비밀번호를 입력해주세요”라고 하는 메시지가 찍혀있는 프롬프트 창을 실행시키는 코드가 바로 아래쪽에 있는 코드이고, 그 코드의 결과가 위쪽에 있는 화면인 것이죠 이 화면이 위쪽에 있는 화면이 하는 역할은 무엇일까요? 사용자의 어떤 정보를 받아서 애플리케이션에게 전달하는 것이 바로 프롬프트 창이 하는 역할인 것이죠 그리고 저 프롬프트 창이 실행되기 위해서 우리가 웹브라우저에게 JavaScript의 문법에 따라서 전달한 코드가 바로 아래쪽에 있는 것 입니다 그래서 위쪽에 있는 이 사용자가 직접 조작하는 저것을 직접 조작하는 바로 저 Interface를 뭐라고 부르냐면 UI라고 부릅니다

User Interface 인 것이 고요 우리가 만든 웹애플리케이션이 프롬프트 창을 실행시키기 위해서 JavaScript의 문법에 따라서 웹브라우저에게 전달한 저 명령을 뭐라고 하냐면, API라고 하는 겁니다 애플리케이션이 무엇인가를 하기 위해서 프로그밍적으로 그 애플리케이션이 돌아가는 시스템에게 전달하는 명령, 그런 것들을 Application Programming Interface 라고 한다는 것이죠 이쯤에서 여러분들에게 뭐 하나 여쭈어볼게요 여기에 있는 이 프롬프트 창 우리가 만든 웹애플리케이션에서 실행된 저 프롬프트창은 여러분이 만든 것일까요? 아닐까요? 어떻게 생각하세요? 저 프롬프트 창을 여러분이 만든 것 일까요? 아니면 다른 무엇인가가 만든 것 일까요? 여기에 정답이 딱히 있다고 생각하진 않지만 만약에 저에게 물어봤다면, 저는 “제가 만들기도 했고, 제가 만들지 않기도 했습니다” 라고 이야기를 할 거 같아요 왜냐하면, 여기에 있는 “비밀번호를 입력해주세요”라고 하는 저 코드를 우리가 웹브라우저에게 제출했기 때문에 웹브라우저는 여기에 “비밀번호를 입력해주세요”라고 적어준거죠 그런 면에서는 우리가 만든거라고 할 수가 있습니다 그리고 이 prompt 라고 하는 명령은 프롬프트 창을 실행시키는 명령인데 바로 저 명령을 웹브라우저에게 제출했기 때문에 웹브라우저는 프롬프트 창을 실행시킨 것이죠 그렇게 본다면 이 창은 우리가 만든 것 이라고 할 수 있겠죠 그런데 여기 있는 이 코드에 엑스버튼(X)이 있으라는 내용이 들어있나요? 또는 버튼이 두 개 있어야 되고, 하나는 확인 하나는 취소라고 적혀있어야 된다는 내용이 이 코드상에 포함되어 있나요? 또는 이런 사용자의 입력을 받는 저런 창이 있어야 된다는 이야기가 여기에 한마디라도 언급된적이 있냐는 것이죠 그런 것을 언급한적도 없는데, 우리가 prompt라고 하는 이름에 명령을 내렸을 뿐인데 이런 화면이 뜨는 것은 결국에 이 프롬프트 창이 “우리가 만든게 아니기도하다

” 라는 것을 의미하는 거라고도 볼 수 있지 않을까요? 바로 그런 점에서 저 프롬프트 창은 기본적으로 우리가 만든 것이 아니라 누가 만든거냐면 웹브라우저가 미리 만들어놓고 준비하고 있는 것이라고 할 수 있습니다 그리고 우리는 이 prompt라고 하는 저 코드를 웹브라우저에게 실행함으로써 웹브라우저가 미리 만들어 놓은 저 프롬프트 창을 웹브라우저가 실행할 수 있도록 명령하고 있는 것이에요 바로 그런 점에서 저 prompt는 일종의 Interface인데 즉, 우리가 만드는 애플리케이션이 웹브라우저에게 무언가를 요청하는 Interface인데 바로 애플리케이션이 프로그래밍적으로 요청하는 Interface이기 때문에 이것을 API라고 부른다라는 것이죠 한 번에 이해가기 쉽지 않을 수 있습니다 그럼 이 관계를 조금 더 깊게 살펴볼까요? 여기보시는 것 처럼, 이 한 겹 한 겹의 판들이 여러 겹으로 쌓여있는 어떤 구조물 어떤 건물이 있다고 생각해보죠 그리고 각각의 층마다 무언가가 있는데 그 각각의 무언가들이 컴퓨터 또는 스마트폰 이런 것들을 구성하고 있는 구성요소라고 생각해보고 그것들을 우리가 한번 분해를 한번해보자는 거죠 그러면 가장 꼭대기에 뭐가있냐면 사용자가 시스템을 제어할 때 사용하는 이렇게 생긴 접점인 User Interface가 존재합니다 그리고 저 User Interface를 만든 것은 누구냐면 바로 우리가 만든 웹 애플리케이션이 prompt라는 명령을 웹브라우저에게 하달함으로써 프롬프트 창이 실행되게 된 것이죠 우리가 만든 것은 저 웹 애플리케이션을 만든겁니다 그런데 제가 앞서 말씀드린 것 처럼, 저 prompt라는 명령에 대응되는 실제 프롬프트 창을 만든 것은 바로 웹브라우저라고 말씀드렸고 그리고 동시에 웹브라우저 역시도 그 프롬프트 창을 혼자서 모든 것을 다 만든 것이 아니라 보시는 것처럼 이렇게 이런 버튼들 그리고 여기에 있는 입력을 받는 저런 텍스트 필트라고 하는 것 그리고 이렇게 생긴 소위 대화상자라고 하는 이런 것들 이런 것들은 웹브라우저가 직접 만든 것이 아니라 운영체제가 미리 만들어 놓고 웹브라우저가 그것을 API를 통해서 호출해서 프롬프트 창을 이렇게 저렇게 조립해서 만들게 되는 겁니다

즉, 프롬프트 창은 웹브라우저가 혼자 만드는 것이 아니라 운영체제가 제공하는 바로 저런 작은 부품들을 조립해서 만든 거라고 할 수 있어요 바로 그런 방법을 통해서 웹브라우저는 운영체제를 이용해서 만들게 됩니다 그렇다면 운영체제는 어떻게 만들까요? 여기서부터는 좀 불분명한 측면이 있지만 우리가 기술의 어떤 다칭성이라는 것을 설명드리기 위해서 제가 이야기하는 겁니다 엄밀한 이야기들은 아니라는거 참고적으로 알아두시고 제 이야기를 들으시면 좋겠습니다 이런 운영체제도 처음부터 뚝딱하고 하늘에서 만들어진 것이 아니겠죠? 바로 이런 C와 같은 언어들을 이용해서 우리가 운영체제를 만들게 됩니다

그리고 이러한 C와 같은 언어는 이것 역시도 처음부터 뚝딱 있었던 것이 아니라 어셈블리어라고 하는 아주 오래된 언어를 이용해서 C와 같은 프로그래밍 언어를 또 만들게 되는거죠 즉, 언어를 만드는 언어라는 뜻이에요 그리고 이 어셈블리어는 그것 보다도 더 기계에 가까운 바로 기계어라는 것에 의해서 만들어지거나 또는 대응된다라고 이야기할 수 가있는데요 우리가 기계어라는 것을 구체적으로 알지 못해도 컴퓨터라는 기계가 결국에는 0와 1로 이루어져 있다는 아주 유명한 얘기를 들어본적 있으시죠 바로 이것이 기계어라는 것이고, 기계어는 어떻게 보면 소프트웨어의 가장 깊은 곳에 있는 기술이라고 할 수가 있습니다 그래서 우리가 기계와 같은 기술을 로우레벨의 아주 아래쪽 레벨에 존재하는 기술이라고 해서 Low Level Technology 라고 합니다 그리고 우리가 지금 살펴본 이 이야기에서 가장 꼭대기에 있는 것, 위쪽에 있는 기술 일수록 High Level 고수준의 고급 기술이라는 표현을 쓰게돼요

아무튼 이렇게 해서 우리는 제일 위에 있는 UI부터 시작해서 점점 더 소프트웨어의 심연으로 내려오고 있는데요 그 가장 밑바닥에서 기계어를 걷어내면 무엇이 존재하냐면, 바로 전자공학의 표면을 만나게 됩니다 우리가 언뜻 들어본 듯한 CPU, RAM 바로 이러한 것들이 전자공학에서 만들어내는 그런 소위 하드웨어라고 하는거라고 할 수 있습니다 그리고 이 전자공학의 기본적인 메커니즘은 이 전기를 켜고, 끄고하는 것을 일종의 정보화시킨 거라고 할 수 있고 전기가 켜지고 꺼지고에 해당되는 것들을 소프트웨어, 즉 기계어에서는 0와 1이라고 하는 그 두 가지의 숫자로 대응을 시켜서 소프트웨어를 만들게 됩니다 물론 이과정은 상당히 복잡한 것이 기 때문에 우리 수업의 범위를 넘어서요

이해 못하셔도 아무 문제없는 이야기입니다 그리고 이 거대한 제가 한 장으로 표현했지만 굉장히 거대한 이 전자공학의 심연에서 전기공학을 만나게 되는 것이죠 전기공학이라는 것은 전기를 생산하고, 전기를 전송하고, 그것을 통해서 무엇인가 이 운동에너지로 바꾸는 이런 것들을 포괄하는 학문이라고 할 수 있겠죠 그리고 이 전기공학은 바로 물리학이라고 하는 곳에서 출발한 학문이라고 할 수가 있을 겁니다 어때요 우리가 무심코 사용하는 이런 스마트폰이나 또는 컴퓨터와 같은 기계는 결코 평면적인 기술이 아니라 지금 보시는 것 처럼 다칭적으로 다양한 레벨의 기술들이 협력해서 이런 시스템을 만들게 되는 것 이라는 거죠 그리고 각각의 한 장 한 장이 한 사람이 평생 노력해도 그 분야를 통달하기 어려울 만큼 방대한 내용을 담고 있다고 생각하면 이 컴퓨터라고 하는 것을 다른 시각으로 보게 되지 않나요? 그리고 각각의 층과 층 사이는 API, Application Programming Interface라는 것을 통해서 교류하고 있다는 것이죠

그것이 바로 API, 그리고 또 하나 우리는 UI라는 것도 같이 살펴보았습니다 지금까지 제가 말씀드린 이 API라는 개념을 통해서 제가 이야기하고 싶은 것은 오늘날 이 시대를 저는 이렇게도 이야기해 보고 싶다는 겁니다 API전성시대 이게 무슨 뜻인지 살펴볼까요? 과거에는 API를 제공하는 시스템이 운영체제에 정도가 있었어요 우리가 알고 있는 Unix, Linux 또는 Microsoft Windows 그리고 OSX 이러한 것들 운영체제라고 하는 이 거대한 기반 시스템들이 API를 유일하게 제공하고 있었기 때문에 어떤 소프트웨어를 만든다라는 것은 결국에 이러한 운영체제 위에서 직접적으로 돌아가는 애플리케이션 다른 말로는 프로그램을 만드는 거라고 할 수가 있었습니다

그런데 그 여러 수많은 프로그램 중에 특이점을 가지고 있는 독특한 프로그램이 하나생겼는데 무엇이냐 하면 웹브라우저라는 겁니다 이 웹브라우저라고 하는 것은 운영체제 입장에서는 그냥 일개 소프트웨어에 불과했어요 운영체제 위에서 동작하는 수 많은 소프트웨어 중 하나에 불과했습니다 그런데 이 웹브라우저는 운영체제 위에서 동작하는 하나의 애플리케이션이지만 동시에 스스로가 API를 가지고 있었기 때문에 웹브라우저 위에서 동작하는 수많은 웹 애플리케이션들이 등장하게 됐다는 것이죠 그것이 우리가 배우고 있는 이 수업의 대상이라고 할 수가 있겠죠

그런데 이 웹이라고 하는 것이 발전하는 과정에서 수많은 웹 애플리케이션들이 만들어졌는데 그 수많은 웹 애플리케이션들 중에서 무엇인가 좀 특이한 녀석들이 또한 등장하기 시작했다라는 것 입니다 바로 이 특이한 녀석들은 굉장히 많은 사람들이 사용하는 서비스들이고 그리고 무엇 보다도 중요한 특징은 마치 운영체제 처럼 또 웹브라우저 처럼 스스로 API를 제공하기 시작했다라는 겁니다 그래서 우리가 소위 페이스북 앱 또는 구글 플러스 앱 또는 트위터 앱 이러한 것들이 만들어졌다라는 것이죠 그래서 게임이라든지 여러 가지 기타 등등 다양한 애플리케이션들이 이런 웹사이트를 기반으로 해서 동작하게 되었다라는 것이죠 바로 이러한 변화에 의해서 API가 폭발적으로 증가하게 됩니다

그런데 여기서 끝이 아니에요 이것은 어떤 제가 PC를 중심으로 말씀드렸지만 PC뿐만 아니라 이후에 스마트폰이 등장하면서 스마트폰이라는 새로운 플랫폼이 또한 당연히 API를 제공했고 그 API를 제어해서 만들어진 수많은 애플리케이션들이 폭발적으로 증가하게 됩니다 그리고 지금은 스마트폰 뿐만 아니라 수 많은 디바이스들 예를 들면 보일러 또는 자동차 또는 우리 집에 있는 현관문 심지어 우리가 아주 하찮게 생각하는 전구 조차도 인터넷에 연결되서 동시에 프로그래밍을 통해서 우리가 제어할 수 있는 API를 제공하고 있다라는 겁니다 그래서 제가 생각하기에 지금 우리가 살고 있는 시대에 아주 중요한 주목할 만한 변화는 크게 두 가지 입니다 하나는 “API가 폭발적으로 증가했다“라는 것이고 또 하나는 "과거에 비해서 훨씬 더 사용하기 좋고 과거에 비해서 훨씬 더 인간 친화적인 프로그래밍 언어가 등장하고 있다”라는 것이죠

이런 맥락에서 우리가 어떻게 프로그래밍이라고하는 분야에 접근할 것인가라고하는 그런 고민들을 아마 가지고 계실 것 입니다 저도 사실가지고 있는데 이에 대한 저의 주관적인 생각은 제가 시간이 좀 많이됐기 때문에 다음 영상에서 이야기해 보겠습니다