자바스크립트(JavaScript)로 두 개 이상의 문자열을 하나로 합치는 방법을 알아보세요. 자바스크립트에는 두 개 이상의 문자열을 결합하는 다양한 방법이 있습니다. 대표적으로 더하기 연산자 +, 더하기 할당 연산자 +=, 그리고 concat() 메서드가 있습니다. 참고: +는 산술(arithmetic) 연산자이고, +=는 할당(assignment) 연산자입니다. 지금부터 이 세 가지 방법을 모두 직접 확인해 보겠습니다! 더하기 연산자 (+) firstName과 lastName이라는 두 변수가 있고, 이 값들을 합쳐서 fullNam
JavaScript에서 배열의 특정 위치(인덱스)에 항목을 추가하는 방법을 알아보세요. 배열에 새 항목을 추가할 때 맨 끝에 붙이거나(append), 맨 앞에 넣고(prepend) 싶지 않고, 정확히 원하는 위치에 삽입하고 싶은 경우가 있습니다. 이럴 때 유용하게 쓸 수 있는 방법을 소개합니다. 참고: 특정 위치의 데이터를 다룰 때 우리는 보통 인덱스(index)라는 용어를 사용합니다. 배열 인덱스는 0부터 시작하기 때문에 다음과 같이 매칭됩니다. 0 → 첫 번째 항목 1 → 두 번째 항목 이런 식으로 계속 이어집니다. 예를 들
JavaScript에서 변수를 선언할 때는 반드시 지켜야 할 명명 규칙(naming rules)이 있습니다. 이는 단순한 권장 사항이 아니라 엄격한 규칙이며, 이를 위반하면 코드가 실행되지 않습니다. 아래에서 핵심 규칙들을 하나씩 살펴보겠습니다. JavaScript 변수 명명의 5가지 기본 규칙 변수 이름은 영문자(a~z), 숫자(0~9), 언더스코어(_), 달러 기호($)로만 구성할 수 있습니다. 변수 이름은 숫자로 시작할 수 없습니다. 변수 이름은 반드시 영문자, 달러 기호($), 또는 언더스코어(_)로 시작해야 합니다. 변수
1978년 고전 게임의 현대적 재해석안드레아 마유(Andrea Maille)가 개발한 Space Invaders는 1978년에 선보인 유명 2D 아케이드 게임을 순수 바닐라 자바스크립트(vanilla JavaScript)만으로 구현한 작품입니다. 외부 라이브러리나 프레임워크의 도움 없이 자바스크립트 기본 기능만으로 클래식 게임을 완성했다는 점에서, 게임 개발을 배우려는 개발자들에게 특히 주목할 만한 프로젝트입니다.주요 기능충돌 감지(Collision Detection)스페이스바를 이용한 발사키보드 방향키로 좌우(X축) 이동피스 모드
JavaScript와 약간의 CSS만으로 긴 웹페이지 하단까지 사용자를 부드럽게 스크롤시키는 방법을 알아봅니다. 사용자가 한 번의 클릭으로 페이지 맨 아래로 자연스럽게 이동할 수 있게 하려면, CSS 속성인 scroll-behavior와 JavaScript 메서드인 scrollIntoView()를 함께 활용하면 됩니다. 준비물은 다음과 같습니다: 브라우저 오른쪽의 y축 스크롤바가 활성화될 만큼 콘텐츠가 긴 웹페이지 페이지 상단에 id가 지정된 앵커(anchor) 요소 페이지 하단에 id가 지정된 임의의 요소 scroll-behav
바닐라 JavaScript로 배열 안에서 특정 항목 하나를 찾고 싶다면, ES6에서 도입된 Array.find() 메서드를 사용하면 됩니다. 이 메서드는 조건을 만족하는 첫 번째 요소를 반환하며, 조건에 맞는 요소가 없으면 undefined를 반환합니다. 예를 들어 채소 이름으로 이루어진 배열이 있다고 가정해 보겠습니다. 이 목록에서 당근(carrot)을 찾아내려면 다음과 같이 작성할 수 있습니다. const vegetables = [broccoli, carrot, kale, spinach] // 배열에서 carrot 찾기 let
바닐라 JavaScript(외부 라이브러리 없이 순수한 JavaScript)만으로 마우스를 움직였을 때 웹사이트의 배경색이 바뀌도록 만드는 방법을 알아봅니다. HTML 먼저 간단한 HTML 페이지의 마크업부터 살펴보겠습니다: <!DOCTYPE html> <html> <body> <h1>이 페이지 위에서 마우스를 움직여 보세요</h1> </body> </html> JavaScript 사용자가 페이지의 어느 곳에서든 마우스를 움직일 때 배경색이 변
JavaScript의 mouseover와 mouseout 이벤트를 활용하면, 마우스가 웹페이지 안으로 들어오거나 밖으로 나갈 때 배경색을 손쉽게 전환할 수 있습니다. 이 튜토리얼에서 그 방법을 단계별로 알아보겠습니다. HTML 먼저 간단한 HTML 페이지의 마크업입니다: <!DOCTYPE html> <html> <body> <h1>Move your mouse over this page</h1> </body> </html> 이 튜토리얼은 Code
웹 페이지에서 마우스를 이미지 위에 올렸을 때 기본 이미지를 다른 이미지로 교체하고, 마우스를 치우면 다시 원래 이미지로 되돌리고 싶은 경우가 종종 있습니다. 이럴 때 별도의 CSS 파일이나 외부 스크립트 없이 인라인 JavaScript만으로 아주 간단하게 구현할 수 있습니다. 기본 사용법 onmouseover와 onmouseout 속성을 <img> 태그에 직접 추가하면 됩니다: <img onmouseover=this.src=new-image.png onmouseout=this.src=default-imag
버튼을 클릭하면 브라우저의 인쇄 또는 파일 저장 창이 바로 열리도록 만드는 방법을 알아봅니다. 웹사이트의 페이지를 인쇄하거나 저장하고 싶다면 보통 브라우저 메뉴(대체로 화면 왼쪽 상단)를 이용합니다. 파일(File) → 인쇄(Print)를 차례로 클릭한 뒤, Save(저장) 버튼을 눌러 PDF 문서로 저장하거나 프린터로 바로 출력할 수 있습니다. 인쇄/저장 단축키: cmd + P(Mac) / ctrl + P(Windows) 하지만 사용자가 매번 브라우저 메뉴를 찾아 들어가게 하는 대신, 클릭 한 번으로 인쇄 창이 즉시 열리는 인
알림창(Alert Box)이란 무엇인가요? 알림창(Alert Box)은 사용자가 클릭, 스크롤, 입력 등 특정 동작을 수행했을 때 화면에 나타나는 작은 팝업 창입니다. 주로 사용자에게 문제 상황을 경고하는 용도로 쓰이지만, 단순히 정보를 전달하는 목적으로도 활용됩니다. 가장 흔한 예시 중 하나는 폼 제출 상황입니다. 사용자가 제출 버튼을 눌렀는데 필수 입력 항목을 채우지 않았다면, 알림창이 나타나면서 문제가 무엇인지 설명해 줍니다. JavaScript로 알림창 만드는 방법 위 스크린샷과 똑같은 알림창을 직접 만들어 보겠습니다.
JavaScript의 window.location 객체를 사용하여 웹사이트 방문자를 다른 URL로 리디렉션하는 방법과 그 활용 사례를 알아보세요. 페이지 리디렉션 방법 웹사이트 방문자를 새 URL로 리디렉션하는 데 필요한 것은, 리디렉션을 시작할 웹페이지에서 다음 JavaScript 코드를 실행하는 것뿐입니다: window.location = https://wheretoredirect.com 이 코드는 외부 .js 파일에 넣거나, 웹페이지의 <head> 섹션에 인라인으로 삽입할 수 있습니다: <script type=
웹사이트에서 최신 첨단 기능을 사용하고 있다면, 일부 브라우저(특히 인터넷 익스플로러처럼 구형이거나 레거시에 해당하는 브라우저)와 호환되지 않을 수 있습니다. 다행히 JavaScript를 활용하면 사이트 방문자가 어떤 브라우저를 사용하는지 감지할 수 있고, 이를 바탕으로 해당 브라우저와 호환되는 버전의 웹사이트로 방문자를 리디렉션할 수 있습니다. Chrome을 사용하지 않는 사용자 리디렉션하기 예를 들어 웹사이트의 최신 버전이 현재 Chrome 브라우저에서만 100% 정상 작동한다고 가정해 보겠습니다. 방문자가 버그 없는 경험을 하
자바스크립트에서 숫자를 문자열로 변환하려면 toString() 메서드를 사용하면 됩니다. let number = 10 let numberToString = number.toString() console.log(numberToString) // 10 toString() 메서드란? toString()은 숫자뿐만 아니라 다양한 자료형을 문자열로 변환할 수 있는 내장 메서드입니다. 숫자에 적용하면 해당 숫자를 그대로 문자열 형태로 반환합니다. 다른 변환 방법: String() 함수 전역 함수인 String()을 사용해도 같은 결과를 얻을
브라우저 콘솔에서 다음과 같은 JavaScript 오류 메시지를 마주한 적이 있으신가요? Uncaught SyntaxError: Unexpected identifier 이 오류는 여러 가지 이유로 발생할 수 있지만, 그중 가장 흔한 원인은 바로 const로 선언된 변수의 값을 변경(재할당)하려고 시도하는 것입니다. const 변수는 재할당이 불가능하기 때문에 이러한 시도는 구문 오류로 이어집니다. const란 무엇인가? JavaScript에서 const 키워드는 소위 불변(immutable) 변수를 선언할 때 사용됩니다. 즉, 한
JavaScript에서 print() 함수를 사용하면 브라우저의 인쇄 대화 상자를 간단하게 열 수 있습니다. 이 함수를 호출하면 사용자의 화면에 현재 페이지를 인쇄할 수 있는 프린터 설정 창이 나타납니다. 기본 사용법 print()는 전역 함수이므로 별도의 객체 없이 바로 호출할 수 있으며, window.print()와 동일하게 작동합니다. window.print(); // 또는 print(); 다른 언어와의 차이점 많은 프로그래밍 언어에서 print()는 콘솔이나 터미널에 메시지를 출력하는 용도로 사용됩니다. 하지만 Ja
dblclick 이벤트로 더블 클릭 감지하기 자바스크립트에서 더블 클릭을 감지하려면 dblclick 이벤트 리스너를 사용하면 됩니다. 별도의 라이브러리 없이 순수 자바스크립트만으로 간단하게 구현할 수 있습니다. 아래 예제는 window 객체에 더블 클릭 이벤트를 등록한 경우입니다. 이렇게 하면 웹페이지 내 어느 곳에서든 마우스로 빠르게 두 번 클릭하기만 하면 이벤트가 감지됩니다: { console.log(더블 클릭이 감지되었습니다) // Double-click detected }) 특정 DOM 요소에 적용하기 물론 wind
JavaScript로 개발하다 보면 어떤 값이 숫자인지, 아니면 다른 자료형인지 확인해야 하는 상황이 자주 발생합니다. 이를 확인하는 방법은 여러 가지가 있지만, 가장 일반적이고 널리 사용되는 방법은 typeof 연산자를 활용하는 것입니다. typeof 연산자 기본 사용법 typeof는 피연산자의 자료형(data type)을 문자열 형태로 반환하는 연산자입니다. 숫자 값에 사용하면 number라는 결과를 얻을 수 있습니다. const value = 5 console.log(typeof value) // number 실전 활용: 폼
JavaScript에서 내일 날짜를 구하는 것은 생각보다 간단합니다. 핵심 원리는 현재 날짜를 먼저 가져온 뒤, 여기에 하루를 더하는 것입니다. 기본 코드 예제 아래 코드는 오늘 날짜 객체를 생성하고, 이를 복사한 후 setDate() 메서드로 하루를 더해 내일 날짜를 만드는 과정을 보여줍니다. const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) tomorrow.toDateString() 코드 동작 원리
JavaScript에서 빈 객체 확인하기 먼저, 다음과 같이 아무런 속성도 가지지 않는 빈 객체(empty object)가 있습니다. const emptyObject = {} 그렇다면 JavaScript에서 객체가 비어 있는지 어떻게 확인할 수 있을까요? 정답은 바로 Object.entries() 함수를 사용하는 것입니다. Object.entries()의 동작 원리 Object.entries()는 객체를 키(key)와 값(value) 쌍으로 이루어진 배열로 변환해 주는 내장 메서드입니다. 따라서 객체에 속성이 하나도 없다면 결과로