티스토리

Jacob's Development Blog

검색하기

블로그 홈

Jacob's Development Blog

code-masterjung.tistory.com/m

제이콥의 개발 블로그

구독자: 29

방명록 방문하기

주요 글 목록

[Javascript] 프로토타입(Prototype) Prototype 프로토 타입이란 클래스나 객체의 내용 복사 없이도 상속의 효과를 구현할 수 있게 해주는 방법이다. 프로토타입은 직접 참조 당하지 않고 프로토타입 링크(__proto__)를 통해 부모의 프로토타입 링크만 참조한다. 프로토 타입 속성(property's)의 값은 객체이며, 프로토타입 체인 아래에 있는 객체에 상속되기를 원하는 속성과 메서드를 저장하기 위한 공간인 객체이다. 그래서 Object.is(), Object.keys()같은 메서드들은 프로토타입 객체 안에 정의되지 않았기 때문에 Object.prototype에서 상속되는 객체 인스턴스나 객체 유형(object type)에 의해 상속되지 않는다. 프로토타입 객체에는 속성과 메서드를 추가할 수 있으며, 원하는 객체로 완전히 교체할 수도 .. 공감수 1 댓글수 0 2022. 1. 1.
this, arrow-function this 자바스크립트의 함수에는 메서드가 호출된 개체를 참조하는 this라는 특수한 변수가 있다. this의 값은 함수 호출에 따라 동적으로 변하며, 이 때문에 작은 문제 상황에 직면하게 된다. 함수는 정적 범위(static/lexical scope)와 동적 범위의 두 가지 범위(scope)에서 실행된다. '정적 범위'는 함수를 둘러싸는 범위이고, '동적 범위'는 함수를 호출한 범위이다. 자바스크립트에서 함수는 생성자, 메서드(객체의 일부), 함수(서브 루틴, subroutines)의 역할을 하는데, 함수가 서브루틴(이름이 겹쳐 아래부터는 서브루틴으로 명명)의 역할을 할 때 this가 동적으로 변해 문제가 생긴다. 서브루틴이 객체에 대해 호출되지 않기 때문에 this의 값은 strict 모드에서 정의되지.. 공감수 1 댓글수 0 2021. 12. 31.
호이스팅(hoisting) 호이스팅(hoisting) 호이스팅은 선언한 함수와 변수를 자바스크립트가 해석할 때 가장 상단에 있는 것처럼 인식하는 것을 말한다. 좀 더 자세하게 말하자면 자바스크립트는 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. 따라서 함수와 변수(var)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보이게 되는데 이를 호이스팅이라고 한다. 함수 전체가 호이스팅 된다. var로 변수 선언시, 선언은 호이스팅되지만, 할당을 호이스팅 되지 않는다. 변수 스코프는 함수이며, 함수만이 새 스코프를 도입할 수 있다. 호이스팅을 이해하기 위한 사전 지식들 호이스팅을 이해하기 위해 조금 축약하여 개념만 쉽게 이해해 보자. 스코프(scope) 스코프란 그 변수나 함수에 접근할 수.. 공감수 1 댓글수 0 2021. 12. 30.
Object를 만드는 3가지 방법 객체 객체는 외부에 드러나는 행위(behavior)와 행위를 지원하기 위한 상태(state)를 묶어주는 편리한 단위이다. 만약 객체가 없다고 생각해 본다면, 하나의 프로그램의 상태가 마구잡이로 섞여서 프로그램을 수정하기도 어렵고 이해하기도 어렵기 때문에 유지보수도 힘들 것이다. 하지만 객체를 사용하여 참조할 수 있는 상태의 네임스페이스가 훨씬 작아지므로, 특정 변화에 의해 상태가 어떤 영향을 받을지 분석하기 더 쉬워진다. 또한 객체의 목표 중 하나는 저장소를 관리하는 것이다. 각 객체는 조그마한 메모리를 갖고 있는 별도의 작은 컴퓨터라 볼 수 있다. 1. 객체 리터럴 가장 접하기 쉽고 일반적으로 객체를 만드는 방법이다. const person = {name: 'jacob', age: 20} 1-1. 새로.. 공감수 1 댓글수 0 2021. 9. 20.
이젠 Modern JavaScript로 publish 하자 Modern Browser 흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다. Modern JavaScript 모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다. Classes (ES2015) Arrow functions (ES2015) .. 공감수 2 댓글수 0 2021. 5. 22.
리팩터링(Refactoring)을 하는 이유 나는 왜 갑자기 리팩터링에 관심을 가졌을까? 최근 실무를 하다가 고객이 보는 정산서 로직을 리팩터링 해야 되는 경우가 생겼다. 이것이 필요했던 가장 큰 이유는 첫째는 성능 이슈가 컸다. 기존에 사용하던 레거시 코드의 경우 처음에는 많은 계산 로직이 없었으나, 점점 요구 사항과 세금 관련 이슈가 많이 생기다 보니, 한 가지 서비스가 정말 많은 것들을 판단하고 계산하는 로직이 되어버린 것이다. 두 번째 이유는 첫 번째 이유로 인해 이미 너무 복잡해져 버리고 비대해져 버린 서비스 로직의 문제였다. 평소 리팩터링을 자주하긴 했었다. 우리는 항상 보이스카우트('지나간 자리는 지금보다 깨끗이 만든다')라는 원칙을 가지고 있고, 나는 그 누구보다 그 원칙을 따랐었다. 그래서 기존 로직을 약간 수정하거나 정말 작은 규.. 공감수 3 댓글수 0 2020. 9. 5.
언제 Promise.all을 사용해야 될까? async await는 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과합니다. 이미 앞에 글에서 봤듯이 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), Async-await 등이 있었다. 그리고 각각은 장점과 단점이 있었고, 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백헬을 만들고, 여러 프라미스가 체인닝되어 선언되었다면 에러를 디버깅하는데 힘들었다. 그에 반해 async await를 간결한 코드와 기존 에러 핸들링 방식이었던 try~catch문을 통해 더 깔끔한 처리(?)가 가능했다. 이런 이야기만 들으면 async-await만 쓸 것같지만, 실제로는 꼭 그렇지 않다. 여기에 대한 이야기를 차근차근 풀어보자. 여러 개의 비동.. 공감수 18 댓글수 1 2020. 8. 22.
CSS-in-JS 프론트엔드 개발자로 있다 보면, 한 번쯤은 들어봤을 용어이다. 사실 CSS도 알고 JS도 이미 알고 있다. 그렇다면 직역을 해보자면, 자바스크립트 안에 있는 CSS 정도일 것이다. 이것도 당연 이해가 된다. 언뜻 보면 어렵지 않아 보이는 이 개념이 왜 궁금한 것일까. 조금 더 깊게 파보자. 기존 CSS 사용 방식에는 어떤 문제가 있었을까? css는 기본적으로 전역으로 사용된다. 그래서 우리는 class name을 통해 CSS를 제어하기 시작했다. 또한 한 엘리먼트(element)에 여러 개의 클래스 이름을 붙였다. 참고로 className은 class와 동일하다. class 이름이라고 부르기가 애매해서 className이라고 적었다. 아래 간단한 예를 보자. 만약 버튼의 배경색을 파란색으로 해달라는 요구.. 공감수 2 댓글수 0 2020. 8. 19.
webpack 뭐하는 걸까? 프론트엔드 개발자로 있다 보면, 웹팩(webpack)에 대해서 이해했냐는 질문 혹은 웹팩에 대한 이해도가 있는 사람을 모집한다는 공고를 자주 접하게 된다. CRA로 create-react-app을 통해 프로젝트를 하나라도 만들어 봤다면, 이미 사용해본 것이다(물론 웹팩이 react에 종속적인 개념은 아니다). 자주는 접하지만, 자주 까먹는... 그래서 이번 글에서는 모듈 번들러인 웹팩(webpack)에서 대한 내용이다. 그전에 먼저 모듈 번들러가 무엇인지 알아보자. What's module bundler? 모듈 번들러(module bundler)란, 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 묶어주는(=번들링 해주는) 도구이다. 예를 들어 아래와 같이 자바스크립트 파일로 구.. 공감수 1 댓글수 0 2020. 8. 18.
이벤트, 그리고 버블링과 캡처링 이벤트란? events are actions or occurrences that happen in the system you are programming. 이벤트는 프로그래밍 중인 시스템에서 발생하는 동작(actions) 또는 발생(occurrences)이며, 동기식 혹은 비동기식으로 전달된다. 시스템은 이벤트가 발생할 때 어떤 종류의 신호를 생성(또는 발동)하고 어떤 종류의 동작이 수행될 수 있는 메커니즘을 제공한다. 이벤트가 발생하면 자동으로 일부 코드가 실행되며 동작한다. 이벤트 핸들러 이벤트 핸들러(event handler)란, 이벤트가 발생할 때 실행되는 함수를 말하며, 이벤트 리스너(event listeners)라고도 불린다. 하지만 엄밀히 말하면 이벤트 리스너는 이벤트 발생을 수신하며, 이벤.. 공감수 1 댓글수 0 2020. 8. 13.
동기(Synchronous) vs 비동기(asynchronous) 그리고 IOC 사실 이 주제는 자바스크립트에만 종속된 이야기는 아니지만, 대부분의 개념을 자바스크립트를 통해 설명할 것이기 때문에 자바스크립트라는 카테고리에 위치시켰다. 동기(Synchronous) vs 비동기(asynchronous) 동기와 비동기로 작성한 코드의 가장 큰 차이 중 하나는 런타임(runtime)시에 발생하는 지연시간(latency)이다. 모든 코드가 동기적으로(순서대로만) 실행된다면 어떤일이 벌어질까? 내가 만약 메시지를 보낸다고 하면 메시지를 보내고 응답이 오기까지 아무것도 할 수가 없다. 왜냐하면 앞에 작업이 아직 안 끝났기 때문이다. 물론 이런 방식이 전혀 사용이 안되는 것은 아니다. ATM 기계, 키오스크, 단순 단말기 같은 방식은 이런 동기적인 방식을 따르고 있다. 동기적 방식의 장점은 코드.. 공감수 1 댓글수 0 2020. 2. 1.
2부 - 자바스크립트 비동기적 프로그래밍(콜백, 프라미스) 동기적 프로그래밍 동기적 프로그래밍 모델에서는 일(task)은 한 번에 하나씩 일어난다. 그러다 보니 오랫동안 실행되는 동작을 수행하는 함수를 호출했다면, 그 함수가 종료될 때까지 그 프로그램은 중지되게 된다. 이제 1부에 이어, 2부에서는 비동기적 프로그래밍에 대해 알아보자. 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할.. code-masterjung.tistory.com 비동기적 테크닉을 사용해야 하는 경우 사용자의 행동과 관련된 것(입력, 클릭 등) Ajax .. 공감수 2 댓글수 0 2020. 1. 28.
1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다. 함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다. const f = function() { // ... }; 위 예제는 결과적으로 함수 선언과 동등하다. 식별자 f가 이 함수를 가리키며, 일반적인 함수 선언과 마찬가지로 f()로 이 함수를 호출할 수 있다. 차이점은 먼저 함수 표현식으로 익명 함수를 만들고 그 함수를 변수에 할당했다는 거다. 익명 함수는 어디든지 쓸 수 있다. 다른 함.. 공감수 1 댓글수 0 2020. 1. 27.
자바스크립트 call, apply, bind 자바스크립트에서는 일반적으로 this를 사용하는 방법 이외에 함수를 어디서, 어떻게 호출했는지 관계없이 this가 무엇인지 지정할 수 있다. 여러가지 방법이 있겠지만, 일단 call 메서드부터 살펴보자. call(thisArg[, arg1[, arg2[, ...]]]) 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. 여기서 첫 번째 매개변수인 thisArg는 this로 사용할 값이고, 매개 변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. 바로 예제를 확인해 보자. - 매개변수 없이 greet()를 호출한 경우, 전역 변술로 name이 존재하지 않기 때문에 undefined를 반환한다. - 매개변수로 call() .. 공감수 2 댓글수 0 2020. 1. 26.
Javascript Object 자바스크립트를 다루고 코딩을 하다 보면, 객체를 다루는 게 얼마나 중요한가에 대해 알게 된다. 나 또한 처음엔 몰랐다. 요즘 들어 갈증이 생기고 예전에 겉핥기 식으로 했던 공부가 근본적인 실력 향상으로 이어지지 않다는 게 느낀다. 그래서 조금 더 자세히 공부해 보자. 우리가 다루는 자바스크립트의 대부분은 객체 타입이다. 당연히 객체를 잘 다뤄야지 자바스크립트를 잘 다룰 수 있을 것이다. What is Object? 나도 그랬지만, 가끔 Object에 대해 오해를 하고 있는 사람이 많은거 같다. object(객체)란, {key: value} 이런 식의 타입만을 의미하지 않는다. 원시 타입(primitive type)을 제외한 타입은 모두 Object 타입이며, Object를 상속 받고 있는 자식들이다. 따.. 공감수 1 댓글수 0 2019. 12. 31.
Javascript Function 자바스크립트의 함수에 대한 주제가 많이 있으나, 오늘은 간단하게만 정리해보려고 한다. ECMAScript 5 까지의 함수 함수는 new 연산자와 함께 호출하거나 new 없이 호출하는 방법이 있다. 위 코드에서 보다시피, new 연산자와 함께 호출하면 함수 내부의 this 값은 새로운 하나의 객체이고 그 객체를 반환한다. 반면 new 없이 호출하면 undefined를 반환한다. 그럼 사용자가 new 연산자를 이용하도록 어떻게 강제했을까? 가장 흔한 방법은 instanceof를 사용하는 거다. // instanceof Syntax object instanceof constructor // object: 판별할 객체 // constructor: 판별한 함수 function Person(name) { if (t.. 공감수 2 댓글수 0 2019. 12. 30.
자바스크립트 - 스코프(Scope)와 메모리 모델 (입사 초기에 사내 위키에 올렸던 내용이나, 지식 공유 차원에서 쉽게 정리하여 다시 공유한다.) 바인딩(binding) 일반적으로 A를 B에 명시적 또는 암시적인 선언에 의해 매핑하는 것. 프로그래밍에서는 개체(데이터와 코드)들을 연결(할당)하는 것이라고 생각하면 된다. 대부분의 C 기반 언어에서 변수는 선언한 위치에서 바로 생성되지만, 자바스크립트의 경우 변수 선언 방식에 따라 변수 생성 위치가 다르다. 동적 바인딩 런타임(runtime) 시에 발생하며, 실행 중인 경우 변경될 수도 있다. 정적 바인딩 컴파일시에 발생한다. 다시 말해 프로그램이 메모리에 로드될 때, 메모리 셀에 바인딩된다. Scope 자바스크립트 프로그래밍에서 가장 까다로운 부분이 아닐까 싶다. 나 역시 자바스크립트를 맨 처음 배울 때.. 공감수 1 댓글수 0 2019. 12. 25.
[Javascript] 평가 전략 - Call by value와 Call by reference 7 Data Types call by value와 call by reference에 대해 다루기 전에 7가지 데이터 유형을 먼저 설명하려고 한다. primitive data type - number, string, boolean, undefined, null Objects - Array, Object 여기서 중요한 점은 primitive data type은 값으로 전달되고, Objects는 참조로 전달된다. 여기서 값으로 전달된다(Call by value)는 의미는 사본을 만드는 것과 동일하다고 생각하며 되며, 좀 더 정확하게는 다른 메모리 위치에 저장된다. 아래 예제를 보자. let name = 'jacob'; let newName = name; name = 'master jung'; console.l.. 공감수 5 댓글수 2 2019. 12. 12.
[Javascript] 자바스크립트 기본기 다지기(ES6+) 자바스크립트 개요(ES6+) 자바스크립트(Javascript)는 일급 함수를 지원하는 언어입니다. 또한 동적 언어이며 HTML과 CSS와 함께 웹에서 가장 굴직한 줄기를 차지하고 있습니다. 참고로 Java와는 전혀 다른 언어입니다. 그런데 자바스크립트를 공부하다보면 ECMAScript, ES6, ES6+, ES7 ... 등의 말을 보게 됩니다. ES는 ECMAScript의 줄임말이며 뒤에는 버전이라고 생각하시면 됩니다(물론 ES1부터 다 있습니다). ECMAScript는 자바스크립트의 표준이며 현재도 계속 ECMA International 표준화 기구에 의해 버전이 업데이트 되고 있습니다. 그리고 ECMAScript2015를 ES6라고 하며, ES6 이후 버전을 통칭하여 "ES6+" 라고 합니다. 아래에.. 공감수 1 댓글수 0 2019. 12. 8.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.