허도경, limewhale

이전의 단순한 정보를 제공하던 동적이던 웹 화면은 이제는 더 이상 찾아보기 힘듭니다. 단순 정보만을 제공하는 웹 화면이라 할지라도 사용자의 시선을 끌어들이고 유저의 흥미와 재미요소를 위해서 점점 다양한 애니메이션이 적용된 웹 화면들이 생기고 있습니다. 그럼 웹 화면에 일반적으로 애니메이션 효과를 주기 위해선 어떻게 할까요? html로 화면을 구성할 때 가장 일반적인 방법은 Jquery를 사용하여 animate 효과를 주거나 Css3 속성을 사용하여 애니메이션 효과를 주는 방법입니다. 그럼 우리는 트윈맥스를 사용해야 하는 이유가 뭘까요? GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 Jquery의 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 또한 Jquery보다 가볍고 ..

이 글을 쓰는 저 역시 함수형 프로그래밍에 대하여 들어만 보았을 뿐 실제로 코드를 작성해서 프로젝트에 적용해본 적은 없는 것 같습니다. 그럼에도 프로젝트에서 실제로 사용하기도 하고 어떠한 것을 알고 있음과 없음은 큰 차이가 있고 누군가는 이 글을 읽고 함수형 프로그래밍의 매력을 느껴 새롭게 함수형 프로그래밍을 배우는 계기가 될지도 모릅니다. 📖 프로그래밍 패러다임(Programming Paradigm)] 함수형 프로그래밍이 무엇인지 이해하기 전에 프로그래밍 패러다임에 대해 잠시 알아보려고 합니다. 프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할지 결정하는 역할을 하는데 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각..

자바스크립트 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생하게 되는데 이러한 문제를 대비해서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 적용하였습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화했을 때만 이 변경사항이 활성화되게 해 놓았습니다. 💡 strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. 엄격 모드는 전체 스크립트 또는 부분 함수에 적용 가능합니다. 함수에 적용할 경우에는 "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 사용하면 됩니다..

💡 Prototype vs Class 클래스(Class)라는 것을 한 번쯤은 들어보셨을 겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐고요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이죠. 그렇다면 prototype이란 무엇인가? 사전 검색을 해보면 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있습니다. 자바스크립트에서 함수는 객체입니다. 그러므로 생성자로 사용될 함수도 객체입니다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는..

💡 비동기 프로그래밍(Asynchronous) Callback Promises async & await 👍 Callback 함수란? 다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말합니다. 영어의 의미로 Call(호출) back(뒤에)의 개념으로 이해하면 쉽습니다. 다시 말해 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해 놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수입니다. 파라미터로 함수를 전달받아, 함수의 내부에서 실행됩니다. ✔ 콜백 함수 (Callback Function) 사용 이유 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문입니다. 자바스크립트는 싱글스레드를 사용하는데, 멈춤을 방지해줍니..

📖 이벤트 루프란 무엇인가요? 콜스텍(Call Stack)에서 이벤트가 순차적으로 진행되면 이어서 콜백큐(Callback Queue)에서 하나씩 동작을 Loop 시키는 것을 말합니다. 자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용합니다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미합니다. 그러나 자바스크립트가 사용되는 환경을 생각해보면 우리는 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 예를 들면 브라우저에서 특정 이벤트를 발생시키고 동시에 여러 데이터를 호출해오는 경우가 발생하죠. 이런 환경이 가능하게 하는 것은 네트워크 요청과 같은 동작이 비동기적으로 이루어지기 때문입니다. 💡 이벤트 루프가 왜 필요할까? 자바스..

자바스크립트에서의 실행 컨텍스트는 굉장히 중요한 개념입니다. 실행컨텍스트를 이해하게 되면 Javascript의 동작 원리를 이해할 수 있게 됩니다. 자바스크립트의 동작원리를 이해하게 되면 코드가 에러를 발생하게 되더라도 좀 더 쉽게 예측이 가능해지게 됩니다. 이는 코드를 작성하거나 수정할 때 굉장한 차이점을 가지게 됩니다. 해당 내용이 조금은 어렵게 느껴질 수 있고 광범위하게 느껴질 수도 있지만 천천히 글을 따라서 읽다 보면 충분히 이해할 수 있도록 정리해보겠습니다. 📖 실행 컨텍스트란? 실행 컨텍스트란 코드가 실행되기 위해 필요한 환경 정보들을 모아 놓은 객체입니다. 실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤..

'자바스크립트는 유연한 언어다.' 라는 말을 들어보셨을 거라 생각합니다. 이는 자바스크립트의 언어적 특성 때문인데 지금은 많은 사람들이 자바스크립트의 단점으로 지적하는 부분 중 하나의 특성입니다. (그래서 최근에는 타입스크립트가 주목을 받고 있습니다.) 그럼 왜 자바스크립트가 유연한 언어이냐? 그것은 자바스크립트가 자체적으로 일반적인 언어에선는 에러가 발생되어야 하는 부분에서 에러를 발생시키지 않고 데이터 타입을 변환시키기 때문입니다. 그렇기에 우리는 자바스크립트가 어떤 방식으로 데이터의 형 변환을 하는지 이해하면 많은 도움이 됩니다. 자바스크립트의 형 변환은 크게 두가지 입니다. 자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행하는데 형변환을 시행하는데..

자바스크립트에서 사용하는 call, apply, bind에 대해 알아보려고 합니다. 하지만 그전에 JavaScript에서 this에 대해 우선 먼저 알아보겠습니다. 아니 나는 call, apply, bind가 궁금해서 왔는데 왜 this를 이야기 하는거죠? 라는 의문이 드실 텐데.. 우선 this를 이해하게 되면 부수적으로 call, apply, bind가 연관되어서 이해되기 시작합니다. 그리고 This를 이해하게 되면서 우리를 그렇게 괴롭히던 다양하게 변경되는This(트렌스포머)를 이해할 수 있게 됩니다. 📖 This 너는 누구니? 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. call, apply, bind는 자바스크립트에서 ..

자바스크립트를 사용하다 보면 한 번쯤은 Lodash에 대해 들어보게 됩니다. Lodash는 자바스크립트에서 구현하기 힘든 부분을 보다 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 성능적인 개선 부분에서도 많이 사용하는데 공식문서 가이드 를 참고해도 사용방법을 알 수 있지만 구체적인 예시가 있어야 이해하기가 쉽기에 아래 예제를 통해 사용 방법을 익혀 봅시다. 👏 Collection 배열과 객체 모두 사용 가능한 메서드 💡 filter _.filter( 컬렉션, 검색할 데이터 또는 콜백 함수 ) 컬렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 포함한 컬렉션을 반환합니다. 리스트 검색 조건에 유용합니다. var users = [ { user: 'barney', age: 36, active: tru..