과거의 내가 미래의 나에게

통신을 통한 데이터는 아무리 협의를 봤다해도 어떻게 변해서 들어올 지 단언할 수가 없다. 따라서 프론트 코드를 짤 때 가장 중요하게 생각하는 것 중 하나가 통신을 통해 들어온 데이터가 이상하더라도 구동하는 데 에러가 나지 않도록 처리하는 에러 처리이다. 옵셔널 체이닝은 에러 처리하는 데 유용한 기능으로, 객체에 접근하는 에러 처리를 간단히 할 수 있게 돕는다. 아주 옛날 프로젝트의 코드를 유지보수해야할 일이 생겼는데, 코드의 바벨이 ES11이 지원이 안되었다. 그러다보니 옵셔널 체이닝도 사용할 수 없었고 에러처리하는데 코드가 잔뜩 길어지다보니 새삼스레 이 기능에 대해 다시 돌이켜보게 되며 오늘의 글을 작성본다.  옵셔널 체이닝 기본옵셔널 체이닝은 객체, 함수, 배열 요소 등에 안전하게 접근할 수 있게 해..

모듈 시스템 기존에는 html 파일에서 script 태그를 사용하여 js 파일들을 실행했다. 그러나 js의 활용성이 커지면서 js 파일을 분리해서 사용해야 할 필요성이 생기고 이에 따라 한 html 파일에 여러 js 스크립트를 넣었더니 한 파일에서 쓴 것 마냥 내용이 전역으로 공유되어지고, 또 이에 따라 스크립트 load 순서에 힘을 쏟아야했다. 이러한 문제점에 따라 나온 것이 모듈 시스템이다. 모듈은 코드를 캡슐화하여 기능에 따라 파일 별로 분리한 코드 조각으로 재사용이 가능하며 사용 시 파일 별로 서로 영향이 없어야 하는 것이다. ES6 이전까지는 공식적인 모듈 지원이 없었지만 ES6부터는 공식적인 모듈도 지원하게 되었고 또 그 이전에 모듈을 정의하기 위해 다양한 포맷이 등장했다. 이 곳에서는 대표적..

배열에 대한 가공을 할 때 사실 for문과 if문이면 모든 것을 할 수 있다. 그럼에도 JS에서는 많은 배열함수가 존재한다. 이 배열함수들은 심지어 for문보다 퍼포먼스가 약간 떨어진다고 알고 있는데, 그렇다면 왜 배열함수들은 이렇게나 많고 사람들은 for문보다 배열함수를 더 자주 쓸까? 그 이유는 사람끼리 소통할 때 더 원활히 하기 위함이다. for문을 코드에 잔뜩 써놓게되면 읽는 사람들은 그 코드가 무엇인지 해석하기 위해 힘을 들여야한다. 하지만 배열 함수를 쓰면 이 함수가 어떤 목적으로 쓰이는 것인지 좀 더 수월하게 알 수 있고 그 의미에 따라 함수를 작성하기에 코드의 길이도 줄일 수 있는 것이다. 배열함수가 코드의 의미를 분명히 하기 위해 쓰인다하면, 이미 배열함수를 자주 쓰고 익숙하지만 한 번 ..

구조 분해 할당 구문을 자주 사용하지 않아 그 이해도가 떨어지고, 이해도가 떨어지니 계속 사용을 지양하게 되는 악순환이 반복되었다. 하지만 구조 분해 할당 구문은 코드의 가독성 측면을 생각하면 절대 무시할 수 없는 부분이고 또 다른 사람의 코드를 이해하기 위해서는 언제까지나 기피할 수는 없기에 이번 글을 통해 구문을 정리하고 익히려고 한다. 구조 분해 할당 구문이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS의 표현식이다. 객체나 배열에서 데이터 전체가 아닌 일부만 필요한 경우 필요한 부분만을 변수로 분해하여 사용할 수 있다. 배열 구조 분해 1. 기본 형태 const box = [1, 2]; function test () { return [1,..

요새 특정 기간에 대한 통계를 다루는 작업을 하는데 기간을 다룰 때 js의 시간 개념이 부족하다는 것을 깨닫고 관련된 내용을 학습하고 정리해보려고 한다. GMT Greenwich Mean Time이란 뜻으로 그리니치의 평균 시간이라 해석한다. 영국에 위치한 그리니치 천문대를 기준으로 경도를 나누는 시간대인데, 태양의 움직임을 바탕으로 측정한 평균 태양시이다. 영국을 기준으로 한 태양시이기에 영국보다 동쪽에 있는 지역일 수록 해가 더 일찍 뜨고, 서쪽에 있을 수록 해가 더 늦게 뜬다. 이와 같은 경우 영국의 시간대인 GMT에 +01 혹은 -01 과 같이 시차를 붙여서 표현하게 된다. 한국은 영국보다 시간대가 9시간을 앞서고 있기에 +09가 붙는다. 그러나 태양시는 지구 자전속도에 영향을 받기 때문에 상대적..

「딥다이브 자바스크립트」 정리 - 생성자 함수에 의한 객체 생성 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 생성자 함수 Object, String ,Number, Boolean, Function, Array, Date, RegExp 등. 생성자 함수는 new를 통해서 호출하는데 만약 new 없이 호출한다면 그냥 일반 함수로 작동한다. new Object()로 객체를 생성하고 그 이후 프로퍼티 또는 메서드를 추가하여 완성시킬 수 있다. 하지만 객체 리터럴이 훨씬 더 간단하기에 굳이 사용할 필요는 없을듯… 생성자 함수를 통한 객체 생성 생성자 함수는? 함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로 호..

「딥다이브 자바스크립트」 정리 - 프로퍼티 어트리뷰트 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 먼저 내부슬롯과 내부 메서드에 대해서 내부 슬롯과 내부 메서드는 js 엔진 내부에서만 사용하는 의사 프로퍼티와 의사 메서드이다. 이는 js 엔진 내에서 돌아갈 뿐 개발자가 직접 접근할 수 있는 객체의 프로퍼티는 아니다 하지만 일부에 한하여 간접적으로 접근할 수 있는 수단을 제공하기도 한다. 예를 들어 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데, 원칙적으로 직접 접근할 수는 없지만 __proto__를 통해 간접적으로 접근할 수 있다. 참고로, ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드이다..

「딥다이브 자바스크립트」 정리 - let, const ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 함수란 1. var 키워드로 선언한 변수의 문제점 중복 선언 가능 같은 스코프 내에서 중복하여 선언이 가능하다. 중복해서 선언한 변수는 var 키워드가 없는 것처럼 동작되어 재할당이 이루어질 뿐 에러는 발생하지 않는다. 함수 레벨 스코프 함수 외부에서 var 키워드로 선언한 변수는 모두 전역변수가 되어버린다. 예를 들어 if문이나 for문 내에서 선언한 변수도 모두 전역변수가 되어버리기에 전역 변수가 남발될 가능성이 높아진다. 변수 호이스팅 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려지고, 그로 인해 변수 선언문 이전에 참조할 수 있게..