As i wish

JavaScript: The Observers JavaScript: Observers 의존성 패키지 없이도 자바스크립트 기본 내장 옵저버를 소개한 글이 있어서 가져와봤습니다.JS: The Observers이 글에서 소개하고 있는 옵저버는 총 5지인데요.IntersercionObserver: 루트 영역(뷰포트) 와 대상 객체의 겹침을 감시ResizeObs velog.io

간단하게 express를 이용해서 node js 서버를 만들어보겠습니다. 먼저 npm, node 가 설치 되어있다고 가정합니다. 설치 방법은 생각보다 매우 간단합니다. node js 설치 처음 시작하는 Node.js 개발 - 1 - 설치 및 버전 관리(NVM, n) Node.js는 V8이라는 구글에서 개발한 고성능 자바스크립트 엔진으로 빌드된 서버 사이드 개발용 소프트웨어 플랫폼입니다.기본적으로 자바스크립트는 웹 브라우저(클라이언트 측 ... heropy.blog 1. 원하는 폴더 이름을 만듭니다. $ mkdir auto-aoj 2. npm init 을 해줍니다. $ npm init -> 그럼 pacakge.json 이 만들어지는데 여기에 설치한 노드 모듈들이 정리 되는것을 보실 수 있습니다. 3. 그 ..

안녕하세요. 엄티입니다. 지난 포스팅에서는 eslint, prettier를 사용하여 기본적인 JS 문법과 협업 시 코딩 스타일을 맞추는 법에 대하여 포스팅해보았습니다. 이번에는 요즘 대세(?) 대세가 된지는 많이 지났지만 JS의 부족함 점을 여과 없이 채워주고 있는 TypeScript를 적용하는 법에 대하여 포스팅해보겠습니다. CRA (Create-react-app)에 eslint, prettier 적용하기 [React] CRA (Create-react-app) 에 eslint, prettier 적용하기 안녕하세요. 엄티입니다. 자바스크립트는 매우 동적인 언어이기 때문에 개발하기는 쉽지만, 딱히 없는 포맷 때문에 여러 명이서 협업하다 보면 코드 스타일이 안 맞기도 하죠. 이러한 문제들 때문에 eslint..

웹개발을 하게 되면 localStorage를 이용하는 경우가 생깁니다. 특히, 쇼핑몰 같은 경우 장바구니에 담아놓은 상품을 localStorage에 저장해놓는 경우가 종종있죠. 물론 로그아웃시 없애는 것은 당연하고요. 그런데 그냥 어떤 객체를 저장하게 되면 'object Object' 처럼 저장이 됩니다. 그때는 JSON.stringify(object)를 사용해서 저장해주면 객체가 string 형태로 저장됩니다. var object = {1:1}; localStorage.setItem('test-1', object) localStorage.setItem('test-2', JSON.stringify(object)); 저장된 객체를 가져올 때는 string -> object로 다시 변환해줘야하기 때문에 'J..

JavaScript 뿐만 아니라 사실 모든 프로그램을 할 시에 중요한 요소 입니다. 특히 api 통신이 주가 되는 요즘 프로그램에서는요 그로 인해 JavaScript 에서는 콜백, 제네레이터, 프로미스 등 다양한 시도를 하였고 es8 (es2017) 에와서 엄청난 녀석을 도입하였는데 그게 바로 async/await 입니다. 기존 콜백방식을 벗어나 프로미스를 통한 방식으로 많은 부분을 해결 하려 했지만 여전히 콜백 지옥을 벗어나지 못하였고 제네레이터 역시 yield 라는 것을 새로 배우고 이터레이터 패턴을 익혀야 한다는 점에서 상당한 벽이 있었죠. 그에 반에 async/await는 정말 직관적입니다. 그럼 간단한 코드를 보겠습니다. function test() { return new Promise((res..

간단하게 자바스크립트에서 많이 사용하는 splice, slice, split 에 대하여 알아보겠습니다. splice - 기존 배열을 변형하고 새로운 배열을 반환합니다. - splice(start, deleteCount, items...) - 배열의 start 부터 deleteCount 만큼 요소를 제거한 다음 그 자리에 items 를 삽입한다. const array = [1, 2, 3, 4, 5, 6]; array.splice(0, 4); // [1, 2, 3, 4] array //[5, 6] const array = [1, 2, 3, 4, 5, 6]; array.splice(4, 1) // [5] array // [1, 2, 3, 4, 6] const array = [1, 2, 3, 4, 5, 6]; ..

클로저란? 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 무슨말인지 모르겠다.... MDN web docs를 보면 조금 이해가 편하다. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하기 위해서는 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. developer.mozilla.org function init() { var name = "Mozilla"; // name은 init 에 의해 생성된 지역변수다 function displayName() { // displayName() 은 내부 함수이며,클로저다 alert(name); // 부모 함수에서 선언된 변수를 사용한다 } displayName(); } init(..

안녕하세요. 오늘은 JS에 기본 개념인 scope, hoisting에 대하여 포스팅 해보겠습니다. JS 강좌를 듣고 있으면 scope, hoisting, closure 등등 알수 없는 말들이 많은데요. 개념을 확실히 잡고 가야할듯 합니다. Scope (유효 범위) 변수나 함수에 대한 유효 범위입니다. 즉, 변수와 매개변수의 접근성과 생존기간을 의미 합니다. - Global Scope (전역 스코프) 말 그대로 전역 변수 라고 생각하면 쉽겠네요. var a = 'text'; function foo() { console.log(a); } foo(); // text console.log(a); // text 이렇게 선언하면 스코프가 코드 모든곳이 됩니다. 심지어 선언한 함수 안에서도요. - Local Scop..

안녕하세요. 엄티 입니다. 오늘은 You don't know JS에 크게 2장으로 이루어진 챕터 중 2 장에 1번 '비동기성: 지금과 나중'에 대하여 포스팅해보겠습니다. 저의 포스팅은 한빛미디어에서 나온 'You don't know JS'를 기준으로 포스팅합니다. 일단 프로그래밍 비동기적 요소가 많이 포함되어있습니다. 실제 실무를 접하더라도 자바스크립트뿐만 아니라 파이썬, 자바 도 마찬가지로 비동기적 요소가 들어가 있죠. 예를 들어 서버에 REST ful API, Database 접근, 사용자 입력, AJAX 등 대부분이 다 비동기적 요소로 구성되어 있기 때문에 비동기적 요소를 알아야 합니다. 1. 프로그램 덩이 자바스크립트 프로그램은. js 파일 하나로도 작성할 수 있지만 보통은 여러 개의 덩이, 곧 ..

You don't know JS에 PART 1에 마지막 장인 '작동 위임'에 대하여 포스팅해보겠습니다. 지금 까지 [[Prototype]]에 대하여 공부하였고 '클래스'나 '상속'의 맥락에서 [[Prototype]] 이 적절하지 않은 지 공부했습니다. 따라서 [[Prototype]] 은 자바스크립트에서 여타 다른 클래스 지향 언어들과 달리 한 객체가 다른 객체를 참조하기 위한 내부 링크라고 정의할 수 있죠. 또한 참조하는 객체에 존재하지 않는 프로퍼티/메서드를 참조하려고 할 경우 엔진은 [[Prototype]] 링크를 따라가며 연결된 객체마다 프로퍼티/메서드가 있는지 뒤져보고 발견되지 않으면 다음 [[Prototype]] 링크에 연결된 객체를 타고 이동하는데 이것을 '프로토타입 연쇄'라고도 정의하였습니다..