hanker

JavaScript에서 문자열 안에서 소괄호 (), 중괄호 {}, 대괄호 []로 감싸진 내용만 추출하는 기능 "Hello (world), welcome to {JavaScript} and [coding]!"위와 같은 문자열에서 괄호 안에 문자열들을 추출하고 싶을 때에 JavaScript에서 정규식을 이용하여 추출하면 쉽게 추출이 가능하다.1. 정규식 패턴 괄호종류정규식 패턴소괄호()/\((.*?)\)/g중괄호{}/\{(.*?)\}/g대괄호[]/\[(.*?)\]/g .*? 는 non-greedy(최소 일치) 패턴을 의미하고 가장 안쪽 괄호부터 잡아낸다.  2. JavaScript 함수 생성function extractByBrackets(text, type) { const regexMap = { ro..

JavaScript 및 jQuery에서 박스의 선택된 옵션을 초기화하거나 변경하는 방법에 대해서 알아보자. 1. JavaScript로 select 박스 선택값 초기화 및 변경 1-1. 선택값 초기화 (첫 번째 옵션 선택)document.getElementById("mySelect").selectedIndex = 0;- selectedIndex = 0 을 설정하면 첫 번째 옵션이 선택된다.  1-2. 선택값 변경 (특정 값 선택)document.getElementById("mySelect").value = "";- select.value = "값"을 설정하면 특정 값을 가진 옵션이 선택된다.  1-3. 모든 선택값 초기화 (기본 선택 없음)document.getElementById("mySelect")...

페이지에서 입력폼에 엔터 키를 눌러 저장, 검색 등 각종 이벤트 처리를 하는데, JavaScript에서 Enter Key 이벤트 처리방법에 대해서 알아보자. 1. keyup 이벤트 엔터키 감지 (전역) document.addEventListener("keyup", function(event) { if (event.key === "Enter") { console.log("Enter key released!"); }}); - 사용자가 Enter 키를 눌렀다가 뗄 때 (keyup) 이벤트가 실행- event.key === "Enter" 조건을 사용하여 엔터 키를 감지   2. 특정 입력 필드에서 엔터 키 감지 (input 또는 textarea) document.getElementById..

Single Thread 방식으로 실행되는 JavaScript에서 비동기 처리방법은 Promise와 async / await 가 있다. 이번 글에서는 매일 써도 어려운 비동기 프로그래밍에 대해서 알아보자. 1. 비동기 프로그래밍이란? JavaScript는 싱글 스레드 기반 언어이기 때문에 한 번에 하나의 작업만 실행이 가능하다.예외로 네트워크 요청, 파일 읽기, 타이머 같은 작업은 비동기 방식으로 실행된다.// 동기 코드 (순차 실행)console.log("Start");console.log("Processing...");console.log("End");// -- 출력 결과 --// Start// Processing...// End// 비동기 코드 (비순차 실행)console.log("Start");s..

이번 글에서는 JavaScript의 동작 원리를 깊이 이해하는 데 필수적인 개념인 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)에 대해 다뤄보자.이 개념을 이해하면 JavaScript의 호이스팅, 스코프, 클로저, 비동기 처리 등의 동작 방식을 보다 명확하게 파악할 수 있다. 1. 실행 컨텍스트란? 실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 의미한다.코드가 실행되는 동안 변수, 함수, this의 값 등을 추적하며, JavaScript 엔진이 코드를 실행하는 방식을 결정한다. * 실행 컨텍스트의 주요 역할 * - 코드 실행을 위한 환경 생성- 변수와 함수 선언 저장- 스코프와 this를 관리- 호이스팅 처리 2...

이번 글에서는 JavaScript에서 가장 많이 헷갈리는 개념 중 하나인 this 키워드에 대해서 알아보자. this는 실행 컨텍스트에 따라 다르게 동작하기 때문에 올바르게 이해하는 것이 중요하다! 1. this 란? this 는 현재 실행 중인 컨텍스트에 따라 다른 객체를 참조하는 키워드이다.즉, this 가 가리키는 대상은 코드가 실행되는 방식에 따라 달라진다. 2. this의 동작 - 기본적으로 전역 객체를 참조- 객체의 메서드 내부에서는 해당 객체를 참조- 화살표 함수에서는 부모 컨텍스트의 this를 상속- 생성자 함수에서는 새로 생성된 객체를 참조- call, apply, bind를 사용하면 this를 명시적으로 변경 가능 여기까지 정의를 알아보고 아래 코드에서 자세하게 알아보자.  2-1. 전..

이전 변수 선언에 대한 글에서 잠깐 호이스팅에 대한 내용이 나왔는데, 이번 글에서 좀 자세하고 알기 쉽게 정리해보려고 한다. 호이스팅은 이해가 없으면 JavaScript 코드를 작성할 때 혼란을 야기하니 꼭 이해하고 넘어가자! 1. 호이스팅이란? 호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 실행되기 전에 스코프의 최상단으로 끌어올려지는 동작을 말한다.즉, 코드가 실행되기 전에 JavaScript 엔진이 변수와 함수의 선언을 미리 처리한다. - 호이스팅의 기본 동작console.log(message); // undefinedvar message = "Hello, Hoisting!";console.log(message); // "Hello, Hoisting!"위 코드는 아래와 같이..

이번 글에서는 JavaScript에서 중요한 개념인 스코프와 클로저에 관해 알아보자 1. 스코프(Scope) 1-1. 스코프란?스코프는 변수와 함수에 접근할 수 있는 유효 범위를 의미한다. 즉, 변수가 어디에서 선언되고, 어디에서 사용할 수 있는지를 결정한다.  1-2. 스코프의 종류 전역 스코프 (Global Scope)모든 코드에서 접근 가능한 변수함수나 블록 밖에서 선언된 변수는 전역 변수로 취급된다.let globalVar = "Hanker!";function printGlobalVar() { console.log(globalVar); // "Hanker!"}printGlobalVar(); 전역 스코프 (Global Scope)함수 내부에서 선언된 변수는 해당 함수 안에서만 접근 가능 fun..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까?7. JavaScript에서 DOM 조작 방법8. JavaScript의 유용한 기능 feat. ES6+ 9. JavaScript의 디버깅과 개발도구 활용 JavaScript 코드를 작성하면서 예상치 못한 오류가 발생하거나 원하는 결과가 나오지 않을 때, 디버깅을 사용하게된다.개발자분들은 알겠지만 각 툴마다 디버깅 기능을 사용하지 않으면 개발할 때 정말 힘든데, 우리가 보는 뷰 단에서 디버깅 하는 방법에 대해서 작성하려한다. 디버깅의 기본 원칙과 함께 브러우저의 개발자 도구를 활용하는 방법을 알아..

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까?7. JavaScript에서 DOM 조작 방법8. JavaScript의 유용한 기능 feat. ES6+  JavaScript에서 기본 문법 외에도 개발자에게 유용한 기능을 제공하는데, 이번글에서 알아보자. 템플릿 리터럴(Template Literals) 템플릿 리터럴은 문자들을 작성할 때 더 간결하고 가독성 좋게 만들 수 있는 기능이다.백틱(`) 기호를 사용하며, 변수와 표현식을 ${} 안에 넣어서 사용할 수 있다. 기존 문자열 결합과 템플릿 리터럴 사용할 경우 차이// 기존 문자열 결합let ..