📚 항해99 2주차 WIL
💻 알고리즘
✏ 알고리즘 기간: 2022.01.14 ~ 2022.01.20
✏ 팀원: 3명백지 상태인 코린이가 첫 알고리즘 문제에 직면하면서 무자비한 알고리즘 세계에서 살아남고자 아등바등 쫓아가는 대서사를 기록하기 위한 글.
📢 어떤 문제들을 풀었을까
📕 알고리즘에서 중점적으로 습득한 건
📌 JavaScript의 ES란
ECMAScript를 알기전에 우선 친숙한 자바스크립트에 대해 알아보자.
우리(내게)에게 친숙한 자바스크립트는 웹브라우저(클라이언트)에서 멀고먼 서버에 데이터를 보내기 전, 데이터 유효성 검사 등을 처리하는 스크립트 언어였다. 이 자바스크립트는 1995년 넷스케이프(Netscape)의 Brendan Eich에 의해 개발된 언어이고, Mocha -> LiveScript -> JavaScript의 네이밍 변천사를 갖고있는 아이이다. 그리고 사실 우리가 알던 자바스크립트는 ECMAScript + BOM(Browser Object Model) + DOM(Document Object Model)라는 1개의 코어와 2개의 모델로 이루어져있다는 것만 인지하고 있자.
자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제가각이라, 표준이 필요하게 되었다.
그렇다면! 다시 본론으로 돌아가서 ECMAScript(이하 ES)란 무엇인가?
ES는 자바스크립트를 이루는 코어(Core)스크립트 언어로써, 다양한 환경에서 운용될 수 있게 확장성을 갖고 있기때문에 사용처가 웹환경으로 국한되어있지는 않다. 즉 위에서 말한 우리가 아는 자바스크립트는 웹브라우저에서 돌아갈 수 있도록 BOM 과 DOM을 함께 사용하는 확장성이 되겠다. 이러한 확장성들은 ES 버전에 따른 문법과 기능의 확장을 가능하게 한다.
📌 ES5/ES6 문법 차이점은
Arrow Function
this, prototype, arguments 세 가지가 없다. 익명 함수로만 사용할 수 있다.⑴ this
일반 함수는 호출할 때 어떻게 호출되는지에 따라 this에 바인딩할 객체가 동적으로 결정되지만, 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 항상 상위 scope의 this를 말한다 자신만의 this를 생성하지 않는 익명 함수다. (Lexical this)
⑵ prototype
생성자 함수로 사용할 수 없다 new 사용 시 오류 발생한다.
⑶ arguments
매개변수를 지정하지 않아도 arguments 프로퍼티가 함수에 자동으로 생성되어 사용 가능했었으나, arguments가 없어졌다 대신 args가 생겼다.Template Literal
` 백틱(back-ticked)으로 문자열과 값을 간단하게 사용 가능하다Default Parameters
인자가 없거나 'undefined'인 경우에 들어갈 기본값을 설정해 놓아야 한다.
ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다.Multi-line Strings
` 백틱을 이용해서 여러 줄의 문자열을 처리하기 수월해졌다Destructuring Assignment
비구조화 할당, 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있다.Enhanced Object Literals
객체 정의 방식이 개선됐다.⑴ 속성과 값이 같으면 1개만 기입 가능.
⑵ 속성에 함수 정의할 때 function 생략 가능.Promises
비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값이라는 속성을 갖고 있다 resolve, reject를 호출하여 진행 상태를 결정할 수 있다 promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다 then(), catch()는 일의 진행 상태를 나타내는 객체다 promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected일 때는 아무것도 하지 않는다⑴ 동기
요청과 응답이 동시에 일어난다 설계가 간단하고 직관적이지만 응답이 있을 때까지 대기해야 한다.
ex) 은행 계좌이체
⑵ 비동기
요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능하다.Block-Scoped Constructs Let and Const
대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)지만, Java Script는 함수 레벨 스코프(Function-level scope)를 따른다 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다
- let vs const
- 재할당 자유롭다 vs 상수를 위해 사용, 재할당이 안 된다
⑴ 블록 레벨 스코프(Block-level scope)
모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외에서는 참조할 수 없다
⑵ 함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다
- Classes
new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다 프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우데 클래스 문법을 사용할 수 있다
ES6에서 var 키워드는 사용하지 않도록 하고, const 키워드를 사용하도록 하자
📗 알고리즘 테스트를 끝내고 나니
솔직히 문제를 볼 때마다 눈을 질끈 감았다. 일단 하루에 몇 문제씩 정해 놓고 해내자는 걸 목표로 이번 주동안 번까지 30번까지 어떻게든 끝냈다.
알고리즘을 하면 할수록 느꼈지만,
- 이 문제는 이걸 묻는 문제구나!
- 이런 패턴으로 반복되네! 이렇게 접근하면 되겠구나!
- 이런 로직을 생각해 봤는데 코드는 이런식으로 구현해야지!
- 여기서 오류가 발생하네! 이렇게 해결해보자!
이 과정을 연습하게 하는 느낌!
생소한 장벽이 부셔지니 그 다음부터는 더더욱 잘하고 싶어졌다. 일을 할 때도 어떤 에러나 버그가 발생했을 때, 어떤 페이지를 만들때, 개발자로서는 평생 해야 하는 사고 패턴인게 너무 느껴져서... 진짜 꾸준히 연습하고 싶다는 생각이 파트라슈의 개처럼 자동적으로 떠올라졌다.그래서 하루에 한 문제씩 알고리즘 문제를 풀기. 앞으로의 암묵적으로 정한 규칙이다.
