티스토리 뷰

안녕하세요.


이 글은 컴퓨터 프로그래밍을 전혀 해보지 못한 사람을 대상으로 컴퓨터 프로그래밍을 경험해보는 방법에 대해 설명합니다.

이 글을 읽는 사람에게 요구되는 최소 지식의 종류는 다음과 같습니다.


1. 컴퓨터를 켜는 방법

2. Google Chrome 웹 브라우저 설치 방법과 실행 방법

3. 사칙연산의 방법 (예: 3+5)

4. 한국어 독해능력


컴퓨터 프로그래밍은 보통 다른말로 "코딩" 이라고 많이 불리웁니다.


코딩이란

"코딩" 이란 컴퓨터에서 작동하는 소프트웨어(게임, 앱 등등)의 제작하기 위해 암호같은 알파벳과 기호, 숫자들을 입력하는 과정을 의미합니다.


암호같은 알파벳과 기호, 숫자들을 써둔 후, 마술지팡이를 휘둘러서 "앱이 되어라 얍" 하면 앱이 만들어집니다.

보통 이렇게 만들어진 앱은 File 의 형태로 생겨나게 됩니다. (File의 의미는 이 글에서 설명하지 않습니다)


이렇게 만들어진 File(소프트웨어)은 앱스토어등을 통해 많은 사람들에게 배포해서 사용하게 할 수 있습니다.



지금 바로 간단히 해보기

이 글은 읽기만 하면 안되고 직접 입력해보면서 결과를 보면서 해야 좋습니다

지금부터 해볼 "코딩" 이란 것은 게임이나 웹사이트 스마트폰앱 등을 만들 수 있는 방법의 가장 기초적인 부분입니다.

일단 이것을 위한 준비물은 크롬 웹 브라우저입니다.

1. 사용하는 컴퓨터에 없다면 https://www.google.com/chrome/ 에 접속하신 후 다운받아서 설치하면 됩니다.

2. 크롬을 실행합니다

3. 주소창에 about:blank 를 입력하고 엔터를 칩니다. 그러면 흰 화면이 뜨게됩니다.

4. 키보드 상에서 (윈도우즈사용자는 F12 버튼을, 맥사용자는 alt+cmd+i 를)을 누릅니다. 그러면 다음 그림과 같은 화면이 뜹니다. 여기서 Console 을 클릭하면 파랑색 > 오른편에 커서가 깜빡이는 것을 볼 수 있습니다. 여기까지 준비했다면 코딩을 위한 모든 준비가 끝난 것입니다.

이 화면을 콘솔(Console) 이라고 부릅니다.

이 커서가 있는 곳에 컴퓨터가 이해할 수 있는 명령을 코드로 입력하고 엔터를 치면 코드를 컴퓨터가 해석해서 실행하고 실행한 결과를 보여줍니다.

즉 여기서 컴퓨터에게 명령을 내려서 일을 시키고, 일의 결과에 대해 컴퓨터로부터 보고를 받는 것을 할 수 있습니다.

화면상에 파랑색 > 가 하나 보이는데요, 여기서는 입력을 기다리는 커서가 깜빡이고 있습니다.

컴퓨터에게 명령을 입력하는곳입니다.


abc 입력하고 엔터를 쳐본 화면입니다

컴퓨터가 무슨소리인지 모르겠다고 빨간색으로 표시합니다


이번에도 역시 빨간색으로 잘 모르겠다고 응답합니다.


이렇게 컴퓨터가 못알아듣는 이유는 컴퓨터가 이해하는 말을 사용하지 않았기 때문입니다


> 에다가 3+2 를 입력하고 엔터를 칩니다 5 가 나옵니다

5의 왼편에 < 아이콘이 있는데요, 이것을 컴퓨터로부터 응답받았다 라고 이해하면됩니다

반대로 3+2 의 아이콘 > 는 컴퓨터에게 명령했다 라고이해하면됩니다.

맨아래 파란 > 역시 컴퓨터에게 명령하는 부분이라고 이해하면됩니다

컴퓨터가 알아듣는 말을 하니 응답을 잘 해줍니다


컴퓨터에게 abc 라는 상자를 준비하고 그곳에 4를 넣어두렴 이라는 명령을 내린것입니다.

명령에 대한 응답으로 undefined 라는 응답을 해줬는데 잘 처리했다고 이해하면 됩니다. 


abc 를 입력해보면 컴퓨터는 abc 상자안에 있는 내용을 꺼내서 응답해줍니다


def 를 쳐보니 이번엔 또 빨간색으로 에러가 뜹니다

def is not defined 번역하면 "def는 정의되지 않았습니다"

즉 def는 뭔지 내가 모른다. 그 누구도 나한테 def가 뭔지 정해준적이 없다. 그래서 난 너에게 def 에 대한 응답을 줄 수 없다. 라는 상황입니다


컴퓨터에게 def 라는 상자를 준비하고 그곳에 55 를 넣어두렴 이라는 명령어를 내리고 def 를 다시 입력해봅니다.

컴퓨터는 이제 def 가 뭔지 알기에 응답을 문제없이 해줍니다.


컴퓨터는 def 를 55로 알고 있는 상태에서 6+def 라고 입력합니다

이 말은 즉 6+55 와 같은 의미입니다


6+gif 를 해봅시다.

gif 는 컴퓨터가 모릅니다

6+모르는거 = 에러


이렇게 해줘봅시다

응답은 undefined 라면서 잘 처리했다고 합니다

명령의 의미는 gif 라는 이름의 상자를 준비하고 그곳에 6+def 를 넣어라.

컴퓨터는 현재 def 는 55로 알고있습니다. 즉 이것은  6+55 입니다.

이것은 var gif=6+55; 로 바꿔서 쓸 수 있습니다.


gif 의 내용으로 61이 들어있음이 확인됩니다


컴퓨터에게 ff 라는 상자를 준비하고 그곳의 내용으로써 gif를 넣도록 합니다.

그리고 ff 의 내용을 확인했고 61이 들어있음을 확인했습니다.


이 상황에서 gif의 내용이 61이 아닌 30이 되도록 해주는 명령을 입력합니다

gif=30; 을 해줍니다.

이렇게하면 gif 는 이제부터 더이상 61이 아니라 30입니다.

그런데 위에 var ff=gif; 라는걸 해줬죠.

그러면 ff 는 61일까요 30일까요 어떻게되는걸까요?


gif 는 30이지만 ff는 여전히 61입니다.


a 라는 상자에 0을 넣습니다

a=a+1 는 즉 a=0+1 이라는 의미입니다 실행하면 a는 1이 됩니다

a=a+1 는 즉 a=1+1 이라는 의미입니다 실행하면 a는 2이 됩니다

a=a+1 는 즉 a=2+1 이라는 의미입니다 실행하면 a는 3이 됩니다

a=a+1 는 즉 a=3+1 이라는 의미입니다 실행하면 a는 4이 됩니다

a=a+1 는 즉 a=4+1 이라는 의미입니다 실행하면 a는 5이 됩니다

a=a+1 는 즉 a=5+1 이라는 의미입니다 실행하면 a는 6이 됩니다

a=a+1 는 즉 a=6+1 이라는 의미입니다 실행하면 a는 7이 됩니다

a=a+1 는 즉 a=7+1 이라는 의미입니다 실행하면 a는 8이 됩니다

a=a+1 는 즉 a=8+1 이라는 의미입니다 실행하면 a는 9이 됩니다

a=a+1 는 즉 a=9+1 이라는 의미입니다 실행하면 a는 10이 됩니다



여기까지 상자에 숫자를 넣어보는것을 해봤습니다.


자 이제 상자에 문자도 넣어볼까요?

컴퓨터야 hij 라는 상자에 hello 를 넣어라 라고 했는데

뭔가 잘못했는지 hello 는 정의되지 않았다면서 빨간색 에러가 뜹니다

이렇게 입력해주면 컴퓨터는 hello 를 상자 이름이라고 이해합니다.

이제부터 이 상자는 앞으로 "변수"라고 지칭하겠습니다.


변수 hij 에 문자 hello 를 넣고싶다면 다음과 같이 합니다

"와 "사이에 넣어주면 그것은 문자가 됩니다.

5+5 는 10입니다

5+"hello" 는 무엇일까요?

숫자5와 문자hello 를 더하니까 문자 5hello 가 탄생했습니다


숫자5와 문자5를 더해봅니다 그랫더니 문자55가 탄생했습니다

"와 "사이에 들어간 것은 문자라는 의미입니다

앞으로 문자는 string 숫자는 number 라고 지칭하겠습니다.


typeof 54 라고 명령을 내리면 number 라고 응답합니다

이는 컴퓨터님 54 의 타입이 무엇인지 알려주세요 라는 명령입니다


이런것도 가능합니다

box 라는 변수에 54를 넣고

컴퓨터야 변수 box 의 타입은 무엇이니?

즉 54의 타입은 무엇이니? 라는 의미입니다.


컴퓨터는 이에 대해 문자 "number" 라고 응답해줍니다


"abc" + typeof box

이런 명령이 가능합니다.

풀이해보면

typeof box 는 결국 "number" 입니다

"abc" + "number" 라는 의미입니다

이것을 처리하면

"abcnumber" 가 됩니다


자 이번엔 조금 복잡할수도 있습니다

typeof box + "abc" 라고 하면 먼저 type box 가 "number" 라는것을 처리합니다

그런 후 "number" + "abc" 를 수행해서 "numberabc" 를 만들어줍니다


typeof (box + "abc") 를 하면 box+"abc" 를 먼저 처리합니다 즉 54+"abc" 는 "54abc" 가 됩니다. 그런 후  typeof "54abc" 를 해주게됩니다 

"에 쌓여있으니 "string" 을 보여줍니다


(typeof box) + "abc" 는 typeof box 를 먼저 해줍니다 그러면 "number" 그런 후 이것에 "abc" 를 더해줍니다

즉 "number"+"abc" = "numberabc" 입니다



그래서 뭐?

일단 여기까지 해보았는데, 이것으로 뭘 할 수 있을지 생각을 연결짓기 어려울것이라 생각합니다.

하지만 이것은 프로그램 제작에 있어서 중요한 기본적인 규칙입니다.

그리고 이 명령어의 종류의 이름은 "Javascript" 입니다. "Java" 라는 명령어도 있는데요, 이 둘은 전혀 연관이 없습니다.

"Javascript" 로는 웹사이트, 스마트폰 어플리케이션, 게임 등을 제작할 수 있습니다.



쉽게 쓰려고 노력했으나 이해가 안가시는 부분이 있을 수도 있습니다. 

그런 부분이 있다면 언제든 댓글 남겨주세요

댓글
  • 프로필사진 프랭크 잘 읽었습니다.
    개념 잡기에 좋겠어요.
    앞으로 좋은 글 많이 올려주세요^^
    2017.10.01 11:12 신고
  • 프로필사진 리아 오... 아주 쉽게 잘 이해했어요.
    코딩의 '코' 자도 모르는 저도 쉽게 이해할수 있게 잘 설명해 주신 좋은 글이네요. :)
    (아직 전 갈길이 산넘어 산 이지만요... 하하ㅠㅠ)
    2017.10.01 15:55 신고
댓글쓰기 폼
공지사항
Total
32,934
Today
38
Yesterday
7
링크
«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
글 보관함