Vue.js 다섯번째 / 브라우저, DOM, BOM, 객체화

한컴타자연습을 만들기 위해 코드를 작성 중에 조금 막힌 부분이 있어 정리한다.

for 문 안에서 input 태그를 만들고 페이지가 로드되었을 때 input 파트를 자동으로 선택되도록 만들고 싶었다.

찾아보니 autofocus 라는 설정을 추가하는 형식, mounted 에 정의하는 형식으로 구현할 수 있다고 한다.

하지만 자바스크립트 코드가 실행되고 정보를 화면에 띄우는 순서에 따라 쓸 수 있는 방법이 있고 쓸 수 없는 방법이 있어 조금 헤매게 되었다.

알아야되는 개념, 키워드는 다음과 같다.

브라우저

브라우저란 인터넷 상에서 웹 페이지, 이미지, 비디오 등 콘텐츠를 볼 수 있도록 도와주는 응용 프로그램이다.

우리가 네이버, 다음과 같은 사이트에 접속해서 원하는 일들을 하는데, 이때 이 사이트에 접속할 수 있게 해주는 도구가 바로 '브라우저' 다.

Object Model

웹 브라우저의 구성요소들은 하나하나 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹 브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM 과 DOM 은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

*객체화란 퍼즐, 조각이다. 조각들 하나하나 자신들의 기능들이 있고 그 조각들이 모여 하나의 웹 브라우저들을 이루게 된다.

*document.getElementByTagName('img') : 객체들에서 img 라는 테그 네임을 이용해서 요소들을 얻는다.

*window 라는 객체는 윈도우 창에 관한 객체이며 이 또한 웹 브라우저의 구성요소이다. 크게 두 가지 의미로 전역객체, window/frame 을 제어하기 위한 객체이다. 위에서 document 앞에는 .window 가 생략된 것이다.

img.style 에서 객체 속성에 접근하는 것 처럼 window.alert() 로 객체에서 어떤 조작을 할 수 있다.

DOM(Document Object Model)

웹 페이지의 내용을 담는 객체들이다. 이러한 웹 브라우저에 있는 문서들을 제어할 수 있다.

BOM(Browser Object Model)

현재 이 웹 페이지, 웹 브라우저의 url 을 알아내거나 현재 페이지를 리로드하거나 알람을 띄운다거나 하는 것들이 저장되어 있다.

JavaScriptCore

이것을 통해 웹 브라우저를 제어할 수 있고 node.js 인 서버측 자바스크립트를 제어할 수 있다.

이 자바스크립트 자체가 갖고 있는 객체는 Object, Array, Function 등이 있다. 이러한 자바스크립트 객체들은 자바스크립트 안에서는 공통적으로 갖고 있다.

이 개념들을 숙지하고 내 코드를 본다면 오류가 생긴 점은 다음과 같다.

1. 본래에 브라우저는 요청시마다 전체적인 데이터를 불러오고 해석해서 화면을 띄우는데 vue 같은 경우는 모두 객체화 시켜 처음 한 번만 페이지 전체를 로드 후 필요한/바뀌는 부분만 리로드하는 형식이다.

이 과정에서 html 속성 값인 autofocus 가 vue 의 한 컴포넌트를 갱신하는데 제대로 읽히지 않은 것이다.

그래서 v-focus 를 사용해서 이를 해결했다.

2. ref 라는 html 의 id, class 같은 참조를 위한 것은 여러개 중복된 곳에서 사용하지 않는 것 같다. 하나의 객체만 컨트롤 하는 것이 단일성을 깨지 않아 좋다고 한다.

v-focus 는 다음처럼 쓰자

<script>
const focus = {
  mounted: (el) => el.focus()
}

export default {
  name: 'CustomDirective',
  directives: {
    focus
  }
  };

참고 자료:

초록바나나의 개발 이야기