이 강의에서 중요한 것은, '수강 시작할 때의 나 vs 끝낼때의 나'를 비교하는 것. 다른 학우들과 비교하는 것은 그닥 중요치 않다.
- 시작으로는 슈퍼마리오 게임의 요소를 재생성해볼 것이고, 강의 말미에는 사용자가 가상으로 주식을 사고 팔 수 있는 재무 웹앱을 만들어볼 것이다.
- 강의를 끝낼 무렵엔 '내 스스로' 창조한 파이널 프로젝트로 마무리할 것이다.
근본적으로는 문제 해결. 문제 해결이란, input을 가져다가 output을 도출해내는 과정이다. 이미지에서 input은 해결하고자 하는 문제에 대한 디테일한 요소들. output은 문제에 대한 해결책(solution). 중앙에 있는 상자모양은 컴퓨터 과학 또는 코드이다.
각 숫자(digit)가 단 하나의 값을 나타내는 시스템.
예를 들어, 방 안에 있는 사람 수를 거수로 셀 때. 들어올린 팔은 한 사람의 존재만을 의미한다.
base 10이라고도 한다. 0 ~ 9까지의 digits.
컴퓨터가 사용하는 시스템. base two라고도 한다. 존재하는 digits는 0 아니면 1 단 둘 뿐이며, 각 digit을 bit라고도 한다. - 컴퓨터가 전기 신호로 작동되니까, 스위치를 켜고 끄는 것처럼 0과 1을 활용할 수 있다. - 모던(이거 현대라고 해야 함, 근대라고 해야 함...?) 컴퓨터 안에는 수백 개에 달하는 작은 스위치들, transistors가 존재하며, 각각 다른 값을 표현하기 위해 켜지고 꺼질 수 있다.
- 10진법에서, 각 자리의 수(digit)는 저마다 10의 배수를 나타낸다. 1의 자리 숫자도 10의 0승을 나타낸다. (10의 0승 값은 1이니까)
- 2진법에서, 각 자리의 수는 2의 배수를 나타낸다. 오른쪽부터 2의 0승, 2의 1승(2), 2의 2승(4), ...
- 000 === 0
- 011 === 2 +1
- 110010 === 32 + 16 + 2 = 2의5승 + 2의4승 + 2의1승 === 50
- 더 많은 bits 추가 시, 더 큰 숫자까지 셀 수 있다.
- 문자를 나타내기 위해서는, 숫자로 어떻게 문자를 표현할 것인가(map to)를 결정해야 한다. -> 예전부터 정해져있다고 한다. 그래서 숫자로 문자 표현이 가능하다고.
- 표준화 표현. 소문자와 문장부호를 포함한다.
- 모든 문자는 8bits(1 byte)의 패턴을 통해 표현된다.
- 예를 들어
HI!
를 출력하려는 경우
H === 72 (01001000 === 64 + 8) I === 73 (01001001 === 64 + 8 + 1) ! === 33 (00100001 === 32 + 1)
- 예를 들어
- byte는 기가바이트, 메가바이트 등으로 익숙한 그 '바이트'맞음!
- 1byte === 8bits === 256(2의 8승)개의 서로 다른 값을 나타낼 수 있다. 단, 0을 포함하기 때문에, 사실은 255까지 셀 수 있는 것이다.
- 강세부호 등 다른 기호들은 Unicode에 속한다.
- ASCII보다 더 많은 bits를 활용한다(ASCII가 포괄하지 못하는 문자까지도 표현 가능한 이유!)
- 이모티콘(emoji)를 정보로 주고받을 때, 컴퓨터는 Unicode기준으로 이진법 수를 받아서 표현해주는 것이다.
- 예를 들어
face with tears of joy
😂는000000011111011000000010
- 예를 들어
- 색으로 이루어져 있다.
- 색을 표현하는 시스템에는 여러 가지가 있는데, 그 중 가장 보편적인 게 RGB. 빨강, 초록, 파랑이 섞인 정도로 서로 다른 색을 나타낸다.
- 3bytes만 갖고 수 많은 색을 표현할 수 있다.
- 스크린 상의 많은 점(또는 네모)을
pixel
이라고 하는데, 이미지는 수 많은 pixels로 이루어진 것이기도 하다.- 즉 3bytes로 색을 표현한/ 픽셀들로 이루어진/ 이미지
(display)resolution
은해상도
를 의미한다.- 이미지를 구성하는 종/횡 pixels 갯수를 뜻한다.
- 즉, 높은 해상도일 수록 더 많은 pixels를 보유한 것이고, 더 많은 메모리가 필요한 것이다.
- 많은 이미지로 이루어진 것. 초당 수 회 이미지를 바꾸는 것으로 '영상'을 보여주는 것이다.
- bits로 표현될 수 있다.
- 음, 박자 등을 bits로 mapping하는 것.
참고로, JPEG, PNG, Word, Excel등 파일 포맷들도 정보를 bits로 표현하는 것.
이 이미지는 위에서 한 번 등장했던 이미지이다. 여기에서 속이 빈 상자부분에 알고리즘을 넣는다.
-
알고리즘의 쉬운 예로는, 요리 레시피!
-
컴퓨터 알고리즘을 다룰 땐, 요구사항을 보다 더 정확하게(precise) 작성할수록 좋다. 그래야 애매모호함에서 오는 오류를 방지할 수 있다.
-
알고리즘의 또 다른 예는 전화번호부 (예시에서는 폰 주소록이 아니라, 책 형태의 옛날 주소록)
- 이름과 전화번호가 저장되어 있으며, 이름 순으로 정리되어 있다.
- 알고리즘 예시
- 알고리즘1 (이하, 알1): 주소록 첫 페이지부터 하나씩 읽어내려가며 찾기 첫 페이지부터 찾기 방식
- 알고리즘2 (이하, 알2): 주소록을 2 페이지씩 넘기면서 본다.
- 이 때, 미처 못 보고 페이지 넘기는 실수(bug)가 발생할 수 있는데, 이 경우에는 한 페이지 전으로 돌아가서 찾아보는 방식으로 문제 해결할 수 있다(디버그).
- 알고리즘3 (이하, 알3): 주소록을 매 순간마다 반으로 쪼개서 앞 또는 뒤로 가며 찾기 탐색할 페이지를 잘게 쪼개어 작업 진행하는 방식
- 위의 두 해결방법을 비교해보자.
- 알1은 빨강. 해결 시간이 해결해야 하는 문제의 크기와 비례하게 선형증가한다.
- 주소록으로 치면, 탐색할 페이지 수가 많을 수록 더 많은 시간이 소요된다.
- 알2는 노랑. 알1보다는 기울기가 작지만, 여전히 선형 증가하는 형태다.
- 두 페이지씩 넘기는 방식이기 때문에 n/2라는 식으로 표현한 것.
- 알3은 연두색이다. 매 순간 반으로 쪼개어 살펴보는 알고리즘. 로그함수(logarithmic)의 형태 이다. 해결에 걸리는 시간이 문제의 크기보다 훨~~~~~씬 느리게 증가한다.
- 왜 이렇게 시간이 덜 걸리느냐, 종이책 주소록을 예로 들어보자. 종이책이 1000페이지에서 2000으로 는다고 해도, 한 단계밖에 안 느는 셈이다. 1000->500->250->.... 이 절차에 2000->1000이 앞에 추가된 것일 뿐이라는 말이다. 2000페이지에서 4000페이지로 는다고 해도 4000->2000이라는 단계 하나가 더 추가될 뿐이다.
- 알1은 빨강. 해결 시간이 해결해야 하는 문제의 크기와 비례하게 선형증가한다.
-
알고리즘을 활용해 프로그램을 작성할 땐, 작성한 프로그램이 ~~얼마나 정확한지(옳은지)~~가 아니라, 얼마나 잘 설계(designed)되었는지를 고려한다.
- 이때, 기준이 되는 요소는 효율성 등.
- 작성하는 알고리즘을 정확한 언어(사람의 언어)로 표현하는 것.
- ((위키백과에 따르면)) 프로그램 작성 시, 각 모듈이 작동하는 논리를 표현하는 언어. 인간의 언어로 써놓는 것.
- 위
알고리즘
파트에서 다룬 예시 중알3
을 표현하면 다음과 같다.전화번호 주소록을 집어든다 주소록의 중간을 펼친다 그 페이지를 확인한다 (if)찾는 번호가 있으면 그 번호로 전화한다 (else if) 찾는 번호가 그 페이지보다 앞에 있다면, 주소록 앞쪽 반의 반 페이지를 펼친다 3번 라인으로 돌아간다('그 페이지 확인') (else if) 찾는 번호가 그 페이지보다 뒤에 있다면, 주소록 뒤쪽 반의 반 페이지를 펼친다 3번 라인으로 돌아간다('그 페이지 확인') (else) 찾기를 끝낸다(quit)
이해를 위해 해석을 해보긴 했는데, 이 뒤에 이론 설명하는 부분이 영어로 보는게 더 편하다. 그러니까 영어로 다시 옮겨본다.
- 영어로 쓰는 슈도코드
1 Pick up phone book 2 Open to middle of phone book 3 Look at page 4 If person is on page 5 Call person 6 Else if person is earlier in book 7 Open to middle of left half of book 8 Go back to line 3 9 Else if person is later in book 10 Open to middle of right half of book 11 Go back to line 3 12 Else 13 Quit
- 몇몇 라인은 동사(verb)로 시작한다. 이것들을
함수 function
이라고 하자.eg) Pick up, Open to, Look at, Call, Quit
- 길에 나 있는 여러 갈래의 방향처럼(fork in the road), 다른 방향(path)로 이끄는 가지들도 존재하는데, 이것들을
conditions
라고 부르자.eg) If, Else if, Else
- 어디로 향할지 결정하는 질문들을
Boolean
이라고 하자.- 결과적으로
Yes/No
또는True/False
로 나타나는 값들이다.
eg) person is on page, person is earlier in book, person is later in book
- 결과적으로
- 마지막으로, 사이클을 결정하는 단어들이 있다. 이것들을
반복문 loops
라고 하자.- 프로그램의 특정 부분을 반복할 수 있게 한다.
eg) go back to line3
- 몇몇 라인은 동사(verb)로 시작한다. 이것들을
-
프로그램 작성에 활용하는 주축들
- 함수 functions
- 조건 conditions
- Boolean expressions (T/F)
- 반복문 loops
-
여기 더하여.
- 변수 variables: 정의(set), 사용, 변경 가능한 값.
- 스레드 threads: 경량 프로세스라고도 함. 아직 뭔지 모르겠음 프로세스 내의 독립적 순차흐름 또는 제어. multi-threads도 있는데, 이는 하나의 프로세스에서 여러 스레드가 병행 처리되는 것을 말한다. 하나의 프로그램 안에서 여러 tasks를 동시에 수행하고 싶을 때 사용하며, 네트워크 프로그래밍에서는 반드시 스레드를 활용해야 한다. 스레드 추가 설명 참조
- 이벤트 event: 프로그램에 의해 감지되고 처리될 수 있는 동작/사건. 사용자의 행위로 인한 작용으로 일어나는 것. 즉, 사용자와 프로그램 사이의 상호작용 처리를 위한 요인. 예를 들면, 키보드 입력, 마우스 클릭, 마우스 커서 위치 등. 참고로, 클라이언트 측 JS를 비동기식 이벤트 중심 프로그래밍 모델이라고도 함 이벤트 추가 설명부분 출처
-
Scratch는 드래그앤드롭으로 명령블럭을 옮겨 프로그래밍을 할 수 있다. 시각적인 프로그래밍 언어이다.
- 반면, 이후에 다룰 C는 텍스트 기반 프로그래밍언어.
-
(자세한 Scratch 사용 방법은 생략. 노트에는 간략히 나와 있음.)
강의노트 마지막즈음에 극찬한 스크래치프로젝트가 있길래 뭔가하고 봤더니 Raining Men을 아주아주 간략한 애니메이션으로 표현한 것이었다.
ㅋㅋㅋㅋㅋㅋㅋ 이어폰 안 끼고 봤다가 이게 뭐지? 했다. 소리 켜고 들어보니 그 노래 뮤비 격이네.
왜 극찬한거지? 이거 만들기 어려운 건가?
...
라고 생각하곤 고심해서 만든게 I am groot임ㅋㅋㅋㅋㅋ
실용적이지 않은 것에 별로 재미를 못 붙이겠다.
-
2021.05.09 알고리즘 학습 중, 포크댄스의 포크는 식기류에서 나온 게 아니었구나...
- 초4때 선생님께서도 모르셨던 걸까? '포크처럼 발뒤꿈치를 콕콕 찍어서 포크댄스'라고 설명해주셨는데, 전혀 아니네.
- fork의 의미는 '여러 갈래로 나누어 개개의 길을 가다'. 포크댄스는 사람이(무리가) 이리저리 갈라져서 추는 춤이라서 포크댄스다.
영화 <리틀포레스트>주인공에 이입하게 된다. 누텔라, 우스터소스 등에 대해 속았던 주인공처럼 나도 일생동안 속은 기분이다 ㅋㅋㅋㅋ
-
2021.05.28 Scratch 실습 이미지 삽입 오류
``` ```
태그 사이에 이미지 삽입 코드를 작성해서 오류가 발생했다.- 이미지 삽입 오류가 났을 시, 가장 먼저 코드 삽입 위치를 확인하고 / 그 다음 이미지 주소 오류여부를 점검하기!
예상보다 더 간단한 이유로 인해 오류가 발생했을 수도 있다!