알고리즘, ES5/ES6 의 차이 - 항해99 2주차 회고

싱클베어·2022년 1월 23일

항해99 회고록

목록 보기

2/13

그동안의 이야기

지난 회고록을 작성하고 또 일주일이 지났다. 알고리즘 문제들을 자바스크립트로 풀며 이걸 대체 왜이렇게 복잡하게 푸나 싶은 것도 많고, 문법이 생소한 것도 많아 검색, 또 검색, 블로그에 정리를 반복한 것 같다.

프로그래머스에 있는 문제를 일주일에 40+12문제 정도를 목표로 잡았는데, 후반부 12문제는 내가 담당한 문제를 제외한 다른 몇 문제는 풀지 못한채로 두었다. 틈틈이 하루 1개씩이라도 풀어서 힘들게 익힌 자바스크립트 문법을 잊지 않도록 해야겠다.

알고리즘 문제 풀이
Node.js 로 웹서버 구현
내가 한 주 동안 배운 것
느낀 것
내게 아쉬웠던 것

알고리즘 문제 풀이

프로그래머스의 Level 1 난이도 문제를 수준에 맞게 잘 분배가 되어있었다. 초기 문제들은 주어지는 입력값도 명료하고, 출력값도 정해져있으며 정말 문제 그대로 구현만 하면 되었지만 난이도가 올라갈수록 이 내용들은 점점 숨겨져갔다.

알고리즘 문제들은 결국 현업 개발에서도 비슷하게 발생할 수 있는 문제들을 보여주는 것이라 보였다. 사용자가 다소 정리되지 않은 날 것의 데이터를 입력했을 때 에러가 날 수 있는 부분을 얼마나 케어했는지, 경계값에 있는 부분은 잘 처리했는지 등 많은 부분이 유사해보였다. 물론, 난이도가 더더욱 올라가면 이런 에러 케이스를 걸러내는 것은 당연히 해야하는 것이며, 실행 속도를 까다롭게 따지는 것으로 보였다.

과거에 QA를 하던 시절에는 내가 개발자들을 경계값 테스트 꼭 하고 이상한 입력값을 넣어보며 괴롭혔는데 이제 내가 경험하고 있다. 하하.

알고리즘 모의고사와 실제 테스트가 있었는데, 소스 코드 외에도 문제 풀이 영상을 녹화하여 제출하는 방식이었다. 난이도는 그리 높은 편은 아니었지만, 배열을 다루는 ES6 문법이 도통 손에 익지 않아서 고생이었던 탓에 일부러 안쓰던 문법을 사용해 풀고 스스로에게 설명하는 영상을 찍어서 제출했다.

다행히 테스트는 별 문제없이 통과되었고, 나중에 튜터님이 오셔서 "아주 길게 풀이 영상을 남겨주셨다" 며 언급하고 넘어가셨다. 길이 10분 제한에 그리 어렵지 않은 문제를 7분 40초정도 했으니 그럴만도 하겠다 싶기도 하다.

전반적으로 Node.js를 본격적으로 배우기 전, 각 언어별로 사용되는 문법과 친해지는 시간이었다고 생각이 든다. Arrow function 같은 ES6 문법들이 아직도 좀 헷갈리긴 하지만, 곧 친해지겠지.

Node.js로 웹서버 구현

주특기를 본격적으로 배우는 시점이다. Node.js, Express, Mongoose 를 이용해 웹서버를 구현하고 있다.
Arrow function과 Map, Filter 등 지난 알고리즘 때 괴롭히던 것을 정말 자주 쓰고 있어서 다시금 복습해보며 코드를 작성해보고 있다.

Express : Node.js 환경에서 동작하는 웹 애플리케이션 프레임워크
Mongoose : Node.js와 MongoDB를 위한 ODM(Object Data Mapping) 라이브러리이다. 필요에 따라 확장 및 변경이 가능한 자체 검증(Validation)과 타입 변환(Casting)이 가능하며 Express와 함께 사용하면 MVC Concept 구현이 용이하다.

이전 Python의 Jinja2 방식으로 구현할 때, pymongo를 사용해 직접 데이터베이스에 쏘는 쿼리를 작성해서 HTML에 넘겨주는 방식을 썼는데 Mongoose를 보니 이런 방식으로도 처리할 수 있다는 점을 배워나가고 있다.

내가 한 주 동안 배운 것

JavaScript의 ES란?

위키피디아 에서는 아래와 같이 정의하고 있다.

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다.

저 이야기를 뒤집어 이야기 하면, 어느 시점 이전에는 자바스크립트가 표준화되지 않았다는 이야기이다. 과거 브라우저 전쟁 당시, Netscape는 JavaScript를, 마이크로소프트의 Internet Explorer 는 JScript를 내놓았고 둘은 개발을 거듭하며 서로 다른 차이점이 생겨났다고 한다. 두 언어는 서로 호환되지 않아, 크로스 브라우징 이슈 가 발생할 수 있었다. 이는 동일한 사이트를 보고 있음에도 불구하고, 다른 브라우저를 사용하면 모든 기능이 동일하게 동작하지 않는 현상이다.

JScript는 IE11와 그 이전 버전까지 계속 사용되었지만 수많은 보안 취약점 문제로 현재는 기능을 끌 수 있는 옵션도 제공한다고 하고, 윈도우10 부터는 이제 Chromium 기반의 Microsoft Edge를 권장하는 추세이기도 한다.

물론, 현업에서는 아직까지도 구버전의 운영체제를 많이 쓰는 곳에는 여전히 사용되고 있어 보안사고를 장식하기도 한다...

뉴스 - MS의 익스체인지 서버 노리는 공격자들, 아직 사라지지 않았다

ES5/ES6 문법 차이

대표적으로 아래의 내용들이 변경되었고, 강력한 기능들 추가로 작성 방법까지 달라진 케이스들이 많이 생겼다고 한다.

블록 범위 생성자 (Block-Scoped Constructs Let and Const)
- 호이스팅(Hoisting)을 유발했던 var 변수를 대체할 수 있는 let, const가 소개되었다.
화살표 함수 (Arrow Functions)
- => 를 사용하는 문법으로, 이를 이용해 기존 함수보다 더 간결한 문법으로 함수를 만들 수 있게 되었다.
클래스 (Classes)
프로미스 (Promises)
- 자바스크립트에서 비동기 처리를 동기로 처리할 수 있게 돕는 객체 유형으로, Non-blocking model인 자바스크립트에서도 비동기 처리를 아주 손쉽게 할 수 있다.
비구조화 할당 (Destructuring Assignment)
템플릿 리터럴 (Template Literals)
향상된 객체 리터럴 (Enhanced Object Literals)
기본 매개 변수 (Default Parameters)
멀티 라인 문자열 (Multi-line Strings)
모듈 (Modules)

느낀 것

이번 주차는 혼자 문제를 해결하는 과정이 많아 계속 앉아서 같은 걸 보고있기 보다는, 50분 공부 10분 휴식 또는 25분 공부 5분 휴식을 Time Timer 계열 앱과 기기를 이용해 시간을 분배하는 습관을 길렀다. 아무래도 시각적으로 확실하게 남은 시간이 보여서, 자체적으로 시간 제한을 걸기에 좋았다.

Time Timer