[프론트엔드 개발 스쿨 14주차] 위클리테스트

 

위클리테스트를 슬랙으로 공지해주신다.

1. 패스트캠퍼스의 위클리테스트

 패스트캠퍼스에서는 위클리테스트라는것이 있다. 배운내용을 가지고 강사님이 직접 출제하시는 문제들로 이루어진 문제를 풀거나, 코딩을 해서 제출한다. 객관식, 주관식, 서술형 등 다양한 시험의 종류를 가지고 있기도하다. 

 

 이 위클리테스트가 어느정도 영향력을 미치는지는 사실 잘 모르겠으나, 너무 못본다면 수업을 잘 못따라가는 걸로 간주하고, 상담을 진행하게되는것으로 알고있다(뇌피셜임...) 위클리테스트라고 해서 또한 매주 보는건 사실 아니다. 짧으면 1주일에 한번 씩 보기도 했지만, 2주나 3주에 1번정도 보는 편이었던것 같다. 

 

 코딩을 배우는 만큼 코딩문제가 나오기도한다. 즉석에서 코딩을 하라니 당황할 수 있지만, 그것도 어찌보면 연습이라고 생각한다. 보통 위클리테스트는 1시간 정도로 진행되고 일찍끝나는 사람은 일찍 끝나는것이고, 늦게 끝나는 사람은 그냥 끝까지 하면된다.

 

2. 발표연습으로 대체한 위클리테스트

 

이번에 진행한 위클리테스트는 좀 특이했다. 위에서 소개한 기존방식과 다르게 발표연습을 위한 위클리테스트였다.

진행방식은 20개의 키워드 중에 한가지가 랜덤으로 나오고 그것을 설명하는것이었다. 어찌보면 20개중에 어떤것이 나올지 모르기때문에 굉장히 많은 공부시간이 필요했다. 그리고 동시에 개념정리도 같이 되었던것 같다. 

 

발표시간은 한사람당 3분이었다. 한국인 특성상 앞에나가서 발표하는것을 굉장히 어색해하기때문에(물론 나도 굉장히 어색...) 떨리고 긴장되었다. 하지만 이런것도 연습이고 나중에 할지도 모른다는 생각때문에 잘해보려한것같다.

 

아래 내용은 내가 발표를 하기위해서 정리한 내용이다. 20가지 키워드와 발표대본(?)인것같다. 

 

Data type

자바스크립트의 모든 값은 데이터 타입으로 이루어져 있습니다. 그럼 자바스크립트는 어떠한 데이터 타입을 제공할까요? 크게 원시타입과 오브젝트 타입 2가지로 구성되어있고, 그것은 그 키워드를 발표해주시는 분이 자세히 설명해주실거라고 생각합니다. 저는 이러한 데이터타입이 필요한 이유에 대해서 설명드리곘습니다. 데이터타입이 왜 필요한 것일까요? 그 이유는 메모리와 관련이 있습니다. 하나의 예를들어 설명해보죠. 우리가 처음 만났다고 칩시다. 유진혁이라는 사람을 알게되고 그것을 내 기억속에 저장 했다고 칩시다. 그럼 나중에 최성진이라는 사람을 만나서 유진혁를 부를 때 내 기억속에서 최성진이라는 이름을 가져와야 이름을 부를 수 있겠죠? 컴퓨터도 같습니다 메모리에 변수명 함수명 등 다양한 이름을 기억해놓았다가 그것을 쓸때가 오면 사용하는 거죠. 여기서 사람과 다른 점이 있다면, 그 최성진 이라는 이름 3글자를 저장하기위해서 컴퓨터는 유진혁이라는 3글자가 들어갈 메모리공간의 크기를 미리 결정한다는 점이 다릅니다. 또한, 컴퓨터는 0과 1 밖에 이해못하기 때문에 저장되어있는 똑같은 이진수를 타입의 종류에 따라서 다르게 해석할 수 있습니다. 만약 유진혁이라는 이름을 저장했는데 불러올 때 타입을 다르게한다면 이상한 숫자로도 나올 수 있다는 얘기입니다. 정리하자면 데이터타입은 메모리공간의 크기를 결정하기 위해서 그리고 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해서 사용합니다.

 

Literal

리터럴은 쉽게 얘기하면 사람이 이해할 수 있는 표기법으로 값의 생성을 자바스크립트 엔진한테 명령하는 것입니다. 자바스크립트 엔진이 그 사람이 이해할 수 있는 표기법으로 만들어진 것을 해석해서 값으로 평가되게끔 만드는 것이죠. 리터럴은 사실 예를들면 편합니다. 300, 2.5 는 숫자 리터럴이라고 부르구요. 'hello' 는 문자 리터럴 , [1,2,3]이런식으로 쓰면 배열 리터럴이라고 부릅니다. { id:4, content:'html'} 이것은 뭐라고 부를까요? 맞습니다. 객체 리터럴이라고 부릅니다. 참 쉽죠잉? 그럼 값과 리터럴의 관계는 어떠한지 알아보겠습니다. 2가지 예제를 설명드리겠습니다. 첫 번째 var x = 100 가 있습니다. 여기서 100은 뭘까요? 네 숫자 리터럴입니다. 여기서 리터럴은 값이 되는것이죠. 여기서 값은 더 이상 평가될 수 있는 하나의 표현식입니다. 표현식은 뒤에서 다른분께서 잘해주실거라 생각합니다. 여튼 리터럴이 값이 될 수 있다는 사실에 주목을 하고 두 번째 예제를 보겠습니다. var x = 50 + 50 여기서는 숫자리터럴이 2개가 있급니다. 50 과 50 이 2가지가 숫자리터럴인 것이죠. 하지만 여기서 값은 뭘까요? 50+50이 더해져서 생긴 100이 값이 됩니다. 자 아까 리터럴이 값이 될 수 있다고 했는데 여기서는 어찌된걸까요? 여기서 알 수 있듯이 값이 리터럴의 상위개념이기 때문에 발생하는 것입니다. 모든 리터럴은 그 자체로 값이 될 수 있지만, 그 반대인 값이 리터럴인 것은 아닙니다.

 

Expression

값은 다양한 방법으로 생성이 될 수 있는데 이 다양한 방법을 expression 표현식이라고 합니다. 보통 표현식은 해석되어서 하나의 값을 만드는데요. 리터럴, 변수명, 함수명, 연산자, 함수 호출 등의 조합으로 하나의 값을 만들게 됩니다.

하나 주목할만한 문장을 소개해드리면, 자바스크립트의 모든 코드는 문 또는 표현식이란 말이 있습니다. 사실 따지고 보면, 표현식은 문에 포함되는 개념입니다. 조금 더 구분을 하자면, 표현식은 평가되어서 하나의 값을 만드는것에 그치지만, 문은 선언문처럼 선언키워드를 사용해서 변수나 함수 등을 생성하기도 하고, 제어문은 프로그램의 흐름을 제어하기도 하죠. 그럼 여기서 표현식인 문과 아닌문은 어떻게 구별하나요 라고 생각할 수 있습니다. 그래서 나온게 변수에 할당해보기!입니다. 변수에 표현식을 할당해보면 표현식인 문인지 아닌지 알 수 있는데요. 예를들어 var x 라고만 선언한다면 이것은 선언문이기에 표현식이 아닌 문입니다. 여기서 x=100 이라고 한다면 x에 100이란 값을 할당하는 문이자 표현식인 문인것입니다.

Primitive type vs. Object type

크게는 2가지로 분류가 되는데요. 원시타입과 객체타입으로 분류됩니다. 원시타입에는 ES6전 까지는 5가지였지만 ES6로 넘어오면서 symbol라는 데이터타입이 추가되었답니다. 그럼 앞서말한 5가지에는 어떤 원시타입이 있었느냐. 첫 번째 숫자타입 즉 넘버라고 하는 흔히 우리가 알고 있는 숫자로 되어있는 숫자타입이 있구요. 두 번째, String 타입이라고하는 문자열 타입이 있습니다. 세 번째 불리언타입이라고 불리는 예를들면 진실 혹은 거짓이라는 말 아시죠?? 이런 타입의 형태의 참값과 거짓값만을 갖는 타입이 있습니다. 네 번째 undefined타입은 선언은 되었지만 값을 할당하지 않은 변수가 있습니다. 이곳엔 undefind가 암묵적으로 할당되는 것이죠. 마지막 5번째 null타입이 있습니다. 값이 아무것도 없다라는 것을 명시하기 위해 사용합니다. 원시타입은 이렇게 말한 6가지로 구성되어있고, 객체타입은 객체나 함수, 배열 등으로 이루어진 타입을 말합니다.

 

Function Definition

함수 정의는 함수를 생성하는 방법입니다. 함수를 쉽게 설명하자면, 어떤 재료를 넣어주면 그 재료가 제품이 되어서 나오는 기계 역할을 한다고 생각하면 됩니다. 그럼 이 함수를 도대체 왜쓰나? 바로 재사용성 때문입니다. 함수는 여러번 호출을 해도 상관이 없고, 똑같은 작업을 일일이 타이핑한다면 그만큼 불필요한 작업이 없을 것입니다. 또한 함수는 재사용성과 더불어 유지보수를 할떄에도 유용하기 때문에 어느 프로그래밍언어에서든지 많이 사용합니다. 이러한 함수를 정의하는 방법은 크게 4가지가 있습니다. 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수 이 4가지 방법이 있는데, Function 생성자 함수는 바람직하지 않은 함수정의방법이고, 화살표함수는 ES6부터 사용이가능합니다.

 

Scope

스코프는 유효 범위입니다. 예를들어 변수선언을 했다고 칩시다. 이 변수가 자신이 선언 된 위치에 따라서 이 스코프는 달라지게 됩니다. 만약 스코프라는 개념이 없다면 어떻게 될까요? 변수끼리 충동을 해서 프로그램 전체에서 그 변수명은 하나밖에 사용하지 못하는 것이죠. 그래서 이 스코프는 2가지 종류를 갖습니다. 전역 스코프, 지역 스코프 이렇게 부르는데요. 전역 변수는 전역 스코프에서 선언된 변수이고, 지역 변수는 지역스코프 예를들면 함수내부에서 선언된 변수를 지역 변수라고 부릅니다. 여기서 전역 변수는 어디서든지 참조가 가능합니다. 반대로 지역 변수는 자신의 지역 스코프 내에서 혹은 자기 밑의 지역 스코프 내에서 참조가 가능합니다. 또한, 자바스크립트 엔진은 스코프 체인이란 것을 통해서 그 변수가 어디에 선언되어있는지 검색합니다. 예를들면 지역 스코프내에서 검색을했는데 그 변수가 없네? 라고 하면 상위 스코프로 가면서 검색을 합니다. 그렇게 지역스코프의 끝인 전역스코프에 닿게되어서 검색을 마쳤는데도 선언문이 없다면 에러가 날것이고 전역스코프에 선언이 되어있다면 그값으로 처리를 하겠지요.

 

Lexical Scope

렉시컬스코프를 설명하기에 앞서서 함수의 상위 스코프를 결정하는 방법은 2가지가 있습니다. 첫 번째로 동적 스코프가 있습니다. 이 동적스코프는 함수를 어디서 호출했는지에 따라서 함수의 상위 스코프가 결정됩니다. 두 번째로 정적 스코프가 있습니다. 정적 스코프는 함수를 어디서 정의했는지에 따라서 상위 스코프를 결정하는 방법입니다. 이 2가지 중에 정적 스코프가 렉시컬 스코프라고 합니다. 다시말해 함수가 정의되는 시점에 함수의 상위 스코프가 결정되는 것이죠. 많은 프로그래밍언어들이 이 렉시컬스코프 방식을 택하고있고, 우리가 배우는 자바스크립트 역시 렉시컬 스코프방식을 택하고 있습니다.

 

 

 

전역 변수의 문제점

전역변수의 문제점은 크게 4가지가 존재합니다. 첫 번째로 전역변수를 사용하게되면, 어떤 변수가 여러곳에서 사용됬을 때 의도치 않게 상태가 변경될 수 있는 위험성이 높아집니다. 왜냐하면, 전역변수 자체의 뜻이 코드 어디에서든지 이것을 사용할 수 있다는 뜻이기 때문에 그렇습니다. 두 번째로 전역변수를 사용하면 메모리를 오래잡아먹고 있게되서 다른 곳에 영향을 줄 수 있습니다. 전역변수를 사용하면 변수를 실행하는 내내 메모리에서 사용하고 있게되는데 이때 메모리에서 어떤 역할을 해줘야하는 상황이 발생했을 때 그것을 처리하지 못하는 상황이 올 수도 있는거죠. 셋째로 스코프체인상에서 제일 마지막에 존재 하기 때문에 변수를 찾는 속도가 상대적으로 느립니다. 마지막으로 자바스크립트의 가장 큰 문제점 중의 하나는 파일이 분리되어있어도 하나의 전역 스코프를 공유한다는 것입니다. 따라서 전역 변수를 사용하게되면 예상치 못한 결과를 가져올 수도 있습니다. 이러한 문제를 해결하기위해서 전역변수를 최대한 사용하지않고, 사용해야한다면, 즉시실행함수나 모듈패턴을 주로 사용합니다.

 

var 키워드로 선언한 변수의 문제점

var키워드로 변수를 선언하게되면 크게 3가지 문제점이 있습니다. 첫 번째로 변수의 중복 선언입니다. 예를들어 제가 코드위쪽에서 var x=1이라고 선언하고 아래에서 var x=100이라고 선언했습니다. 그럼 var키워드 같은 경우는 변수 중복선언이 가능하기 때문에 x를 찍어보게되면 100이라는 숫자가 나오게됩니다. 이것이 가능하다는 것은 내가 나도모르게 같은 변수명으로 선언을 하게되어서 코딩을 하는 경우 원하는 결과가 나오지 않을 수도 있다는 것이죠. 둘째로 함수레벨 스코프만 지원하는 점입니다. 그냥 블록문이나 제어문에서 var키워드를 사용하면, 의도치않게 그 값이 변경될 수 있다는 문제점이 존재하게됩니다. 마지막으로 var키워드는 변수 호이스팅이 된다라는 점입니다. 내가 출력을 먼저 하고 아래에 var키워드로 선언한 선언문이 아래쪽에 존재한다고 쳤을 때 위에 출력값은 그 변수명을 못찾겠다라는 표시가아니라 변수호이스팅이 발생하여서 undefined로 값이 나오게됩니다. 이러한 변수 호이스팅 현상은 변수 선언문이 마치 위에 끌어올려진것처럼 동작하게되는 현상입니다. 이것이 에러를 발생시키는 것은 아니지만, 오류를 발생시킬 여지를 가지고 있고, 가독성을 떨어뜨리는 문제를 가지게됩니다. 이러한 문제점들을 가지고 있기 때문에 ES6이후부터는 let과const라는 키워드를 만들어서 문제점을 해결.

 

Constructor Function

컨스트럭터 펑션 즉 생성자 함수에 대해서 발표하겠습니다. 생성자 함수는 객체를 생성할 때 객체 리터럴을 통해서 만들게되면 하나의 객체만 생성하게 되는 문제점 때문에 나오게 됬습니다. 객체를 생성할 때 만약 동일한 프로퍼티를 갖는 객체를 여러개 만들 경우 매번 똑같은 코드를 써야되기 때문에 비효율적입니다. 그래서 생성자 함수는 이러한 문제점을 해결하고, 프로퍼티가 동일한 구조를 가진 객체를 여러개 생성할 때 쓰입니다. 함수를 동작하게 하는 법은 일반 함수와 같이 생성자 함수를 정의 한뒤에 new 연산자와 함께 호출하면 생성자 함수로 동작하게 됩니다. 생성자 함수 내부에서는 주로 this라는 자기 참조 변수를 사용합니다. 또한 내부에서는 첫 번째 암묵적으로 빈객체를 만들고 this에 바인딩됩니다. 두 번째 생성된 빈객체를 가르키는 this를 사용해서 프로퍼티나 메소드를 추가하고 초기화합니다. 모든 처리가 끝났다면, 암묵적으로 this를 반환하게됩니다.

 

 

 

 

 

 

this

객체 자신의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수입니다. 만약 어떤 메소드가 자신이 속한 객체의 프로퍼티나 메소드나 다른 메소드를 참조하려면 자신이 속한 객체를 참조할 수 있어야 하는데 이럴 때 쓰는 것이 this라는 참조 변수입니다. 일반적으로 함수를 호출하게되면 arguments 객체와 this가 암묵적으로 함수 내부에 전달이 됩니다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다. 여기서 this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정되는 것이죠. 이 this는 크게 4가지 호출방식에 따라서 다른 값을 가집니다. 첫 번째로 일반 함수 호출시에 this 전역객체인 window를 가르킵니다. 두 번째로 메소드호출시에는 메소드를 호출한 객체를 가르킵니다. 세 번째로 생성자 함수 호출에서는 생성자 함수가 생성할 인스턴스를 가르킵니다. 네 번째로 call, apply, bind라는 메소드에 호출시에는 어떤 인수를 주느냐에 따라서 결정이 됩니다.

 

 

DOM

먼저 돔은 Document object model의 약자입니다. 우리가 텍스트파일로 만들어져있는 웹 문서를 브라우저가 렌더링 하려면 이 웹문서를 브라우저가 이해하게끔 만든 구조로 메모리에 올려야겠죠? 브라우저의 렌더링 엔진은 웹 문서를 로드한 후에 파싱해서 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라고 합니다. 이 돔은 2가지 기능을 담당하고 있습니다. 첫째로 HTML문서에 대한 모델을 구성합니다. 브라우저는 HTML문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성합니다. 이때 모델은 객체의 트리로 구성되게 되는데요 그래서 이것을 돔 트리라고 부릅니다. 두 번째로 돔이 하는 기능은 HTML문서 내의 각 요소에 접근하고 수정할 수 있게 합니다. 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공하기 때문에 DOM을 만약 수정한다면 브라우저로 보는 사용자또한 수정된 내용을 보게됩니다.

 

브라우저 동작

우리가 주소창에 www.naver.com 을 쳤습니다. 그러면 주소창 뒤에 숨겨진 index.html이라는 파일을 서버에 요청하게됩니다. 그 요청을 받은 서버는 자신의 서버에있는 그 index.html이란 파일을 찾아서 요청한 사람에게 응답을 해주면서 파일을 넘겨줍니다. 그렇게 HTML, CSS, Js, 이미지파일들을 요청 응답과정을 통해서 화면에 렌더링해서 브라우저에 표시되게됩니다. HTML이나 CSS같은 경우 렌더링 엔진의 HTML파서, CSS파서에 의해서 각각 돔트리와 씨솜트리로 변환되고 이 둘이 렌더트리가 되어서 이를 기반으로 웹페이지를 표시합니다. 자바스크립트 같은 경우는 자바스크립트 엔진이 따로 처리를 하는데요. HTML파서가 script라는 태그를 만나게되면 렌더링엔진이 자신이 하던일을 중지하고 자바스크립트 엔진보고 일하라고 넘깁니다. 그렇게 스크립트 엔진이 일을 다하면 HTML파서로 다시 제어 권한을 넘기고 중지했던 시점부터 다시 DOM을 만드는 것이죠. 이처럼 브라우저는 동기적으로 동작해서 자바스크립트 엔진이 언제 동작하느냐가 중요합니다. 화면이 먼저 나와서 보여지는게 있어야되는데 자바스크립트 엔진 때문에 지연되는현상이 발생하면 사용자 입장에서 화나겠죠? 또한, DOM완성도 안됬는데 그것을 조작하려고한다라고 하는 에러가 발생할 수도 있기 때문입니다.

 

 

 

 

 

 

Event Delegation

이벤트 위임이라고 하는 이 이벤트 딜리게이션은 자식요소가 여러개 존재한다고 쳤을 때 이 요소요소 하나마다 이벤트를 바인딩해주면 코드도 지저분해지고, 만약 동적으로 이자식요소가 추가된다면 이 자식요소에는 이벤트 핸들러를 바인딩해줄수가 없습니다. 그래서 나온게 이벤트 위임입니다. 다수의 자식요소에 바인딩하는 것이아니고 부모요소에 이벤트 핸들러를 바인딩하는 방법인데요. 이 이벤트 위임이 가능한 것은 버블링이라는 개념 때문에 가능합니다. 버블링은 뒤에서 잘 설명 해 줄것이라고 생각하고요. 여기서 만약 많은 자식들중에 그럼 누가 이벤트 발생시킨줄 아냐라고 한다면, Event.target이라는 것을 사용해서 알아낼 수 있습니다.

 

Event Capturing vs. Event Bubbling

HTML은 계층적 구조를 가지기 때문에 이벤트 또한 연쇄 반응이 일어납니다. 이 전파 방향에 따라서 캡쳐링과 버블링 2가지로 구분이 됩니다. 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링이라 하고, 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링이라고 합니다. 여기서 주의할점은 둘중 하나만 발생하는 것이 아니고 캡처링부터 시작해서 버블링으로 종료된다는 점입니다. 우리가 자주쓰는 addeventListener메소드의 세 번째 매개변수에 true라고 설정을하면 캡처링으로 전파되는 이벤트를 캐치하고 설정하지않으면 버블링으로 전파되는 이벤트를 캐치합니다. 예를들어 바디 안에 p태그 안에 버튼이 있다고 치고 버튼에 각각 클릭이벤트를 주었을 때 버블링은 제일 자식요소인 버튼이 눌렸다 p태그가 눌렸다. 바디가 눌렸다라고 나오게 되는것이고, 캡처링은 그와 반대로 부모요소인 바디가 눌렸다 p태그가 눌렸다. 버튼이 눌렸다가 되게 됩니다. 만약 혼용해서 쓴다고하면 당연히 캡처링이 먼저 일어나므로 캡처링을 해준 요소부터 인식을 합니다.

 

Prototype

JAVA는 클래스 기반 객체지향 언어이다라고 많이들 부릅니다. 반면 우리가 쓰는 자바스크립트는 프로토타입 기반 객체지향 언어이다라고 합니다. 우리가 객체를 사용하게되면 이 객체는 자신의 부모역할을 담당하는 객체와 연결이 되어있게 됩니다. 상속의 개념과 같이 부모의 프로퍼티나 메소드들을 자식객체에서 사용할 수 있게 되는것이죠. 이러한 것을 프로토타입 객체 혹은 프로토타입이라고 합니다. 프로토타입도 스코프체인처럼 프로토타입 체인이 존재하여, 만약 메소드나 프로퍼티를 사용하려고하는데 자신이 가지고 있지 않다면, 자신의 프로토타입에게가서 프로퍼티나 메소드를 검색해서 사용을 합니다. 또한, 프로토타입 객체도 객체이므로 추가하거나 삭제가 가능합니다. 결국 프로토타입은 코드를 재사용할때도 유용하고, 유지보수측면에서도 좋은 역할을 한다고 볼 수 있습니다.

 

Class

클래스는 사실 자바스크립트에서는 아예 없던 개념은 아닙니다. 이미 프로토타입이 거의 클래스와 유사하다고 생각하면 되는데요. 대부분 C++이나 자바등 클래스기반 객체지향 프로그래밍에 익숙해져있던 사람들이 프로토타입 기반 객체지향 프로그래밍언어인 자바스크립트를 하려고하자 너무 어렵다고 생각해서 ES6부터 클래스를 지원하기 시작했습니다. 클래스 내부에는 constructor라고 인스턴스를 생성하고 클래스필드를 초기하기 위한 특수한 메소드가 존재합니다. 또한, 클래스 필드는 public해서 외부에서 접근이 가능합니다. 이 부분은 외부에서도 접근이 가능하기 때문에 접근을 불허하기위한 private를 지원하기 위한 움직임이 있다고 합니다. 또한, 클래스에는 상속이라는 개념이 있는데 extends키워드를 사용하여서 부모요소것들을 가지고 다른 점만 구현하면 되니 똑같은 코드를 굳이 안써줘도 된다.

 

 

super

super는 키워드입니다. 주로 부모클래스를 호출하거나 부모클래스를 참조할 때 사용하는 키워드입니다.

super 키워드의 동작방식은 자식클래스 생성자 내부에서 super를 호출하면 부모클래스의 생성자가 호출됩니다. 여기서 만약 super()를 호출하지 않으면 this에 대한 참조 에러가 발생하는데요. 이 의미는 super메소드를 호출하기 이전에는 this를 참조 할 수 없다는 것을 뜻합니다. 그리고 super안에 정적 메소드에서 super.하고 프로퍼티를 사용해서 부모클래스의 프로퍼티들에 접근할 수 있습니다.

 

Promise

프로미스는 자바스크립트의 비동기처리를 위해서 ES6부터 나온 패턴입니다. 기존에는 비동기 처리를 해주기 위해서는 콜백함수를 사용해서 비동기처리를 해주었었습니다. 하지만, 콜백 헬입 발생할 수 있다는 단점과 에러 처리가 힘든 단점이 있었기 때문에 이 프로미스가 나오게 되었습니다. 프로미스는 비동기처리가 수행된 상태인 resolve함수 , 비동기처리가 실패한 상태인 reject함수를 주로 사용합니다. 프로미스로 구현된 비동기 함수의 경우 프로미스 객체를 반환하여야합니다. 프로미스 객체의 후속처리메소드로는 then과 catch를 통해서 비동기 처리 결과나 에러메시지를 전달받아서 처리합니다. 또한 프로미스는 프로미스체이닝을 통해서 여러개의 프로미스를 연결하여 사용해서 콜백문제를 해결합니다.

 

동기식 처리 모델 vs. 비동기식 처리 모델

동기식은 순차적으로 실행되는 모델입니다. 말그대로 여러 업무가 있을 때 하나 끝내고 다음꺼 그다음꺼 끝내고 그 다음꺼 이런식으로 순차적으로 실행하는 모델입니다. 반면 비동기식 처리모델은 병렬적으로 업무를 진행합니다. 예를들면 내가 요리라는 업무를 하고 있다가 중간에 핸드폰을 보고 요리 과정을 보고서 다시 요리를 하고 하는 식의 업무를 비동기라고 합니다. 자바스크립트 대부분의 DOM이벤트와 Timer관련함수 ,Ajax요청은 비동기식처리 모델로 동작합니다.

 

 

이렇게 정리를 하였고, 나는 리터럴에대해서 발표했다.

뭔가 이런연습이 정말 나한테 큰 도움이 되었다고 생각한다. 아직도 앞에나가서 서면 떨리고 긴장되지만, 이런연습이 축적된다면 굉장히 나에게 큰 자산으로 돌아올것 같았다.

 

 

 

<패스트캠퍼스 프론트엔드 스쿨 후기>

 

 

[프론트엔드 개발 스쿨] 살펴보기>>