패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #8.6주차 학습후기, 학습진도 50% 달성!

드디어 패스트캠퍼스 프로그래밍 첫걸음 학습 진도 50% 달성했다!

패스트캠퍼스 서포터즈가 아니었다면 이렇게 단기간에 도달하지 못했을 것이다.

프로그래밍 첫걸음 서포터즈 하면서 생활코딩 도서도 증정 받았는데 조만간 IT책 리뷰를 쓸 예정이다.

프로그래밍 첫걸음을 들으며 학교 수업과 많이 비교를 하게 된다.

학교 수업은 주로 시험을 위한 공부를 하게 되는데

패스트캠퍼스 프로그래밍 첫걸음은 훨씬 쉽고 실무에 필요한 지식만 빠르게 배울 수 있어서

커리어를 준비하는데 있어서 효과적이다.

그리고 실무에서 일하는 강사님의 빠른 피드백도 한 몫 한다.

프로그래밍에 쉽게 입문하거나 웹 기초를 빠르고 효율적으로 배우고 싶다면 프로그래밍 첫걸음 강의를 추천하고 싶다.

6주차에서 배운 주제들을 정리해보자!

6주차 진도에서는

• 06. [JAVASCRIPT] 연산자
• 과제1. 연산자로 여러 타입 다루기
• 07. [JAVASCRIPT] 제어문1(조건문-if, switch)
• 과제2. 논리 조건 처리 하기
• 08. [JAVASCRIPT] 제어문2(반복문-for, while)
• 과제3. 문자열 다루기
• 09. [JAVASCRIPT] 자바스크립트 객체
• 과제4. 사용자 정의 객체 만들기

를 학습했다.

프로그래밍에 가장 기본적인 내용들이다.

연산자와 조건문, 반복문은 모든 프로그래밍 언어가 가지고 있는 공통적인 기능들이다.

자바스크립트는 어떻게 다루는지 빠르게 알아볼 수 있었다.

자바스크립트에 객체 기능도 있어 간단하게 실습도 해보았다.

과제 내용도 배운 내용들을 몸에 익히도록 적절한 난이도로 되어 있다.

프로그래밍첫걸음 6주차 진도 내용을 정리해보자.

06. [JAVASCRIPT] 연산자

연산자란 무엇일까?

연산자는 변수의 수학적 연산과 처리를 해준다.

산술 연산자에는 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 사칙 연산 뿐 아니라 할당(=) 까지 포함된다.

그리고 증가(++)와 감소(--), 나머지(%), 연산 할당(+=, -=, *=, /=, %=) 이 있다.

var x = 10;

으로 10 값을 가지는 변수 x 를 선언해보자.

증가, 감소에 전위 연산과 후위 연산이라는 연산법이 등장한다.

x++ 은 후위 연산으로 할당을 하고 값을 증가시킨다.

++x 은 전위 연산으로 증가를 하고 값을 할당한다.

var x = 10;
var y;
 
y = x++;
console.log(y);
console.log(x);

결과 값은 차례대로 10, 11 이 나타난다.

후위 연산은 할당을 먼저 하므로, y 변수에 10 값이 들어간다. 그리고 그 후에 x 값을 11로 증가시킨다.

따라서 y 값은 10이고 x 값은 11이다.

console.log(20 % 10);
console.log(15 % 10);

%은 나머지 연산이다.

20 을 10 으로 나누고 그 나머지는 0이므로, 값은 0이다.

15 % 10 연산하면은 값은 5이다.

var z = 10;
z += 1;
z = z + 1;
 
console.log(z);

두 번째 줄과 세 번째 줄은 동일한 동작을 하는 코드다.

+= 할당으로 더욱 짧게 코드를 입력할 수 있다.

1씩 두 번 더했으므로 결과는 12 이다.

비교 연산자는 다음의 연산자들이 있다.

• 비교 (==)
• 엄격한 비교 (===)
• 같지 않음 (!=)
• 엄격한 같지 않음 (!==)
• 크고 작음 (>, <, >=, <=)

비교 연산자는 결과를 true, false 와 같은 논리형으로 알려준다.

비교 연산자에서 '엄격한' 은 무엇일까?

var x = 10, y = "10";
 
console.log(x == y); // true
console.log(x === y); // false
 
console.log(x != y); // false 
console.log(x !== y); // true

엄격한은 변수의 타입, 자료형까지 같은지 확인을 해준다.

숫자형 10과 문자형 10 과 비교를 할 때 그 차이를 알 수 있다.

단순 비교 연산자는 타입이 같지 않더라도 값이 같다면 같다고 인식을 한다.

그러나 엄격한 비교 연산자는 타입이 다르면 값이 같아도 다르다고 인식을 한다.

마지막으로 알아볼 연산자는 삼항 연산자다.

var x = 10; y = "10";
var z;
 
console.log(z = x == y ? 10 : 11); // 10
console.log(z = x === y ? 10 : 11); // 11

? 물음표를 기준으로 그 앞에는 논리형이 들어간다. 그리고 그 뒤에 : 클론을 기준으로 true 면 앞에 있는 값이 나오고, false 면 뒤에 있는 값이 나온다.

첫 번째 출력 코드에서 z 값에 x == y 결과인 true 값이 할당되고 z 값이 true 이므로 : 클론을 기준으로 앞에 있는 10 값이 출력된다.

두 번째 출력 코드에서는 비교 연산자 대신 엄격한 비교 연산자로 z에 false 값이 할당되고 : 클론을 기준으로 뒤에 있는 11 값이 출력된다.

[ QUIZ ]

1. '연산자'는 변수의 수학적 연산 및 처리를 위해 사용한다.
2. '산술 연산자'는 산술 연산을 위해 사용되는 연산자이다.
3. '비교 연산자'는 비교 연산을 위해 사용되는 연산자이다.
4. '삼항 연산자'는 변수 = 조건 ? 참 : 거짓; 형태로 작성한다.

과제1. 연산자로 여러 타입 다루기

//자바스크립트 언어는 문자열과 숫자를 결합할 경우 문자열 데이터 타입이 됩니다.
var str3 = 1 + 1 + "귀요미";
console.log(typeof str3, str3); // string 2귀요미
 
var str4 = "귀요미" + 1 + 1;
console.log(typeof str4, str4); // string 귀요미11

위 코드의 결과를 이해하는 것이 과제다.

자바스크립트에서 문자열과 숫자를 더하기 연산으로 합칠 수 있다.

그러나 그 순서에 따라서 결과가 다르게 나타난다.

첫 번째 str3 변수는 숫자형끼리의 연산을 먼저 진행하고 그 다음에 문자열과 연산을 진행한다.

따라서 1 + 1 = 2 라는 값이 나오고 그 뒤에 2 + "귀요미" 연산이 진행되어 2귀요미 값으로 합쳐진다.

두 번째 str4 변수는 문자열과 숫자를 먼저 합쳐 "귀요미1" 문자형이 나온다. 그 다음에도 문자형과 숫자를 합치는 연산으로 "귀요미11" 값이 나온다.

숫자와 문자열을 합칠 때는 순서에 유의해야 한다는 것을 이해했다.

07. [JAVASCRIPT] 제어문1(조건문-if, switch)

논리 연산자에는 부정(!), and(&&), or(||) 연산자가 있다.

논리형 값에 부정 연산을 하면 반대의 값이 나오게 된다. true -> false, false -> true

and 연산은 두 논리형이 모두 참이어야 참 값이 나오고, 그 외에는 거짓 값이 나온다.

or 연산은 두 논리형 중 하나가 참이면 참 값이 나오고, 두 논리형이 모두 거짓이면 거짓 값이 나온다.

논리 연산은 제어문에 사용이 된다.

제어문 중에서 조건문(if문, switch문)이 있다.

if (조건) {

 조건이 참일 경우 실행

}

조건이 참 값일 경우에 { } 블록 안에 있는 코드들이 실행 된다.

또 다른 조건을 넣어주려면,if { } 블록 밑에 else if { } 블록을 추가한다.

if (조건) {

 조건이 참일 경우 실행

} else if (조건) {

 선행 조건들이 거짓이고, 해당 조건이 참일 경우 실행

} else if (조건) {

 선행 조건들이 거짓이고, 해당 조건이 참일 경우 실행

}

...

모든 조건이 거짓일 경우에는 else { } 블록을 추가한다.

if (조건) {

 조건이 참일 경우 실행

} else if (조건) {

 선행 조건들이 거짓이고, 해당 조건이 참일 경우 실행

} else if (조건) {

 선행 조건들이 거짓이고, 해당 조건이 참일 경우 실행

} else {

  위 모든 조건이 거짓일 경우 실행

}

var x = 10, y = '10', z = false;
 
if (x == 10) {
    console.log("x는 10입니다."); // 실행
}
 
if (y !== 10 && y === '10') {
    console.log("y는 엄격한 비교 연산으로 10이 아니고 정확히 '10' 입니다."); // 실행
}
 
if (z) {
    console.log("z 값은 참입니다.")
} else {
    console.log("z 값은 거짓입니다.") // 실행
}

두 번째로 switch 문은 값에 따라서 조건을 검사하여 코드들을 실행한다.

switch (값) {

 case 조건: 실행문; break;

 case 조건: 실행문; break;

 case 조건: 실행문; break;

 ...

 default: 기본값; break;

}

default 블록은 모든 조건이 아닐 때 실행이 된다.

break; 실행문은 해당 switch-case 블록을 벗어난다는 의미다.

break; 실행문이 없다면 그 아래 코드까지 실행이 된다.

var x = 10;
 
switch(x) {
    case 10:
        console.log("10"); // 출력
    case 5:
        console.log("5"); // 10 조건에서 break가 없으므로 이 코드까지 실행
        break; // 빠져나옴
    default:
        console.log("10도 5도 아닙니다."); // 실행 안됨
        break;
}

위 코드 결과를 통해서 break 코드가 어떤 역할을 하는지 알 수 있다.

[ QUIZ ]

1. '조건문'은 코드의 논리적 구조를 처리하기 위해 사용한다.
2. 'if~else 구문'은 조건이 참일 경우 중괄호 안의 코드를 실행한다.
3. 'switch~case 구문'은 값의 조건에 따라 실행한다.

과제2. 논리 조건 처리 하기

90점 이상을 A, 80점 이상을 B, ... 식으로 점수를 조건에 따라 분기해보는 실습이다.

이 동작을 if 문으로만 작성해보고 if - else 으로 작성해보아 차이점을 확인한다.

var score = 95;
 
// if 문으로만 구성
 
if (score >= 90) {
    console.log("A"); // 출력
}
 
if (score >= 80) {
    console.log("B"); // 출력
}
 
if (score >= 70) {
    console.log("C"); // 출력
}
 
if (score >= 60) {
    console.log("D"); // 출력
}
 
if (score < 60) {
    console.log("F");
}
 
// if-else if 문으로 구성
 
if (score >= 90) {
    console.log("A"); // 출력
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else if (score >= 60) {
    console.log("D");
} else {
    console.log("F");
}

if 문으로만 구성을 한다면 아래 분기까지 실행이 되어버린다.

반면에 if - else 문에서 else if 와 else 는 앞 조건이 거짓일 경우에만 실행이 되므로

정상적으로 작동하는 것을 확인할 수 있다.

08. [JAVASCRIPT] 제어문2(반복문-for, while)

제어문 두 번째 반복문이다.

반복문은 컴퓨터의 빠른 연산 속도를 이용해 다양한 처리를 가능케 해준다.

반복문의 장점을 체감하기 위해 배열을 이용한다.

배열이란 여러 자료형을 하나로 묶는 자료형(객체)이다. 객체에 대해서는 다음 강의에서 다룬다.

var arr = [ 값, 값, 값, ... ];

으로 배열을 선언할 수 있다. 대괄호 [ ] 로 묶어 여러 자료형 값을 arr 변수에 담을 수 있다.

배열 안에 있는 값에 접근을 하려면 인덱스가 필요하다.

인덱스는 0부터 시작한다.

arr[0] 으로 제일 처음에 있는 값에 접근할 수 있다.

배열은 객체이기도 하므로, 여러 기능들을 실행할 수 있다.

대표적으로 배열.length 로 배열의 크기를 가져올 수 있다.

이제 반복문을 알아보자.

첫 번째로 for 문의 코드 형식은 다음과 같다.

for (초기화; 조건; 반복) {

조건이 참일 경우 실행

}

var arr = [1, 2, 3, 4, 5];
var idx;
 
for (idx = 0; idx < arr.length; ++idx) {
    console.log( arr[idx] );
}
 
// 1 2 3 4 5 출력

for 문에 진입할 때, idx 변수를 0으로 초기화 해준다.

idx 변수가 배열 arr의 크기(5)보다 작다면 반복문 코드를 실행한다.

반복문 안 코드를 다 실행하고 나면, 반복 코드가 실행된다.

++idx 로 idx 변수를 하나 증가시켜준다.

결과적으로 arr 배열의 모든 인덱스에 접근하여 값을 가져오게 된다.

많이 쓰이는 패턴이니 손에 익히는 것이 좋다.

위 코드에서 간과한 점이 하나 있다.

arr.length 코드는 반복문에서 조건을 확인할 때 마다 실행이 된다.

매번 arr 객체에 접근하여 length 속성을 접근하는 것 보다는

변수 하나에 저장해서 그 변수를 이용하는 것이 조금 더 낫다.

var arr = [1, 2, 3, 4, 5];
var idx;
var len = arr.length;
 
for (idx = 0; idx < len; ++idx) {
    console.log( arr[idx] );
}
 
// 1 2 3 4 5 출력

반복문 두 번째는 while 구문이다.

while 구문은 조건식만 검사해서 참일 때만 반복문 코드를 실행한다.

var arr = [1, 2, 3, 4, 5];
var idx = 0;
var len = arr.length;
 
while (idx < len) {
    console.log(arr[idx]);
 
    ++idx;
}
 
// 1 2 3 4 5

앞서 확인한 for 문의 동작과 똑같다.

다만, 다른 점은 while 구문에 조건식만 들어간다.

초기화와 증감식은 따로 작성해줘야 한다.

반복문에도 break 와 continue 코드가 들어간다.

var arr = [1, 2, 3, 4, 5];
var idx = 0;
var len = arr.length;
 
while (idx < len) {
    if (idx == 2) {
        break;
    }
 
    console.log(arr[idx]);
    ++idx;
}
 
// 1 2

idx 값이 2일 때 break 코드로 반복문을 빠져나갈 수 있다.

따라서 idx 값이 0, 1 일 때 코드가 실행이 되므로, 1 2 값만 출력된다.

continue 코드는 아래 반복문 코드를 실행하지 않고 다음 반복문으로 넘어간다.

만약에 조건식이 계속 참이면은 어떻게 될까?

그 반복문 블록은 무한루프라고 하며 영원히 빠져나오지 못하게 된다.

이는 프로그램 오작동이며 고쳐야한다. 

[  QUIZ ]

1. '반복문'은 코드를 반복 처리하기 위해 사용한다.
2. '무한루프'는 코드가 무한 실행되느 것을 의미한다.
3. '배열'은 여러 자료형을 하나로 묶는 역할을 할 수 있다.

과제3. 문자열 다루기

반복문으로 구구단을 만들어보는 실습이다. 숫자와 문자열을 같이 다뤄볼 수 있다.

// 문자열 결합 반복 처리하기
var arr = [2, 3, 4, 5, 6, 7, 8, 9];
var result = "";
var len = arr.length;
 
for(var i = 0; i < len; ++i){
    result += "[ " + arr[i] + " 단 ] <br>";
 
    for (var j = 1; j <= 9; ++j) {
        result += arr[i] + " * " + j + " = " + arr[i] * j + "<br>";
    }
 
    result += "<br>";
}
document.write(result);

반복문 안에 또 반복문이 들어갈 수 있다는 점을 확인했다.

한 요소에 대하여 여러 번 반복을 할 수도 있다는 점을 이해했다.

09. [JAVASCRIPT] 자바스크립트 객체

이번에는 자바스크립트 객체를 배운다.

객체라는 개념이 조금 생소한데 이해해보려고 노력했다.

객체란 자바스크립트 프로그램의 대상 그 자체이다.

속성(Property)과 메소드(Method)로 이루어져 있다.

귀여운 고양이를 예를 들어보자.

고양이는 객체이다.

고양이가 가지는 색, 성별, 크기 같은 고유한 특징들을 속성, Property 라고 한다.

그리고 고양이가 가지는 냐옹과 냥퍼치 같은 고유한 행동들을 메소드, Method 라고 한다.

자바스크립트에서 객체를 만드는 방법은 다음과 같다.

var 객체명 = {키: 값, 키: 값, ... };

객체 선언 시 키는 해당 객체의 속성(Property)이 된다.

속성마다 값을 가진다.

객체 안에 있는 메소드를 실행시키려면 객체.메소드(); 으로 메소드를 실행시킬 수 있다.

객체 안에 있는 속성들에 접근하려면 객체.속성, 으로 값을 읽어올 수 있다.

또한 객체.속성 = 값; 으로 속성에 값을 할당시킬 수 있다.

객체.속성에 값을 읽어오거나 쓰는 행위를 get, set 이라고 한다.

다음은 객체 예제다.

var cat = {
    gender: "female",
    age: 5,
    name: "Coco",
    meow: function() {
        console.log("냐옹!");
    }
}
 
// get
console.log(cat.name, cat.gender, cat.age); // femail 5 출력
 
// set
cat.name = "Momo";
cat.gender = "male";
cat.age = 10;
 
console.log(cat.name, cat.gender, cat.age); // male 10 출력
 
// call method
cat.meow(); // 냐옹! 출력

자바스크립트에는 내장 객체들이 있다.

자바스크립트가 기본적으로 제공하는 객체들이 있다.

그 중 대표적으로 Math 객체를 사용해보자.

var pi = Math.PI;
console.log(pi); // 3.141592653589793
 
console.log(Math.pow(2, 4)); // 16
 
console.log(Math.random()); // 0 <= x < 1 사이의 난수 생성

[ QUIZ ]

1. '객체'는 자바스크립트 프로그램 대상 그 자체이다.
2. 자바스크립트 객체는 '속성'과 '메소드'로 구성된다.
3. '내장 객체'는 자바스크립트가 기본적으로 제공하는 객체이다.

과제4. 사용자 정의 객체 만들기

직접 객체를 만들어보는 과제다.

user라는 이름의 객체를 성, 이름, 사는 곳 등의 속성을 갖도록 선언해보자.

var user = {
    gender: 'male',
    name: 'John doe',
    residence: 'Seoul'
};
 
console.log(user.gender, user.name, user.residence);
// male John doe Seoul 출력

---

이번 주 진도는 프로그래밍 언어의 기본을 배웠다.

프로그래밍 언어의 기본을 자바스크립트로 배우니 더 수월했다.

더불어 객체라는 생소한 개념을 쉽고 간결하게 정리해줘 많이 편리했다.

다음 주 진도도 기대된다!

---