1. 1 2 3 4 5
Overview
Expressions
& statements
Function & Object
Event & Library
Storage & Network
& SCM(git)
Learn Programming with Web Language
For non-developers

3. 아들바보

4. 무엇을 배울게 될까
?

5. 무엇을 배울게 될까
크게 두 가지를 배웁니다

6. 만들고자 하는 “그것”을 작게 나누고,
반복 하고, 분류 하는 방법
크게 두 가지를 배웁니다
1

7. 2
크게 두 가지를 배웁니다
정보를 입력하고, 처리하고, !
출력하고 그리고 그것들을!
같은 방식으로 연결하는 방법

8. 시작합니다

9. 사진 찍는 것 좋아하세요?

10. 사진 찍는 것 좋아하세요?
잘 찍으시나요?

11. 많은 사람이 사진을 찍지만 잘 찍는
사람은 별로 없습니다. 왜 그럴까요?

12. 셀카는 잘 찍습니다!
정말 잘 찍어요!
아니면 셀카를 찍지 않거나
왜 그럴까요?

13. 촬영하고자 하는 구체적인!
“목표”가 없기 때문입니다

14. 프로그램을 만들기 위해!
첫 번째로 해야하는 일은?

15. 구체적인 “목표”를 !
생각하는 일입니다.
추상적이고, 커다란 목표는 좋지 않아요.!
작고 구체적인 목표를 만드세요
홈페이지를 만들어보자
내 소개와 방명록에 글 쓰기 기능이 있는
홈페이지를 만들어보자

16. 목표를 만들었습니다!
그럼 문법 공부만 하면 될까요?

17. 프로그래밍 언어 책 한권을 다 읽었는데!
간단한 프로그램하나 작성하기 힘든 이유?
프로그래머처럼!
생각하지 못하기 때문
프로그래머처럼 생각하기란?

18. 프로그래머처럼 생각하기란?
만들고자 하는 “그것”을!
작게 나누고, 반복 하고, !
분류 하는 방법

19. 프로그래머처럼!
생각하기
컴퓨터처럼!
생각하기=( () )
디지탈에!
대한 이해( ) ( )=
복잡함을!
단순하게!
조각내기
( ) 조각을!
순서대로!
배열하기
( )
0
1

20. 한번에 하나씩!
움직여 복잡한!
사진을 맞추기

21. 컴퓨터 안에선 무슨 일이 일어날까?
00000000 01111100 00000100 00001000 00001000
00010000 00010000 00100000 00100000 00000000
SET S(1) 00
SET S(2) 7C
SET S(3) 04
SET S(4) 08
SET S(5) 08
SET S(6) 10
SET S(7) 10
SET S(8) 20
SET S(9) 20
SET S(10) 00
Line(1, 1, 5, 1)
Pixel(5, 2)
Pixel(4, 3)
Pixel(4, 4)
Pixel(3, 5)
Pixel(3, 6)
Pixel(2, 7)
Pixel(2, 8)
DrawLine(1, 1, 4, 1)
DrawLine(5, 1, 5, 2)
DrawLine(4, 3, 4, 4)
DrawLine(3, 5, 3, 6)
DrawLine(2, 7, 2, 8)

22. 한번 훈련해 봅시다

23. 목표: 횡단보도 건너가기
횡단보도가 있네요?
파란불이 켜지면 건너갑니다.
1
2
너무 똑똑한, 지극히 인간적인 생각 방식

24. 걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
N 3
목표: 횡단보도 건너가기

25. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
한문장씩 실행하는!
진행(실행) 흐름
N 3

26. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
상태의 결과를!
(Yes or No)!
판단하는 조건문 N 3

27. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
조건 판단을 위한!
수 많은 종류의 !
상태들 N 3

28. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
흐름의 위치를!
변화시키는!
분기
N 3

29. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
특정 상태의 조건이!
만족할 때 까지!
반복하는 반복
N 3

30. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
특정 동작을!
지시하는!
행동(액션 or 기능)
N 3

31. 여기에 무엇이 있는지 찾아봅시다
걸어간다
인도의 끝인가?
1
멈춤
고개를 들어 전방 주시
신호등이 있나?
파란불인가?
좌측에 달려오는 차가 있나?
건너간다
인도인가?
2
3
4
5
6
7
8
9
Y
Y
Y
N
N 1
N 7
Y 6
현실 세계를!
묘사한!
다양한 객체
N 3

32. 입력, 처리, 출력의 관점에서 바라보기

33. 또 다른 훈련 하나

34. 왼쪽부터 작은 번호!
순서대로 배치해 보세요

35. 이런 방식으로 생각하셨나요?

36. 정리: 프로그래밍이란?
재현하고자하는 복잡한 현실세계의 상황을 극단적
으로 단순한 컴퓨터에서 실행되도록 하기위한 행위.
복잡한 상황을 컴퓨터가 이해할 수 있는 수준의 단
순한 형태로 분해하고 그것을 행동, 상태, 조건, 분
기, 반복 등의 방식으로 표현하는 작업.

37. 많은 종류의 프로그래밍 언어가 있으며 기계 친화적인
(저수준) 언어부터 인간 친화적인(고수준) 언어가 존재.
인간의 언어로 표현하는 글쓰기도 시, 소설, 연설문 등
다양한 패턴이 있듯 프로그래밍 언어로 기술하는 방식도
특정 목적에 맞게 진화된 패턴이 존재(디자인 패턴)
정리: 프로그래밍이란?

38. 중요한 것이!
하나 더 있습니다

39. 모든 것을 가능하게 !
만들어 주는 것

40. 약속

41. 레고에는 ㅁㅁ 이 있다?

42. 레고에는 많은 약속이 있습니다
약속
약속
약속

43. 약속은 연결(결합)을!
보장합니다

44. 약속의 종류가 다양하면!
더 다양한 결합이 가능하죠

45. 약속을 표현하는 다양한
외계어가 존재합니다
인터페이스
프로토콜
API
.!.!.

46. 한 단계 더 가볼까요?

47. 벽돌만 가지고도 집을 지을 수 있습니다.
하지만 그건 너무 힘든 일이겠죠?
기둥, 지붕, 벽, 창문, 천장!
등의 형태들이 만들어져 있다면 훨씬!
빠르게 집을 지을 수 있을 거에요
작은 요소들을 가지고 조금 더 큰!
요소(기둥, 지붕…)을 만듭니다

48. 그것을 “모듈”이라 합니다

49. 모듈을 의미하는 다양한!
외계어가 존재합니다
함수
라이브러리
패키지
.!.!.
SDK

50. 가장 작고 기본적인 모듈
만들기 방법이 있습니다

51. 함수

52. 함수란?
y = f(x)
두 집합 X, Y에 대하여 X의 각 원소를 Y의 오
직 하나의 원소에 대응시키는 대응 관계이다
'이름이 f인 이상한 상자'에 일정한 가치가 있는 물건을 넣으면
그 가치에 알맞은 돈의 액수가 나온다고 할때, 모든 물건에 대하
여 반드시 '그 각각의 물건의 가치에 맞는 돈의 액수'가 빈틈없
이 나오는 관계가 바로 함수이다via wikipedia

53. 함수란?
y = f(x)
함수 f는 x라는 값을 “입력” 받으며 x값
을 어떠한 목적에 따라 “처리”하여 그
“결과”를 반환 한다고 “약속” 한다

54. 함수란?
y = f(x)
함수 f 는 필요할 때 마다 사용(호출)되어
질 수 있다. 이는 같은 일을 “반복” 수행
할 수 있는 매우 효과적인 방법이다

55. 함수란?
y = f(x)
함수의 특징 중 하나는 입력과 처리 결과
를 반환한다는 약속을 보장하며 처리 과정
(함수의 내부)는 완전히 외부에 숨긴다
이것을 “은닉” 이라한다

56. 함수란?
y = f(x)
벽돌이란 함수를 어떤 처리 과정을 거처(은닉)
벽, 문, 창문, 바닥과 같은 모듈을 만들었다면
이 모듈을 사용하여 만들어진“집”의 관점에선
벽, 문 등의 모듈도 함수라 할 수 있다

57. 현실 세계의 개념 구현을 위해 함수, 모듈등의
결합된 집합을 일컫는 외계어가 존재한다
객체

58. 객체는 필요한 약속(인터페이스)를 노출하고!
입력과 처리과정(은닉)의 결과를 출력합니다

59. 객체는 처리에 필요한 다양한 !
약속(인터페이스)들을 노출시켜 입력을 받습니다
약속!
(인터페이스)

60. 약속이 달라 연결이 보장되지 못해도!
해결할 방법이 존재하기도 합니다

61. 프로그래밍이란!
지금까지 설명된 개념들을!
코드로 작성하는 것 입니다

62. 요리를 시작하기전에

63. 어떤 언어와 도구로
프로그래밍을 학습해야 할까요?

64. 프로그래밍 언어의 동작 방식에 따른 구분
00000000 01111100 00000100 00001000 00001000
00010000 00010000 00100000 00100000 00000000
SET S(1) 00
SET S(2) 7C
SET S(3) 04
SET S(4) 08
SET S(5) 08
SET S(6) 10
SET S(7) 10
SET S(8) 20
SET S(9) 20
SET S(10) 00
Line(1, 1, 5, 1)
Pixel(5, 2)
Pixel(4, 3)
Pixel(4, 4)
Pixel(3, 5)
Pixel(3, 6)
Pixel(2, 7)
Pixel(2, 8)
DrawLine(1, 1, 4, 1)
DrawLine(5, 1, 5, 2)
DrawLine(4, 3, 4, 4)
DrawLine(3, 5, 3, 6)
DrawLine(2, 7, 2, 8)
1
1
2
3
* 컴파일러
* 인터프리터
1번 과정으로 프로그램을 !
작성한 후 2번을 거쳐 3번을!
만들어 놓고 실행시 3번으로만!
실행시키는 방식 (속도가 빠르다)
매번 실행할 때 마다 1번부터!
3번까지의 과정을 거쳐 실행!
시키는 방식. 빠르게 작성하고!
실행시켜 결과를 확인해 볼 수 !
있지만 속도가 느리다

65. “트랜스파일러”라는 것도 있다

66. 형태학적, 패러다임적 구분

67. 어족(語族)은 언어학에서 하나의 공통된 조어
(祖語)에서 갈라나왔다고 추정되는 여러 언어
들을 통틀어 일컫는 말이다.

68. 프로그래밍 언어도 무수히 많은 형태학적, 패
러다임적 언어들이 존재하고 새롭게 생겨나고
있습니다. 한마디로 너무 너무 많다는 이야기

69. 우리는 웹 언어로 학습합니다!
(Javascript, HTML, CSS)

70. Javascript는!
어떤 언어인가?

71. 인터프리터(스크립트) 언어는!
작성 후 결과 확인이 간편

72. UI(HTML,CSS) 연결이 간편한!
최고의 프로그래밍 언어

73. 프로그래밍이란 요리를 하기 전에!
조리 도구를 준비해봅시다

74. 1. 개발 환경 (에디터)!
2. 실행 환경 (브라우저)

75. 프로그래머에게 에디터란?

76. 프로그래머에게 에디터란?
에디터!
통합개발환경!
(IDE)
(많은)코드
디렉토리
실행(중재)
테스트/디버깅
디자인(UI)
도구
테마

77. 프로그래머에게 에디터란?

78. 프로그래머에게 에디터란?
어쩔 수 없는!
선택이거나!
취향입니다

79. 웹(HTML/CSS/JS) 프로그래머에게 에디터란?
취향입니다!
세상엔 너무 많은 에디터가 존재합니다.!
취향에 맞는 에디터를 선택하세요.
… …

80. 웹(HTML/CSS/JS) 프로그래머에게 에디터란?
실력이 쌓이면!
만들어보는것도?
그런 일이 가능한게!
프로그래머의 매력!!!

81. 프로그래머에게 실행환경이란?
에디터!
통합개발환경!
(IDE)
(많은)코드
디렉토리
실행(중재)
테스트/디버깅
디자인(UI)
도구
테마

82. SW는 실행되어야만 현실화됩니다!
현실화 되어야만 테스트할 수 있습니다

83. 웹 프로그래머에게 브라우저란?
보통의 사람들에게 브라우저는 인터넷 사이트를
탐색하며 정보를 찾을 수 있는 어플리케이션

84. 전지 전능한 운영체제, 내가 만든
프로그램의 실행 환경 입니다.
웹 프로그래머에게 브라우저란?

85. 조금 어렵지만 REPL 이라는 녀석도 있음
Read–Eval–Print Loop
읽고 / 평가하고 / 출력하는 일을 / 반복하는 실행 환경
브라우저가 아닌 환경에서 Javascript 코드 실행이 가능
HTML / CSS 같은건 안되요

86. 이 강좌에서 에디터는 Sublime Text를 사용합니다
http://sublimetext.com

87. 이 강좌에서 브라우저는 크롬을 사용합니다
google.com/chrome/browser

88. 첫번째 실습

89. 첫번째 실습
알림 메시지 창 띄우기
OK
“Hello~ ^^”

90. 1

91. “다음시간에”;

92.
2

93. “만나요~~;
Unclosed string.
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare