2020-02-28

Title

2020-02-28

0228

토익스피킹

"졸업 요건" + "취업"

두 가지 목적을 위해 토익스피킹 시험을 준비했다.

졸업 요건은 Lv.5, 취업에는 최소 Lv.6를 요구하는 회사가 많았다.

목표는 내심 Lv.7을 기대하면서 Lv.6로 잡았다. (지금 생각해보면 참 안일했던 목표설정)

독학 (유튜브)
인터넷 강의
학원

3가지 선택지가 있었는데, 빠른 시간 안에 점수를 얻고 싶었기 때문에 + 토익스피킹시험의 성격을 전혀 몰랐기 때문에, 그냥 학원을 다니기로 했다.

안일한 목표와 수동적으로 학원에 의존할 생각으로 시작해서 그런지 학원 수업과 스터디에서는 열심히 공부하고, 따로 시간을 내서 공부하지는 않게 되었다. 지금 생각해보니 당연한 결과였다.

이렇게 오전 교내 근로와 오후 학원을 병행하니 ( 집 -> 학교 -> 강남 -> 집 의 살인적인 통학 스케쥴..) 2주가 순식간에 지나갔고, 열심히 공부하지 않은 탓에 당장 시험볼 자신이 없어 1주간 추가로 독학을 했다.

토익스피킹은 스피킹 시험이기 때문에 직접 소리내어서 공부해야했고, 그래서 집에서공부를 했다. 그러다보니 문제 오디오 파일도 직접 재생해야하고, 직접 시간을 재야하고, 녹음기도 키는 등 이것저것 신경쓰면서 공부해야 했다.

그런데 시험장에 가니 스피킹하기 좋은(?) 환경에서 어느 정도의 긴장감과 함께 시험을 치루니 오히려 모의고사 풀 때보다 집중되고 잘 본 느낌이었다.

반성

결과는 Lv.6. 아무튼 필요한 요구조건은 만족시켰지만 나름 Lv.7을 바래서 그런지 조금 실망스러웠다. 하지만 결국 안일하게 새운 목표에 당연한 결과였던 것 같고, 시험을 잘 봐야하는 이유 자체가 불분명했던 것 같다.

아무튼 여기까지 TIL을 3주간 게을리한 변명이다.

JavaScript

드디어 HTML, CSS를 끝내고 JavaScript로 넘어왔다. Markup Language만 하다가 오랜만에 프로그래밍 언어를 공부하니 오히려 재미있었다. HTML, CSS는 속성 역할을 숙지하고, 사용법을 익히는 수준이라 흥미가 떨어졌고, JS를 다룰 줄 알아야 의미있는 프로젝트를 시작해볼 수 있겠다 싶어 JS를 빨리 공부하려고 한다.

기초적인 문법

프론트엔드 웹개발 패키지 강좌를 통해 기초적인 JS 문법을 배웠다. 일반적인 프로그래밍 언어와 유사한 부분은 지나가고, 유의해야겠다고 발견한 부분만 정리한다.

MISC

CodeSandbox : javascript를 학습하기 좋은 ide
쌍따옴표 " 와 따옴표 ' 는 둘 중 아무거나 가능. (CodeSandbox에서는 .prettierrc 에서 설정을 통해 cmd + s 할 때 따옴표와 쌍따옴표 중 선택한것으로 변환시켜준다.)
; 는 생략 가능. 하지만 가독성을 위해 추가하는 것 권장.

변수와 상수

JS에서는 변수, 상수를 선언할 때 type 별로 선언하지 않고 let , const , 그리고 var 를 사용할 수 있다.

let 은 변수, 값을 바꿀 수 있다. 같은 이름의 변수를 또 다시 선언할 수 없다.
const 는 상수, 한번 설정하면 값을 바꿀 수 없다. immutable
var 역시 변수. 같은 이름의 변수를 또 다시 선언할 수 있다.

var 는 현재 권장되지 않는 변수.IE9, IE10 등의 구형 브라우저에서는 let , const 가 없어서 사용 불가하다.하지만 Babel 이라는 도구를 통해 JS 코드가 구형 브라우저에서 돌아가도록 호환해줄 수 있기 때문에 var 를 완전히 사용하지 않고 개발하는것이 가능하다.

이 외에도 var , let , const 는 scope 에서 차이가 있다.

var 는 function-scoped
let , const 는 block-scoped

이는 hoisting , IIFE 와 관계가 있는데, 정리된 링크가 있어서 링크로 첨부 나중에 다시 보고 공부하자.

🔗 var, let, const 차이점은?

Null, undefined

null : 없는 것.

undefined : 값이 아직 설정되지 않음

javascript

var variable;
console.log(variable); // undefined

var variable;
console.log(variable); // undefined

비교 연산자

다른 PL과 달리 == , === 두 가지의 일치연산자가 있는데,

== : 타입을 검사하지 않음 (숫자 2와 문자 '2'가 동일)

=== : 타입을 검사함.

함수

함수는 오늘 공부한 내용 중 가장 중요한 내용이다. 다른 언어에서 함수를 다뤄본 적이 있지만, 함수의 정의를 다시 살펴본다.

일반적으로, 함수는 함수 외부 (또는 재귀(recursion)의 경우엔 내부) 코드에 의해호출될 수 있는 "하위프로그램"입니다. 프로그램 그 자체처럼, 함수는 함수 몸통 (function body)이라고 하는 일련의 구문(statement)으로 구성됩니다. 값은 함수에전달될 수 있고 함수는 값을 반환합니다. - MDN web docs - 함수

JavaScript에서의 함수의 특징은 이렇다고 한다.

JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급 (first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 Function 객체입니다. - MDN web docs - 함수

함수는 반환 값을 지정하는 return 문이 있어야 하는데, return 문이 없다면 함수는 기본값을 반환한다. 기본 반환값은 undefined 이다.

함수 정의

함수를 정의하는 여러 방법이 있는데.

함수 선언
함수 표현식(expression)
Function 생성자

먼저 함수 선언은 이렇다.

javascript

function name([param[, param[, ... param]]]) {
   statements
}

function name([param[, param[, ... param]]]) {
   statements
}

함수를 선언한 이후에 이름으로 호출해야 하기 때문에 name 이 필수적이고, param 은 함수에 전달되는 인수의 이름으로 255개까지 가능하다. statements 는 함수의 몸통을 구성한다.

다음으로 함수 표현식이다.

함수 표현식은 함수 선언과 비슷하고 구문이 같은데, 차이점은 변수에 함수를 할당한다는 것이다.

javascript

var myFunction = function [name]([param[, param[, ... param]]]) {
   statements
}

var myFunction = function [name]([param[, param[, ... param]]]) {
   statements
}

이 때는 name 을 생략하고, 익명(anonymous) 함수로 사용할 수 있고, name 을 넣어서 named 로 사용할 수도 있다.

익명 함수로 사용할 때 변수명(위에선 myFunction )을 함수의 이름으로 생각하면 안되는데, 함수의 참조값이 myFunction 이라는 변수에 저장된 것이다.

어디까지나 '익명' 함수이고, 함수 변수인 myFunction 을 통해 호출 하는 것이다.

또한 named 함수의 경우에 함수 변수인 myFunction 으로 외부에서 호출할 수 있지만, 함수 이름 name 으로는 함수 내부에서만 호출할 수 있고 외부에서는 호출할 수없다.

Function 생성자는 잘 사용되지 않고 권장되지도 않는 방식인데, 굳이 알아보자면,

javascript

var myFunction = new Function(arg1, arg2, ...argN, functionBody);

var myFunction = new Function(arg1, arg2, ...argN, functionBody);

javascript

var myFunction = new Function('a', 'b', 'console.log(a+b)');
myFunction(1, 3); // 4

var myFunction = new Function('a', 'b', 'console.log(a+b)');
myFunction(1, 3); // 4

이렇게 사용한다고 한다.

함수 선언과 함수 표현식의 중요한 차이는 호이스팅(hoisting)이다. 한국어로는 '끌어올림'을 뜻한다.

인터프린터가 자바스크립트 코드를 해석함에 있어서 Global 영역의 선언된 코드블럭을 최상의 Scope로 끌어올리는 것을 호이스팅이라 한다. - Function Declarations(함수선언) vs Function Expressions(함수표현)에서

단순하게 생각해서 선언문은 항상 자바스크립트 엔진 구동시 최우선적으로 해석된다. 하지만 할당은 hoisting이 되지 않는다.

javascript

// 예제 1 : 함수선언에서의 호이스팅
foo();
function foo() {
    console.log('hello');
};
> hello

// 예제 2 : 함수표현에서의 호이스팅
bar();
var bar = function() {
    console.log('hello');
};
> TypeError: bar is not a function

// 예제 1 : 함수선언에서의 호이스팅
foo();
function foo() {
    console.log('hello');
};
> hello

// 예제 2 : 함수표현에서의 호이스팅
bar();
var bar = function() {
    console.log('hello');
};
> TypeError: bar is not a function

예제 출처 : Function Declarations(함수선언) vs Function Expressions(함수표현)

예제1처럼 함수 선언의 경우는 선언문이 hoisting 되어 최상의 scope로 끌어올려졌기때문에 함수 이름인 foo(); 로 호출이 가능하다.

하지만 예제 2의 경우는 함수 표현으로 되어있고, 따라서 hoisting되는 부분은 선언부분인 var bar; 뿐이다. 따라서 bar(); 로 호출했을 때는 bar 는 단지 변수일뿐이라서 TypeError: bar is not a function 의 에러가 발생한다.

이외에 IIFE , Closure 등의 개념이 연관된 것까지 확인하였는데, 이는 다음에 알아보는 것으로 마친다.