2021년 4월 6일 코드스테이츠 DAY-2(JS/Node)

오늘의 일정과 배운 점(느낀 점)

: 해당 챕터별 Achievement Goals는 코드스테이츠에서 제공하는 점 안내드립니다.

 

변수(Chapter) Variable = a way to handle data

Achievement Goals

 

변수 Intro

• 프로그래밍은 데이터 처리를 하는 것임을 이해한다. => 프로그래밍을 통해서 컴퓨터에게 우리가 원하는 데이터 처리방식을 명령함
• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다. => 변수는 데이터를 다루는(관리하는) 방법임. 동일한 데이터가 등장하는 곳을 변수로 대체하고 변수에 해당 데이터를 저장할 수 있음. 변수를 관리하는 것으로 동일한 데이터를 한 번에 컨트롤 가능함.
• 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다. => 컴퓨터에 데이터 보관함 = 메모리 / 보관함의 이름 = 변수 / 이름을 통해 데이터 사용  => 보관함의 자리를 확보 = 선언(declaration), 선언은 let age;으로 할 수 있다. / 보관함에 데이터를 저장 = 할당(assignment), 할당은 age = 12;으로 할 수 있다. 선언과 할당을 동시에 할 수도 있는데 let age = 12;와 같이 할 수 있음. 단, 여기서 = 은 같다(equal)의 의미가 아닌 할당(대입 : assign)의 의미로 사용됨
• 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다. => 코드의 각 한 줄을 표현식(expression)이라고 부름. 이 표현식이 무엇을 의미하는지 알아내는 과정을 평가(evaluation)라고함. => 표현식 console.log(age * 2);의 평가과정. 먼저 변수 age가 보관함에서 조회됨. age는 age가 적힌 보관함에 저장된 데이터인 12(number)로 대체됨. 이어서 곱하기 표현식이 평가됨. 결과 24가 출력됨. => 표현식 'Hello' + name;의 평가과정(let name = 'Park';라고 가정). 먼저 변수 name이 보관함에서 조회됨. name은 name이 적힌 보관함에 저장된 데이터 'Park'(string)으로 대체됨. 이어서 더하기 표현식이 평가됨. 결과 "HelloPark"이 출력됨.

변수 기초, 변수 실습

• 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다. => 변수는 상황에 따라서 변할 수 있는 값.선언은 let myname;(선언은 let 키워드를 사용하고 선언은 한 번만 함) 할당은 myname = 'Daniel';선언과 할당을 함께 쓰면 let myname = 'Daniel';
• 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.
• =가 "같다"라는 의미가 아니라 할당 연산자임을 이해할 수 있다. 
• num = num + 1;이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다. => 만약 let num = 1;라고 선언과 할당이 이루어졌다고 가정하면, num = num + 1;의 표현식 중 num + 1의 num이 1로 대체되고 더하기 표현식이 평가되어 그 결과 2가 출력된다. 

 

타입(Chapter) Type 

Achievement Goals

• 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다. => 원시자료형은 객체가 아니면서 메소드도 가지지 않는 데이터이다. 원시 값은 불변하여 변형할 수 없는 것이 특징이고 하나의 변수에는 하나의 데이터만 담을 수 있다. 참조자료형은 식별자로 참조할 수 있는 메모리(heap이라는 데이터 보관함)에 있는 값인 Object로 볼 수 있다. 가볍게 보면 array는 object와 별도의 무엇인 것 같지만 깊게보면 이것또한 일련의 값들을 표현하기 위한 Object인 것이다. 참조자료형은 원하는 대로 데이터 사이즈를 조정할 수 있으며 여러 데이터를 담을 수 있다. 예시는 아래 코드를 참고하자.
• 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다. => string(문자열) : 쉽게 '' 안에 무언가가 들어오면 문자열이라고 생각하면 되겠다. ex) '1'은 type이 문자열이지 number 가 아니다.  => number(숫자) : 말 그대로 숫자이며 ''안에 숫자가 들어가면 type이 문자열(string)이므로 주의하자. => boolean(불리언) : 참과 거짓을 판단하는 타입. 값은 true, false 두 가지밖에 없다. => undefined(변수의 값이 없는 경우) : 이 자체가 타입이다. 변수에 값이 할당되어 있지 않은 경우.              
• 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.  
• typeof를 활용하여 특정 값의 타입을 확인할 수 있다. => typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. 아래 예시의 Strings 부분 typeof(typeof 1) === 'string'; 를 이해할 수 있을 것이다. 
• 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.(해당 부분은 아래 조건문에서 다루도록 하겠다.)

//원시자료형

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof always returns a string

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';

// Undefined
typeof undefined === 'undefined';

//참조자료형 

// Object
let person = {name : 'Park',
              age : 32,
              isStudent: true
};
undefined
typeof person
"object"
typeof person === 'object'
true
//단, 여기서 typeof person === object를 입력 시 false가 출력됨.

// Array
let fruits = ['banana', 'apple', 'pineapple'];
undefined
typeof fruits
"object" //???이게뭐지했으나 MDN에서 Array.isArray(fruits)를 써보란다.//
Array.isArray(fruits) //객체를 Array.isArray하면 false가 출력됨
true 
//the only existing "type"s in ECMAScript are undefined, null, boolean, number, bigint, string, symbol, and object. 그러하다.

// Function
function callMyName(){
    let myName = 'Park';
    console.log(myName);
}
callMyName();
Park
typeof callMyName
"function"

함수(Chapter)

Achievement Goals

 

함수 Intro

• 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. => 함수는 코드의 묶음이자 기능(function)의 단위이며 구체적인 입력값과 출력 값을 가진다.(mapping) 또한 호출 후에는 반드시 돌아온다.(return)
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. => function consoleLogSth(Sth){return console.log(Sth)};라는 함수를 작성하였다. 여기서 function은 keyword, consoleLogSth는 name, () 안에 있는 Sth는 parameter, {} 안에 있는 내용은 body이다. 
• 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다. => 위에서 작성한 함수로 예시를 들겠다. function consoleLogSth(Sth){return console.log(Sth)};은 선언(declaration)이다. 이 함수를 사용하기 위해서는 호출을 해야 하는데 consoleLogSth(Sth);로 호출(call, invocation)이 가능하다. 
• 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다. => 함수를 선언 후 호출 시 이를 변수의 값으로 가져올 수 있다. 아래 예시를 보자.

function consoleLogSth(Sth){return console.log(Sth)};
//case 1 
consoleLogSth(1);
1
//case 2
let result = consoleLogSth(1);
1

//case 1, 2 모두 같은 값을 출력하는 것을 알 수 있다. 

• 함수의 결괏값이 변수에 할당되어 담기는 과정을 설명할 수 있다. => 함수가 호출되면 데이터 보관함에 저장된 함수의 코드가 조회되고 함수 코드의 바디에 등장하는 parameter들은 함수 호출시 전달된 인자의 값으로 바뀌게 되어 함수 코드가 순차적으로 실행됨. 함수가 return 하면 함수를 호출한 곳으로 돌아가게 된다. 이때 호출 코드는 return값으로 바뀌게 된다. 위 코드를 예로 들어보자. let result = consoleLogSth(1);로 함수를 호출하면 데이터 보관함에 저장된 function consoleLogSth(Sth){return console.log(Sth)};이 조회되고 return console.log(Sth)중 Sth가 1로 바뀌게 된다. 함수 코드가 실행됨에 따라 console.log(1)의 결괏값이 return 하고 let result = 1이 된다. 

함수 기초, 함수 실습

• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다. => 함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다. 입력값을 설정할 수 있고 항상 출력 값을 호출한 곳으로 반환(return)함과 동시에 종료된다. 
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다. => 아래 코드 예시를 통해 살펴보자.
• 매개변수(parameter)와 전달 인자(argument)를 구분하여 사용할 수 있다. =>  함수 그 자체에서 () 안에 적어주는 값(호출할 때마다 바뀌어질 수 있음, let 키워드를 쓰지 않고 사용할 수 있음)을 매개변수(parameter)이고, 함수를 호출할 때 매개변수에 할당되는 값을 전달 인자(argument)라고 한다. 
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다. => 아래 코드 예시를 통해 살펴보자. 

//함수 그 자체(함수 선언식)
function greeting(yourName){
     return console.log('Hello' + yourName);
};

//함수 호출
greeting('Park');
HelloPark //결과 값

//위 함수선언식으로 표현 된 함수를 함수 표현식과 화살표 함수로 각각 표현해 보겠다. 

//함수 표현식
const greeting = function(yourName){
	return console.log('Hello' + yourName);
};

//함수 표현식 결과
greeting('Park');
HelloPark

//화살표 함수
const greeting = (yourName) => {return console.log('Hello' + yourName);}
//혹은 
const greeting = (yourName) => console.log('Hello' + yourName); //화살표함수에서는 함수의 body에 return문만 있는 경우 return과 {}를 생략할 수 있음.

//화살표 함수 결과 
greeting('Park');
HelloPark

//세가지 방식 모두 같은 값을 반환하는 것을 알 수 있다.

코드 학습법(Chapter)

Achievement Goals

 

모르는 것을 검색하는 방법

• 자바스크립트와 소프트웨어 개발에 대한 궁금한 것을 구글링으로 해결할 수 있다. => 문제의 요구사항에서 키워드를 추출해 'mdn 키워드'로 검색, 자연어 문장으로 검색한다 단 영어로, how to [궁금한 것] in javascript.
• 에러를 해결하기 위해 구글링할 수 있다. => 에러 메시지는 있는 그대로 검색한다.(Stack Overflow가 유용)

크롬 개발자 도구 사용법

• Chrome developer console의 기본적인 사용법을 이해할 수 있다.
• Chrome developer console에서 JavaScript의 입력/출력을 확인할 수 있다.
• 문법 에러를 최소화할 수 있다.
• 에러가 발생했을 때 발견할 수 있다.
• debugger 키워드를 활용해 코드를 단계적으로 실행시킬 수 있다.

코플릿(Pair)

코드스테이츠 시작 후 처음으로 Pair Programming을 통해 코플릿(퀴즈)을 했다. 일면식도 없는 사람과 화상으로 만나 같이 문제를 푼다는 것이란...(실로 오묘하다.) javascript로 기능 구현하는 것을 따라 하기만 했지 스스로 해본 적이 별로 없었기에 막히면 어떡하나라고 걱정도 했지만 첫 코플릿이어서 난이도는 낮았고 수월하게 풀 수 있었던 것 같다. Pair와 함께 고민하는 과정에서 같은 문제를 보는데 서로의 생각이 참 많이 다르구나라고 느낄 수 있었고 어떻게 나의 생각을 표현해야 잘 전달될까? 기분이 상하시지는 않을까?라는 고민도 했던것 같다. 내일 시간표를 보니 얼리모닝부터 코플릿을한다. 어떤 문제를 만날 수 있을까? 또 어떤 사고들을 접할 수 있을까?(절대로 미리 코플릿 문제를 보고 pair보다 우월한 위치에서 해결하지 않으리라, reference를 보지 않으리라.)     

조건문(Chapter)

Achievement Goals

 

조건문 기초, 퀴즈, 실습

• truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.
• 비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. => ===(같다), !==(다르다) 이 둘은 값과 타입 모두를 비교하여 엄격하게 true/false 판단을 내려준다. 예시는 아래 링크를 참고하자. == 일 때는 비참하다. ===일 때는 깔끔하다. 그냥 ===와 !==을 사용하겠다. 

---

 

JS Comparison Table

 

---

• if와 else if , else를 이해하고 무리 없이 활용할 수 있다. 

if(조건1){
	//조건1이 통과할 경우
}else if(조건2){
	//조건1이 통과하지 않고
	//조건2가 통과할 경우
}else{
	//모든 조건이 통과하지 않는 경우
}

• 논리 연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다.

//&&(AND 연산자)

//학생이면서, 여성일 때 통과
isStudent && isFemale;

//||(OR 연산자)

//학생이거나, 여성일 때 통과
isStudent || isFemale;

//!(NOT 연산자 : truthy, falsy여부를 반전시킴)

//학생이 아니면서, 여성일 때 통과
!isStudent && isFemale

---------------------------------------------------------------------------------------

//논리 연산자 NOT

!false // true
!(3>2) // false
!undefined // true
!'Hello' // false

//논리 연산자 OR

true || true //true
true || false //true
false || false //false

//논리 연산자 &&

true && true //true
true && false //false
false && false //false

---------------------------------------------------------------------------------------

//기억해야 할 6가지 falsey 값
//다음은 if문에서 false로 변환되므로, if 구문이 실행되지 않습니다.

if(false)
if(null)
if(undefined)
if(0)
if(NaN)
if('')

조건문 문제로 에러 메시지 알아보기

• 코플릿 에러 메세지 읽는 법을 배우고, 이를 기반으로 작성한 코드를 수정하는 방법을 배웁니다.

조건문 문제로 배우는 알고리즘

• 코플릿 조건문 13번 문제 해결 방법을 익히면서, 문제를 체계적으로 해결하는 방법을 배운다.
• 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다.