You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[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 등등.. 이렇게 코드를 짜듯이 말이다. 농담 삼아 아래와 같이 코드가 마치 아됴겐을 맞은것과 같은 모습이 되어 버릴지도 모른다. 물론 컴퓨터 입장에선 코드 로직상 문제는 없을텐지만 이를 나중에 사람이 유지보수 하기 위해..
👩💻 멀티 태스킹 & 멀티 프로세싱 개념 한방 정리
컴퓨터의 병행 처리 우리가 음악을 들으면서, 웹서핑을 하고, 메신저의 메시지를 확인할 수 있는 이유는 컴퓨터가 자원을 효율적으로 사용하는 멀티 태스킹(Multi Tasking) 기술 덕분이다. 멀티 태스킹이란 컴퓨터에서 여러 작업을 동시에 실행하는 능력을 말한다. 좀더 자세히 말하자면, OS를 통해 CPU가 작업하는데 필요한 자원을 프로세스 또는 스레드간에 나누는 행위를 말한다. 두 가지 이상 작업을 동시에 처리할 수 있는 이유가 이러한 자원 분담 원리 때문이다. 지금 부터 제한된 자원을 가지고 수십가지의 프로그램을 동시에 실행할 수 있는 원리를 파헤쳐 보자. 프로세싱의 발전 과정 단일 프로세스 (Single Process) 초창기 컴퓨터는 단일 프로세스 시스템 이었다. 한번에 하나의 프로그램만이 실행할..
👩💻 멀티 프로세스 vs 멀티 스레드 비교 💯 완전 총정리
멀티 프로세스와 멀티 스레드는 한 어플리케이션에 대한 처리방식 이라고 보면 된다. 단순히 프로그램을 여러개 띄워놓는 것이 멀티 프로세스가 아니라 이 둘은 언제 어느때에 어떤 방식으로 처리하느냐에 따라 다른 것으로 이해해야 한다. 이름으로 유추할 수 있듯이 멀티 프로세스와 멀티 스레드는 여러개의 프로세스, 스레드가 동작하는 것을 일 컫는다. 단일이 아닌 다중으로 돌아감으로써 성능 향상 등 여러가지 효과를 얻을 수 있다. 하지만 또한 이로 인해 발생되는 부가적인 문제점도 발생하게 된다. 지금 부터 이에 대해 자세히 알아보자 👩💻 완전히 정복하는 프로세스 vs 스레드 개념 한눈에 이해하는 프로세스 & 스레드 개념 전공 지식 없이 컴퓨터의 프로그램을 이용하는데는 문제 없어 왔지만 소프트웨어를 개발하는 사람으..
👩💻 완전히 정복하는 프로세스 vs 스레드 개념
한눈에 이해하는 프로세스 & 스레드 개념 전공 지식 없이 컴퓨터의 프로그램을 이용하는데는 문제 없어 왔지만 소프트웨어를 개발하는 사람으로서 컴퓨터 실행 내부 요소를 따져보게 될때, 아마 컴퓨터 운영체제에 대해 입문하게 되면 가장 먼저 듣고 배우게 될 개념이 프로세스와 스레드 일 것이다. 결론 부터 말하자면 이 둘을 한마디로 정의하자면 다음과 같다. 프로세스 (Process) 스레드 (Thread) 운영체제로부터 자원을 할당받은 작업의 단위 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위 운영체제(OS)에 대한 기본 배경 지식이 없다면 위의 정의가 무슨 소리인지 이해가 잘 되지 않을 것이다. 그래도 위의 문장에는 나름 설명이 함축되어 잘 정리 되어 있는 셈이다. 일단 프로세스의 작업의 단위 라는 단어..
📚 console.log는 이제 그만 ❗ - 다양한 콘솔 API 모음
자바스크립트 Console API 자바스크립트의 코드의 결과값을 출력하거나 테스트를 하기 위해 console.log() 함수를 정말 많이 써왔을 것이다. 이때 console.log() 함수는 console 이라는 객체 안의 log() 라는 메서드를 불러다가 쓴 것이다. 즉, console 객체 내에는 log 뿐만 아니라 여러 기능을 하는 콘솔 관련 메서드들이 있는 것이다. 이 콘솔 메서드들은 log 보다 훨씬더 강력하고 다채로운 기능을 제공한다. 다만 익숙치 않아서 지금까지 log 만 주궁장창 써왔던 것이다. 지금 부터 강력한 자바스크립트 콘솔 API 유용한 기능에 대해 알아보자. console.log("콘솔 로그") console.info("콘솔 정보") console.debug("콘솔 디버그") co..
🚀 모바일 / 태블릿 에서만 CSS 파일 로드 최적화
CSS 파일 로드 최적화 보통 태그의 css 파일 로드는 브라우저의 렌더링을 차단(blocking) 하기 때문에, css 파일이 크면 클수록 그만큼 웹페이지 속도에 영향을 미치게 된다. 따라서 왠만해선 css 파일의 용량을 최적화하여 줄이는 것이 좋으며 소스를 분리할 수 있는 것은 따로 분리하여 비동기 로드 시키는 것이 좋다. 예를들어 모바일 혹은 태블릿에서만 실행되는 미디어쿼리 선택자 부분은 메인 css 파일에 한꺼번에 때려넣기에는 약간 무리가 있다. 이때 모바일 소스를 다른 css 파일로 분리하고, 사용자의 화면 비율에 따라 선택적으로 css 파일을 로드하도록 하는 방법이 있는데, 이는 다음과 같다. css 파일을 분할하여 메인 css의 크기가 작아지는 효과도 있고 별도로 모바일, 태블릿 화면의 cs..
🔊 웹에서 음악 객체(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..
👩💻 프로세스 / 데몬 / 서비스 차이 한방 정리
프로세스 (Process) 프로세스는 메모리에 적재되어 CPU에 의해 실행되는 컴퓨터 프로그램을 지칭한다. 각 프로세스는 고유한 프로세스 ID(PID)를 가지며, 운영체제는 프로세스 간의 자원 공유를 관리한다. 예를 들어, 웹 브라우저를 실행하는 경우 브라우저라는 프로그램은 하나의 프로세스로 실행되는 것이다. 그리고 프로세스는 눈에 보이는 프로세스(foreground process) 와 눈에 보이지 않은 프로세스(background process) 로 구분된다. 포그라운드 프로세스 백그라운드 프로세스 사용자와 상호작용하는 프로세스 프로세스는 사용자와 상호작용하지 않고 시스템에서 실행되는 프로세스 최소화를 하더라도 눈에 보이는 프로세스를 포그라운드 프로세스 눈에 보이지 않지만 뒤에서 일을 하고 있는 프로세..
☕ 람다식을 더 짧게 - 메소드::참조 문법
람다식 메소드::참조 자바의 람다표현식을 통해 코드 정의를 혁신적으로 줄여주었지만 이보다 더 간략하게 줄이는 문법이 있다. 메소드 참조(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..
