[Dart] 2. 화면에 글자 출력하기

21. 10. 5.

- Could -

 

1. DartPad 화면
    - DartPad 구성
2. void main() {}
3. print
4. 프로그래밍을 위해 알아야할 기초개념
5. 주석(Comment)

 

먼저 DartPad에 접속해보자.

https://dartpad.dev/

DartPad

접속하면 아래와 같은 화면이 우리를 반긴다.

1. DartPad 화면

텍스트편집기, Console, Documentation 세부분으로 나누어져있다.

일단 세부분으로 나누어져있다. VS Code를 사용하거 Android Studio를 사용하더라도 위치의 차이가 있을 뿐 기본적으로 위와 같이 나누어진다. (코드입력하는 부분과 콘솔창이 나누어지고, Documentation의 경우에는 작성한 코드 위에 마우스를 가져다대면(hover) 나타는 식이다.)

DartPad 구성

• 텍스트편집기: 왼쪽의 큰 영역으로 코드를 입력하는 부분이다. 실제적으로 모든 코드 작성은 왼쪽에서 이루어지고, 실행시키기 위해서는 위에 있는 Run 버튼을 누르면 된다.
• Console : 오른쪽 상단에 위치한다. Console은 주로 모니터링을 담당하는데, 코드를 작성해 실행시키면 결과가 나타난 공간이라고 이해하면 쉽다.
• Documantaion : 오른쪽 하단에 위치한다. 내가 작성한 코드가 어떤 기능을 하는지, 어떻게 작성해야하는지 등 자세한 설명을 제공한다. Dart 웹페이지에서 찾아야 볼 수 있는 내용들을 빠르게 보여준다고 생각하면 된다.

2. void main() { }

그럼 본격적으로 코드를 알아보자. 초심자는 DartPad를 켜자마자 나타나는 코드에 두려움을 느낄수 있다. 그러니 두려움을 없애기 위해 적혀있는 코드 중 void main() {}만 남기고 모두 지워버리자.

이런 상태로 만들자.

남긴 코드가 뭔가 싶겠지만 나중에 함수까지 배우고 나면 별거 아니구나라며 이해할 수 있다. 지금은 저 위에 있는 Run버튼을 누르면 void main() { }의 중괄호 안에 있는 내용들이 실행된다고 알아두자.

코드에서 (), {}의 역할은 매우 중요하다. 일반적으로 이런 괄호들은 코드가 정의되고 실행될 범위를 지정해주는데, 프로그래밍 언어에 따라 사용법이 조금 다를 수 있다. 하지만 Dart의 괄호 활용은 가장 일반적인 형태이고 대부분의 프로그래밍에서 통용된다. 코드가 복잡해지면 괄호의 갯수와 중첩이 많아지고, 이걸 어떻게 효과적으로 작성할지에 대해 소수의 개발자들 사이에서 의견이 분분했으나 지금은 자동 포맷팅 기능 덕분에 그런 쓸데없는 논쟁은 많이 사그라들었다.

계속 void main() {} 이라고 하기는 불편하니 앞으로는 main 함수라고 부르겠다.

3. print

그러면 코드를 작성해 Console창에 무언가를 띄워보도록하자. 아주 간단하다.

void main() {
  print("Hello World");
}

위와 같이 적어주면 된다. 그리고 실행 시키면 아래와 같은 화면을 볼 수 있다.

어디서 부터 시작되었는지 알수 없는 개발자들의 hello world 사랑...

지금 print라는 함수를 활용해 console 창에 Hello World라는 글자를 띄웠다. print 위치에 커서를 가져다 대면 Documentation에 친절하게 이게 뭔지 설명도 적어준다. 아직은 모르는 개념 몇개가 있어 한번에 이해가 어려울지는 몰라도, 대충 눈치껏 console에 뭘 print해주는 기능을 하는구나 알 수 있다. 더 자세히 알고 싶으면 아래 docs으로 가는 링크도 있으니 들어가서 살펴보면 된다.

문장끝에 ; (세미콜론)을 붙이는 건가?
-----
; 의 기능은 컴퓨터에게 이 줄의 내용이 끝났다는 걸 알려준다. 구문 구분을 위해 사용하는 건데, 그냥 프로그래밍 세상에서 문장 끝에 찍는 마침표 같은 것이라 생각하면 된다.
언어에 따라 사용하기도 하고 사용안하기도 하지만, Dart는 ;을 사용하는 언어이다. 그렇다고 어디에 쓰고 어디에는 쓰지 말아야하는지 걱정할 필요는 없다.
코드에디터가 좋아져서 자동으로 넣어야할 곳에는 넣으라고, 안넣어도 될곳에는 안넣어도 된다고 알려준다.
아 그냥 이렇게 쓰는거구나 넘어가고, 크게 스트레스받지 말자.

간단하게 DartPad를 사용법과 몇개의 코드를 알아보았다. 이제 우리가 알아야 할 기본 지식들에 무엇이 있는지 살펴보자.

4. 프로그래밍을 위해 알아야할 기초 개념

• 데이터(Data), 값(Value), 타입(Type)
• 변수(Variable)
• 연산자(Operator)
• 입력(input), 출력(output)
• 조건문(Conditional)
• 반복문(loop)
• 함수(function)
• 주석(comment)
• 패키지(package)

가장 기초적이고 알아야될 단어들을 나열해봤다. 여기 적힌 것을 가르치지만, 가르치는 사람에 따라서 조금조금씩 다른 용어를 사용하기도 한다. (처음 배울때는 헷갈리지만 나중에는 너도나도 섞어쓰기 때문에 결국은 해피엔딩...)

그렇기 때문에 한글 용어를 아는 것도 중요하지만 영어로 된 단어를 익혀두는걸 추천한다. 프로그래밍을 하는 절대적인 숫자가 한국인들 보다 외국인들이 많고, 공용어로 통용되다 싶이하는게 영어이기 때문에 영어를 잘하면 프로그래밍 하는데 큰 도움이 된다.

위에 적힌 개념들은 프로그래밍에 공통적으로 사용되는 녀석들이고, Dart말고 다른 언어를 배워도 꼭 알고 넘어가야하는 녀석들이다.

차차 하나하나 설명을 하겠지만, 호기심이 앞서는 초보자들이라면 구글에 검색을 통해 먼저 알아보는 것도 좋다.

5. 주석(Comment)

가장 간단한 내용이라 지금 설명한다.

주석은 Comment라고 사람이 보기위해 적어두는 글이다.

쉽게 말해, 텍스트편집기에 주석을 적어두면 사람은 읽을 수 있지만, 컴퓨터는 주석을 인식하지 않는다.

그래서 주로 코드에 대한 설명이 필요하거나 특정 코드를 잠깐 동안 못쓰게할때('command out한다' 고 한다) 사용되는 것이 주석이다.

활용법도 어렵지 않다. 언어별로 주석을 만드는 기호가 다를 수있지만 Dart에서는 // 를 사용한다.

주석처리를 하고 싶은 문장 맨 앞에 // 기호를 붙이면 된다.

void main() {
  // print("hello world");
  // 이렇게 입력해두면 실행이 안된다. 왜냐하면 주석이 되니까.
}

코드에디터들도 좋아져서 이렇게 한눈에 봐도 뭔가 실행 안될것 처럼 보여준다. 코드를 저렇게 바꾸고 실행시키면 콘솔에 아무것도 나오지 않게 된다.

진짜다. Run했는데 아무것도 안나온거다.