You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕
자바스크립트 비동기와 이벤트 루프 브라우저의 멀티 스레드로 작업을 동시에 Javascript는 싱글 스레드 언어라고 들어본 적이 있을 것이다. '싱글' 스레드라 한 번에 하나의 작업만 수행이 가능하다. 반면 Java 나 Python은 멀티 스레드를 지원하여 원하는 코드 로직을 동시에 수행 시키는 멀티 작업이 가능하다. 그런데 웹 애플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다. 만일 싱글 스레드로 브라우저 동작이 한번에 하나씩 수행하게 되면, 우리가 파일을 다운로드 받을 동안 브라우저는 파일을 다 받을 때까지 웹서핑도 못하고 멈춰 대기해야 할 것이다. 따라서 파일 다운, 네트워크 요청, 타이머, 애니메이션 이러한 오래 걸리고 반복적인 작업들은 자바..
![[JS] 📚 재미있게 확실히 이해하는 null / undefined / NaN 차이](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLD5ur%2Fbtr6N3pilkD%2FT3BwOSehs0gRIdKG1pjhQ0%2Fimg.jpg)
[JS] 📚 재미있게 확실히 이해하는 null / undefined / NaN 차이
자바스크립트의 요상한 falsy 값 자바스크립트에서 null, NaN, undefined는 다른 프로그래밍 언어에는 없는 자바스크립트에만 있는 요상한 falsy 값으로서, 이들은 모두 값이 없음(falsy)을 나타내는 특별한 값이다. 그래서 이들은 조건문에서 false로 평가되어 진다. 값 Boolean 문맥 Number 문맥 String 문맥 null false 0 "null" undefined false NaN "undefined" NaN false NaN "NaN" Infinity true Infinity "Infinity" 하지만 대부분 null, NaN, undefined 간의 의미의 구체적인 차이에 대해 애매모호하게 알거나 정확히 모르는 사람이 꽤 많다. 따라서 이번 포스팅에는 null, Na..
⚙️ 난잡한 if-else 문 리팩토링 기법 (가독성 & 성능↑)
자바스크립트 조건문 리팩토링 아무리 고급적인 프로그래밍 문법, 기법들을 익히고 그걸 활용하더라도, 자신의 코드에서 가장 많이 비중을 차지하는 문법은 아마 조건문 일 것이다. 프로그램은 반복문과 조건문만 있으면 돌아간다라는 말이 있듯이 조건 분기문은 프로그래밍의 기본이기도 하다. 그런데 이 if-else 분기문을 생각없이 지나치게 중첩하고 생각없이 코드를 나열한다면 가독성이 크게 떨어진다는 문제점이 생기게 된다. 예를들어 if문 안에 if가 있고 그 else문 안에 if~else 안의 if 등등.. 이렇게 코드를 짜듯이 말이다. 농담 삼아 아래와 같이 코드가 마치 아됴겐을 맞은것과 같은 모습이 되어 버릴지도 모른다. 물론 컴퓨터 입장에선 코드 로직상 문제는 없을텐지만 이를 나중에 사람이 유지보수 하기 위해..
📚 console.log는 이제 그만 ❗ - 다양한 콘솔 API 모음
자바스크립트 Console API 자바스크립트의 코드의 결과값을 출력하거나 테스트를 하기 위해 console.log() 함수를 정말 많이 써왔을 것이다. 이때 console.log() 함수는 console 이라는 객체 안의 log() 라는 메서드를 불러다가 쓴 것이다. 즉, console 객체 내에는 log 뿐만 아니라 여러 기능을 하는 콘솔 관련 메서드들이 있는 것이다. 이 콘솔 메서드들은 log 보다 훨씬더 강력하고 다채로운 기능을 제공한다. 다만 익숙치 않아서 지금까지 log 만 주궁장창 써왔던 것이다. 지금 부터 강력한 자바스크립트 콘솔 API 유용한 기능에 대해 알아보자. console.log("콘솔 로그") console.info("콘솔 정보") console.debug("콘솔 디버그") co..
📚 자바스크립트 Proxy & Reflect 고급 기법
JavaScript Proxy 객체 프록시(Proxy)의 사전적 뜻은 '대리인', '대리'라는 뜻이다. 서버를 다뤄본 독자분들이라면 프록시 서버에 대해 질리도록 들어봤을 것이다. 프록시 서버는 클라이언트와 본 서버 중간에 위치하여 캐싱, 분산 등 여러 부가 기능을 수행하는 대리자 역할로서 정말 유용하게 다뤄지는 개념이다. 심지어 디자인 패턴에서는 따로 프록시 패턴(Proxy Pattern) 으로 코드 패턴을 정의하여 소개하기도 한다. 이 프록시 코드 패턴은 실무에서 정말 빈번하게 다뤄지기 때문에, 이에 각각 프로그래밍 언어에서는 별도의 프록시 객체를 만들어서 아예 개발자에게 API로 제공해준다. 대표적으로 자바(Java) 진영의 Dynamic Proxy 를 들 수 있으며, 자바스크립트(JavaScript..
📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제
정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은 값을 입력하면 정규표현식에 의해 필터링되어 걸러져 경고창을 띄우는 화면을 본적이 있을 것이다. 이처럼 반복문과 조건문을 사용해야 할것같은 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있으며 주로 다음과 같은 상황에서 굉장히 유용하게 사용된다. 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하..
📚 JavaScript 배열 고차 함수 총정리
자바스크립트 배열 고차함수 여러분이 자바스크립트를 배우는 중이라면, 고차 함수(Higher-Order Function) 라는 용어를 얼핏 들어본 적이 있을 것이다. 고차 함수란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 일컫는다. 요즘 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성이기도 하다. 함수형 프로그래밍이란? 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다. 함수형 프로그래밍에서, 개발자는 함수라는 용어 하에서 생각하고 코딩하게 된다. 이번 시간에는 자바스크립트에서 광범위 하게 사용되는 배열의 고차함수를 총정리 해보..
📚 Promise.allSettled 와 Promise.all 비교 정리
Promise.all 의 문제점 Promise.all([ promise1, promise2, ... ]) 의 형태로 사용되며, 배열로 받은 모든 프로미스가 fulfill 된 이후, 모든 프로미스의 반환 값을 배열에 넣어 반환한다. 그런데 만약 배열에 있는 프로미스 중 하나라도 reject가 호출된다면, 성공한 프로미스 응답은 무시된채로 그냥 바로 catch로 빠져버리게 된다. const promise1 = new Promise((resolve) => { setTimeout(() => { resolve(1); }, 3000); }); const promise2 = new Promise((resolve) => { setTimeout(() => { resolve(2); }, 2000); }); const pr..
📚 자바스크립트 클래스 문법 - 완벽 가이드
ES6 클래스 문법은 좀더 JAVA스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5까지 자바스크립트에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현해왔었는데 ES6 버젼에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. 다음은 프로토타입 문법과 클래스 문법의 간단한 차이이다. 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조라는 점만 기억하면 된다. ES5 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.age = age; } Person.prototype.in..
![[JS] 🚀 자바스크립트 최신 문법 정리 - ECMAScript 2022](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc9W0dd%2FbtrHewJXbk5%2F9nvs1CSssJ4OgR7fwyc4Jk%2Fimg.jpg)
[JS] 🚀 자바스크립트 최신 문법 정리 - ECMAScript 2022
JavaScript 최신 문법 정리 (ES6 ~ ES13) 자바스크립트의 혁명이라 할수 있는 ECMASript 2015(ES6) 이후 추가된 자바스크립트 최신 문법 중 자주 이용할것 같은 기능들을 추려 정리해본다. 정말 편한 기능들이 많으니 자바나 C처럼 생코딩으로 구현하려 하지말고 단축문법으로 개발시간을 확 줄여보자! ...들어가기에 앞서, 💩 이모티콘은 옛날 못생긴 문법을 의미하는거고, ✨ 이모티콘은 최신 트렌드 문법을 의미하는 것이다. 편리한 연산자 최신 문법 지수 연산자 아주 간단하게 곱셈 기호를 두번쓰면 제곱으로 처리 2**10 // 1024 Numeric separators 1000000000과 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바(_)로 단위를 구분할 수 있는 표현이 허용..
📚 && 논리 연산자로 if문 단축하기
&& 연산자 조건문 표현 자바스크립트의 &&(AND) 연산자는 양쪽 피연산자가 모두 true일 때 true를 반환하고, 그렇지 않을 때는 false를 반환한다. 이 특성을 이용하여 자바스크립트의 if문을 한줄로 단축시킬 수 있다. if (num !== 0) { console.log('num is not zero'); } num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한줄로 단축 num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이때는 첫번째 식이 false 일때만 다음 식이 실행된다 && 연산자 와 (소괄호) 표현 그런데 만일 console.log() 와 같은 함수 호출..
![[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJg1v4%2FbtrgWDP1xj8%2FHzvrvrotIm0OzG3aWCmOaK%2Fimg.jpg)
[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리
자바스크립트 모듈 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈 export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. export에는 Named exports와 Default exports 두가지 방법이 있습니다. // 변수, 함수 선언식을 하..
