티스토리

console.log("Hello, World!");

검색하기

블로그 홈

console.log("Hello, World!");

seolbinn.tistory.com/m

설빈 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[JavaScript] 이벤트 루프(Event Loop) 📚 자바스크립트의 이벤트 루프(Event Loop)란 무엇인가요?자바스크립트는 싱글 스레드 언어예요. 이는 자바스크립트가 한 번에 하나의 작업만을 처리할 수 있다는 뜻이에요. 하지만 실제로는 자바스크립트가 비동기 작업을 아주 효율적으로 처리할 수 있어요. 이는 이벤트 루프(Event Loop)라는 메커니즘 덕분이에요. 자바스크립트의 이벤트 루프는 요리사 한 명이 있는 레스토랑과 같아요. 요리사는 한 번에 하나의 요리만 만들 수 있지만, 요리를 준비하는 동안 다른 일도 처리할 수 있어요. 예를 들어, 요리사가 면을 끓이는 동안 그 시간에 샐러드를 준비하거나, 주문을 받는 식으로 여러 작업을 동시에 처리할 수 있죠. 요리사(자바스크립트)는 요리를 하는 도중(동기 작업) 다른 일이 생기면 주방 밖에서 손님들.. 공감수 3 댓글수 1 2024. 10. 27.
[JavaScript] 배열 메서드(map, filter, reduce) 📚 배열 메서드(map, filter, reduce)란 무엇인가요?자바스크립트에서 배열을 다루는 것은 매우 중요해요. 특히 map, filter, reduce 같은 배열 메서드는 배열을 간편하고 효과적으로 처리할 수 있는 방법을 제공해요. 이 세 가지 메서드는 각각 배열을 변환, 필터링, 축소하는 작업을 수행해요. 비유하자면, map은 원래의 배열에서 무언가를 변형해서 새로운 배열을 만드는 작업이고, filter는 원하는 조건에 맞는 요소만 걸러내는 작업, 그리고 reduce는 배열을 한 덩어리로 축소하여 단일 값으로 만드는 작업이에요.🖥️ 배열 메서드(map, filter, reduce)의 개념과 예시1. map: 배열을 변형하는 메서드map 메서드는 배열의 각 요소에 동일한 작업을 수행하여, 새로.. 공감수 1 댓글수 3 2024. 10. 13.
[JavaScript] 화살표 함수와 일반 함수의 차이 📚 화살표 함수(Arrow Functions)와 일반 함수의 차이는 무엇인가요?자바스크립트에서 화살표 함수(Arrow Functions)는 ES6에서 도입된 새로운 함수 정의 방식이에요. 기존의 일반 함수 표현식과 달리, 더 간결한 문법을 제공하며, this 바인딩과 관련된 중요한 차이점이 있어요. 비유를 들어보면, 일반 함수는 새로운 맥락을 형성하여 독립적인 행동을 하는 주체라면, 화살표 함수는 그저 주변 환경을 따라가는 형태의 행동을 해요. 이 때문에 this를 다루는 방식에 큰 차이가 있답니다.🖥️ 화살표 함수와 일반 함수의 차이점1. 문법의 차이일반 함수는 function 키워드를 사용해 정의하고, 화살표 함수는 =>를 사용해 정의해요.// 일반 함수function greet(name) { .. 공감수 0 댓글수 0 2024. 10. 2.
[JavaScript] 구조 분해 할당(Destructuring) 📚 구조 분해 할당이란 무엇인가요? 구조 분해 할당은 복잡한 배열이나 객체로부터 데이터를 추출하여, 이를 새로운 변수에 간단히 할당하는 자바스크립트의 표현식이에요. 이 방식을 사용하면 코드를 더 깔끔하고 가독성 있게 작성할 수 있어요. 비유를 들어보자면, 한 상자에 여러 가지 과일이 들어 있을 때, 각 과일을 하나씩 꺼내서 따로따로 접시에 담는 것과 비슷해요. 구조 분해 할당은 이러한 과정을 코드 상에서 매우 심플하게 해줍니다. 🖥️ 구조 분해 할당의 종류 구조 분해 할당은 주로 배열과 객체에서 사용돼요. 1. 배열의 구조 분해 할당 배열의 구조 분해 할당은 배열의 요소들을 변수에 할당할 때 사용돼요. 순서대로 할당되며, 원하는 요소만 선택적으로 추출할 수도 있어요. const fruits = ["사과".. 공감수 0 댓글수 0 2024. 4. 21.
[JavaScript] 클로저 📚 클로저란 무엇인가요? 클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경과의 조합이에요. 이는 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해 주며, 외부 함수가 실행을 마친 후에도 외부 함수의 변수에 접근할 수 있게 해요. 클로저는 '백팩'에 비유할 수 있어요. 함수가 실행될 때마다, 그 함수는 자신만의 '백팩'을 가지게 돼요. 이 '백팩' 안에는 함수가 생성될 때의 환경, 즉 외부 함수의 변수들이 들어 있어요. 함수가 어디로 가든, 이 '백팩'을 들고 다니면서 필요할 때마다 외부 함수의 변수들을 사용할 수 있게 되죠. 🖥️ 클로저의 사용 1. 데이터 은닉과 캡슐화 클로저를 사용하면, 함수 외부에서 접근할 수 없는 private 변수를 만들 수 있어요. 이는 데이터 은닉과 캡슐화를 가능하게 해.. 공감수 0 댓글수 0 2024. 3. 23.
[JavaScript] this 📚 this란 무엇인가요? 자바스크립트에서 this는 현재 실행 컨텍스트의 객체를 가리키는 키워드예요. 함수나 메서드가 어떻게 호출되었느냐에 따라 this의 값이 결정돼요. this를 사용하는 것은 마치 레스토랑에서 웨이터가 주문을 받는 고객을 정확히 알아야 하는 것과 비슷해요. 여기서 웨이터는 자바스크립트 함수이고, 고객은 this가 가리키는 객체예요. 어떤 테이블(컨텍스트)에서 호출되었는지에 따라, 웨이터(함수)는 다른 고객(this)에게 서비스를 제공하게 돼요. 🖥️ this의 사용 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서 this는 전역 객체를 가리켜요. 브라우저에서는 window, Node.js에서는 global 객체가 돼요. console.log(this.document === wi.. 공감수 0 댓글수 1 2024. 3. 18.
[JavaScript] ES6 📚 ES6란 무엇인가요? ES6, 공식적으로는 ECMAScript 2015라고 불리는 이 업데이트는 2015년에 발표되었어요. 자바스크립트를 표준화하는 ECMAScript 사양의 여섯 번째 주요 버전이죠. ES6는 자바스크립트 언어에 많은 새로운 기능과 개선사항을 도입했어요. 이러한 변화는 개발자들이 더 효율적이고 간결한 코드를 작성할 수 있게 도와줘요. ES6는 마치 스마트폰이 이전의 피처폰에 비해 가진 혁신적인 기능들처럼, JavaScript의 코딩 경험을 획기적으로 개선한 것으로 볼 수 있어요. 🖥️ ES6의 새로운 기능들 1. let과 const var 대신 let과 const를 사용하여 변수를 선언할 수 있어요. 이는 블록 스코프 변수를 가능하게 하며, 코드를 더 안전하고 이해하기 쉽게 만들어줘.. 공감수 0 댓글수 0 2024. 1. 25.
[JavaScript] async/await 📚 async/await란 무엇인가요? async/await는 자바스크립트에서 비동기 작업을 처리하는 현대적이고 간결한 방법이에요. ES2017에서 도입된 이 문법은 비동기 코드를 동기 코드처럼 읽고 쓸 수 있게 해주어, 개발자가 비동기 로직을 더 쉽게 이해하고 작성할 수 있게 도와줘요. async/await는 레스토랑에서 주문한 음식을 기다리는 과정과 유사해요. 먼저, async 함수는 레스토랑에 들어가서 주문을 하는 것과 같이 특정 비동기 작업(예: 데이터 요청)을 시작해요. 그리고 await는 주문한 음식이 준비될 때까지 기다리는 것처럼, 비동기 작업의 완료를 기다리며 그 동안 함수의 실행을 일시 정지해요. 작업이 완료되고 결과가 준비되면, 마치 서빙된 음식을 받아 식사를 시작하는 것처럼, awai.. 공감수 0 댓글수 0 2023. 12. 15.
[JavaScript] 콜백 함수(Callback Function) 📚 콜백 함수란 무엇인가요? 콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수예요. 이는 특히 비동기 작업을 처리할 때 중요한 역할을 해요. 콜백 함수는 어떤 이벤트가 발생하거나 특정 작업이 완료된 후 실행되도록 설계되었어요. 당신이 친구에게 어떤 일이 끝나면 전화해 달라고 부탁한다고 상상해 보세요. 여기서 당신의 부탁은 '메인 함수'이고, 친구가 나중에 전화하는 행위는 '콜백 함수'에요. 이렇게 특정 작업(일이 끝나는 것)이 완료된 후에 실행되도록 예약된 추가 작업(전화하는 것)이 바로 콜백 함수의 개념이에요. 🖥️ 콜백 함수의 사용 콜백 함수는 자바스크립트에서 널리 사용되며, 특히 이벤트 리스너, 타이머 함수, 비동기 요청 처리 등에서 중요한 역할을 해요. 1. 이벤트 리스.. 공감수 1 댓글수 0 2023. 12. 14.
[JavaScript] 연산자 📚 연산자란 무엇인가요? 연산자는 데이터를 조작하고, 값을 비교하며, 논리적 결론을 도출하는 데 사용되는 특수한 심볼 또는 단어예요. 연산자는 프로그래밍의 기본 요소로, 다양한 연산을 수행하여 프로그램의 로직을 구성하는 데 필수적이에요. 연산자는 수학 문제를 푸는 도구와 같아요. 예를 들어, 덧셈 연산자(+)는 두 숫자를 더하는 데 사용되며, 비교 연산자(==, ===)는 두 값이 같은지 비교하는 데 사용돼요. 1. 산술 연산자 산술 연산자를 표로 정리하면 다음과 같아요. 산술 연산자 설명 + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 % 나머지 ** 거듭제곱 ++ 1 증가 -- 1 감소 일반 사칙연산과 마찬가지로 곱셈(*)과 나눗셈(/)이 먼저 계산돼요. let a = 10 + 5 * 2; // 5 * 2가 먼.. 공감수 0 댓글수 0 2023. 12. 14.
[JavaScript] 데이터 형 📚 데이터 형이란 무엇인가요?데이터 형은 변수에 저장되는 데이터의 종류를 정의하며, 각 데이터 형은 자바스크립트에서 다른 방식으로 처리돼요. 데이터 형은 서로 다른 크기와 모양의 상자들과 같아요. 각 상자는 특정 종류의 데이터를 저장하고, 프로그램이 이를 어떻게 처리할지 결정하는 데 도움을 줘요. 예를 들어, 숫자형 상자는 숫자를, 문자열형 상자는 텍스트를 저장하죠. 1. 숫자자바스크립트에서는 정수(integer)와 부동 소수점 숫자(floating point number)를 사용할 수 있어요.let a = 5; // 정수let b = 1.2; // 부동 소수점 숫자let c = 123e3; // 123000let d = 123e-3; // 0.123 2. Bigint15자리 이상의 큰 정수를 다룰 때.. 공감수 0 댓글수 0 2023. 12. 13.
[JavaScript] 변수 📚 변수란 무엇인가요?변수는 데이터를 저장하는 컨테이너로, 숫자나 문자와 같은 데이터를 저장할 수 있어요. 변수는 실제 데이터가 아니라, 데이터가 저장된 메모리의 주소를 가리키는 참조자에요. 변수는 마치 비어있는 상자와 같아서, 여러분이 원하는 어떤 값이나 정보를 넣어두고 필요할 때 다시 꺼내 쓸 수 있어요. 🖥️ 변수 선언자바스크립트에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언할 수 있지만, 각각의 키워드에는 차이점이 있어요.1. var스코프: 함수 스코프. 함수 내에서 선언된 경우 해당 함수 내에서만 유효해요.호이스팅: 선언된 위치와 상관없이 함수의 최상단으로 호이스팅 돼요.재할당: 변수의 값을 재할당할 수 있어요.console.log(x); // 호이스팅으로 인해 u.. 공감수 0 댓글수 0 2023. 12. 13.
[JavaScript] 호이스팅(Hoisting) 📚 호이스팅이란 무엇인가요?호이스팅이란 자바스크립트에서 변수나 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 것을 말해요. 당신이 한 카페에 들어갔다고 상상해 볼까요?카페의 메뉴판은 벽에 걸려 있고, 당신은 메뉴를 선택하기 전에 메뉴판을 볼 수 있어요.여기서 메뉴판이 '호이스팅'된 것과 같아요.즉, 메뉴판(변수나 함수 선언)은 카페(스코프) 안에서 어디서든 볼 수 있도록 벽(최상단)에 걸려 있는 것과 같아요. 🖥️ 호이스팅의 예시자바스크립트에서 호이스팅은 변수와 함수 선언에 적용돼요.아래 코드를 통해 확인해 볼까요?console.log(myVar); // 출력: undefined var myVar = 5; console.log(myVar); // 출력: 5 위 코드에서 var myVa.. 공감수 4 댓글수 2 2023. 12. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.