You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕
자바스크립트 비동기와 이벤트 루프 브라우저의 멀티 스레드로 작업을 동시에 Javascript는 싱글 스레드 언어라고 들어본 적이 있을 것이다. '싱글' 스레드라 한 번에 하나의 작업만 수행이 가능하다. 반면 Java 나 Python은 멀티 스레드를 지원하여 원하는 코드 로직을 동시에 수행 시키는 멀티 작업이 가능하다. 그런데 웹 애플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다. 만일 싱글 스레드로 브라우저 동작이 한번에 하나씩 수행하게 되면, 우리가 파일을 다운로드 받을 동안 브라우저는 파일을 다 받을 때까지 웹서핑도 못하고 멈춰 대기해야 할 것이다. 따라서 파일 다운, 네트워크 요청, 타이머, 애니메이션 이러한 오래 걸리고 반복적인 작업들은 자바..
🌐 자바스크립트의 핵심 '비동기' 완벽 이해 ❗
자바스크립트의 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식이라고 할 수 있다. 이러한 코드 순차 실행을 동기(Synchronous) 라고 부른다. 그런데 동기 방식은 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 따라서 자바스크립트로 여러 ..
🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드
자바스크립트 웹 애니메이션 웹페이지의 애니메이션을 구현할때 CSS의 animatoin , transition , transform 속성을 통해 구현할 수도 있지만, 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해 Javascript와 함께 사용하여 스타일을 변화시키도 한다. 예를들어 특정 영역을 클릭하거나 웹페이지를 스크롤할때 변화무쌍한 애니메이션 작업들이 그러하다. 그래서 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나 스타일 크기를 변화시키고, 세밀한 조작이 필요한 애니메이션은 자바스크립트로 스타일 속성을 변경 시키는 편이다. 하지만 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 (특히 모바일에서) 성능이 좋지 않다. 따라서 어쩔수 없이 자바스크립트와의 상호 협력이 필요할 ..
🌐 한방에 이해하는 attribute 와 property 속성 차이
Attribute vs Property 정의 차이 attribute 와 property 를 한국어로 번역하자면 둘다 '속성' 이라는 의미를 가지고 있다. 단순히 단어명이 같은 것을 떠나서 실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가리킨다. 이처럼 어트리뷰트와 프로퍼티의 둘은 같은 의미를 내포하지만, 웹 프로그래밍에서 이 둘은 구체적인 차이점이 존재 한다. HTML의 Attribute 어트리뷰트는 HTML의 속성이다. 엘리먼트에 아이디나 클래스와 같은 추가적인 정보를 일컫는다고 보면 된다 DOM의 Property 프로퍼티는 DOM의 속성이다. 즉, html의 attribute를 DOM 내에서 대신해서 표현이라고 보면 된다. 위 트리는 태그를 DOM 으로 표현한 것인데 위에서 clas..
![[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..
🔊 웹에서 음악 객체(Audio) 다루기
HTML Audio 태그 HTML 태그는 웹 페이지에서 오디오를 재생하기 위해 사용되는 요소이다. MP3, WAV, OGG 등 다양한 오디오 포맷 파일을 웹에서 재생할 수 있다. audio 태그 속성 속성 값 설정 내용 src 파일 경로 재생할 음원 파일의 경로 설정(mp3, wav, ogg 파일 등) autoplay autoplay 자동 재생 여부 설정(브라우저에 html파일이 로드되자마자 음악파일이 재생됨) loop loop 반복 재생 여부 설정 controls controls 컨트롤 패널(재생/정지 버튼 등) 노출 여부 설정 muted muted 음소거 설정 오디오 파일 포맷 지정 태그 내부에 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다. 그리고..
☕ 람다식 리팩토링 하기 (Comparator 축약 원리)
Comparator 람다식 리팩토링 해보기 다음은 실제로 자바 프로그래밍에서 배열을 정렬(sort) 할때 사용되는 Comparator 인터페이스 사용 예제이다. Apple 클래스가 있고 생성자 인자로 사과의 무게(weight)값을 받는다. 그리고 실행부에서 배열로 사과 객체를 담고, 사과 무게에 따라 배열 요소들을 정렬하려고 한다. 이를 코드로 구현하면 아래와 같이 구현할 수 있다. class Apple { private final int weight; // 사과 무게 public Apple(int weight) { this.weight = weight; } public int getWeight() { return weight; } @Override public String toString() { ret..
☕ 람다식을 더 짧게 - 메소드::참조 문법
람다식 메소드::참조 자바의 람다표현식을 통해 코드 정의를 혁신적으로 줄여주었지만 이보다 더 간략하게 줄이는 문법이 있다. 메소드 참조(Method Reference)는 말 그대로 실행하려는 메소드를 참조해서 매개 변수의 정보 및 리턴 타입을 알아내어, 람다식에서 굳이 선언이 불필요한 부분을 생략하는 것을 말한다. 람다식은 복잡하고 길다란 로직보단 기존 메소드들을 단순히 호출만 하는 경우가 많다. 예를 들어 두 개의 값을 받아 작은 수를 리턴하는 Math 클래스의 max() 정적 메소드를 호출하는 람다식은 다음과 같다. (x, y) -> Math.max(x, y) 이 자체로도 간략해 보이지만, 자바 개발진은 그러지 않은가 보다. 함수 형태를 보면 리턴값 자체가 또다른 Math 클래스의 메소드를 호출하는 ..
☕ 함수 디스크립터(Function Descriptor) 란?
함수 디스크립터 보통 자바의 람다 표현식(Lambda Expression)의 사용 용도를 두가지로 정의하는데, 하나는 람다 함수로서의 용도 그리고 다른 하나는 함수형 인터페이스의 추상 메서드의 역할을 설명해놓은 시그니처로서 쓰인다. 그중 함수 디스크립터(Function Descriptor)는 단어 그대로 함수가 어떤 입력값을 받고 어떤 반환값을 주는지에 대한 설명을 람다 표현식 문법으로 표현한 것을 의미한다고 보면 된다. 예를들어, () -> void 는 파라미터 리스트가 없으며 void를 반환하는 함수를 의미하는 디스크립터며, (int, int) -> double 는 두개의 int를 파라미터로 받아 double형 자료를 반환하는 함수를 설명한다고 보면 된다. 이처럼 함수 디스크립터는 주로 java.ut..
☕ 함수형 인터페이스 표준 API 총정리
함수형 인터페이스 표준 API 함수형 인터페이스(functional interface)는 추상메서드가 1개만 정의된 인터페이스를 통칭하여 일컫는다. 이 인터페이스 형태의 목적은 자바에서 람다 표현식(Lambda Expression)을 이용해 함수형 프로그래밍을 구현하기 위해서 이다. // @FunctionalInterface 어노테이션을 인터페이스에 붙여주면, // 두 개 이상의 메소드 선언 시 컴파일 오류를 발생시켜 개발자의 실수를 줄일 수 있다. @FunctionalInterface public interface Animal { public void method(); } 그런데 곰곰히 생각해보면 함수의 형태(Signature)는 다양하다. 함수의 리턴 값이 있을수도 없을수도 있고 매개변수 갯수가 1개..
