dev-hpk 님의 블로그

[JS] finally 이해하기

자바스크립트에서 try - catch - finally 구문은 예외 처리를 위한 강력한 도구입니다. 이 구문에서 finally 블록은 예외 발생 여부와 관계없이 항상 실행되는 코드 블록으로, 주로 리소스 정리나 마무리 작업에 사용됩니다. finally? finally는 일반적으로 try나 catch 뒤에 붙으면서, try나 catch 문의 동작이 모두 완료되었을 때 무조건 실행되는 코드를 작성하기 위해 사용합니다. finally 블록은 선택 사항이기 때문에 생략하는 경우가 많습니다. finally가 어떻게 동작하는지 간단하게 짚고 넘어가겠습니다.지금부터 주목해야할 점은 무조건 실행되는 코드입니다. 예시로 확인해보겠습니다.예시 (1)try { console.log('Try');} catch(error) ..

웹 성능 최적화에서 중요한 개념 중 하나가 바로 Reflow(리플로우)와 Repaint(리페인트)입니다. 이 두 가지는 브라우저가 화면에 콘텐츠를 렌더링 하는 과정에서 발생하며, 잘못된 코딩 습관은 Reflow와 Repaint를 빈번하게 발생시켜 성능 저하로 이어질 수 있습니다.  목차 1. 브라우저 렌더링 과정 2. Reflow란? 3. Repaint란? 4. Reflow와 Repaint의 상호작용 5. Reflow와 Repaint 최소화 - 성능 최적화추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 브라우저 렌더링 과정Reflow와 Repaint를 알기 위해서는 우선 브라우저 렌더링 과정을 알아야 합니다.HTML 파일을 파싱해 DOM 트리를 생성합니다.CSS 파일을 파싱해 CSSOM 트..

자바스크립트는 단일 스레드 기반 언어로 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 비동기 작업을 지원하며 동시에 여러 작업이 진행되는 것처럼 보이게 합니다. 이러한 비동기 처리를 가능하게 하는 핵심 메커니즘이 바로 이벤트 루프(Event Loop)입니다.  목차 1. 싱글 스레드란? 2. 블로킹 & 논블로킹 3. 이벤트 루프의 필요성 4. 마이크로 태스크와 매크로 태스크추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 싱글 스레드란?스레드는 프로세스의 실행 단위입니다. 싱글 스레드라는 것은 말 그대로 스레드가 하나만 존재해 한번에 하나의 프로세스만 실행할 수 있다는 의미입니다.자바스크립트는 싱글 스레드 언어로 하나의 호출 스택(Call Stack)을 사용해 코드를 실행합니다. 호출 ..

JavaScript에서는 배열, 객체, 기타 데이터 구조를 순회(iterate)하는 다양한 방법을 제공합니다. 그중 for...of와 for...in은 이름이 비슷해서 종종 혼동되지만, 작동 방식과 사용 목적이 전혀 다릅니다. 목차 1. for ...of 2. for ...in 3. 주요 차이점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. for ...offor ...of는 이터러블 객체(배열, 문자열, Set, Map 등)의 값을 순회합니다.주로 배열이나 기타 이터러블 객체의 값에 접근할 때 사용합니다. 사용 예시const numArray = [1, 2, 3];for (const num of numArray) { console.log(num); // 1, 2, 3} 결과가 배열의 ..

자바스크립트를 다룰 때 ==와 ===는 매우 자주 등장하는 연산자입니다. 하지만 둘의 차이를 정확히 이해하지 못하면 의도치 않은 버그가 발생할 수 있습니다. 목차 1. == (느슨한 동등 연산자 - Loose Equality) 2. === (엄격한 동등 연산자 - Strict Equality)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. == (느슨한 동등 연산자 - Loose Equality)==는 동등 연산자로, 두 값을 비교할 때 타입 변환(type coercion)을 수행합니다. 즉, 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교합니다.  특징타입이 다르더라도 비교 전 타입 변환이 일어납니다.타입 변환은 때로 예측하지 못한 결과를 초래할 수 있습니다.예..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제영재는 택배상자를 트럭에 싣는 일을 합니다. 영재가 실어야 하는 택배상자는 크기가 모두 같으며 1번 상자부터 n번 상자까지 번호가 증가하는 순서대로 컨테이너 벨트에 일렬로 놓여 영재에게 전달됩니다. 컨테이너 벨트는 한 방향으로만 진행이 가능해서 벨트에 놓인 순서대로(1번 상자부터) 상자를 내릴 수 있습니다. 하지만 컨테이너 벨트에 놓인 순서대로 택배상자를 내려 바로 트럭에 싣게 되면 택배 기사님이 배달하는 순서와 택배상자가 실려 있는 순서가 맞지 않아 배달에 차질이 생깁니다. 따라서 택배 기사님이 미리 알려준 순서에 맞게 영재가 택배상자를 실어야 합..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다. 예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다. 위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다. 선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 ..

JavaScript의 비동기 처리를 할 때, 여러 Promise를 동시에 처리해야 하는 경우가 많습니다. 이때 자주 사용하는 두 가지 메서드가 Promise.all과 Promise.allSettled입니다.목차 1. Promise.all 2. Promise.allSettled 3. Promise.all vs Promise.allSettled추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Promise.all특징 Promise.all은 주어진 모든 Promise가 성공적으로 이행(fulfilled) 되었을 때 하나의 Promise로 반환합니다.만약 하나의 Promise라도 거부(rejected) 되면, 즉시 전체가 거부됩니다.완전 성공이 요구되는 작업에서 사용됩니다.const p1 = axi..

클로저는 자바스크립트에서 가장 중요한 개념 중 하나로, "함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하고 접근할 수 있는 함수"를 말합니다. 이를 통해, 함수가 생성될 때의 변수와 그 값들에 접근하거나 유지할 수 있습니다. 목차 1. 클로저란? 2. 클로저 동작 예제 3. 클로저 활용 사례추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 클로저란?MDN에서 정의한 클로저는 아래와 같습니다.“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical env..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다. 섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2) Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다.Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식..