허도경, limewhale

프론트 개발에 관해서 프로그래밍을 하다 보면 어디선가는 반드시 마주치게 되는 단어가 있습니다. 바로 웹팩, 바벨, 폴리필입니다. 각 단어의 의미와 역할을 정확히 알고 있다면 상관없지만 어렴풋이 기능이 다르다고만 생각했거나 각 기능에 대해 명확히 설명할 수 없다면 이 글을 읽으면 많은 도움이 될 거 같습니다. 참고로 웹팩, 바벨, 폴리필은 프론트 면접에서도 자주 물어보는 용어입니다. 📖 폴리필(Polyfill) 폴리필을 사전에서 찾아보면 충전솜이라는 의미를 가지고 있습니다. 베개나 이불의 솜이 부족하면 우리는 충전 솜을 이용하여 부족한 부분을 채우는 역할을 합니다. 폴리필의 역할은 사전 의미처럼 부족한 부분을 채워주는 역할을 합니다. 그러면 부족한 것은 무엇이며 무엇을 채워주는가?라는 의문이 들 수 있습니..

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

Api를 통해서 받아온 사용자의 데이터를 노출할 때 정보보호를 위해 특정 데이터는 전체를 보여주지 않고 일부를 가려서(Masking) 보여줘야 하는 경우가 발생합니다. 가장 좋은 방법은 Back-End서버에서 데이터가 가공처리되어 전달하고 Front에서는 전달받은 데이터를 화면에 그대로 노출시켜 주는 게 가장 좋은 방법이지만 상황에 따라서 Front에서 데이터를 가공해야 할 경우도 발생합니다. 이럴 때 공통 마스킹 Function을 만들어서 사용하면 굉장히 유용하게 사용할 수 있습니다. 💡 마스킹 처리 함수 /******************************************** * 공통 마스킹 * checkNull : 데이터 Check => 공백 | undefined | null * * ※) ..

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

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

디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기보다는 프로그래밍 기법 중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 최적화를 위해 사용되곤 합니다. 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법입니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포..