[Week 1] 주간 학습 정리

Yalstrax·2021년 5월 19일

weekly review

Study

목록 보기

19/25

Overview

본격적인 학습에 들어가기 전에 개괄적인 Orientation 수행
Javascript 기본

1. Pair programming

프로그래밍에 대해 잘 몰랐을 때, 프로그래밍을 업으로 삼고 있는 사람들, '개발자'의 제 인식은 그저 귀에 이어폰을 꽂고 오랜 시간 앉아서 모니터 속 검고 네모난 무언가 와 대화하는 직업으로 알고있었습니다.

눈이 금방 피로해져서 저도 어두운 테마로 바꿨습니다... (정말 밈들이 어마어마하게 많다...)

그러나, 아무리 세상이 진보했다한들, 결국 모든 것은 사람을 거치게 됩니다. 제가 작성한 코드를 상대방에게 설명도 해야하고, 설득도 해야하고, 모르는 것을 뭉뚱그려 질문하지 않고 명확하게 질문하는 것, 그리고 질문을 받았을 때도 알기 쉽게 설명도 해야합니다. 아무리 전자두뇌라도 소통이 안된다면 혼자 일하는 게 최선입니다. 하지만 어떤 집단에 소속된 개발자는 단독으로 일할 수 없기 때문에! 커뮤니케이션은 최우선적으로 갖춰야할 역량입니다.

첫 주부터 페어 프로그래밍을 수행했습니다. 앞으로도 다양한 사람들과 페어 프로그래밍을 수행하며 커뮤니케이션 역량을 키워나갈 것입니다!🙏

2. Pseudo code

수도 코드라는 개념을 처음 들었을 때, '나라들의 수도가 다 코드로 지정이 되어있는 건가?' 라며 수도 코드가 뭔가 검색을 했습니다.

수도 코드 : 의사코드(수도코드, pseudocode)는 프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위한 언어이다. - 위키백과

코드를 작성하기 전에, 문제 해결을 위한 알고리즘을 우리들의 언어로 표현하는 것이라고 알게 되었고, 서울, 도쿄, 베를린의 코드라고 생각했던 제게 잠깐의 부끄러움이 찾아왔습니다.
생각해보니까, 수도 코드라는 단어만 몰랐지, 일상 생활에서 자주 쓰는 개념이더라구요!

// 네가 오후 4시에 온다면, 
// 나는 3시부터 
// 행복해지기 시작할거야.  - ( feat. 어린 왕자 )

네... 적절한 예시가 잘 안떠오르네요...
시대와 국가를 아우르는 고전 생텍쥐페리의 어린왕자의 명언을 프로그래밍 한다면, 위처럼 유명한 명언이 수도 코드가 될 수도 있을 것 같습니다.
이를 프로그래밍 언어로 작성한다면

let lePetitPrince = `어린왕자 : ${time}시에 갈게`; // 어린왕자님의 대사입니다.
let fox = `사막여우 : 난 ${time-1}시부터 행복해지기 시작할거야.` // 사막여우님의 대사입니다.

for(let time = 0; time <= 24; time++) { // 하루 24시간 중에서
  if ( time === 4 ) { // 만약 4시에 온다면..?
    console.log(lePetitPrince); // 어린왕자님 대사 큐!
    console.log(fox); // 사막여우님 대사 큐!
  }
}

네... 아직 너무 부족하지만 위처럼 만들어 볼 수 있었습니다.
저 코드를 돌리면
어린왕자 : 4시에 갈게
사막여우 : 난 3시부터 행복해지기 시작할거야.
이런 결과가 나옵니다. 😂

뭔가 딴 길로 많이 샌 것 같은데, 아무튼!
수도 코드를 프로그래밍에 적극적으로 사용(머리로만 생각하는 것이 아닌, 직접 작성) 한다면, 코드를 짜는 데 있어서 오류를 덜 범할 수 있다는 것을 알게 됐습니다.
문제의 작은 부분부터 계획과 순서를 작성하는 연습! 습관을 들여야 큰 규모의 코드를 작성할 때 수월하게 수행할 수 있다는 것을 배웠습니다.

3. Javascript

3.1 변수

프로그래밍을 한다는 것은, 데이터 처리 방식을 컴퓨터에 명령하는 것입니다.
이 데이터를 편리하게 저장하고 꺼내 쓰기 위해, 변수를 사용합니다.

예를 들어, 기본적인 덧셈이나 뺄셈을 출력하는 코드를 작성한다면,

console.log(5*10)

간단하게 키보드에 있는 덧셈 연산자를 활용할 수 있습니다.
그러나, 1회 이상 같은 처리 방식이 필요하다면 변수를 선언하는 것이 편리할 것입니다.

let num = 5;
console.log(num*10);

변수를 선언하여 그 변수에 값을 할당하여 데이터를 처리할 수 있습니다.

각각의 PC엔 메모리라는 데이터 보관함이 있습니다. 이 보관함에 선언한 변수를 이름으로 하여, 필요할 때 보관된 데이터를 호출해 재사용할 수 있습니다.

Javascript의 변수 이름엔 공백을 쓸 수 없고, 이름이 길어질 경우, 단어의 첫 글자를 대문자로 표기합니다.

let myNameIsYunsu = '@shitaikoto';

이와 같은 변수 이름 양식이 낙타의 등 모양처럼 생겼다 하여, Camel Case로 부릅니다.

변수를 할당한다. 는 뜻으로 위와 같이 쓰인 = 기호는 일반적으로 우리가 알고있는 equal, 같다는 의미가 아니며, 변수에 값을 할당하는 할당연산자 입니다. 같다.는 의미로 쓰이는 기호는 ===로 표기합니다.

3.2 타입

Javascript는 여러가지 타입, 자료형이 있습니다.

let num = 1234; // num이라는 변수에 숫자 1234를 할당합니다.
let str = '1234'; // str이라는 변수에 문자열 1234를 할당합니다.
let undef; // undef이라는 변수를 선언합니다.

3개의 변수가 선언되어 있습니다.
num은 숫자가 할당되어 있으므로, 숫자 타입, str은 ' ' 로 묶은 1234가 할당되어, 문자열 타입입니다.
undef는 선언만 되어있고, 값이 할당되어 있지 않습니다.

이 세가지 변수들의 타입을 typeof를 활용해 어떤 타입인지 알 수 있습니다.

typeof(num); // 숫자 타입이므로, number를 출력
typeof(str); // 문자열 타입이므로, string을 출력
typeof(undef); // 할당된 값이 없어, undefined가 출력

세가지 타입 이외에, 참과 거짓을 구분하는 Boolean타입이 있습니다.
Boolean()명령어로 변수의 참, 거짓을 구분할 수 있습니다.

Boolean(2===3); // 2와 3이 같지 않으므로, false가 출력됩니다.
Boolean(num); // num이라는 변수에 숫자 1234가 할당되어 있으므로, true가 출력됩니다.
Boolean(str); // str변수 또한 문자열 1234가 할당되어 있어 true입니다.
Boolean(undef); // 할당된 값이 없는 undefined 타입은 거짓으로 분류되어 false가 출력됩니다.

어떤 변수에 값이 존재한다면, 기본적으로 true가 출력되지만, false가 출력되는 몇가지 경우가 있습니다.

false	undefined	null	0	NaN(Not a Number)	빈 문자열 ' '

다른 값들은 true로 출력됩니다.

3.3 함수

함수는 프로그래밍에 있어서, 특정 데이터 처리 방식을 하나의 기능으로 지정하여 그 기능을 수행하는 하나의 단위입니다. 어떤 목적을 수행할 기능을 정의하기 위해 함수를 선언하고, 정의된 기능을 수행하기 위해 함수를 호출합니다.
함수는 keyword , name , parameter , body 로 구분됩니다.

예를 들어, 사각형의 넓이를 구해야 하는데, 일일이 밑변과 높이를 구하는 연산을 수행한다면 생산성이 떨어지게 됩니다.

let base, height;
base = 3;
height = 3;
console.log(3*3);

위처럼, 값이 바뀔 때마다 변수를 재할당하는 번거로움이 있습니다.
이를 함수라는 기능을 선언한다면 생산성을 향상할 수 있습니다.

function getRectangleArea(base,height) {
  let rectangleArea = base * height;
  return rectangleArea
}
console.log(getRectangleArea(3,3))

여기서, keyword는 function입니다. name은 getRectangleArea입니다. parameter는 base와 height입니다. body는 { } 내부의 코드입니다.

이 함수를 선언한다면, 사각형의 넓이를 구할 때, console.log(getRectangleArea(밑변,높이))만 입력한다면 결괏값을 알 수 있습니다.

parameter는 매개변수라 하여, 함수를 선언할 때 지정한 변수를 의미합니다. 반대로, 함수를 호출할 때, 즉 console.log(getRectangleArea(밑변,높이)) 에서의 밑변과 높이는 argument 또는 전달인자 입니다.

매개변수와 전달인자의 차이점은, 매개변수는 함수를 선언할 때 지정한 변수로, 호출할 때 입력한 값에 따라 바뀔 수 있는 변수입니다.
위 함수에서의 매개변수는 base와 height가 되겠습니다.

전달인자는, 함수를 호출해 기능을 구현하도록 값을 전달해주는 인자입니다. 즉, 함수를 호출할 때 매개변수에 할당되는 값입니다.

Javascript에서 함수를 선언하는 방법은 위와 같은 방법인 함수 선언식이 있습니다. 그리고, 함수 표현식과 화살표 함수로도 선언할 수 있습니다. 함수 표현식과 화살표 함수는 더 공부해서 작성하겠습니다.

3.4 조건문

논리적인 데이터 처리를 위해, 우리는 조건문을 사용할 수 있습니다.
조건문은 정의한 조건이 참인지, 거짓인지 판별하는 기준을 만듦으로써, 그 조건에 해당한다면 작업을 수행하고, 그렇지 않은 경우는 버리는 것을 의미합니다.

앞서 말씀드린 Boolean타입을 적극 사용할 수 있습니다.

또한, 조건을 정의하기 위해 비교연산자 와 논리연산자를 사용할 수 있습니다.
비교연산자란, 서로 다른 변수의 값이 같은지, 다른지, 또는 대소구분 등을 수행하는 연산자로, === (같다) , !=== (다르다) , >= (이상 또는 이하) , > (초과 또는 미만) 등이 있습니다.

논리연산자란, 참, 거짓 또는 두 조건이 모두 해당될 때, 두 조건 중 하나만 해당될 때 등을 수행해 복잡한 조건을 간결하게 작성할 수 있는 연산자입니다. && (양 옆의 조건이 모두 참) 인 And 연산자, || (양 옆의 조건 중 하나라도 참일 때) 인 Or 연산자 등이 있습니다.

20세 미만은 주류를 구입할 수 없다.라는 의미를 가진 조건문을 예시로 작성해보겠습니다.

let age, pass, nonPass;

if (age >= 20 && age <= 80) { // 나이가 20세 이상 그리고 80세 이하라면
  pass = '주류 구입 가능'
  return pass // pass를 출력한다.
}
else if (age > 80 ) { // 80세를 초과한다면
  pass = ' 건강 챙기세요 어르신 ㅠㅠ '
  return pass // 건강 챙깁시다 ㅠㅠ
}
else { // 20세 이상, 80세 이하, 그리고 80세를 초과하는 경우 이외의 모든 경우는 20세 미만 밖에 없으므로
  nonPass = ' 가서 나이 더 먹고와! '
  return nonPass // 주류 판매 금지!
}

간단하게 조건문을 작성할 수 있습니다. 조건문의 조건을 정의할 땐, 일반적인 생각이 아닌 논리적 사고를 요구합니다.

컴퓨터는 우리의 언어로 말하면 이해하지 못하기 때문에, 프로그래밍 절차 하나하나, 세세한 조건을 놓치지 않고 정의하기 위해 수도 코드를 적극 활용해야한다는 것을 배웠습니다.

3.5 반복문

대학교에서 프로그래밍 관련 수업을 들었을 때, 가장 어려워했던 부분이 반복문이었습니다. 반복문에 쓰이는 코드 하나하나가 우리가 일상적으로 말하는 언어와 너무 달랐기 때문입니다.

반복문은 같거나 비슷한 코드를 여러번 실행시켜야 할 경우에 씁니다.
for 구문과, while 구문을 사용하며, 두 구문의 차이점은 for 구문은 정해진 횟수를 반복할 때 쓸 때 보다 간단히 사용할 수 있고, while 구문은 정해진 횟수가 없이 반복할 때 쓰기 용이합니다.

예를 들면, 1부터 10까지의 수를 더하는 연산을 수행하기 위해선 9번의 덧셈을 반복해야 합니다. 이 경우, for 구문을 사용하는 것이 좋습니다.

let sum = 0; // sum 변수를 할당하고, 초기값으로 0을 할당
for ( i = 1; i <= 10; i++; ) { 
  // (1) i라는 변수를 선언, 초기값을 1로 할당
  // (2) 변수 i는 10 이하의 수 라는 조건 할당
  // (3) 반복문을 실행할 때마다, 변수 i의 값을 1씩 증가
  // 결과적으로, 변수 i의 값이 10을 초과하면, 반복문이 종료됨
  sum = sum + i; 
  // 변수 sum의 초기값 0 에 i의 초기값 1을 더한 값이 sum에 재할당됨
  // 반복을 수행하며 sum의 값을 재할당
}