lshjju 님의 블로그

코딩하다보면 조건문에 중괄호가 생략된 코드를 보게 되는 경우가 있습니다.function goLeft() { if (index == 0) index = slides.length - 1; else index--; slides[0].style.marginLeft = "-" + index * 800 + "px";}자바스크립트를 공부하시다 보면 이런 코드를 종종 마주치게 되죠!"어? 내가 배울 땐 분명 if () { ... } 형태로 중괄호를 쓰라고 했는데 왜 이건 없지?" 싶으셨을 겁니다.결론부터 말씀드리면, 자바스크립트 문법상 if문이나 else문 바로 다음에 실행할 코드가 '단 한 줄(한 문장)'일 때는 중괄호{}를 생략할 수 있기 때문입니다.이렇게 코드를 작성하는 이유와 장단점을 깔끔하게 ..

자바스크립트에서 this는 한 마디로 "지금 이 코드를 실행하고 있는 주인공 객체"를 가리키는 대명사입니다.가장 중요한 핵심은 this가 선언될 때 고정되는 것이 아니라, 함수를 "어떻게 호출했느냐"에 따라 가리키는 대상이 실시간으로 바뀐다(다이내믹 바인딩)는 점입니다. 호출 방식에 따른 4가지 핵심 상황을 정리해 드릴게요.1. 일반 함수로 호출할 때 - window (전역 객체)어떤 객체에도 소속되지 않은 주인 없는 일반 함수를 그냥 호출하면, this는 브라우저의 최상위 객체인 window를 가리킵니다.function hello() { console.log(this); }hello(); // window 객체가 출력됨strict mode(엄격 모드)에서의 차이고작 일반 함수를 불렀는데 거대한 win..

Browser Object Modelhttps://lshjju.tistory.com/721 BOM브라우저 객체 모델 (BOM)**브라우저 객체 모델(BOM, Browser Object Model)**은 자바스크립트가 웹 브라우저의 기능들에 접근하고 제어할 수 있게 도와주는 객체들의 집합입니다.문서 내용 자체를 다루lshjju.tistory.com https://lshjju.tistory.com/970 JavaScript window object method자바스크립트의 window 객체는 브라우저가 제공하는 최상위 전역 객체(Global Object)입니다.우리가 작성하는 모든 전역 변수, 전역 함수, 그리고 DOM(문서 객체 모델)까지도 실은 이 window 객체의 자식lshjju.tistory.com..

자바스크립트 내장객체https://lshjju.tistory.com/722 Built in object프로그래밍의 효율을 극대하게 높여주는 **내장 객체(Built-in Objects)**에 대해 알아보겠습니다.내장 객체는 자바스크립트 엔진에 이미 포함되어 있어, 우리가 별도의 설치 없이 언제든 꺼내 쓸 수lshjju.tistory.com https://lshjju.tistory.com/963 JavaScript Array method자바스크립트 배열에서 자주 사용되는 메서드 활용법에 대해서 알아보겠습니다.Array Method 자바스크립트의 배열(Array)은 데이터를 다룰 때 가장 많이 사용하는 강력한 도구입니다.수많은 메서드lshjju.tistory.com https://lshjju.tistory...

로컬 스토리지를 활용한 투두리스트(To-Do List) 실습을 시작해 보겠습니다.이번 실습의 핵심은 "새로고침을 해도 내가 추가하거나 삭제한 할 일 목록이 그대로 유지되도록 만드는 것"입니다.1. 프로젝트 구조 설계HTML로 화면의 뼈대를 만들고, CSS로 간단한 스타일을 입힌 뒤, 자바스크립트로 로컬 스토리지 연동 로직을 구현하겠습니다.이 프로젝트는 다음과 같은 데이터 흐름을 가집니다.[입력창] ──(추가)──> [할 일 배열] ──(JSON.stringify)──> [로컬스토리지 저장] │ └──(화면 렌더링)──> [ 태그 내부에 표시]2. 전체 실습 코드하나의 HTML 파일에 모든 코드를 담았습니다. to..

자바스크립트의 window.screen 객체는 사용자가 웹 페이지를 보고 있는 실제 기기(모니터, 스마트폰 화면 등)의 디스플레이 해상도와 크기, 색상 정보 등을 제공하는 객체입니다.이 객체는 화면의 크기를 파악하여 팝업창을 모니터 정중앙에 배치하거나, 모바일 기기의 화면 방향(가로/세로 모드)을 감지하고 제어하는 데 주로 사용됩니다.screen 객체는 주로 정보를 제공하는 프로퍼티 위주로 구성되어 있으며, 최신 명세에서는 화면 방향을 제어하는 하위 객체의 메소드가 중요하게 다뤄집니다.이를 3가지 카테고리로 나누어 정리해 드리겠습니다.1. 화면 방향 제어 메소드 (Screen Orientation API)모바일 기기나 태블릿 환경에서 웹 화면을 강제로 가로 모드나 세로 모드로 고정할 때 사용하는 강력한 ..

자바스크립트의 window.history 객체는 사용자가 브라우저 탭 내에서 방문했던 페이지들의 기록(세션 히스토리)을 관리하고 제어할 수 있는 기능을 제공합니다.이 객체를 사용하면 브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 프로그래밍 방식으로 동작시킬 수 있을 뿐만 아니라, 현대 웹 개발(특히 React, Vue 등의 SPA)에서 화면 새로고침 없이 URL만 변경하는 정교한 라우팅을 구현할 수 있습니다.실무 및 싱글 페이지 애플리케이션(SPA) 구축 시 핵심이 되는 history 객체의 중요 메소드들을 2가지 카테고리로 나누어 정리해 드리겠습니다.1. 히스토리 이동 관련 기본 메소드브라우저의 뒤로 가기, 앞으로 가기 툴바 버튼을 코드로 제어하는 메소드들입니다.history.back(): 뒤로 가..

자바스크립트의 window.location 객체는 현재 브라우저에 열려 있는 웹 페이지의 URL 주소 정보를 담고 있으며, 브라우저의 주소창을 제어할 수 있는 강력한 기능을 제공합니다.이 객체를 활용하면 사용자를 다른 페이지로 이동시키거나, 현재 페이지를 새로고침하는 등 페이지 전환과 관련된 작업을 자유자재로 처리할 수 있습니다.실무에서 주소 제어 시 가장 많이 사용하는 location 객체의 중요 메소드와 핵심 프로퍼티를 정리해 드리겠습니다.1. 페이지 이동 관련 중요 메소드브라우저의 주소를 바꾸어 사용자를 다른 URL로 이동시킬 때 사용하는 메소드입니다.두 메소드는 작동 방식과 브라우저 방문 기록(History)을 다루는 방식에서 큰 차이가 있습니다.location.assign(url): 일반적인 페..

자바스크립트의 navigator 객체는 현재 사용자가 사용 중인 브라우저(웹 애플리케이션)의 정보와 운영체제, 그리고 기기의 하드웨어 기능에 접근할 수 있는 다양한 정보를 담고 있습니다.개인정보 보호와 보안 기준이 강화되면서 단순 정보 조회 기능 외에도 유저의 기기 권한을 제어하는 강력한 API들이 이 navigator 객체를 통해 제공됩니다.실무에서 가장 유용하게 쓰이는 navigator 객체의 중요 메소드와 핵심 프로퍼티를 4가지 카테고리로 나누어 정리해 드리겠습니다.1. 클립보드 제어 (복사 및 붙여넣기)사용자가 웹 페이지에서 '링크 복사' 버튼을 눌렀을 때, 글자를 클립보드에 자동으로 복사해 주는 현대 웹의 필수 기능입니다. (보안 상 비동기 Promise 기반으로 작동합니다.)navigator...

자바스크립트의 window 객체는 브라우저가 제공하는 최상위 전역 객체(Global Object)입니다.우리가 작성하는 모든 전역 변수, 전역 함수, 그리고 DOM(문서 객체 모델)까지도 실은 이 window 객체의 자식들입니다.웹 개발을 하면서 window.을 생략하고 사용해 왔던 수많은 함수들이 바로 window 객체의 메소드입니다.실무에서 가장 중요하게 다뤄지는 window 객체의 핵심 메소드들을 4가지 카테고리로 나누어 정리해 드리겠습니다.1. 대화상자 (Dialog) 메소드사용자에게 메시지를 보여주거나 확인, 입력을 받을 때 사용하는 가장 직관적인 메소드입니다.alert(message): 단순 경고창메시지와 '확인' 버튼이 있는 알림창을 띄웁니다.confirm(message): 확인/취소 선택창..