As i wish

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

for...in, for...of 차이 for ...in, for ...of 차이 자주 헷갈리는게 있어서 한번 포스팅해봅니다.바로 반복문 중에 ES6 부터 추가 된for ...infor ...of입니다.둘다 반복문으로 사용 되는데요 하나는 객체를 탐색하고 나머지 하나는 배열 요소를 탐색합니다.위처럼 객체의 프로퍼티가 나오는것을 확인해 볼 수 있습니다 velog.io

Velog 무한 스크롤링 사용 무한 스크롤링 (Interaction Observer) - 퍼옴 처음으로 velog에 글을 써보네요. 오늘은 글을 보던 중에 무한스크롤을 구현하는 법이 있어서 가져와봤습니다. 처음 글인데 퍼옴이라서 조금 아쉽긴 한데 그래도 좋은글이고 저장해 놓기 위함이니 제 개인적인 기억을 위함으로서는 좋은 포스팅이지 아닐까 싶습니다. Inter velog.io

함수형 프로그래밍에 대하여 접하면 대부분 사람들은 처음 배우는것이고 용어들도 많이 헷갈려한다. 저 또한 많이 헷갈렸는 데 그 중 Curry (커링), Partial (부분 적용?) 이 상당히 헷갈렸다. 그래서 잘 정리된 글 두개를 가져왔는데 하나는 영문이고 하나는 국문이다. Javascript - Currying VS Partial Application Javascript- Currying VS Partial Application A lot of people get confused in between currying and partial application and many of us do not know what, where and when we should use… towardsdatascience...

JavaScript clean code 아주 좋은 분께서 Clean Code에 책을 JavaScript 언어에 적용시켜서 글을 써주셨는데 저도 가끔 읽고 있어서 찾기 쉽게 포스팅을 해놨습니다. 혹시 문제가 될 시 삭제하겠습니다. 이 글은 소프트웨어 방법론에 관한 책들 중 Robert C. Martin's의 책인 Clean Code에 있는 내용을 JavaScript 언어에 적용시켜 적은 글 입니다. 이 글은 단순히 Style Guide가 아니라 JavaScript로 코드를 작성할때 읽기 쉽고, 재사용 가능하며 리팩토링 가능하게끔 작성하도록 도와줍니다. 여기 있는 모든 원칙이 엄격히 지켜져야하는 것은 아니며, 보편적으로 통용되는 원칙은 아닙니다. 이것들은 지침일 뿐이며 Clean Code의 저자가 수년간 경..

자바스크립트는 배열의 내장 함수로 정렬해 주는 함수를 가지고 있습니다. 이를 sort()라고 하는데요 이에 대한 포스팅을 해보겠습니다. Array.prototype.sort() Array.prototype.sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. developer.mozilla.org var a = [2, 3, 1, 2, 5, 6]; a.sort() // [1, 2, 3, 4, 5, 6] 간단하게는 이렇게 사용 됩니다. 그러나 여기서 몇가지 문제가 발생합니다. var a = [1, 10000, 100, 3, 5, 4] a.sort() // ..

웹개발을 하게 되면 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(..