성장, 그리고 노력

부족하더라도 어제보다 더 잘해지자. 노력은 절대 배신하지 않는다.

JavaScript 17

[Javascript] 프로토타입(Prototype)

Prototype 프로토 타입이란 클래스나 객체의 내용 복사 없이도 상속의 효과를 구현할 수 있게 해주는 방법이다. 프로토타입은 직접 참조 당하지 않고 프로토타입 링크(__proto__)를 통해 부모의 프로토타입 링크만 참조한다. 프로토 타입 속성(property's)의 값은 객체이며, 프로토타입 체인 아래에 있는 객체에 상속되기를 원하는 속성과 메서드를 저장하기 위한 공간인 객체이다. 그래서 Object.is(), Object.keys()같은 메서드들은 프로토타입 객체 안에 정의되지 않았기 때문에 Object.prototype에서 상속되는 객체 인스턴스나 객체 유형(object type)에 의해 상속되지 않는다. 프로토타입 객체에는 속성과 메서드를 추가할 수 있으며, 원하는 객체로 완전히 교체할 수도 ..

Javascript 2022.01.01

호이스팅(hoisting)

호이스팅(hoisting) 호이스팅은 선언한 함수와 변수를 자바스크립트가 해석할 때 가장 상단에 있는 것처럼 인식하는 것을 말한다. 좀 더 자세하게 말하자면 자바스크립트는 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. 따라서 함수와 변수(var)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보이게 되는데 이를 호이스팅이라고 한다. 함수 전체가 호이스팅 된다. var로 변수 선언시, 선언은 호이스팅되지만, 할당을 호이스팅 되지 않는다. 변수 스코프는 함수이며, 함수만이 새 스코프를 도입할 수 있다. 호이스팅을 이해하기 위한 사전 지식들 호이스팅을 이해하기 위해 조금 축약하여 개념만 쉽게 이해해 보자. 스코프(scope) 스코프란 그 변수나 함수에 접근할 수..

Javascript 2021.12.30

싱글톤 (Singleton Pattern)

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴이다. 싱글톤 패턴이 유용했는지 아닌지에 대한 논란은 계속 있어왔으니, 다른 글을 참고하면 좋을 거 같다. 일단 어떻게 만들면 좋을지 간단하게 만들어 보자. Object literal 이 자체로는 유용하진 않지만 객체 리터럴로 간단하게 만들 수 있다. var Person = { name: 'jacob', age: 30, greeting: function () { return `Hi! ${this.name}`; }, }; 유용하지 않은 이유는 이 코드가 불변성을 제공하지 않기 때문에 언제든지 재정의될 수 있기 때문이다. 조금만 더 개선해 보자. const Person = { name: 'jacob', age: 30, greetin..

Typescript 2021.09.19

React로 Threejs 예제 따라 구현하기 2

2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les..

React 2021.01.31

언제 Promise.all을 사용해야 될까?

async await는 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과합니다. 이미 앞에 글에서 봤듯이 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), Async-await 등이 있었다. 그리고 각각은 장점과 단점이 있었고, 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백헬을 만들고, 여러 프라미스가 체인닝되어 선언되었다면 에러를 디버깅하는데 힘들었다. 그에 반해 async await를 간결한 코드와 기존 에러 핸들링 방식이었던 try~catch문을 통해 더 깔끔한 처리(?)가 가능했다. 이런 이야기만 들으면 async-await만 쓸 것같지만, 실제로는 꼭 그렇지 않다. 여기에 대한 이야기를 차근차근 풀어보자. 여러 개의 비동..

Javascript 2020.08.22

CSS-in-JS

프론트엔드 개발자로 있다 보면, 한 번쯤은 들어봤을 용어이다. 사실 CSS도 알고 JS도 이미 알고 있다. 그렇다면 직역을 해보자면, 자바스크립트 안에 있는 CSS 정도일 것이다. 이것도 당연 이해가 된다. 언뜻 보면 어렵지 않아 보이는 이 개념이 왜 궁금한 것일까. 조금 더 깊게 파보자. 기존 CSS 사용 방식에는 어떤 문제가 있었을까? css는 기본적으로 전역으로 사용된다. 그래서 우리는 class name을 통해 CSS를 제어하기 시작했다. 또한 한 엘리먼트(element)에 여러 개의 클래스 이름을 붙였다. 참고로 className은 class와 동일하다. class 이름이라고 부르기가 애매해서 className이라고 적었다. 아래 간단한 예를 보자. 만약 버튼의 배경색을 파란색으로 해달라는 요구..

Javascript 2020.08.19

동기(Synchronous) vs 비동기(asynchronous) 그리고 IOC

사실 이 주제는 자바스크립트에만 종속된 이야기는 아니지만, 대부분의 개념을 자바스크립트를 통해 설명할 것이기 때문에 자바스크립트라는 카테고리에 위치시켰다. 동기(Synchronous) vs 비동기(asynchronous) 동기와 비동기로 작성한 코드의 가장 큰 차이 중 하나는 런타임(runtime)시에 발생하는 지연시간(latency)이다. 모든 코드가 동기적으로(순서대로만) 실행된다면 어떤일이 벌어질까? 내가 만약 메시지를 보낸다고 하면 메시지를 보내고 응답이 오기까지 아무것도 할 수가 없다. 왜냐하면 앞에 작업이 아직 안 끝났기 때문이다. 물론 이런 방식이 전혀 사용이 안되는 것은 아니다. ATM 기계, 키오스크, 단순 단말기 같은 방식은 이런 동기적인 방식을 따르고 있다. 동기적 방식의 장점은 코드..

Javascript 2020.02.01

2부 - 자바스크립트 비동기적 프로그래밍(콜백, 프라미스)

동기적 프로그래밍 동기적 프로그래밍 모델에서는 일(task)은 한 번에 하나씩 일어난다. 그러다 보니 오랫동안 실행되는 동작을 수행하는 함수를 호출했다면, 그 함수가 종료될 때까지 그 프로그램은 중지되게 된다. 이제 1부에 이어, 2부에서는 비동기적 프로그래밍에 대해 알아보자. 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할.. code-masterjung.tistory.com 비동기적 테크닉을 사용해야 하는 경우 사용자의 행동과 관련된 것(입력, 클릭 등) Ajax ..

Javascript 2020.01.28

1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기

함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다. 함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다. const f = function() { // ... }; 위 예제는 결과적으로 함수 선언과 동등하다. 식별자 f가 이 함수를 가리키며, 일반적인 함수 선언과 마찬가지로 f()로 이 함수를 호출할 수 있다. 차이점은 먼저 함수 표현식으로 익명 함수를 만들고 그 함수를 변수에 할당했다는 거다. 익명 함수는 어디든지 쓸 수 있다. 다른 함..

Javascript 2020.01.27

Javascript Object

자바스크립트를 다루고 코딩을 하다 보면, 객체를 다루는 게 얼마나 중요한가에 대해 알게 된다. 나 또한 처음엔 몰랐다. 요즘 들어 갈증이 생기고 예전에 겉핥기 식으로 했던 공부가 근본적인 실력 향상으로 이어지지 않다는 게 느낀다. 그래서 조금 더 자세히 공부해 보자. 우리가 다루는 자바스크립트의 대부분은 객체 타입이다. 당연히 객체를 잘 다뤄야지 자바스크립트를 잘 다룰 수 있을 것이다. What is Object? 나도 그랬지만, 가끔 Object에 대해 오해를 하고 있는 사람이 많은거 같다. object(객체)란, {key: value} 이런 식의 타입만을 의미하지 않는다. 원시 타입(primitive type)을 제외한 타입은 모두 Object 타입이며, Object를 상속 받고 있는 자식들이다. 따..

Javascript 2019.12.31
반응형