최근 프론트엔드 개발을 하면서 이런저런 기능들을 구현하고 환경 세팅을 하다 보니, 자연스럽게 '도대체 내가 짠 코드가 어떤 환경에서 어떻게 돌아가는 걸까?' 하는 근본적인 궁금증이 생겼다. 맨날 화면단만 보다가 보이지 않는 서버 너머의 세계를 마주하려니 막막함이 앞섰다.마침 길벗출판사 35차 개발자 리뷰어에 선정되어, 평소 눈여겨보던 을 읽어보게 되었다. 보통 '인프라', '네트워크' 하면 글씨만 빽빽한 두꺼운 전공 서적부터 떠올라서 지레 겁먹기 십상인데, 이 책은 제목부터가 '그림으로 이해하는'이다. 나 같은 인프라 초보에게 딱일 것 같아 주저 없이 선택했다.이 책의 가장 큰 장점은 역시 풍부한 시각 자료다. 텍스트로만 줄줄 풀어놓으면 머리에 잘 안 들어오는 서버, 네트워크, 스토리지, 데이터베이스 ..

타입스크립트의 클래스클래스 정의const employee = { name: "Jung", age: 25, position: "developer", work() { console.log("일함"); },};위 객체와 같은 형태의 클래스를 정의한다고 해보자. 먼저 클래스의 필드인 name, age, position을 선언한다.class Employee { // 필드 name; age; position;}위와 같이 필드를 정의하면, 함수의 매개변수와 동일하게 암묵적 any 타입으로 추론되며 strict 옵션이 true로 설정되어 있을경우 오류가 발생하게 된다. 따라서 필드 선언 시 타입을 함께 정의해주어야 한다.class Employee { // 필드 name: string; age..

클래스 상속과 생성자 함수 상속상속에 의한 클래스 확장은 프로토타입 기반 상속과는 다른 개념이다. 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다.클래스와 생성자 함수는 인스턴스를 생성할 수 있는 함수라는 점에서 유사하지만, 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 제공되는 반면, 생성자 함수는 그렇지 않다.예를 들어, 동물을 추상화한 Animal 클래스와 새와 사자를 추상화한 Bird, Lion 클래스를 각각 정의한다고 해보자. 새와 사자는 동물에 속하므로 동물의 속성을 갖되, 각자 자신만의 고유한 속성도 갖는다. 이때 Animal 클래스는 동물의 속성을 표..

인스턴스 프로퍼티인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다.class Person { constructor(name) { // 인스턴스 프로퍼티 this.name = name; }}const me = new Person('Jung');console.log(me); // Person {name: "Jung"}constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 클래스가 암묵적으로 생성한 인스턴스인 빈 객체가 바인딩되어 있다.생성자 함수에서 생성자 함수가 생성할 인스턴스의 프로퍼티를 정의하는 것과 마찬가지로, constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다. 이로써 클래스가 암묵적으로 생성한 빈 객체인 인스턴..

*취준생 관점에서 작성된 글입니다 이번에 새로운 프로젝트에 프론트엔드 개발 담당으로 합류하게 되었다. 그 과정에서 오롯이 내가 기술 스택을 결정해야 하는 일이 생겨서, 필요한 기술 스택 후보를 직접 조사해보고, 선정한 후 결론적으로 왜 해당 기술 스택을 선정했는지를 정리해보고자 한다. 어떤 범주의 기술 스택이 필요한가?이번 프로젝트는 크로스플랫폼 앱을 목표로 하며 일부 외부 API 사용이 필수적인 환경에서 개발이 이뤄진다. 또한 가장 중요한 부분인.. 프론트엔드 개발을 주로 담당하게 될 나는, React에 가장 익숙하다. 이러한 조건을 종합적으로 고려해, 전체 앱은 크로스플랫폼 개발 프레임워크를 기반으로 구현하되, 일부 화면은 WebView를 통해 웹 기술로 구축하는 하이브리드 방식을 병행하는 전략을 ..

클래스 몸체에 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.constructorconstructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. constructor의 이름은 변경할 수 없다.class Person { constructor(name) { this.name = name; // 인스턴스 생성 및 초기화 }}개발자 도구의 콘솔에서 console.dir을 통해 클래스의 내부를 살펴보면 아래와 같다.클래스는 평가되어 함수 객체가 되므로, 클래스도 함수 객체 고유의 프로퍼티를 모두 갖고 있다. 함수와 동일하게 프로토타입과 연결되어 있고, 자신의 스코프 체인을 구성한다. 모든 함수 객체가 가지고 있는 prototype ..

클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어로, 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.var Person = (function () { function Person(name) { this.name = name; } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; return Person();}());var me = new Person('Jung');me.sayHi(); // Hi! My Name is Jung하지만 클래스 기반 언..

클로저의 활용클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 즉, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.카운터 예제함수가 호출될 때마다 호출된 횟수를 누적하여 출력하는 카운터 예제를 살펴보자. 해당 예제에서 안전하게 변경하고 유지해야 할 상태는 호출된 횟수(num 변수)가 된다.상태를 전역 변수로 관리let num = 0;const increase = function () { return ++num;};console.log(increase()); // 1console.log(increase()); // 2console.log(increase()); // 3위 코드는 정상적으로 작동하지만, 카운트 상태가 전역 변수를 통..

클로저란?클로저는 자바스크립트 고유의 개념이 아닌 함수형 프로그래밍 언어(ex. 하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 특성이다. 따라서 클로저에 대한 정의가 ECMAScript 사양에는 등장하지 않으며, MDN에서 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared'클로저는 함수와 그 함수가 정의된 렉시컬 환경과의 조합이다'라는 의미인데, 예제를 통해 알아가보자.const x = 1;function outerFunc() { const x = 10; function innerFunc() { console...

인터페이스란?인터페이스란 상호 간에 약속된 규칙을 의미하며, 타입 별칭과 동일하게 타입의 이름을 지어주는 문법이다. 아래와 같이 타입 별칭과 인터페이스는 매우 유사하게 생겼다. 다만, 타입 별칭과 다르게 인터페이스는 객체의 구조를 정의하는데 특화된 문법으로, 상속, 합침 등의 특수한 기능을 제공한다. 선택적 프로퍼티와 읽기 전용 프로퍼티인터페이스에서도 타입 별칭과 같은 방법으로 선택적 프로퍼티와 읽기 전용 프로퍼티를 정의할 수 있다.interface Person { readonly name: string; age?: number;}const person: Person = { name: "은경",};person.name = "길동" // ❌메서드 타입 정의하기메서드의 타입을 정의할 때는 함수 타입 ..