어제 오늘 내일

면접 단골 질문이자, 설명은 들어봤지만 "그래서 이걸 어디에 쓰지?"가 남는 개념. 클로저입니다.사실 클로저는 특별한 문법이 아닙니다. 자바스크립트 함수라면 거의 다 클로저이고, 우리는 이미 매일 클로저를 쓰고 있습니다. 다만 그 동작 방식을 정확히 모르면 반복문에서, 이벤트 핸들러에서, React 훅에서 이해할 수 없는 버그를 만나게 됩니다.이 글은 원리 → 함정 → 실전 패턴 순서로 정리합니다.클로저란 무엇인가한 줄 정의는 이렇습니다. 클로저 = 함수 + 그 함수가 선언된 렉시컬 환경(lexical environment)의 조합 말이 어려우니 코드로 봅시다. 먼저 평범한 경우부터요.function normal() { const message = "안녕하세요"; // normal의 지역 변수}n..

자바스크립트에서 객체를 "바꾸지 못하게" 만드는 가장 익숙한 방법은 Object.freeze입니다. 이름만 보면 모든 게 해결될 것 같지만, 실제로는 딱 한 겹만 얼립니다. 이 사실을 모르고 쓰면 오히려 안전하다고 착각한 채 버그를 안고 가게 됩니다.이 글에서는 Object.freeze가 정확히 무엇을 막고 무엇을 못 막는지, 그리고 실무에서 어떻게 쓰면 좋을지 정리합니다.기본 동작const config = { host: "localhost", port: 3000 };Object.freeze(config);config.port = 8080; // 무시됨delete config.host; // 무시됨config.protocol = "https"; // 무시됨console.log(c..

자바스크립트 코드를 읽다 보면 파일 맨 위에 덩그러니 놓인 이 한 줄을 종종 만나게 됩니다."use strict";문법도 아니고 함수 호출도 아닌, 그냥 문자열 하나. 처음 보면 "이게 왜 여기 있지?" 싶습니다. 이 글에서는 이 한 줄이 정확히 무엇을 바꾸는지, 그리고 모던 자바스크립트에서도 여전히 필요한지 정리해 보겠습니다. 왜 생겼나자바스크립트는 초창기부터 "관대한" 언어였습니다. 오타를 내도, 말이 안 되는 코드를 써도 최대한 에러 없이 굴러가게 만들어졌죠. 브라우저 입장에서는 스크립트 하나 잘못됐다고 페이지 전체가 멈추는 것보다 나은 선택이었습니다.문제는 이 관대함이 곧 버그 은폐 장치로 작동한다는 점입니다. 오타 하나가 조용히 전역 변수를 만들고, 잘못된 대입이 아무 일도 없었다는 듯 무시됩니..

JavaScript로 개발을 하다 보면 서버에서 데이터를 가져오거나, 파일을 읽거나, 타이머를 다루는 등 시간이 걸리는 작업을 자주 만나게 됩니다. 이런 작업들을 효율적으로 처리하기 위한 핵심 도구가 바로 async/await입니다. 이 글에서는 비동기 처리가 왜 필요한지부터, async/await를 실전에서 어떻게 활용하는지까지 차근차근 살펴보겠습니다.1. 비동기 처리가 필요한 이유JavaScript는 기본적으로 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 만약 네트워크 요청처럼 오래 걸리는 작업이 끝날 때까지 다음 코드 실행을 멈추고 기다린다면 어떻게 될까요? 화면이 멈추고, 사용자는 아무것도 할 수 없는 답답한 경험을 하게 될 것입니다.이 문제를 해결하기 위해..

HTML에서 외부 JS 파일의 함수 호출하기 1. JavaScript 파일 생성먼저, 외부 JavaScript 파일을 생성합니다.예를 들어, script.js 파일을 다음과 같이 만듭니다.// script.jsfunction sayHello() { alert("Hello, World!");}  2. HTML 파일에 외부 JS 파일 연결HTML 파일에서 외부 JS 호출 예제 Say Hello    src="script.js"  외부 JavaScript 파일의 경로를 지정합니다.이 예제에서는, script.js가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.경로 설정같은 폴더에 있을 경우: 다른 폴더에 있을 경우 :   defer  HTML 문서가 완전히 파싱된 후에 JavaScript가..

Javascript  삼항연산자 사용법 및 활용 예제 1. 문법condition ? expressionIfTrue : expressionIfFalse;condition: 평가할 조건 (참 또는 거짓이 될 수 있음)expressionIfTrue: 조건이 참일 때 실행될 표현식expressionIfFalse: 조건이 거짓일 때 실행될 표현식 2. 기본 예제const age = 20;const canVote = age >= 18 ? '투표 가능' : '투표 불가';console.log(canVote); // '투표 가능'age >= 18이 참이므로 '투표 가능'이 출력됩니다. 3. 중첩 삼항 연산자삼항 연산자를 중첩해서 사용할 수 있지만, 가독성이 떨어질 수 있으므로 주의해야 합니다.const score = ..

Javascript attribute(속성) 다루기추가 및 변경 (setAttribute() 또는 점 표기법 사용)읽기 (getAttribute 또는 점 표기법 사용)삭제 (removeAttribute)찾기 (hasAttribute)속성 목록 가져오기 (attributes) 1. 추가 및 변경 (setAttribute 또는 점 표기법 사용)setAttribute(name, value) : 속성을 추가하거나 기존 속성의 값을 변경합니다.점 표기법 (element.attribute = value) : 동일한 속성을 추가하거나 변경합니다.// HTML 예시// // JavaScriptconst element = document.getElementById('example');// 방법 1: setAttribut..

정규식으로 핸드폰 번호 체크하기하이픈(-) 포함하이픈(-) 및 공백 미포함 (숫자만 포함)  1. 하이픈 포함허용하는 형식010-1234-5678011-234-5678016-789-1234017-456-7890019-9876-5432 정규식/^01[016789]-\d{3,4}-\d{4}$/ ^: 문자열 시작01: 핸드폰 번호는 01로 시작[016789]: 두 번째 자리는 0, 1, 6, 7, 8, 9 중 하나010, 011, 016, 017, 018, 019만 유효-: 하이픈이 반드시 포함되어야 함\d{3,4}: 중간 번호는 3자리 또는 4자리\d{4}: 마지막 번호는 4자리$: 문자열 끝 예제 코드function isHyphenMobileNumber(phone) { const regex = /^01[..

정규식으로 전화번호 체크하기 1. 하이픈 포함 전화번호 검사형식 예시010-1234-567802-123-4567031-123-4567정규식/^0\d{1,2}-\d{3,4}-\d{4}$/ ^: 문자열 시작0: 전화번호는 0으로 시작\d{1,2}: 지역번호는 1~2자리 (02, 031 등)-: 하이픈이 반드시 포함되어야 함\d{3,4}: 중간 번호는 3~4자리\d{4}: 마지막 번호는 4자리$: 문자열 끝예제 코드function isHyphenPhoneNumber(phone) { const regex = /^0\d{1,2}-\d{3,4}-\d{4}$/; return regex.test(phone);}console.log(isHyphenPhoneNumber("010-1234-5678")); // truec..

정규식으로 문자열이 숫자인지 체크하기JavaScript에서 문자열이 숫자만으로 이루어졌는지 확인하기 위해 다양한 정규표현식을 사용할 수 있습니다.방법 1: 기본 정규표현식가장 기본적인 형태로, 문자열이 0에서 9까지의 숫자로만 이루어졌는지 검사합니다.function isNumeric(str) { return /^[0-9]+$/.test(str);}console.log(isNumeric("12345")); // trueconsole.log(isNumeric("123a5")); // falseconsole.log(isNumeric("00123")); // trueconsole.log(isNumeric("")); // false (빈 문자열도 false 처리)console.log(isNume..