모바일 앱을 개발해 보고 싶은 마음이 들어서 유투브를 찾아보던중에 찾은 강의 입니다.

모바일 앱 개발을 위해서는 코틀린이라는 새로운 언어를 배워야 하기 때문에 가장 기본적인 입문 내용을 찾아 보았습니다.  자바로도 되지만 요즘 대세는 코틀린이라네요.

여러개의 유투브 동영상 강의중 마음에 드는 강의가 있어 정리해 보았습니다. Joyce 님의 코틀린 3강으로 끝내기 내용이고요 그 중에서 1,2강 내용을 정리한 글입니다. 

1강, 2강은 주로 코틀린 언어의 문법을 설명하고 3강에서 간단한 앱을 실제로 만들면서 강의합니다. 그래서 1강, 2강에서는 앱개발과는 살짝 다른 느낌을 받지만 기본이되는 내용이니 잘 이해하고 넘어가면 나중에 좋을 것 같습니다.

기본적인 코딩 경험이 있으시고 안드로이드 앱 개발을 배우고 싶으신 분들께 추천하는 강의 입니다. 

코틀린 3강으로 끝내기 - 1편 기본 문법

1강  =========  https://www.youtube.com/watch?v=IDVnZPjRCYg

0. IDE 설치

최신 버전의 설치파일 다운로드 주소 : https://developer.android.com/studio?gclid=Cj0KCQiA7bucBhCeARIsAIOwr--wnY7TyI53kQugOceR69MqvskUSVN9toBlgwo1hw_F6w-g_oJH5JAaAvSQEALw_wcB&gclsrc=aw.ds 

이전 버전의 설치파일을  다운로드하는 주소 : https://developer.android.com/studio/archive?hl=ko

1. 함수

2. val / var

val = value : 값 변경 불가

var = variable : 값 변경 가능

3. String 템플랫

4.  조건식

// if

3항 연산자가 없어서 대신 아래와 같이 사용 가능

fun whichOneIsBig (a: Int, b: Int) : Int = if(a>b) a else b

// when

fun checkNum (score: Int) : Bool {

    when(score) {

        0 -> println("This is zero")

        1,2 -> println("This is 1 or 2")

//        in 10..100 -> println("This is 10 ~ 100")

        else -> println("This is over2")

    }

}

// Expression vs Statement

Expression: 결과적으로 값을 만드는 표현, 문장, 문단(모든 코틀린 함수는 expression 왜냐하면 무엇이든 최소한 하나는 값을 반환하니까)

Statement는 Expression이 아닌 것, 명령을 지시하는, 값을 만들지 않는 표현, 문장, 문단

5. Array vs List

Array는 처음에 크기가 정해져서 생성됨

immutable(수정불가) List 와 mutable(수정가능) List 가 있음. 

fun array() {

    val array : Array<Int> = arrayOf(1,2,3)

    val list : List<Int> = listOf(1,2,3)

    val array2 : Array<Any> = arrayOf(1,"a",3.4f)

    val list2 : List<Any> = listOf(1,"a",3L)

    array[1] = 2

    var result : Int = list.get(0) // 수정불가 값을 가져올 수만 있음.

    val arrayList : ArrayList<Int> = arrayListOf<Int>() // 추가 삭제 가능

    arrayList.add(10)

    arrayList.add(20)

}

6. 반복문   for / while

fun forAndWhile (){

    val students : ArrayList<String> = arrayListOf("Kim", "Lee", "Park")

    for (name : String in students){

        println("${name}")

    }

}

for ( i :Int in 1..10 ) {     }  // 1부터 10까지 1씩 증가하며 10번 실행

for ( i :Int in 1..10 step 2 ) {     }  // 1부터 10까지 2씩 증가하며 5번 실행

for ( i :Int in 10 downTo 1 ) {      }  //10부터 1까지 감소하며 10번 실행

for ( i :Int in 1 untill 10 ) {      }.  // 1~ 9까지 1씩 증가하며 9번 실행

// 인덱스와 내용함께 사용하는 방법

for (( index : Int, name : String) in students.withIndex()) {

    println("${index+1}번째 학생: ${name}")

}

while

var index = 0

while (index < 10) {

    println("${index}")

    index ++

} // 0부터 9까지 10번 수행

7. NonNull , Nullable

NPE : Null Point Exception Error  Java에서는 런타임에 에러가 나서 확인이 어려웠는데 코틀린에서는 컴파일 타임에( 코드를 작성하는 시점에) 에러 발생을 미리 알려줌. null이 가능한 변수와 아닌변수를 미리 구분해 줌으로써 실행중에 발생하는 에러를 예방할 수 있음.

var name : String = "James"     // NonNull type 변수로 null 이 들어갈 수 없음. 에러발생

var nullableName : String? = null   // nullable 변수로 null 할당에도 에러가 없음. 이를 위해서 type옆에 ?(물음표)를 추가해줘야함

var nameInUpperCase : String = name.toUpperCase()

var nullableNameInUpperCase : String? = nullableName?.toUpperCase()   // nullableName이 null 인 경우 대문자로 변환하려하면 에러가 이니라 null을 제공함

// ?:

위와 같은 경우 null 값이 아니라 디폴트 값을 제공하고 싶은 경우 엘비스 연산자를 사용(?:)

val lastName : String? = null

val fullName : String = name + " " + (lastName?: "No last name")   // lastName 이 null 인경우 "No last name"을 사용

// !!

개발자가 null 이 아님을 보장한다는 의미. 사용 권장하지 않음. 

// ignore null

fun ignoreNulls(str : String?) {

    val email : String? = "id@email.com"

    email?.let{

        println("my email is ${email}")    

    } // email 이 null이 아니면 my email ~ 출력, null이면 null 출력

}

8. Class

생성자를 추가한 클래스. init 이 먼저 실행되고 그다음에 constructor가 실행됨

// 클래스 상속, 오버라이딩 overriding

Korean 객채 생성 후 singASong 을 실행하면 상속 받았기 때문에 Human의 메소드가 실행됨.

오버라이딩을 위해 모class의 singASong 메소드를 앞에서 open 해주고, 자식class(Korean)에서 override 오버라이딩 함

오버라이딩한 메소드 대신에 상위 클래스(Human)의 메소드를 그대로 사용하고 싶을땐 super를 이용하면 됨.

상위 클래스의 프로퍼티도 사용할 수 있음. Human 에서 생성자에 name 이 있으므로 별도 할 당 없이도 디폴트 값을 읽어올 수 있음.

코틀린 3강으로 끝내기 - 2편 고급 문법 ====================

2강 =======  https://www.youtube.com/watch?v=Q5noYbbc9uc

1. Lambda

아래는 정의 내용과, 입력받은 숫자의 제곱을 반환하는 square 람다를 만드는 예시. 그리고 이름, 나이를 입력받아 출력하는 람다 예시.

확장함수

람다의 인풋 파라메터가 하나인 경우 변수를 it으로 사용할 수 있다. 

아래에서 this 는 람다(introduceMyself)를 호출하는 객체(name)를 말한다. 그래서 this 대신에 ariana가 들어가서 "I am ariana and 27 years old"가 출력된다. 

// 람다의 Return

// 람다 표현 방법

정의한 ivokeLamda에 인자로 lamda 함수를 사용. 제일 아래 줄의 형태는 마지막 파라미터가 람다식일때 보여짐. 

// 익명 내부 함수     자바 인터페이스, 하나의 변수만 사용할때 사용가능

2. Data Class

3. Companion Object

프라이빗 클래스의 프로퍼티나 메소드를 사용할 수 있게 해줌. java의 static 과 같은 역할 

인터페이스를 사용

4. Object

오브젝트는 실행 시 처음 한번만 만들어짐 singleton pattern

코틀린 3강으로 끝내기 - 3편 심리테스트 앱 만들기  ====================

3강 ======= https://www.youtube.com/watch?v=M1e2tLnzVPo&t=2733s 

이전 포스팅에서 파이썬 직원은 주방장이라고 말했습니다. 여러가지 재료로 다양하고 맛있는 음식과 요리를 만드는 파이썬 주방장님에 대해서 좀더 자세히 살펴 보겠습니다.

Python (파이썬) : 주방장

• 정의
• 프로그램 설치
• 기본 구조 및 문법
• 샘플 코딩 해보기
• 요약

정의

지난 포스팅의 식당 예시에서 파이썬을 정의한 내용은 아래와 같습니다.

• 파이썬은 주방장입니다. 파이썬은 네덜란드 출신입니다. 이 주방장은 항상 오픈된 주방에서만 일을 하기 때문에 주방장이 요리하는 순서나 내용을 다른 사람들이 쉽게 알 수 있습니다.
• 이 주방장은 어느 오픈 주방에서든지 요리를 잘합니다. 가끔 미리 준비된 재료(데이터)를 사용해서 주문이 들어오면 그때 그때 조리를 하기도 합니다.
• 또 급할때는 밀키트 처럼 미리 만들어 놓은 재료(오브젝트)를 기반으로 추가/변경하여 요리하기도 합니다.
• 이 주방장은 요리 중간에 들어간 재료를 확인하지 않아서 가끔 주요 재료가 빠진 식사가 잘 못나올 수 있기 때문에 조리 전에 주문에 맞게 재료가 맞게 들어가 있는지 확인해 줘야 합니다.

이것을 웹 어플리케이션 관점에서 다시 자세히 설명 드리겠습니다.

• 파이썬은 서버 프로그래밍에 사용되는 프로그램입니다. 물론 (자바 스크립트 처럼)클라이언트 프로그램도 가능합니다. 작성한 프로그램 내용을 사람이 이해하기 쉽습니다. 파이썬은 고수준 언어이니까요.
• 파이썬은 플랫폼에 독립적인 프로그래밍 언어입니다. 즉, 윈도우즈OS나 맥OS, 리눅스OS 등 OS에서 사용할 수 있습니다.
• 여러가지 데이터 형태를 다룰 수 있으며 인터프리터 방식의 프로그래밍 언어입니다. 인터프리터 방식이란 프로그램을 실행할 때 소스코드를 읽고 해석해서 실행하는 방식을 말합니다. 이와 반대되는 방식으로 컴파일러 방식이라는 것이 있는데 이것은 소스코드를 미리 읽고 해석해서 기계어로 만들어 놓는 방식을 말합니다. 실행은 소스코드가 아니라 미리 만들어 놓은 기계어를 실행시킵니다. 각 방식마다 장단점이 있습니다.
• 객체 지향 프로그래밍입니다. 객체 지향 프로그래밍이란 프로그램을 객체의 모음으로 보는 것 입니다. 객체(Object)란 클래스(Class)의 한 예입니다. 클래스는 속성과 기능을 가지는 하나의 묶음을 말합니다. 간단하게 자동차라는 클래스는 차체, 바퀴, 엔진, 시트, 핸들 등의 속성과 가속, 감속, 오른쪽 전환, 왼쪽 전환 등의 기능으로 정의해서 구성 할 수 있습니다. 이렇게 만들어진 클래스의 하나 예를 들면 벤츠가 되겠습니다. 이 벤츠가 객체 입니다. 객체는 클래스와 동일한 속성/기능을 갖습니다. 또한 프로그램 실행 시 객체의 실제 사용을 위해서 인스턴스(Instance)가 만들어집니다. 자동차의 예에서는 벤츠의 특정 모델 1대를 의미합니다.
• 위에서 말한 것 처럼 인터프리터 방식이기 때문에 실행전에 소스 코드에 문제가 없는지 잘 확인해 줘야 합니다. 잘 못된 내용이 있으면 오류가 나고 실행되지 않습니다.

프로그램 설치

• 이전에 배웠던 자바 스크립트는 웹 브라우저 엔진에 의해서 해석되고 실행되기 때문에 별도의 실행 프로그램이 필요 없었습니다. 그러나 웹 어플리케이션에서 파이썬을 서버 프로그래밍 언어로 사용하기 위해서는 플랫폼에 맞는 파이썬 프로그램을 설치해 줘야 합니다. 서버라고 해서 특별한 것은 아니고 일반 PC나 노트북 보다 성능이 좋은 비싼 컴퓨터라고 생각하시면 됩니다.
• 우리는 프로그래밍(코딩)을 배우려고하는 것이기 때문에 서버에 설치하지 않고 PC나 노트북에 파이썬 프로그램을 설치해서 사용하겠습니다. 플랫폼에 독립적이니까 이런게 좋네요.  
• 온라인 파이썬 사용 : 프로그램 다운로드나 설치 없이도 파이썬을 맛볼 수 있습니다. 기능이 제한적이어서 계속적인 프로그래밍 공부를 하실 분은 사용을 권장하지 않고요. 말 그대로 맛보기로 파이썬이 어떤 방식으로 프로그래밍 하는 지를 알고 싶으신 분이라면 온라인 파이썬 사용도 가능합니다. 다음의 링크를 클릭하시면 웹 부라우저에서 파이썬 프로그래밍이 가능합니다. https://crumb.sh/
• 프로그램 다운로드 / 설치 : 계속적인 파이썬 코딩을 공부하실 분들은 로컬 PC/노트북에 파이썬 프로그램 설치를 권장 드립니다.  https://www.python.org/downloads/ 에 접속해서 PC/노트북의 운영체제(OS)에 맞는 프로그램을 다운 받아서 설치하면 됩니다.  작성일 기준의 많이 쓸것 같은 OS에 맞는 버전의 다운로드를 연결해 놓았습니다. 맥용은 여기, 윈도우즈용은 여기를 클릭해서 다운 로드 받으세요.
•  

• 다운 받아서 설치하고 나면 윈도우즈는 cmd 창이나 powershell을 실행시켜서 파이썬 프로그램을 실행 시킬 수 있습니다. 맥 OS에서는 터미널을 실행 시켜서 파이썬 프로그램을 실행 시킬 수 있습니다. 프로그램이 설치된 폴더중에 python.exe 파일이 있는 디렉토리로 이동해서 python을 입력하면 파이썬 프로그램이 실행됩니다.(매번 이동해서 실행시키기 번거롭기 때문에 PATH라는 것을 설정해주면 어느 디렉토리에서든지 실행 시킬 수 있습니다.) 아래는 터미널에서 python을 실행시킨 모습입니다. 그리고 print 명령어로 "Hello Python"을 출력해봅니다. 끝으로 exit()를 입력해서 python 프로그램을 종료 합니다.

$ python
Python 3.8.8 (default, Apr 13 2021, 12:59:45)
[Clang 10.0.0 ] :: Anaconda, Inc. on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello Python")
Hello Python
>>> exit()
$

이렇게 해서 파이썬 프로그램을 설치하고 실행 및 종료해 보았습니다.
이처럼 파이썬을 실행시키고 한줄 한줄 명령어 코드를 입력해서 실행할 수도 있고 별도의 text 파일로 전체 내용을 미리 코딩해 놓고 한번에 실행 할 수도 있습니다. 이때 파일명은 .py 확장자(파일명 뒤에 붙이는 이름)를 사용합니다. 실행은 python "파일명"을 입력하면 됩니다. 아래에서는 첫번째 줄에서 print 내용을 hello.py라는 파일로 만들었고, 둘째 줄에서 그 파일을 파이썬으로 실행시켰습니다. 마지막줄은 실행 결과 출력된 내용입니다.

$ echo "print('Hello Python')" > hello.py
$ python hello.py
Hello Python

기본 구조 및 문법

자, 이제 부터는 간단한 기본 구조와 문법에 대해서 알아보겠습니다. 우리의 목표는 파이썬이 대략 어떤 것인지 이해하는 것이므로 자세한 내용은 생략하겠습니다.

• 주석 처리 방법 : '#"을 이용한 주석 처리. 하나의 줄(라인)에서 '#' 뒤에 오는 내용은 주석처리되어 실행되지 않습니다.

# 이 내용은 주석 처리가 되어 실행에 영향을 미치지 않습니다.

• 파이썬은 고수준 언어 이기 때문에 변수의 사용이 가능합니다. 음.... 고수준 언어 코딩의 개요는 이렇습니다. 입력 받은 데이터와 계산에 필요한 데이터를 모두 메모리에 옮겨 놓고, 필요한 계산/연산을 진행한뒤, 결과를 반환/출력하는 것입니다. 대부분은 계산/연산 부분이 반복적인 계산이 필요한 작업입니다. 반복적인 작업을 빠르게 처리하기 때문에 컴퓨터를 이용하는 것입니다. 그래서 입/출력, 할당방법, 처리방법을 기본적으로 알고 있으면 됩니다. (추가 내용: 넘어가셔도 됩니다. 변수 할당전에 알아야 할 것이 있습니다. 바로 데이터 유형(type)인데요. 고수준 언어의 경우 추상화를 하다보니 데이터의 유형을 정해주면 메모리를 더 효율적으로 사용할 수 있습니다. 이게 왜 중요하냐하면 데이터 종류에 따라서 저장에 필요한 메모리 용량이 다르기 때문입니다. 즉, 메모리를 효율적으로 사용할 수 있기 때문입니다. 물론 최근의 프로그램은 유형을 정하지 않는 프로그래밍 언어도 있습니다. 파이썬도 자바 스크립트도 미리 데이터 타입을 정할 필요가 없습니다.)
• 메모리에 어떤 값/데이터를 저장하는 명령어가 할당 명령어 입니다. 즉, abc = 1 이란 명령어는 1을 abc 라는 변수에 할당하라는 명령입니다. 즉, "="을 이용하여 오른 쪽의 값을 왼쪽의 변수(메모리)에 복사해 놓습니다.
• 입력/출력 방법 : input(), print()

>>> a = input(" 내용을 입력하세요... : ") # input 함수를 이용해서 문자열을 출력하고 키보드로부터 입력을 기다립니다. 그리고 입력 받은 값을 a 변수에 할당 합니다.
내용을 입력하세요... : 123
>>> print(a) # a 변수에 저장된 내용 즉, 입력 받은 내용을 화면에 출력합니다. input으로 입력받은 내용은 문자열로 저장됩니다.
"123"

• 다양한 유형의 데이터 처리가 가능합니다. 정수, 실수, 문자열, 리스트 등.  
  
  • abc 라는 변수를 만들고 여기에 정수를 할당하면 정수 변수, 실수를 할당하면 실수 변수가 됩니다. 
  • 문자열이란 스트링을 말합니다 쌍따옴표(") 또는 홀따옴표(')로 둘러싸인 내용이 스트링입니다. 문자열은 상수 즉, 변하지 않는 값입니다. 문자열도 변수에 할당 할 수 있습니다. 
  • 문자열을 숫자로 바꿀수 있고(int("문자열")), 숫자를 문자열로 바꿀 수(str(숫자)) 있습니다.

>>> a = "문자열 할당"
>>> a
'문자열 할당'
>>> num = 1
>>> print(num)
1
>>> num_str = str(num)
>>> print(num_str)
1
>>> type(num) # type함수로 데이터 유형을 알 수 있습니다.
<class 'int'>
>>> type(num_str)
<class 'str'>

• 리스트는 여러개의 값을 가질 수 있는 하나의 변수 이름입니다. 열린 꺽쇠 괄호(대괄호) '['로 시작해서 닫힌 꺽쇠 괄호 ']'로 끝나며 포함되는 값의 구분은 ','로 합니다. abc 변수에 a, 1, b, 2가 들어있는 리스트를 할당하는 명령은 아래와 같습니다. 여기서 리스트는 여러 유형의 데이터 타입을 섞어서 포함 할 수 있다는 것을 알 수 있습니다. a는 실수 변수, b는 문자열 변수로 첫째줄에서 할당문으로 값을 정해 주었습니다.

>>> a=1.; b="취미코딩"
>>> abc = [a, 1, b, 2]
>>> abc
[1.0, 1, '취미코딩', 2]

• 연산자
  • 사칙연산, 수학 함수, 할당문 - 정수/실수에 대한 사칙연산(+,-,*,/)이 가능합니다. a = 1 + 2
  • 그리고 자바 스크립트 예시에서 봤던 스트링의 더하기 연산이 파이썬에서도 가능합니다. add_string = "스트링" + "더하기"
  • 숫자 사이의 연산은 유형이 달라도 계산됩니다. 정수와 실수간의 계산결과는 실수 입니다. 그러나 숫자와 문자열과는 계산되지 않습니다.
  • 내장 함수와 외부 패키지를 이용하면 거의 모든 연산을 할 수 있습니다.
  • 할당자와 함께 사용해서 결과 값을 다른/같은 변수에 저장할 수 있습니다. a = a + 1   이 명령어의 의미는 a의 값에 1을 더한 값을 다시 a에 할당하라는 의미 입니다.

>>> a = 1 + 2
>>> print(a)
3
>>> add_string = "스트링" + "더하기"
>>> print(add_string)
'스트링더하기'
>>> b = 1 + 2.
>>> print(b)
3.0
>>> a = a + 1
>>> a
4

• 흐름 제어문 : 조건문, 반복문, 제어문 등이 있습니다.
  • 파이썬은 들여쓰기가 중요합니다. 프로그램을 덩어리로 구분할 필요가 있는데 별도의 구분기호 없이 들여쓰기로 구분하기 때문입니다.  동일한 들여쓰기 간격으로 시작한 줄들을 같은 덩어리로 인식 합니다.
  • 조건문 : 아래와 같은 문법 규칙으로 적용합니다.

if 조건 :
    참일 경우 실행할 명령어
else:
    거짓일 경우 실행할 명령어

• 반복문 : for 문

문법)
for 변수명 in 반복생성구분:
    명령어

예시) 문자열 문자 반복
for i in "Hello":
    print(i)
H
e
l
l
o

예시) 리스트 내부 반복
a_list = [1,2,3]
for i in a:
    print(i)
1
2
3

예시) 특정 횟수 반복 : range(시작숫자, 끝숫자, 증가숫자) - 시작 숫자부터 한번씩 반복하면서 증가숫자 만큼 증가 시키고 끝숫자가되면 종료
for i in range(0, 3, 1):
    print(i)
0
1
2

• 반복문 : while 문

문법) 표현식이 참값일 동안 while 내 명령문을 반복합니다.
while 표현식 :
    명령문
예)
i = 1
while i <= 3:
    print(i)
i = i + 1
1
2
3

• 제어문: for문이나 while문에서 break 명령어를 만나면 반복하던 루프를 벗어 납니다.

>>> i = 1
>>> while i <= 3:
...         print(i)
...         i = i + 1
...         break
...
1
>>>

• 함수 : 반복 사용되는 처리에 대한 정의 후 반복/재사용 할 수 있도록 함수를 만들 수 있습니다. 여기에서는 매개변수(파라메터)로 받은 값에 10을 곱하는 함수를 multi_10 이라는 이름으로 만들어 보겠습니다.

# 문법)
# def 함수이름(매개변수): # 매개변수가 여러개일 경우 ','로 분리합니다.
# 명령어 # 여러 명령어도 사용가능 합니다.
# return 변수/상수/객체 # 함수의 처리결과를 돌려 줍니다.
>>> def multi_10(parameter1):
...         a = parameter1 * 10
...         return a
...
>>> return_from_function = multi_10(7)
>>> print(return_from_function)
70
>>>

이상으로 아주 간단하게 필수적인 파이썬 문법에 대해서 알아 보았습니다.

샘플 코딩 해보기 - 파이썬 코딩

이제 어떻게 작성하는 지를 알았으니 아래와 같은 요건을 만족 시키는 파이썬 프로그램을 한번 코딩해 보겠습니다. 코딩은 앞서 개발했던 자바 스크립트, HTML과 같이 택스트로 작성하면 됩니다. 그래서 특별한 작성 프로그램이 필요하지 않습니다. 메모장 같은 모든 텍스트 작성 프로그램으로 작성이 가능합니다. 메모장을 열어서 위에서 배운 문법에 따라 파이썬 프로그램이 포함된 파일을 작성해 보시지요. 메모장이 없으시면 간단한 무료 텍스트 작성기를 다운 받아 사용할 수 있습니다. 여기 링크를 통해 운영체재에 맞는 sublime text라는 택스트 작성기를 다운 받아 사용하실 수 있습니다.

요건

다음의 요건 내용에 맞는 파이썬 코딩을 해보겠습니다. 파일이름을 04_square_python.py 라고 저장해주세요.

• 정사각형 한쪽 선의 길이를 입력 받아서 사각형의 넓이를 반환해주는 파이썬 프로그램을 작성해 봅시다.
• 길이를 입력을 받기 위해 input 함수를 사용합니다.
• 사각 형의 넓이는 가로 곱하기 세로로 계산하는데 정사각형이므로 가로와 세로의 길이가 같습니다. 따라서 입력받은 하나의 값과 같은 값을 곱하면 됩니다.
• 계산된 넓이 값을 화면에 출력 합니다.
• 함수로 만들어서 재사용 할 수 있도록 합니다. 함수명은 nemo_space로 작성 합니다.

취미 코딩 내용

한번 직접해 보셨나요?! 아래는 위의 요건에 맞게 파이썬으로 코딩한 내용입니다.

04_square_python.py 파일 내용)
def nemo_space ():
length_of_square = input("정사각형의 한쪽 선의 길이를 입력하세요 : ")
length_int = int(length_of_square)
space_of_square = length_int * length_int
return space_of_square

print(nemo_space())

파일 실행 및 결과
$ python 04_square_python.py
정사각형의 한쪽 선의 길이를 입력하세요 : 3
9

요약

포스팅에서는 정말 아주 단순한 요건을 구현해 봤지만 실제로는 추가적인 문법내용도 많고 엄청나게 많은 일을 할 수 있습니다. 웹 어플리케이션 서비스에서 필요한 서버 어플리케이션 기능의 개발을 위해 파이썬을 이용해서 웹 브라우저의 요청 내용에 따라 복잡한 계산을 수행하는 프로그램을 개발 할 수 있습니다. 파이썬은 고수준의 프로그래밍 언어이기 때문에 이해하기 쉽게 많은 일들을 할 수 있습니다. 특히 다른 많은 사람들이 만들어 놓은 복잡한 계산이 필요한 함수나 기능을 쉽게 이용할 수 있는 장점이 있습니다. 데이터 베이스와 연동한다든가, 인공지능/머신러닝 패키지를 사용할 수도 있습니다.

이번 시간에는 Python에 대해서 조금 더 구체적으로 알아 보았습니다. 기본적인 문법을 배웠고 간단한 요건을 충족시키는 Python 프로그램을 만들어 보았습니다.
지난 포스팅을 포함하여 웹 어플리케이션에 사용되는 언어에 대해서 간단히 알아보았습니다. 코딩을 배우는 목적이 무엇이냐에 따라서 배우고자 하는 프로그래밍 언어가 달라질 수 있겠습니다.
웹 브라우저에 보여지고 동작하는 것을 만드는 것이 재미 있다면 프론트엔트 개발자가 사용하는 언어를 배우는 것이 좋겠고, 복잡한 로직과 다양한 계산을 하고 싶다면 벡엔드 개발자가 사용하는 파이썬이나 자바 같은 언어를 배우시면 좋을 것 같습니다.

이러한 기본적인 지식을 가지고 먼저 재미있을 것 같은 코딩 언어를 선택하시고 조금 깊이 공부해 보시면 좋을 것 같습니다. 그러면 점차 이해가 넗어지고 다양한 기능을 개발할 수 있게 될 것 입니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.

이전 포스팅에서 자비스 직원은 매장 내부에서 물/반찬 추가 요청 직접 수행, 식사 배달하는 역할을 하는 홀 서빙 담당이라고 설명했습니다. 홀에서 일하는 주방장이라고 할 수 있습니다. 커피, 팥빙수 등을 직접 만들어서 제공하기 때문입니다. 이 직원(JavaScript, 자바스크립트)에 대해서 알아보겠습니다. 자바 스크립트는 고수준 언어입니다. 이전 포스틩에서 설명드린 대로 고수준 언어는 저수준 언어보다 사람이 개발하기 쉽습니다. 이전에 보았던 HTML 이나 CSS는 마크업 언어로 어떤 동작이나 계산을 프로그래밍하기보다는 구성과 표현을 정의 할때 사용하는 언어였습니다. 그러나 자바스크립트는 계산과 처리를 중심으로 합니다. 자세히 살펴 보겠습니다.

JavaScript (자바 스크립트) : 홀 서빙 담당-홀 주방장

• 정의
• 기본 구조 및 문법
• 샘플 코딩 해보기

정의

지난 포스팅의 식당 예시에서 자비스(JavaScript)를 정의한 내용은 아래와 같습니다.

• 자비스 직원이 하는 일은 크게 2가지 입니다. 첫째는 홀에서 손님이 요청한 간단한 서비스를 제공하는 것입니다. 예를 들면 음료수라든가 물 부족한 반찬 등을 요청하면 자비스가 홀에 비치된 냉장고 같은 장치에서 꺼네서 제공합니다. 커피머신이나 빙수기 등 홀에 있는 장비를 이용하여 홀 안에서 고객응대를 잘 합니다. 복잡한 일도 잘 처리하고 미리 준비해 놓지 않아도 고객의 요청이 있으면 그때 그때 홀 장비를 이용해서 잘 처리 합니다.
• 둘째는 주방에 (때로는 다른 가게에 가서까지) 손님이 원하는 요리를 요청하고 완성된 요리를 손님에게 전달 합니다. 가끔은 추신스 직원이 완성된 요리에 장식을 하기도 합니다.

이것을 웹 어플리케이션 관점에서 자바 스크립트를 다시 자세히 설명 드리겠습니다.

• 자바 스크립트를 해석하고 실행하는 자바 스크립트 엔진이 모든 웹 브라우저에 있기 때문에 웹 어플리케이션에 가장 많이 사용되는 언어중 하나입니다.
• 클라이언트에서의 웹페이지의 동작이나 외부 프로그램의 사용이 필요할 때 자바 스크립트를 사용합니다. HTML과 CSS는 정적인데 반하여 자바 스크립트를 이용하면 구성을 변경하거나 속성(위치, 크기, 색상 등)을 바꿀 수 있습니다. 이러한 기능을 이벤트와 연결하면 상황에 따라 바뀌는 홈페이지를 만들 수 있습니다. 예를 들면 마우스가 특정 지역에 들어가면 색상을 바꿀 수 있습니다. 이러한 계산을 위해 클라이언트의 자원(CPU)를 사용합니다. 산술 연산도 가능하고 외부 프로그램(라이브러리)을 이용해서 복잡하고 다양한 계산과 처리도 가능합니다. (이러한 능력 때문에 서버에서도 사용가능하지만 일단 클라이언트에서 사용한다고 생각하겠습니다.)
• 이런 다양한 기능중 하나가 바로 외부, 특히 서버와의 통신 입니다. 마치 사용자가 주소창에 요청 내용을 입력한 것처럼 자바 스크립트는 서버에 요청을 보낼 수 있습니다. 그리고 응답을 받아서 가공을 할수 있고 이 결과를 가지고 HTML과 CSS 내용을 바꿀 수 있습니다. 그러면 사용자는 바뀌어진 내용을 웹 브라우저에서 볼 수 있게 됩니다.

특징

• HTML, CSS와 함께 WWW의 핵심 기술중 하나입니다.
• 세계에서 가장 인기 있는 프로그래밍 언어입니다.
• 웹의 프로그래밍 언어입니다.
• 배우기 쉬운 언어입니다.

기본 구조 및 문법

자, 이제 부터는 간단한 기본 구조와 문법에 대해서 알아보겠습니다. 우리의 목표는 JavaScript가 대략 어떤 것인지 이해하는 것이므로 아주 자세한 내용은 생략하겠습니다.

• 위치와 구성 :
  • <head> 태그 또는 <body> 태그  내부에 위치 할 수 있습니다.
  • 내용은 <script>태그로 시작하고 </script> 로 닫습니다./끝납니다. 프로그램 내용을 이 사이에 정의합니다.
• 공통 모든 문장의 끝은 ";"세미콜론 으로 끝납니다. 즉, 하나의 문장을 인식하는데 ";"을 이용합니다.
• 입력/출력 방법 : html 요소, 팝업 메시지 창 등을 통해서 입출력 가능합니다. HTML 전체 내용을 document라는 객체를 통해 자바 스크립트에서 사용할 수 있습니다. 그래서 document를 통해 html 요소에 접근/설정 할 수 있습니다.
• 변수의 사용이 가능합니다. abc = 1; 이란 명령어는 1을 abc 라는 변수에 할당하라는 명령입니다.
• 처리 데이터 유형 : 자연수, 실수, 문자열, 리스트 등
• 데이터 처리 / 연산자 : 사칙연산, 수학 함수, 할당문
• 처리 흐름 제어문 : 조건문, 반복문, 제어문 등이 있습니다.
• 함수 : 반복 사용되는 처리에 대한 정의 후 재사용
• ………
• HTML 요소와의 연계 : 자바 스크립트는 HTML 요소를 가져오고 변경해서 설정할 수 있습니다. 자바 스크립트 내에서 전체 HTML을 document 라는 친구가 가지고 있다고 생각하시면 됩니다. 그래서 이 친구에게 특정 요소를 가져달라고 하거나 설정해 달라고 할 수 있습니다.
• 예시로 document에게 id가 id_number_1인 요소를 가져다 달라고 요청하고 결과를 id1 이라는 변수에 할당하려면 다음과이 할 수 있습니다. id1 = document.getElementById("id_number_1");  이렇게 하면 id_number_1 이라는 hrml 요소 전체가 id1에 저장된 것입니다. 그래서 id_number_1 요소의 속성 값들도 모두 id1에 저장되어있습니다. 이런 속성 값을 가져오기 위해 객체 뒤에 '.속성' 으로 값을 가져올 수 있습니다. 예를 들면 id1.value 라고 하면 입력박스(<input>) 요소의 text 값을 가져올 수 있습니다. document에 요청할때 처음부터 값을 요청할 수도 있습니다.( document.getElementById("id_number_1").value)
• 이렇게 변수에 저장된 값은 이후 다른 계산이나 처리에 이용될 수 있으며 또 다른 요소에게 전달될 수 있습니다. 예를 들어 위에서 가져온 입력박스의 text 값을 해드라인의 text로 설정할 수 있습니다. 예를 들면 id가 out인 해드라인요소에 입력박스에서 가져온 id1.value를 할당 할 수 있습니다. document.getEnementById("out").innerHTML = id1.value;    

샘플 코딩 해보기 - 자바 스크립트 코딩

이제 어떻게 작성하는 지를 알았으니 아래와 같은 요건을 만족 시키는 자바 스크립트를 한번 만들어 보겠습니다. 자바 스크립트도 HTML과 같이 특별한 작성 프로그램이 필요하지 않습니다. 메모장 같은 모든 텍스트 작성 프로그램으로 작성이 가능합니다. 메모장을 열어서 위에서 배운 문법에 따라 자바 스크립트가 포함된 파일을 작성해 보시지요. 메모장이 없으시면 간단한 무료 텍스트 작성기를 다운 받아 사용할 수 있습니다. 여기 링크를 통해 운영체재에 맞는 sublime text라는 택스트 작성기를 다운 받아 사용하실 수 있습니다.

요건

다음의 요건 내용에 맞는 자바 스크립트 코딩을 해보겠습니다. 이전 CSS 때 만들었던 파일에 추가해 보세요. 파일이름을 03_javascript.html 이라고 바꾸어서 저장해주세요.

• 입력박스 하나를 추가합니다. id를 nemo, value를 "취미코딩은 이렇게 하는 것 "으로 설정합니다.
• id가 out_text인 해드라인(h2)를 추가합니다.
• 위 입력박스의 내용에다가 " 입니다."라는 내용을 추가하여 해드라인에 표시합니다. 다시 자세히 말하면 id가 nemo 인 요소의 value를 가져와서 그 내용에 " 입니다."를 추가하여 id가 out_text인 요소의 value로 설정합니다.

취미 코딩 내용

한번 직접해 보셨나요?! 아래는 위의 요건을 이전에 만들었던 CSS 파일에 자바 스크립트 내용을 추가한 내용입니다.

<!DOCUMENT html>
<html>
<head>
<title>Welcome to HTML world!</title>
<style>
body {
background-color: yellow;
}

h1 {
color: blue;
text-align: center;
}
p {
color: orange;
}
</style>
</head>
<body>
<h1>Hello HTML!</h1>
<p>이것은 문단 입니다.</p>
<a href=”https://www.google.com”>Go To Google</a>

<input id="nemo" value='취미코딩은 이렇게 하는 것 '>
<h2 id="out_text"></h2>
<script>
var input_string = document.getElementById("nemo").value;
document.getElementById("out_text").innerHTML = input_string + " 입니다.";
</script>
</body>
</html>

작성 내용 확인

앞에서 작성한 내용을 03_javascript.html 파일로 저장하고 이 파일을 웹 브라우저에서 오픈하면 내용이 잘 작성되었는지 확인 할 수 있습니다.
아래 이미지는 위에서 작성한 코딩 파일을 크롬 브라우저에서 파일 열기를 통해 열었을 때 보여지는 내용입니다.

요약

이처럼 자바 스크립트를 이용하여 웹 브라우저에서 동작하는 많은 일들을 할 수 있습니다. 고수준의 프로그래밍 언어이기 때문에 쉽게 많은 일들을 할 수 있습니다. 위에서도 잠깐 말씀드렸지만 자바 스크립트를 가지고 서버 프로그래밍까지 가능합니다. 프론트엔드 개발에서 로직을 처리하는 부부분은 자바 스크립트가 담당한다고 생각하시면 되겠습니다.

이번 시간에는 JavaScript에 대해서 조금 더 구체적으로 알아 보았습니다. 기본 문법을 배웠고 간단한 요건을 충족시키는 JavaScript를 만들어 보았습니다.
다음 시간에는 서버 프로그램 개발에 사용되는 Python에 대해서 알아보도록 하겠습니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.

이전 포스팅에서 추신스 직원은 하태민(HTML) 매니저를 돕기위해 매장 내 환경 셋팅을 전담한다고 설명했습니다. 이 직원(CSS)에 대해서 알아보겠습니다.

CSS : Cascading Style Sheets 홀 셋팅 담당

• 정의
• 기본 구조 및 문법
• 샘플 코딩 해보기

정의

이전 포스팅의 식당 예시에서 추신스(CSS)을 정의한 내용은 아래와 같습니다.

• 사실 추신스 직원은 하태민님의 소개로 식당에 취직하게 되었습니다.
• 하태민님 혼자서 손님의 기호에 맞고 깔끔한 매장을 유지하기 위해 매장 내 테이블과 의자 등의 배치와 크기, 색상을 자주 바꾸는데 너무 힘 들었기 때문입니다. 그래서 추신스 직원은 이러한 배치, 크기, 색상 등 손님에게 보여지는 것 들을 전담으로 관리합니다.

이것을 웹 어플리케이션 관점에서 다시 자세히 설명 드리겠습니다.

• CSS는 HTML과 같이 마크업 언어로 요소를 정의하기 위해 태그를 사용합니다.
• CSS는 브라우저에서 보여지는 구성 요소들의 표현 속성을 설정하는 언어 입니다. 즉, 구성 요소의 위치, 크기, 색상 등을 정의 합니다.
• HTML은 전체 구성을 CSS는 요소의 표현을 담당하게 되는 것 입니다. 이렇게 표현 속성만을 묶어서 CSS가 관리 함으로써 표현의 유연성이 높아지고 여러 다른 페이지(html)에서도 공통적으로 표현 속성을 사용할 수 있게 됩니다. 생각해 보세요! 50개의 웹 페이지가 있는데 모두 같은 배경색을 쓰다가 바뀌게 될 경우 프로그램의 50군대를 모두 바꾸어줘야 합니다. 그러나 CSS를 사용하여 별도 파일(.css)로 관리할 경우에는 이 파일에서만 수정해주면 한번에 모두 적용됩니다.

기본 구조 및 문법

자, 이제 부터는 간단한 기본 구조와 문법에 대해서 알아보겠습니다. 우리의 목표는 CSS가 대략 어떤 것인지 이해하는 것이므로 아주 자세한 내용은 생략하겠습니다.

• CSS 정의 내용은 <html>태그와 <head> 태그 안쪽에 정의 됩니다. 또는 별도 파일로도 관리가 가능합니다.
• <style> 태그로 시작합니다.
• <style> 태그와 </style>태그 사이에 css 구성요소를 배치 합니다.
• </style> 태그로 닫습니다./끝납니다.

CSS 구성요소

• 요소는 "선택자 { 선언문 }" 으로 구성됩니다. 
• 선택자는 html 태그 요소 또는 요소의 name/id 등으로 설정이 가능합니다. (예: h1, p, a)
• 선언문은 “속성: 값” 으로 정의되고 하나의 선언문 끝은 ‘;’ 으로 구분됩니다. 
• 주요 속성은 다음과 같습니다. color, text-align, background-color, background-image …
• 요소의 예시는 아래와 같습니다. 

  

• HTML 파일 내부에 CSS 내용을 추가했을 때의 예시 입니다.

<!DOCUMENT html>
<html>
<head>
<style>
h1 { color: blue };
</style>
</head>
<body>
<......>
</bod>
</html>

샘플 코딩 해보기 - css 코딩

이제 어떻게 작성하는 지를 알았으니 아래와 같은 요건을 만족 시키는 css 스크립트를 한번 만들어 보겠습니다. CSS는 HTML과 같이 작성에 특별한 프로그램이 필요하지 않습니다. 메모장 같은 모든 텍스트 작성 프로그램으로 작성이 가능합니다. 메모장을 열어서 위에서 배운 문법에 따라 css 파일을 작성해 보시지요. 메모장이 없으시면 간단한 무료 텍스트 작성기를 다운 받아 사용할 수 있습니다. 여기 링크를 통해 운영체재에 맞는 sublime text라는 택스트 작성기를 다운 받아 사용하실 수 있습니다.

요건

다음의 요건 내용에 맞는 CSS 코딩을 해보겠습니다. 이전 HTML 때 만들었던 파일에 추가해 보세요. 파일이름을 02_html_css.html 이라고 바꾸어서 저장해주세요.

• 배경은 노란색
• 글자 색은 파란색 그리고 중간에 배치
• 헤드라인의 글자체는 verdana이고 크기는 20픽셀로 설정
• 문단의 색은 오렌지 색으로 설정

샘플 코딩 내용

한번 직접해 보셨나요?! 아래는 위의 요건을 이전에 만들었던 HTML 파일에 CSS 내용을 추가한 내용입니다.

<!DOCUMENT html>
<html>
<head>
<title>Welcome to HTML world!</title>
<style>
body { background-color: yellow;}
h1 { color: blue; text-align: center;}
p { color: orange;}
</style>
</head>
<body>
<h1>Hello HTML!</h1>
<p>이것은 문단 입니다.</p>

</body>
</html>

작성 내용 확인

앞에서 작성한 내용을 .html로 끝나는 파일로 저장하고 이 파일을 웹 브라우저에서 오픈하면 내용이 잘 작성되었는지 확인 할 수 있습니다.
아래 이미지는 위에서 작성한 샘플 코딩 파일을 크롬 브라우저에서 파일 열기를 통해 열었을 때 보여지는 내용입니다.

요약

이처럼 CSS를 이용하여 웹 브라우저에서 보여지는 내용들을 설정 할 수 있습니다. 선택자의 경우 말씀 드린대로 html 속성으로 쓰이는 id나 name 등을 이용해서 한꺼번에/또는 특정해서 대상을 선택할 수 있습니다. 그리고 위치, 경계 마진 등 다양한 속성을 다룰 수 있습니다.

이번 시간에는 CSS에 대해서 조금 더 구체적으로 알아 보았습니다. 기본 문법을 배웠고 간단한 요건을 충족시키는 CSS를 만들어 보았습니다.
다음 시간에는 JavaScript에 대해서 알아보도록 하겠습니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.