오지이 오지이

# DOM 이벤트웹 페이지를 이용할 때에는 웹 화면과 사용자 간에 수많은 상호작용이 이루어집니다. 예를 들어 버튼을 클릭한다든지, 마우스를 스크롤한다든지, 검색을 위해 검색 키워드를 입력하는 행동 등이 이에 해당됩니다. 이렇게 사용자가 웹 페이지를 이용하면서 행하는 액션을 이벤트라고 합니다. # click 이벤트(onclick)클릭 이벤트는 사용자가 웹 페이지 안에서 마우스 왼쪽 버튼을 누를 때 발생하는 이벤트입니다. 대표적인 예로 '검색', '저장'과 같은 버튼을 클릭하면, 이때 클릭 이벤트가 발생하게 됩니다. 웹 화면에서 발생하는 모든 클릭 이벤트를 감시할 필요는 없지만, 앞서 말한 검색, 저장처럼 사용자가 클릭한 뒤에 연관된 기능을 처리해야 하는 클릭 이벤트에 대해서는 자바스크립트에서 함수를 정의하..

# innerHTML HTML의 특정 위치에 새로운 HTML을 삽입할 때 innerHTML을 사용할 수 있습니다. # insertAdjacentText() insertAdjacentText() 역시 자식 노드가 아닌 현재 접근한 DOM 요소의 위치를 기준으로 텍스트를 삽입하는 방법입니다. 2개의 파라미터를 사용합니다. 텍스트를 삽입할 위치는 insertAdjacentHTML()과 동일합니다. # remove() remove() 함수는 HTML 요소를 삭제할 때 사용합니다. p태그 문장입니다. Remove 다음 포스팅은 DOM 이벤트로 찾아뵙겠습니다. 감사합니다 참조 | 바닐라 자바스크립트(고승원, 비제이퍼블릭)

# DOM Attribute DOM 요소에 접근한 다음에는 DOM 요소가 가지고 있는 속성 정보를 가져오거나, 속성 정보의 값을 변경할 수 있습니다. 사용자가 브라우저에 입력하는 데이터는 DOM 요소의 value 속성에 저장됩니다. 결국 사용자가 입력한 데이터를 자바스크립트에서 가져와서 사용하려면 먼저 DOM 요소에 대한 접근을 한 후 해당 요소의 속성 정보에 접근하여야 합니다. 저번 포스팅을 통하여 HTML DOM 요소에 어떻게 접근할 수 있는지 알려 드렸습니다. 그럼 이번 포스팅에서는 접근한 DOM 요소가 가지고 있는 속성(Attributes)을 읽고, 변경하는 방법을 알아보겠습니다. # getAttribute() 우리는 getAttribute() 함수를 사용해서 HTML 요소의 속성 정보를 가져올 ..

[ HTML DOM ] 자바스크립트는 HTML 문서의 모든 요소에 접근하여 변경 가능합니다. 사용자가 웹 페이지에 접근하면 웹 페이지가 로드되면서 브라우저는 웹 페이지에 대한 DOM(Document Object Model)을 생성하게 됩니다. DOM은 W3C(World Wide Web Consortium)의 표준이며, 문서에 접근하기 위한 표준을 정의합니다. HTML DOM을 위한 HTML을 위한 표준 객체 모델 및 프로그래밍 인터페이스입니다. HTML DOM 모델은 객체 트리로 구성됩니다. 자바스크립트는 HTML DOM에 객체 모델을 통해 다음과 같은 기능을 수행할 수 있습니다. 페이지의 모든 HTML 요소를 변경할 수 있습니다. 페이지의 모든 HTML 속성을 변경할 수 있습니다. 페이지의 모든 CSS..

# JSON 서버 설치 우선 node.js를 설치한 후(https://offbyone.tistory.com/44 참고) 본 포스팅을 읽어 주시길 바랍니다. node.js를 설치하면, 여러 개발자들이 node.js로 개발한 다양한 자바스크립트 라이브러리를 쉽게 설치해서 사용할 수 있습니다. 이렇게 node.js를 기반으로 개발된 다양한 라이브러리를 등록하고, 관리 및 사용할 수 있도록 해 주는 도구가 NPN(Node Package Manager)입니다. NPM을 통해서 필요한 라이브러리(모듈)을 빠르게 설치할 수 있습니다. JSON Server는 JSON 기반으로 가상의 REST API 서버를 구축할 수 있는 npm 모듈입니다. 터미널에서 다음 명령어를 입력하여 JSON Server를 설치합니다. npm ..

# API(Application Programming Interface)이란? 애플리케이션을 구축하고 통합하기 위한 프로토콜 세트입니다. API를 사용하면 구현 방식을 알지 못해도 애플리케이션끼리 서로 소통할 수 있으며, 애플리케이션의 개발을 간소화하여 시간과 비용을 아낄 수 있습니다. 대표적인 것들로 구글 지도, 카카오 지도, 네이버 결제, 주소 검색, 날씨 조회 같은 것들이 있습니다. 때문에 다양한 애플리케이션에서 이런 기능을 별도로 구축하지 않아도 사용할 수 있게 됩니다. # REST(Representational State Transfer)란? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. 여기서 상태란 전송되는 데이터를 의미하며 일반적으로 JSON 형태로 데이터를 ..

# 정규 표현식이란? 정규 표현식은 문자열이 포함하고 있는 특정 문자 조합을 찾기 위하여 사용되는 패턴입니다. 복잡한 프로그램 코드를 간략하게 작성할 수 있다는 장점이 있지만, 가독성이 떨어지고 코드 구현이 쉽지 않다는 단점도 있습니다. 하지만 정규 표현식을 사용하면 굉장히 어려운 프로그램도 쉽게 해결할 수 있기 때문에 굉장히 유용합니다. 정규 표현식을 줄여서 정규식이라고 말합니다. # 실무에서의 정규 표현식 사용자가 입력한 이메일 정보가 이메일 형식에 맞는지 전화번호가 전화번호 형식에 맞는지 사용자로부터 입력받은 데이터가 프로그램에서 받고자 하는 데이터 형식과 일치하는지 체크할 때 등 입력받는 정보 중 반드시 특정 규칙이 존재하는 데이터가 있을 경우 다음은 핸드폰 번호가 올바른 형식인지를 체크하는 정규..

# Strict Mode(엄격 모드)란? 자바스크립트 문법을 엄격하게 체크하는 모드입니다. 자바스크립트는 초방기에 존재한 불완전한 기능을 버전이 업그레이드될 때마다 수정하지 않고, 새로운 기능만 계속 추가되었습니다. 그런데 EES5에서 새로운 기능이 추가되면서, 기존 기능 중 일부가 수정되었습니다. 기존 기능이 변경되다 보니 하위 버전에 대한 호환성 문제가 발생되었습니다. 그래서 ES5에서 엄격 모드가 추가됩니다. 예를 들면 변수를 선언할 때에는 var, let, const 같은 선언자를 사용하지 않더라도 에러가 나지 않습니다. 하지만 엄격 모드에서 변수를 선언할 때 선언자를 사용하지 않으면 에러가 발생합니다. 이렇게 엄격 모드는 그동안 암묵적으로 허용했던 불완전한 코드에 대한 문법을 엄격하게 검사하게 ..