[개발 공부 9일차] 알고리즘과 Object.freeze().. 그리고 나

어제 자정까지 해서 순공시간을 12시간 50분 이상 채우고 잠에 들었다. 평일엔 거의 계속 그러고 있다. 근 1년간 정말 열심히 운동한 보람을 여기서 특히 더 느낀다. 잠만 잘 자면 졸지 않고 순수하게 10시간 이상은 충분히 집중할 수 있고 별로 힘들지도 않아서 넘 감사하다. 그래서 말인데... 지금 숨가삐 듣고 있는 강의 얼른 듣고 다음 주부터는 주말에 운동도 병행하며 공부 진행하고 싶다. 오늘까지 진행한 것으로 봐선 일단 이번 주말은 운동하기 어렵다,,,, 흐규귝
 

 
 
평일 내내 5~6시간 자니까 아침마다 내 상태가 위 사진과 다를 바 없다......
 

 
심지어 알람 울려서 일어나면 위 고양이랑 비슷하다... 사진 다시 봐도 웃기네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..ㅋㅋㅋ.. 휴.. 그만 딴 얘기하고 공부 내용 정리해야지.. 정신 차려
 
 

< 목차  >

1. 알고리즘 강의와 코드카타

   ㆍ let
   ㆍ const
   ㆍ조건문
   ㆍ반복문
   ㆍ함수(function)
   ㆍObject.freeze()
 

2. JavaScript base 쌓기

   ㆍ 객체
   ㆍ 프로퍼티(property)
   ㆍ 인수(Argument)
   ㆍ 인자(Parameter)
   ㆍ 메서드(method)
   ㆍ 삼항 연산자
   ㆍ Map()
   ㆍ 템플릿 리터럴(` `)
   ㆍ 실행 컨텍스트(Execution Context)
   ㆍ this
           (1) 단독으로 쓸 경우
           (2) 함수 안에서 쓸 경우
 

3. 금일 소감 및 내일 해야 할 일

 
 

1. 알고리즘 강의와 코드카타

어제부터 진행된 코드카타가 아무래도 앞으로 계속 진행되는 듯하다. 코드카타를 원활히 할 수 있도록 하는, 금일 실시간으로 진행된 알고리즘 강의에선 많은 수강생분이 어렵다고 하셔서 개념 위주의 강의가 진행되었다. 강의 내용 요약은 다음과 같다. 중요한 것만 썼다.
 
 

변수 & 상수?

: 데이터 저장하기 위한 공간

(1) let

: 값이 변할 수 있는 '변수'

 

(2) const

: 한 번 할당되면 값이 변하지 않는 '상수'
(값의 변화 유무에 차이가 있다)
 

1) 조건문: if, else if, else
2) 반복문: for, while(종료조건), do-while(기미상궁. 일단 한 번 실행해줌)
3) 함수: 코드를 그룹화 & 재사용 가능하게 해줌
  3-1) function 사용해 선언
  3-2) 인풋 받으면 아웃풋 리턴 or 동작 수행


위 내용은 정말 기초 지식이고 정리해두면 좋을 듯하여 마침 강의에서 말씀해 주시길래 짧게 내 식으로 정리한 것이다. 그리고 Object.freeze를 알아보라고 하셔서 알아봤다. 내용은 아래와 같다.
 

Object.freeze()

: 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다. 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. freeze()는 전달된 동일한 객체를 반환합니다.

- mdn web docs 中

 
라고 나왔는데.. 쉽게 말하면 Object.freeze는 값을 한 번 지정하면 더 이상 바꿀 수 없다는 얘기인 듯하다. 즉, 위에서 내가 정리했던 <한 번 할당되면 값이 변하지 않는 '상수'>랑 비슷한 맥락으로 보인다. 여기서 나온 '객체'란 단어 정의를 비롯한 개념들은 아래에서 더 다루도록 하겠다. 나도 헷갈려서 정리해놨다.
 
 
▼  예문

const obj = {
  prop: 42,
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// Expected output: 42

 
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

 

 
 

2. JavaScript base 쌓기

자바스크립트 문법 강의를 듣다가 이해가 점점 수월해지지 않길래 이유를 생각했다. 일단 내용이 처음 보는 개념이니 익숙지 않아 어렵게 느껴지는 게 맞긴 한데 기초적인 용어가 부족한 것도 원인이라고 생각되어, 옆에 수기 노트를 두고 강의 듣는 도중에 그때그때 모르는 용어나 내용을 노트에 짤막하게 적어놨다. 청강 도중에 모르는 용어를 알아보면 흐름이 끊기기 때문에 적어놨다가 지금처럼 TIL 작성 시에 알아보는 게 낫다 싶었다.
 
모르는 용어와 의미, 이해 안 된 내용을 쭉 적어보면 다음과 같다.
 

객체

: 다양한 데이터를 담을 수 있는 저장소 ({ key : value }로 프로퍼티 구성)

자바스크립트엔 여덟 가지 자료형이 있습니다. 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다. 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있죠. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 합니다.

객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용됩니다. 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부릅니다.

서랍장을 상상하면 객체를 이해하기 쉽습니다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하시면 됩니다. 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가나 삭제도 마찬가지입니다.

- javascript.info 中

 
 
 

프로퍼티(property)

: 프로퍼티란 '속성'이란 뜻으로, 자바스크립트에서 객체 내부의 속성을 의미
위에서 설명된 <객체>는 프로퍼티로 구성된다. 프로퍼티는 "key(키)" : "value(값)" 의 형식으로 객체 안의 콤마(, 쉼표)로 구분되어 할당된다.

Key는 속성명! 문자열만 가능하며, 문자열이지만 띄어쓰기가 없을 경우엔 따옴표가 없어도 된다.
Value는 속성값! 어떤 값이든지(문자열, 숫자, 객체, 함수 등 아무거나) 상관없다.
 
 

인수(Argument)

: 함수를 호출할 때 건네주는 변수
 
 

인자(Parameter)

: 함수에서 정의되어 함수 내부에서 사용되는 변수
'매개변수', '파라미터'라는 이름으로도 많이 불린다.
 
 

메서드(method)

: 속성값
객체에 함수를 정의할 경우, 속성값이라 하지않고 메서드(Method)라고 부른다.
 
 

삼항 연산자

: '참'과 '거짓'을 표현할 수 있는 연산자
조건이 참일 경우와 거짓일 경우 표현할 표현식 총 2가지를 배치하여 쓰는 연산자다.

조건(삼항) 연산자는 JavaScript에서 3개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

- mdn web docs 中

 
 

▼  예문

function getFee(isMember) {
  return isMember ? '$2.00' : '$10.00';
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

 
 

Map()

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
 
 

▼  예문

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 
 

템플릿 리터럴(` `)

: 자바스크립트에서 문자열을 입력하는 방식
템플릿 리터럴은 이중 따옴표 or 작은 따옴표 대신 백틱(` `)을 사용한다. 또, $와 중괄호를 이용해서 표현식을 만들 수도 있다! ⇒ ( $ {expression} ) 로 표기
 
 

▼  예문 (배운 내용에서 발췌)

const testValue = "안녕하세요!";
console.log(`Hello World! ${testValue}`);
console.log(`
    Hello World!
        My name is JS!
        Please take care of me.
`)

 
 

실행 컨텍스트(Execution Context)?  환경 정보?

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 '환경'과 '순서'를 보장할 수 있다. FILO(First In, Last Out) 의 구조이기에 순서를 보장, 콜스택 내부에 쌓인 실행 컨텍스트의 정보를 통해 환경을 보장할 수 있는 것
 
실행 컨텍스트 내부엔 variable environment, lexical environment, this binding가 있다.
 
'실행 컨텍스트'는 주말이나 다음 월요일까지 제출해야 하는 시급한 개인 프로젝트가 끝나면 강의 내용 기반으로 더 자세히 다뤄야겠다.
 
 

this

: 함수를 호출한 방법에 의해 결정되는 자기 참조 변수
자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 한다. 선언이 아닌 호출에 따라 달라진다. this는 정말 여러 경우에 사용하고 또 그에 따라 결과가 달라진다. 오늘은 시간 관계상 2가지만 보도록 하겠다.
 

(1) 단독으로 쓸 경우

묻지도 따지지도 않고 this를 호출하는 경우엔 global object를 가리킨다. 브라우저에서 호출하는 경우 [object Window]가 된다. 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지다.

 

(2) 함수 안에서 쓸 경우

함수의 주인에게 binding된다. 함수의 주인은 window 객체다.

 
 
 

3. 금일 소감 및 내일 해야 할 일

현재, 일단 공부할 내용이 정말 많다.
지금 함께 프로그램 수강하는 동기들 몇 분, 팀원이었던 분들, 개발자 지인들과 개발 정보 및 문법 정보를 공유하고 있다. 지금 수강하고 있는 강의 외에도 인터넷상에 있는 관련 정보가 매우 많고, 강의 내용을 이해하기 위해서라도 그런 공부와 구글링을 습관화해야 하는 듯하다. 하지만 꽤나 난해했던 개념을 구글링 몇 번으로 명쾌하게 알게 되면 그것만큼 또 기분 좋은 게 없다 ㅎㅎ
 
이번 주말에는 개인 프로젝트를 빡세게 집중해야 한다.
내일이 벌써 금요일이니.. 최대한 4~5주차 완강에 힘써야겠다. 아마 내 예상으로는 5주차 초중반까지 진도 나갈 수 있겠다 싶은데 열심히 들어봐야지.. 집중 집중 집중..!