우린 이전 포스팅에서 OpenStackClient 개발 환경 세팅 openstack server list 명령어를 통해 인스턴스들을 확인해 보았습니다

미션 1

openstack server list 결과에 user name과 project name 이라는 컬럼을 기본 출력에 추가하고, 그 값을 출력하도록 만들어주세요

미션 2

미션 1에서 컬럼을 추가하면, 실패하는 테스트 케이스가 다수 발생합니다. 모든 테스트 케이스가 통과하도록, 테스트 케이스 자체를 수정해주세요

조건) 새로 추가한 컬럼이 기본 값인 상태입니다. 이 컬럼이 기본인 조건을 만들고 테스트 케이스를 수정해야합니다

① 어느 부분을 수정해야 할까?

server list 라는 명령어를 처리하는 python-openstackclient/openstackclient/compute/v2/server.py 부분을 살펴보겠습니다 이 함수가 칼럼에 관여하는 친구인거 같다 column_headers 투성이 server.py 파일

            columns = (
                'ID',
                'Name',
                'Status',
                'Networks',
                'Image Name',
                'Flavor Name',
            )
        column_headers = (
            'ID',
            'Name',
            'Status',
            'Networks',
            'Image',
            'Flavor',
        )

이런식으로 담겨있을 줄 알았으나,,,

             columns: tuple[str, ...] = (
                'id',
                    'name',
                'status',
            )
        column_headers: tuple[str, ...] = (
            'ID',
            'Name',
            'Status',
        )

어림도 없지 암 이렇게 되어있어서 봤더니

        if sdk_utils.supports_microversion(compute_client, '2.47'):
            columns += ('flavor_name',)
            column_headers += ('Flavor',)
        else:
            if parsed_args.long:
                columns += (
                    'flavor_name',
                    'flavor_id',
                )
                column_headers += (
                    'Flavor Name',
                    'Flavor ID',
                )
            else:
                if parsed_args.no_name_lookup:
                    columns += ('flavor_id',)
                else:
                    columns += ('flavor_name',)
                column_headers += ('Flavor',)

        #새로 추가한 부분
        columns += (
            'project_name',
            'user_name',
        )
        column_headers += (
            'Project Name',
            'User Name',
        )

명령어에 따라 동적으로 추가시키려고 코드가 이런식으로 작성되어있었다. project_name이나 user_name 같은 경우 조건 기반 동적 구성할 필요는 없어서 이렇게 코드를 추가해줬습니다

이제 ListServer의 기본 columns에 project_name과 user_name을 추가했고, server list의 기본 출력 순서가 기존 ID, Name, Status, Networks, Image, Flavor에서 ID, Name, Status, Networks, Image, Flavor, Project Name, User Name으로 바뀝니다.

+) 추가적으로

if parsed_args.columns:
            for c in parsed_args.columns:
                if c in ('Project ID', 'project_id'):
                    columns += ('project_id',)
                    column_headers += ('Project ID',)
                if c in ('User ID', 'user_id'):
                    columns += ('user_id',)
                    column_headers += ('User ID',)
                    ...
                #새로 추가한 부분
                if c in ('Project Name', 'project_name'):
                    columns += ('project_name',)
                    column_headers += ('Project Name',)
                if c in ('User Name', 'user_name'):
                    columns += ('user_name',)
                    column_headers += ('User Name',)

같은 파일에 컬럼 옵션 처리가 되어 있는 코드가 보이는데, Project Name과 User Name을 넣어서, -c 옵션으로도 선택 가능하게 했습니다.

② 반환 되는 것들을 확인해보자

보다시피 새로 추가한 칼럼인 유저 네임과 프로젝트 네임이 굉장히 러프(?)하다 여기서 필요하다고 느끼는건 저 값을 받아서 대조하여 출력값을 채워줄 무언가가 필요하다.

즉, OpenStack의 기본 서버 응답에는 user_id, project_id만 포함되어 있으며, 실제 사람이 읽을 수 있는 이름(name)은 별도의 Identity 서비스 조회를 통해 가져와야 한다.

project_names = {}
        user_names = {}
        if data:
            for project_id in {
                s.project_id for s in data if getattr(s, 'project_id', None)
            }:
                try:
                    project_names[project_id] = identity_common.find_project(
                        identity_client,
                        project_id,
                    ).name
                except Exception:  # noqa: S110
                    # retrieving project names is not crucial, so we swallow
                    # any exceptions
                    pass

            for user_id in {
                s.user_id for s in data if getattr(s, 'user_id', None)
            }:
                try:
                    user_names[user_id] = identity_common.find_user(
                        identity_client,
                        user_id,
                    ).name
                except Exception:  # noqa: S110
                    # retrieving user names is not crucial, so we swallow any
                    # exceptions
                    pass

출력 값 채우는 로직에서는 각 서버의 project_id와 user_id를 모아 identity_common.find_project와 identity_common.find_user로 이름을 조회한 뒤, server 객체의 project_name과 user_name에 넣도록 구현하였다. 이미지와 플레버 이름 조회 흐름은 그대로 유지했고, 새 컬럼만 추가로 계산하는 구조이다

+) 근데 이게 정말 최선일까? 분명 기존 코드에 데이터를 가져오는 로직이 있을것이다.

"서버 단위 데이터 처리 흐름을 통합하여 응집도를 높이고, 조건 기반 로직과 캐싱을 자연스럽게 적용하기 위한 구조 개선을 하고싶다..." 라는 생각이 들때쯤

 # Populate image_name, image_id, flavor_name and flavor_id attributes
        # of server objects so that we can display those columns.
        project_names = {}
        user_names = {}
        for s in data:
            if sdk_utils.supports_microversion(compute_client, '2.69'):
                if getattr(s, 'status') == 'UNKNOWN':
                    continue

            if 'id' in s.image and s.image.id is not None:
                image = images.get(s.image['id'])
                if image:
                    s.image_name = image.name
                s.image_id = s.image['id']
            else:            
                s.image_name = IMAGE_STRING_FOR_BFV
                s.image_id = IMAGE_STRING_FOR_BFV
            ## 해당 for문 내부에 코드를 구현했다
            project_id = getattr(s, 'project_id', None)
            if project_id and project_id not in project_names:
                try:
                    project_names[project_id] = identity_common.find_project(
                        identity_client,
                        project_id,
                    ).name
                except Exception:  # noqa: S110
                    pass
            s.project_name = project_names.get(project_id)

            user_id = getattr(s, 'user_id', None)
            if user_id and user_id not in user_names:
                try:
                    user_names[user_id] = identity_common.find_user(
                        identity_client,
                        user_id,
                    ).name
                except Exception:  # noqa: S110
                    pass
            s.user_name = user_names.get(user_id)

합치려고 보니 서버마다 find_project와 find_user를 매번 호출하면? -> 오히려 중복 조회가 늘어나지 않을까...?

그래서 루프를 합치되 ID별 캐시는 유지하는 방향으로 개선을 시도 즉, 지금의 딕셔너리 캐시 방식은 유지하고, 그 캐시 채우기와 서버 객체 값 세팅을 같은 for s in data: 안에서 처리하는 쪽이 균형이 좋을 거 같아 구조화를 해보았다

사실 실제로 기여하는 사람들 입장에선 저 밈 수준으로 매우 간단한 작업이고 당연한 수순일 순 있다. 하지만 난 오픈소스 기여 호소인이므로 자세하게 설명할거다.

정리) 단도직입적으로 남들이 "그래서 그냥 비슷한 기능의 for문 찾아서 내부에 포함시켰다는 거냐?"라고 질문한다면 무시하지말고 이렇게 답변하면 된다

첫번째 구현 방식: 캐시를 먼저 만들고, 나중에 한 번 더 서버를 순회 개선한 방식: 한 번의 서버 순회 안에서 캐시 조회/갱신과 s.project_name, s.user_name 세팅을 같이 수행

해당 포스팅은 1주차 과제였던 "개발환경에서 openstack server list 명령어 실행 결과 확인" 을 기반으로 내부적으로 코드가 어떻게 흐르는지 파악하는 것입니다

방향 설정: nova 의 정보를 어느시점에서 가져오고 렌더링할 서버 정보를 가져오는 건 take_action 의 어느 시점인지를 중점으로 분석

[작은 강의] 이런 오픈소스코드 분석은 어떻게 하면 좋은가?

openstack --debug server list

해당 로그들 속에서

greb -R "{궁금한 문자열}"

만약 검색이 안된다면 가상환경에 설치된 라이브러리들이 호출을 통해 문자열을 출력하고 있는것

가상환경으로 들어가서 greb -R "{궁금한 문자열}"

호출이 되고 있는 경로를 찾았다면,

해당 경로 파일을 열어서 hook, 함수 등 종속적으로 호출하고 있는 것을 확인

만약, 속한 class 를 확인 하였다면 해당 클래스 검색 -> 호출하고 있는 것들 중 진짜 내가 찾는 것과 관련된 것들 걸러내기

=> 단편적인 요소를 찾고 상향식으로 분석

추천) https://wikidocs.net/230415 traceback를 사용하면 좀 더 수월하게 확인이 가능

주요 라이브러리

• OSC_lib ( 다른 lib, cli, sdl)
• stevedore ( 동적 louder )( csl 에서 사용하기 위한 것들을 동적으로 불러와 사용하기 위한 것들 )
• keystoneouth ( 인증 관련)

-> stevedore, keystoneouth 에 빠지면 return 값 정도만 확인하고 빠져나오세요

OpenStack CLI 클라이언트(python-openstackclient)를 로컬에서 직접 개발하고 디버깅하기 위한 VSCode 환경 구축 방법 (+근데 윈도우 환경을 곁들인...)

이 게시물을 읽고 계신다면, 분명 주위에서 파이참을 사용하라고 권유했을거고 당신의 윈도우 환경에 안타까움을 표했을겁니다...

그럼에도 불구하고 꿋꿋하게 환경세팅을 하려고 제 게시물을 읽고 있는 당신에게 경의를 표하며... 지금이라도 주변의 말을 들으세요

_참고) 본격적인 포스팅에 앞서 윈도우 명령어 앞엔 🪟으로 기입하겠습니다_

[환경세팅을 하기에 앞서, 간략한 사전 지식 및 전체 흐름]

1. 클라우드 컴퓨팅은 원격지의 리소스를 API 호출을 통해 제어합니다. 사용자는 웹 대시보드(GUI)를 사용할 수도 있지만, 개발 생산성과 자동화를 위해 CLI(Command Line Interface) 도구인 python-openstackclient를 사용

-> 마치 쿠버네티스의 kubectl과 비슷한 역할이랄까

2. 해당 프로젝트는 파이썬을 사용합니다. 그러므로 의존성 문제를 예방하기 위해 가상환경을 사용합니다 -> 시스템 전역에 패키지 설정하면^^..... 버전 충돌쇼

-> 정리하자면 가상환경(내방) > 라이브러리 모음집 설치 > 구동

① 소스코드 clone

자신의 작업 디렉토리에 python-openstackclient 코드를 clone 받습니다. git clone https://opendev.org/openstack/python-openstackclient

② clouds.yaml 생성

python-openstackclient를 clone 받은 위치에 아래 내용으로 clouds.yaml 파일을 생성합니다.

clouds:
  my-cloud:
    auth:
      auth_url: http://<ip>/identity
      username: "admin" # 할당 받은 값 넣으세요
      password: "1234" # 할당 받은 값 넣으세요
      project_name: "admin" # 할당 받은 값 넣으세요
      user_domain_name: "Default"
      project_domain_name: "Default"
    region_name: "RegionOne"
    interface: "public"
    identity_api_version: "3"

③ Visual Studio Code에서 python-openstackclient 폴더 열기

visual studio code를 이용할 경우, IDE로서의 기능보다 코드를 분석하고 수정하는 용도로 주로 활용하게 됩니다. 따라서, openstackclient 실행과 로그 분석은 터미널에서 합니다. code내에서 터미널을 열고 작업을 이어갑니다.

vscode 자체를 관리자 권한으로 설치하면 git bash도 관리자 권한으로 내부에서 사용가능하다고 Reddit에 토론기록이 남아있긴한데, 그 누구도 성공적인 시도였다는 후기가 없다 옆에 git bash 관리자 권한으로 열어서 작업하는 걸 추천 드립니다

④ virtualenv 생성 (가상 환경 만들고 만든 환경에 들어가기)

python3 -> python: 윈도우 환경에서는 python 명령어가 3.x 버전을 가리키는 기본 실행 파일명이므로 교체

.venv/bin/activate -> .venv/Scripts/activate: 윈도우 파이썬 가상 환경은 실행 파일(Script)을 bin이 아닌 Scripts 디렉토리에 저장

아래 명령어로 virtualenv를 생성합니다. python3 -m venv .venv 🪟python -m venv .venv 그리고 virtualenv 를 활성화합니다. source .venv/bin/activate 🪟source .venv/Scripts/activate -> ex) 이게 가상환경(내 방) 가는 길인거다 정상적으로 활성화되었다면 다음과 같이 터미널에 표시됩니다.

⑤ python-openstackclient 의 의존 라이브러리 설치하기

pip3->pip: 리눅스와 달리 윈도우 가상 환경(.venv/Scripts)에는 pip3.exe 파일이 생성되지 않는 경우가 많습니다.

이제 의존 라이브러리를 설치합니다. 아래 명령어로 의존 라이브러리를 설치합니다. pip3 install -r requirements.txt -> 실행용 🪟pip install -r requirements.txt pip3 install -r test-requirements.txt -> 테스트나 코드 품질 검사용 🪟pip install -r test-requirements.txt

⑥ python-openstackclient를 develop 모드로 설치하기

이제 virtualenv 에 python-openstackclient 자체를 설치합니다. 일반적으로 파이썬 코드를 받아 설치할 때는 python setup.py install을 이용하지만, 개발을 위해서는 아래 명령어로 develop 모드로 설치해아 합니다. python3 setup.py develop 🪟python setup.py develop

⑦ openstack server list 실행해보기

python-openstackclient의 main 함수는 openstackclient/shell.py 에 있습니다. 하지만 PyCharm 과 다르게 우리는 openstackclient를 virtualenv에 설치했으므로 openstack 명령어를 그대로 사용해도 됩니다. 아래 명령어로 결과를 확인해봅니다. openstack server list --os-cloud my-cloud 이 때 인스턴스 이름은 test_instance_계정명 으로 된 것이 나와야합니다. 여기까지 되었다면 openstackclient 코드를 개발할 준비가 완료되었습니다.

• routes.tsx

import { createBrowserRouter } from "react-router";
import Home from "@pages/Home";
import Page1 from "@pages/Page1";
import Page2 from "@pages/Page2";

const router = createBrowserRouter([
  { path: '/home', element: <Home /> },
  { path: '/page1', element: <Page1 /> }, 
  { path: '/page2', element: <Page2 /> },
]);

export default router;

• App.tsx

import { RouterProvider } from 'react-router';
import router from './routes';

function App() {
  return (
    <>
      <RouterProvider router={ router } />
    </>
  );
}

export default App;

• Header.tsx

  import { Link } from "react-router";
  

function Header() { return (

export default Header;

![](https://velog.velcdn.com/images/bab_shunn/post/160998d1-9775-4b6b-8c59-bbbbf77f6e8f/image.png)
![](https://velog.velcdn.com/images/bab_shunn/post/398acf05-e81c-4194-bd5c-b2dc16e000f4/image.png)
![](https://velog.velcdn.com/images/bab_shunn/post/15d64cc6-dc16-4caa-9f44-a6f88d6fa749/image.png)

물론이야. 아래는 fetch 직접 사용과 useFetch 커스텀 훅을 비교 정리한 velog용 글 형식의 간단한 개념 정리야:

fetch 직접 사용 vs 커스텀 훅(useFetch) 사용 비교

1. fetch 직접 사용

개요

React 컴포넌트 내부에서 fetch() 함수를 직접 호출하여 데이터를 요청하고, useState, useEffect 등을 통해 상태를 관리하는 방식.

장점

• 코드 흐름이 직관적이고 이해하기 쉬움
• API 요청마다 다른 로직을 유연하게 작성 가능

단점

• 여러 컴포넌트에서 동일한 요청을 구현할 경우 코드 중복이 많아짐
• 로딩, 에러, 데이터 상태 등을 매번 직접 관리해야 함
• UI와 비즈니스 로직이 섞여 코드가 복잡해질 수 있음

2. useFetch 커스텀 훅 사용

개요

API 요청 및 관련 상태 관리(loading, error, data)를 커스텀 훅으로 분리하여 관리하는 방식. 주로 재사용성과 관심사 분리를 위해 사용함.

장점

• 로직 재사용이 가능하여 코드 중복 최소화
• 로딩, 에러 처리 등의 상태 관리가 일관됨
• 컴포넌트는 UI에만 집중할 수 있어 코드 구조가 깔끔해짐
• 유지보수가 쉬움 (훅 하나만 수정하면 됨)

단점

• 초기에 구조를 이해하고 설정하는 데 시간이 필요함
• 훅 내부를 커스터마이징하려면 추가 작업이 필요할 수 있음
• 단순한 요청에도 훅 사용이 과할 수 있음

결론

• 작은 프로젝트나 간단한 요청에는 fetch 직접 사용이 편리
• 여러 컴포넌트에서 같은 API를 호출하거나 상태 관리가 필요한 경우에는 useFetch 커스텀 훅을 사용하는 것이 효율적

3) useReducer

useState와 역할은 비슷한데, useState가 제공하는 기능 이외에도 상태 업데이트 로직을 외부 함수로 분리할 수 있는 기능을 제공한다.

useState와 useReducer의 차이는 위 그림과 같다. 상태를 관리한다는 목적은 동일한데 상태를 업데이트하는 방법이 약간 다르다. useReducer는 미리 정의된 reducer 함수에 action과 이전 상태값을 입력값으로 넣어서 새로운 상태를 계산한다는 차이점이다.

4) useRef

useRef는 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅이다. 리액트 프로젝트에서도 특정 요소를 선택해야하는 상황이 생길 수 있는데 이러한 상황에서 useRef 함수를 사용할 수 있게 된다.

가장 큰 특징은 useRef는 따로 상태 변경 함수가 없고 직접 .current의 상태를 변경하기 때문에 변경 사항이 자동으로 브라우저 화면에 반영되지 않는다는 점이다.

하지만 컴포넌트 지역 변수와 다르게 useRef 상태는 컴포넌트가 언마운트될 때까지 유지되기 때문에, 여러 이유로 인해 해당 컴포넌트 render 함수가 실행되면 useRef 변경 사항이 화면에 반영될 수 있다.

{/* 변경 사항이 자동으로 화면에 반영된다. */}
<button onClick={() => setCount((prev) => prev + 1)}>
  useState 상태 업데이트
</button>

{/* 변경 사항이 자동으로 화면에 반영되지 않는다. 상태는 유지된다. */}
<button onClick={() => reference.current++}>
  useRef 상태 업데이트
</button>

그래서 useRef는 주로 자동으로 화면을 렌더링하지 않아도 되는 상태를 관리할 때 사용한다. 화면 렌더링과 관련이 없는 상태를 useState로 관리하면 render 함수가 불필요하게 실행되기 때문이다.

참고:

• React Hooks 이해하기 (2)
• Hook의 개요
• JDevelog:티스토리

리액트 훅

• 1. 웹 개발의 변천사
• 2. 리액트 개발에 자주 사용하는 자바스크립트 문법

• 간단한 todoList 실습 (dom 객체를 다루는데에 좀 더 익숙해지기 위한)

• 간단한 counter 실습 (dom 객체를 다루는 코드는 js 파일에서 관리하고 해당 코드를 함수로 만들어 html 파일에서 dom조작을 함수를 통해 더 간결한 코드를 작성합니다. 마지막엔 코드를 하나의 함수로 만들고, 좀 더 유연한 사용을 위해 컴포넌트로 쪼개어 사용할 수 있는 것들을 함수로 만들어 최종적으로 rootNode에 추가합니다.)

+)사진이 깨져서 pdf로도 저장했는데 벨로그는 pdf가 안올라가네요...? 호호,,

• const haru2 = haru; → 얕은 복사(X) → 참조 복사
• const haru3 = Object.assign({}, haru); 또는 { ...haru } → 얕은 복사(O)

  JavaScript 자체 내장 메서드로는 진정한 깊은 복사(deep copy)는 제공되지 않음! (라이브러리를 사용하거나 로데쉬..., json을 통해 부분적으로 구현 가능하긴함

haru2 = haru;

• 같은 객체를 가리키는 참조 복사
• 그래서 haru.age++ 하면 haru2.age도 같이 바뀝니다.

  const haru2 = haru;
  haru.age++; // haru2.age도 같이 증가함

Object.assign({}, haru) 또는 { ...haru }

• 얕은 복사(shallow copy)
• )
• haru 객체의 최상위 속성만 새 객체로 복사
• 중첩 객체가 있다면 그 안은 참조로 복사

예시:

const haru = { name: '하루', age: 5, pet: { type: 'dog' } };
const copy = { ...haru };
copy.pet.type = 'cat';
console.log(haru.pet.type); // 'cat' (내부 객체는 공유됨)

정리하면:

unknown type

TypeScript 3.0 부터 새로 추가된 타입 문자 그대로 알려지지 않은 타입 이다. unknown 타입으로 선언된 변수의 값으로는 모든 타입이 올 수 있다. (any타입과 비슷) 그렇다면 unknown 과 any 의 차이점은 무엇일까?

unknown 과 any의 차이

unknown에는 메서드를 호출할 수 없다.

어떤 타입인지 확실하지 않기 때문에 타입스크립트는 어떠한 연산이든 실행하지 않는다.

let userInput: unknown;
console.log(userInput.length); // ❌ 에러

unknown 타입을 가진 변수는 any를 제외하고 다른 타입을 가진 변수에 할당할 수 없다. 다시 말해, 고정된 타입을 가지고 있는 변수에 unknown 타입을 가진 변수를 할당할 수 없다.

let userInput: unknown;
let userName: string;

userInput = 5; // ⭕️ 작동
userInput = 'Harry'; // ⭕️ 작동
userName = userInput; // ❌ 에러

unknown 타입을 가진 변수를 다른 변수에 할당하기 위해서는 타입 체크를 해주면 된다.

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = 'Harry';
if (typeof userInput === 'string') { 
  userName = userInput; // ⭕️ 작동
}

unknown 타입을 쓰는 이유

변수의 값으로 어떤 타입이 올지 미정인 상태에서 any를 쓴다면 타입스크립트를 사용하는 이유가 없다.(typescipt: 그럴거면 js로 돌아가.)

이럴 때 any 보다 깐깐한(?) unknown 타입을 사용하는 것이 좋다. (타입 선언 이후 조건문 등으로 타입 체크 코드 작성하면 unknown 타입을 잘 사용할 수 있다!)

요구사항

문서내의 모든 버튼을 클릭했을때, 각각 "btn-0 클릭", "btn-1 클릭", "btn-2 클릭" ... "btn-n 클릭"을 콘솔에 출력하시오.

<script>
      window.onload = function () {
        const btns = document.querySelectorAll("button");
        // IIFE pattern
        for (var i = 0; i < btns.length; i++) {
          btns[i].addEventListener("click", function () {
            console.log(`btn-${num}클릭`);
          });
        }
      };
    </script>

위의 그림에서 알수 있듯이 var을 사용하면 원하는 결과를 얻을 수 없다.

왜 그런걸까?

1. i = 0일 때, function() { console.log(i); } 함수를 배열에 저장.

2. i = 1일 때도 또 함수 저장.

3. i = 2일 때도 또 함수 저장.

그래서 funcs에는 함수가 3개 저장:

[
  function() { console.log(i); },
  function() { console.log(i); },
  function() { console.log(i); }
]

이 세 함수는 모두 같은 i를 바라보고 있다! (어매나)

현재 위 코드에서 i는 모든 함수들이 같이 보는 공용 메모장 같은 것 반복문은 메모장에 숫자 적으면서 함수들을 저장해두는 거고, 함수들은 "나중에 저 메모장에 적힌 거 보고 출력할게!" 라고 약속해놓은 상황. 근데 반복문이 끝나고 나면, 메모장에는 3만 써 있음. (var라는 놈이 이래서 문제다,,) 그래서 함수들이 실행될 때마다 3만 출력

<script>
      window.onload = function () {
        // 문서내의 모든 버튼을 클릭했을때
        // 각각 "btn-0 클릭", "btn-1 클릭", "btn-2 클릭"
        // ... "btn-n 클릭"을 콘솔에 출력하시오.
        const btns = document.querySelectorAll("button");
        // IIFE pattern
        for (var i = 0; i < btns.length; i++) {
          ((num) => {
            btns[i].addEventListener("click", function () {
              console.log(`btn-${num}클릭`);
            });
          })(i);
        }
      };
    </script>

이런 방식으로 해결할 수 있다.

하지만 지금은 2025년.

ECMA6의 시대.

우리는 let과 forEach를 사용함으로써 이를 해결할 수 있다.

    // ECMA5 forEach
    // Array.prototype.forEach: 배열의 각 요소를 순회하면서 지정한 콜백 함수를 실행
    // 콜백 함수는 첫번째 인자로 배열의 요소, 두번째 인자로 요소의 인덱스를 전달받는다.
    // [btn1, btn2, btn3].forEach((btn, i) => { });
    btns.forEach(function(btn, i){
      btn.addEventListener('click', function(){
        console.log(`btn-${i} 클릭`);
      });
    });

    // ECMA6 let
    for(let i=0; i<btns.length; i++){
      btns[i].addEventListener('click', function(){
        console.log(`btn-${i} 클릭`);
      });
        }

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다.

이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요하다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다.

브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다.

<!DOCTYPE html>
<html>
<body>
  <button class="myButton">Click me!</button>
  <script>
    document.querySelector('.myButton').addEventListener('click', function () {
      alert('Clicked!');
    });
  </script>
</body>
</html>

이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.

2. 이벤트 루프(Event Loop)와 동시성(Concurrency)

브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다.

단일 쓰레드는 쓰레드가 하나뿐이라는 의미이며 이말은 곧 하나의 작업(task)만을 처리할 수 있다는 것을 의미한다. 하지만 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성(Concurrency)을 지원하는 것이 바로 이벤트 루프(Event Loop)이다.

브라우저의 환경을 그림으로 표현하면 아래와 같다. 이벤트 루프(Event Loop)와 브라우저의 환경

구글의 V8을 비롯한 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 나뉜다.

Call Stack(호출 스택) 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.

Heap 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.

이와 같이 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행할 뿐이다. 앞에서 언급한 동시성(Concurrency)을 지원하기 위해 필요한 비동기 요청(이벤트를 포함) 처리는 자바스크립트 엔진을 구동하는 환경 즉 브라우저(또는 Node.js)가 담당한다.

Event Queue(Task Queue) 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행된다. Event Loop(이벤트 루프) Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다. 아래의 예제가 어떻게 동작할지 살펴보자.

function func1() { console.log('func1'); func2(); }

function func2() { setTimeout(function () { console.log('func2'); }, 0);

func3(); }

function func3() { console.log('func3'); }

func1(); 함수 func1이 호출되면 함수 func1은 Call Stack에 쌓인다. 그리고 함수 func1은 함수 func2을 호출하므로 함수 func2가 Call Stack에 쌓이고 setTimeout가 호출된다. setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick” 이벤트가 발생하면 태스크 큐로 이동한 후 Call Stack이 비어졌을 때 Call Stack으로 이동되어 실행된다.

event-loop

이벤트 루프(Event Loop)에 의한 setTimeout 콜백함수의 실행

DOM 이벤트 핸들러도 이와 같이 동작한다.

function func1() { console.log('func1'); func2(); }

function func2() { // foo const elem = document.querySelector('.foo');

elem.addEventListener('click', function () { this.style.backgroundColor = 'indigo'; console.log('func2'); });

func3(); }

function func3() { console.log('func3'); }

func1(); 함수 func1이 호출되면 함수 func1은 Call Stack에 쌓인다. 그리고 함수 func1은 함수 func2을 호출하므로 함수 func2가 Call Stack에 쌓이고 addEventListener가 호출된다. addEventListener의 콜백함수는 foo 버튼이 클릭되어 click 이벤트가 발생하면 태스크 큐로 이동한 후 Call Stack이 비어졌을 때 Call Stack으로 이동되어 실행된다.

#3. 이벤트의 종류 대표적인 이벤트를 소개한다. 자세한 사항은 Event reference을 참조 바란다.

#3.1 UI Event Event Description load 웹페이지의 로드가 완료되었을 때 unload 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 resize 브라우저 창의 크기를 조절했을 때 scroll 사용자가 페이지를 위아래로 스크롤할 때 select 텍스트를 선택했을 때 #3.2 Keyboard Event Event Description keydown 키를 누르고 있을 때 keyup 누르고 있던 키를 뗄 때 keypress 키를 누르고 뗏을 때 #3.3 Mouse Event Event Description click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 누르고 있을 때 mouseup 누르고 있던 마우스 버튼을 뗄 때 mousemove 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) mouseover 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다) mouseout 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다) #3.4 Focus Event Event Description focus/focusin 요소가 포커스를 얻었을 때 blur/foucusout 요소가 포커스를 잃었을 때 #3.5 Form Event Event Description input input 또는 textarea 요소의 값이 변경되었을 때 contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때 change select box, checkbox, radio button의 상태가 변경되었을 때 submit form을 submit할 때 (버튼 또는 키) reset reset 버튼을 클릭할 때 (최근에는 사용 안함) #3.6 Clipboard Event Event Description cut 콘텐츠를 잘라내기할 때 copy 콘텐츠를 복사할 때 paste 콘텐츠를 붙여넣기할 때 #4. 이벤트 핸들러 등록 이벤트가 발생했을 때 동작할 이벤트 핸들러를 이벤트에 등록하는 방법은 아래와 같이 3가지이다.

#4.1 인라인 이벤트 핸들러 방식 HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법이다.

이 방식은 더 이상 사용되지 않으며 사용해서도 않된다. 오래된 코드에서 간혹 이 방식을 사용한 것이 있기 때문에 알아둘 필요는 있다. HTML과 Javascript는 관심사가 다르므로 분리하는 것이 좋다.

최근 관심을 받고 있는 CBD(Component Based Development) 방식의 Angular/React/Vue.js와 같은 프레임워크/라이브러리에서는 인라인 이벤트 핸들러 방식으로 이벤트를 처리한다. CBD에서는 HTML, CSS, 자바스크립트를 뷰를 구성하기 위한 구성 요소로 보기 때문에 관심사가 다르다고 생각하지 않는다.

주의할 것은 onclick과 같이 on으로 시작하는 이벤트 어트리뷰트의 값으로 함수 호출을 전달한다는 것이다. 다음에 살펴볼 이벤트 핸들러 프로퍼티 방식에는 DOM 요소의 이벤트 핸들러 프로퍼티에 함수 호출이 아닌 함수를 전달한다.

이때 이벤트 어트리뷰트의 값으로 전달한 함수 호출이 즉시 호출되는 것은 아니다. 사실은 이벤트 어트리뷰트 키를 이름으로 갖는 함수를 암묵적으로 정의하고 그 함수의 몸체에 이벤트 어트리뷰트의 값으로 전달한 함수 호출을 문으로 갖는다. 위 예제의 경우, button 요소의 onclick 프로퍼티에 함수 function onclick(event) { foo(); }가 할당된다.

즉, 이벤트 어트리뷰트의 값은 암묵적으로 정의되는 이벤트 핸들러의 문이다. 따라서 아래와 같이 여러 개의 문을 전달할 수 있다.

#4.2 이벤트 핸들러 프로퍼티 방식 인라인 이벤트 핸들러 방식처럼 HTML과 Javascript가 뒤섞이는 문제는 해결할 수 있는 방식이다. 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩할 수 있다는 단점이 있다.

#4.3 addEventListener 메소드 방식 addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.

Event Listener

addEventListener 메소드

addEventListener 함수 방식은 이전 방식에 비해 아래와 같이 보다 나은 장점을 갖는다.

하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다. 캡처링과 버블링을 지원한다. HTML 요소뿐만아니라 모든 DOM 요소(HTML, XML, SVG)에 대해 동작한다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성한다. addEventListener 메소드는 IE 9 이상에서 동작한다. IE 8 이하에서는 attachEvent 메소드를 사용한다.

if (elem.addEventListener) { // IE 9 ~ elem.addEventListener('click', func); } else if (elem.attachEvent) { // ~ IE 8 elem.attachEvent('onclick', func); } addEventListener 메소드의 사용 예제를 살펴보자.

위와 같이 대상 DOM 요소(target)를 지정하지 않으면 전역객체 window, 즉 DOM 문서를 포함한 브라우저의 윈도우에서 발생하는 click 이벤트에 이벤트 핸들러를 바인딩한다. 따라서 브라우저 윈도우 어디를 클릭하여도 이벤트 핸들러가 동작한다.

위 예제는 input 요소에서 발생하는 blur 이벤트에 이벤트 핸들러를 바인딩하였다. 사용자 이름이 최소 2자 이상이야한다는 규칙을 세우고 이에 부합하는지 확인해보자.

2자 이상이라는 규칙이 바뀌면 이 규칙을 확인하는 모든 코드를 수정해야 한다. 따라서 이러한 방식의 코딩은 바람직하지 않다. 이유는 규모가 큰 프로그램의 경우 수정과 테스트에 소요되는 자원의 낭비도 문제이지만 수정에는 거의 대부분 실수가 동반되기 때문이다.

2자 이상이라는 규칙을 상수화하고 함수의 인수로 전달도록 수정하자. 이렇게 하면 규칙이 변경되어도 함수는 수정하지 않아도 된다.

그런데 addEventListener 메소드의 두번째 매개변수는 이벤트가 발생했을 때 호출될 이벤트 핸들러이다. 이때 두번째 매개변수에는 함수 호출이 아니라 함수 자체를 지정하여야 한다.

function foo() { alert('clicked!'); } // elem.addEventListener('click', foo()); // 이벤트 발생 시까지 대기하지 않고 바로 실행된다 elem.addEventListener('click', foo); // 이벤트 발생 시까지 대기한다 따라서 이벤트 핸들러 프로퍼티 방식과 같이 이벤트 핸들러 함수에 인수를 전달할 수 없는 문제가 발생한다. 이를 우회하는 방법은 아래와 같다.

#5. 이벤트 핸들러 함수 내부의 this #5.1 인라인 이벤트 핸들러 방식 인라인 이벤트 핸들러 방식의 경우, 이벤트 핸들러는 일반 함수로서 호출되므로 이벤트 핸들러 내부의 this는 전역 객체 window를 가리킨다.

자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링이라 하고, 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링이라 한다. 주의할 것은 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다는 것이다. 즉, 이벤트가 발생했을 때 캡처링과 버블링은 순차적으로 발생한다.

캡처링은 IE8 이하에서 지원되지 않는다.

event flow

www.w3.org/TR/DOM-Level-3-Events

addEventListener 메소드의 세번째 매개변수에 true를 설정하면 캡처링으로 전파되는 이벤트를 캐치하고 false 또는 미설정하면 버블링으로 전파되는 이벤트를 캐치한다.

      //HTML 문서 로딩 완료, 이미지, CSS 같은 외부 컨텐츠 로딩 완료 후에 발생하는 이벤틏
      window.addEventListener("load", function () {});

      //HTML 문서 로딩 완료(DOM 객체 생성 완료) 후에 발생하는 이벤트
      document.addEventListener("DOMContentLoaded", function () {};

자바스크립트 코드를 짜며 window객체와 document객체의 차이에 대해 잘 알지 못하고 사용한 점이 생각나서 포스팅한 게시물입니다.

평소에 window / document 객체를 참조하는 흔한 작업들은 다음과 같았다.

1. 이벤트 리스너 등록

window.addEventListener("scroll", function () {});
document.addEventListener("click", function() {});

2. dom에 접근

document.body.style.backgroundColor = "#fafafc";
document.getElementById("nextForm").focus();

3. 스크롤 위치 이동

window.scrollTo(pos);

4. 창 닫기 / 열기

window.close();
window.open(url);

나열해놓고 보니 window객체와 document객체에서 하는 일이 뭔가 미묘하게 다른 건 알겠다.

하지만 여전히 명확한 차이가 무엇인지, 두 객체의 addEventListener가 어떤 차이인지 모르겠다.

다행히 이러한 궁금증을 나만 가진것이 아니었기 때문에 다른 분들이 stackoverflow에 작성하신 질문들이 있었고, 거기엔 좋은 답변들이 준비되어 있었다.

https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document

https://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener

결론만 요약하자면 다음과 같다.

• window 객체는 브라우저라는 host 환경에서 동작하는 최상위 객체로, 브라우저 환경에서 동작하는 여러 API들의 가교 역할을 한다. document, history, location, setTimout, cookieStore 등 다른 브라우저 api에 접근을 제공한다.

• JSDom등의 환경에서는 표준 window 객체의 인터페이스를 바탕으로 구현한 더미 window 객체(더미라고 해도 몇몇 기능들은 동작한다)를 사용하게 되는데 이 경우에는 실제 브라우저의 인터페이스와 다를 수 있으니 주의해야 한다.

• document 객체는 window에 로드되는 HTML 문서 그 자체를 나타내며(document 객체가 존재), 해당 문서 내부의 HTML Element, Css 등을 제어할 수 있는 여러 메서드를 제공한다. 보편적으로 window 객체의 프로퍼티로 제공된다. document 객체는 window.document 혹은 document로 접근이 가능하다.

• 일반적으로 querySelector 등의 메서드로 css selector 기반의 element 쿼리를 많이 하게 된다.

• window 객체는 전역으로 선언되어 있기 때문에 window객체 안에 있는 요소는 "window."와 같이 window객체를 참조하지 않고도 property 이름으로 바로 접근이 가능하다. 예컨대 window.innerHeight는 그냥 innerHeight로 접근이 가능하다. ( 오... 신기... 하지만 혼동이나 scope 등의 문제로 window.innerHeight 이런 식으로 사용하는 게 좋을 것 같다. ) document객체와 window객체에서 수용 가능한 eventList가 다르기 때문에, 같은 addEventListener이 있다고 하더라도, 각 용도에 맞게 호출해야 한다.

[결론] window.addEventLister VS document.addEventLister

사실 둘의 차이는 명확하지 않다. stackoverflow 에 나와 있는 설명에 의하면 각각이 제어하는 이벤트 리스너에 차이가 있기 때문에 구분해서 써야한다고 한다. 대표적으로 resize 이벤트가 있는데 이 이벤트의 경우 window 이벤트 리스너에는 있지만 document 이벤트 리스너에는 있지 않다.

하지만 click 과 같이 window 와 document 에 공통으로 들어가 있는 이벤트도 있는데 이 경우stackoverflow 의 답변은 이렇다.

전파된 이벤트의 유일한 주요 차이점은 타이밍입니다. 이벤트는 계층 구조에서 document 가 window 보다 먼저 발생하지만 일반적으로 그 차이는 중요하지 않으므로 둘 중 하나를 선택해도 됩니다. 일반적으로 전파된 이벤트를 처리할 때는 이벤트의 소스와 가장 가까운 객체를 선택하는 것이 필요에 부합합니다. 즉, 둘 다 작동할 때 window 보다 document 를 선택하는 것이 좋습니다.

직접 같은 이벤트를 등록하고 이벤트를 실행해보면, document 로 등록한 이벤트가 먼저 실행이 된다.

참조: https://nookpi.tistory.com/56

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면** 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다.** 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.

즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.

이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델: Document Object Model)을 생성한다.

이러한 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공된다. 이를 DOM API(Application Programming Interface)라고 부른다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.

DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 별개의 W3C의 공식 표준이며 플랫폼/프로그래밍 언어 중립적이다. DOM은 다음 두 가지 기능을 담당한다.

HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.

HTML 문서 내의 각 요소에 접근 / 수정 DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.

2. DOM tree

DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red  { color: #ff0000; }
      .blue { color: #0000ff; }
    </style>
  </head>
  <body>
    <div>
      <h1>Cities</h1>
      <ul>
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
      </ul>
    </div>
  </body>
</html>

DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 진입점(Entry point)는 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

DOM tree는 네 종류의 노드로 구성된다.

문서 노드(Document Node) 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

요소 노드(Element Node)🔴 요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고)

어트리뷰트 노드(Attribute Node)🟡🟢 어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

텍스트 노드(Text Node)⚪ 텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

DOM tree의 객체 구성

3. DOM Query / Traversing (요소에의 접근)

3.1 하나의 요소 노드 선택(DOM Query)

document.getElementById(id)

• id 어트리뷰트 값으로 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫번째 요소만 반환한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작

// id로 하나의 요소를 선택한다.
const elem = document.getElementById('one');
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = 'blue';

// 그림: DOM tree의 객체 구성 참고
console.log(elem); // <li id="one" class="blue">Seoul</li>

⭐document.querySelector(cssSelector)

• CSS 셀렉터를 사용하여 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫번째 요소만 반환한다.
• Return: HTMLElement를 상속받은 객체
• IE8 이상의 브라우저에서 동작

// CSS 셀렉터를 이용해 요소를 선택한다
const elem = document.querySelector('li.red');
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = 'blue';

3.2 여러 개의 요소 노드 선택(DOM Query)

document.getElementsByClassName(class)

• class 어트리뷰트 값으로 요소 노드를 모두 선택한다. 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
• Return: HTMLCollection (live)
• IE9 이상의 브라우저에서 동작

// HTMLCollection을 반환한다. HTMLCollection은 live하다.
const elems = document.getElementsByClassName('red');

for (let i = 0; i < elems.length; i++) {
  // 클래스 어트리뷰트의 값을 변경한다.
  elems[i].className = 'blue';
}

위 예제를 실행해 보면 예상대로 동작하지 않는다. (두번째 요소만 클래스 변경이 되지 않는다.)

document.getElementsByTagName(tagName)

• 태그명으로 요소 노드를 모두 선택한다.
• Return: HTMLCollection (live)
• 모든 브라우저에서 동작

// HTMLCollection을 반환한다.
const elems = document.getElementsByTagName('li');

[...elems].forEach(elem => elem.className = 'blue');

document.querySelectorAll(selector)

• 지정된 CSS 선택자를 사용하여 요소 노드를 모두 선택한다.
• Return: NodeList (non-live)
• IE8 이상의 브라우저에서 동작

// Nodelist를 반환한다.
const elems = document.querySelectorAll('li.red');

[...elems].forEach(elem => elem.className = 'blue');

3.3 DOM Traversing (탐색)

parentNode

• 부모 노드를 탐색한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작

const elem = document.querySelector('#two');

elem.parentNode.className = 'blue';

firstChild, lastChild

• 자식 노드를 탐색한다.
• Return: HTMLElement를 상속받은 객체
• IE9 이상의 브라우저에서 동작

const elem = document.querySelector('ul');

// first Child
elem.firstChild.className = 'blue';
// last Child
elem.lastChild.className = 'blue';

4. DOM Manipulation (조작)

4.1 텍스트 노드에의 접근/수정

요소의 텍스트는 텍스트 노드에 저장되어 있다. 텍스트 노드에 접근하려면 아래와 같은 수순이 필요하다.

1. 해당 텍스트 노드의 부모 노드를 선택한다. 텍스트 노드는 요소 노드의 자식이다.
2. firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색한다.
3. 텍스트 노드의 유일한 프로퍼티(nodeValue)를 이용하여 텍스트를 취득한다.
4. nodeValue를 이용하여 텍스트를 수정한다.

nodeValue

• 노드의 값을 반환한다.
• Return: 텍스트 노드의 경우는 문자열, 요소 노드의 경우 null 반환
• IE6 이상의 브라우저에서 동작한다.

nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.

// 해당 텍스트 노드의 부모 요소 노드를 선택한다.
const one = document.getElementById('one');
console.dir(one); // HTMLLIElement: li#one.red

// nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.
console.log(one.nodeName); // LI
console.log(one.nodeType); // 1: Element node

// firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색한다.
const textNode = one.firstChild;

// nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.
console.log(textNode.nodeName); // #text
console.log(textNode.nodeType); // 3: Text node

// nodeValue 프로퍼티를 사용하여 노드의 값을 취득한다.
console.log(textNode.nodeValue); // Seoul

// nodeValue 프로퍼티를 이용하여 텍스트를 수정한다.
textNode.nodeValue = 'Pusan';

4.2 어트리뷰트 노드에의 접근/수정

어트리뷰트 노드을 조작할 때 다음 프로퍼티 또는 메소드를 사용할 수 있다.

className

• class 어트리뷰트의 값을 취득 또는 변경한다. className 프로퍼티에 값을 할당하는 경우, class 어트리뷰트가 존재하지 않으면 class 어트리뷰트를 생성하고 지정된 값을 설정한다. class 어트리뷰트의 값이 여러 개일 경우, 공백으로 구분된 문자열이 반환되므로 String 메소드 split(' ')를 사용하여 배열로 변경하여 사용한다.
• 모든 브라우저에서 동작한다.

classList

• add, remove, item, toggle, contains, replace 메소드를 제공한다.
• IE10 이상의 브라우저에서 동작한다.

const elems = document.querySelectorAll('li');

// className
[...elems].forEach(elem => {
  // class 어트리뷰트 값을 취득하여 확인
  if (elem.className === 'red') {
    // class 어트리뷰트 값을 변경한다.
    elem.className = 'blue';
  }
});

// classList
[...elems].forEach(elem => {
  // class 어트리뷰트 값 확인
  if (elem.classList.contains('blue')) {
    // class 어트리뷰트 값 변경한다.
    elem.classList.replace('blue', 'red');
  }
});

id

• id 어트리뷰트의 값을 취득 또는 변경한다. id 프로퍼티에 값을 할당하는 경우, id 어트리뷰트가 존재하지 않으면 id 어트리뷰트를 생성하고 지정된 값을 설정한다.
• 모든 브라우저에서 동작한다.

// h1 태그 요소 중 첫번째 요소를 취득
const heading = document.querySelector('h1');

console.dir(heading); // HTMLHeadingElement: h1
console.log(heading.firstChild.nodeValue); // Cities

// id 어트리뷰트의 값을 변경.
// id 어트리뷰트가 존재하지 않으면 id 어트리뷰트를 생성하고 지정된 값을 설정
heading.id = 'heading';
console.log(heading.id); // heading

hasAttribute(attribute)

• 지정한 어트리뷰트를 가지고 있는지 검사한다.
• Return : Boolean
• IE8 이상의 브라우저에서 동작한다.

getAttribute(attribute)

• 어트리뷰트의 값을 취득한다.
• Return : 문자열
• 모든 브라우저에서 동작한다.

setAttribute(attribute, value)

• 어트리뷰트와 어트리뷰트 값을 설정한다.
• Return : undefined
• 모든 브라우저에서 동작한다.

removeAttribute(attribute)

• 지정한 어트리뷰트를 제거한다.
• Return : undefined
• 모든 브라우저에서 동작한다.

<!DOCTYPE html>
<html>
  <body>
  <input type="text">
  <script>
  const input = document.querySelector('input[type=text]');
  console.log(input);

  // value 어트리뷰트가 존재하지 않으면
  if (!input.hasAttribute('value')) {
    // value 어트리뷰트를 추가하고 값으로 'hello!'를 설정
    input.setAttribute('value', 'hello!');
  }

  // value 어트리뷰트 값을 취득
  console.log(input.getAttribute('value')); // hello!

  // value 어트리뷰트를 제거
  input.removeAttribute('value');

  // value 어트리뷰트의 존재를 확인
  console.log(input.hasAttribute('value')); // false
  </script>
  </body>
</html>

<!DOCTYPE html>
<html>
<body>
  <input class="password" type="password" value="123">
  <button class="show">show</button>
  <script>
    const $password = document.querySelector('.password');
    const $show = document.querySelector('.show');

    function makeClickHandler() {
      let isShow = false;
      return function () {
        $password.setAttribute('type', isShow ? 'password' : 'text');
        isShow = !isShow;
        $show.innerHTML = isShow ? 'hide' : 'show';
      };
    }

    $show.onclick = makeClickHandler();
  </script>
</body>
</html>

4.3 HTML 콘텐츠 조작(Manipulation)

HTML 콘텐츠를 조작(Manipulation)하기 위해 아래의 프로퍼티 또는 메소드를 사용할 수 있다. 마크업이 포함된 콘텐츠를 추가하는 행위는 크로스 스크립팅 공격(XSS: Cross-Site Scripting Attacks)에 취약하므로 주의가 필요하다.

⭐textContent

• 요소의 텍스트 콘텐츠를 취득 또는 변경한다. 이때 마크업은 무시된다. textContent를 통해 요소에 새로운 텍스트를 할당하면 텍스트를 변경할 수 있다. 이때 순수한 텍스트만 지정해야 하며 마크업을 포함시키면 문자열로 인식되어 그대로 출력된다.
• IE9 이상의 브라우저에서 동작한다.
• firstChild.nodeValue와 동일

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red  { color: #ff0000; }
      .blue { color: #0000ff; }
    </style>
  </head>
  <body>
    <div>
      <h1>Cities</h1>
      <ul>
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
      </ul>
    </div>
    <script>
    const ul = document.querySelector('ul');

    // 요소의 텍스트 취득
    console.log(ul.textContent);
    /*
            Seoul
            London
            Newyork
            Tokyo
    */

    const one = document.getElementById('one');

    // 요소의 텍스트 취득
    console.log(one.textContent); // Seoul

    // 요소의 텍스트 변경
    one.textContent += ', Korea';

    console.log(one.textContent); // Seoul, Korea

    // 요소의 마크업이 포함된 콘텐츠 변경.
    one.textContent = '<h1>Heading</h1>';

    // 마크업이 문자열로 표시된다.
    console.log(one.textContent); // <h1>Heading</h1>
    </script>
  </body>
</html>

⭐innerHTML

• 해당 요소의 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득할 수 있다. 이 문자열은 마크업을 포함한다.

const ul = document.querySelector('ul');

// innerHTML 프로퍼티는 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득할 수 있다. 이 문자열은 마크업을 포함한다.
console.log(ul.innerHTML);
// IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 또는 줄바꿈 문자를 텍스트 노드로 취급한다
/*
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
*/

innerHTML 프로퍼티를 사용하여 마크업이 포함된 새로운 콘텐츠를 지정하면 새로운 요소를 DOM에 추가할 수 있다.

const one = document.getElementById('one');

// 마크업이 포함된 콘텐츠 취득
console.log(one.innerHTML); // Seoul

// 마크업이 포함된 콘텐츠 변경
one.innerHTML += '<em class="blue">, Korea</em>';

// 마크업이 포함된 콘텐츠 취득
console.log(one.innerHTML); // Seoul <em class="blue">, Korea</em>

위와 같이 ⚠️마크업이 포함된 콘텐츠를 추가하는 것은 크로스 스크립팅 공격(XSS: Cross-Site Scripting Attacks)에 취약하다.

//솔루션 1: createElement() 메서드 사용
        const newLi = document.createElement("li");
        const newTxt = document.createTextNode("우유");

        console.log(newLi.childNodes, newLi.firstChild, newLi.lastChild);
        newLi.appendChild(newTxt);
        //shoppingList.appendChild(newLi); //맨 끝에 추가
        shoppingList.insertBefore(newLi, shoppingList.firstChild); //맨 앞에 추가
        /*
         *shoppingList.innerHTML += "<li>우유</li>";
         */

4.4 DOM 조작 방식

innerHTML 프로퍼티를 사용하지 않고 새로운 콘텐츠를 추가할 수 있는 방법은 DOM을 직접 조작하는 것이다. 한 개의 요소를 추가하는 경우 사용한다. 이 방법은 다음의 수순에 따라 진행한다.

1. 요소 노드 생성 createElement() 메소드를 사용하여 새로운 요소 노드를 생성한다. createElement() 메소드의 인자로 태그 이름을 전달한다.

2. 텍스트 노드 생성 createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 생성한다. 경우에 따라 생략될 수 있지만 생략하는 경우, 콘텐츠가 비어 있는 요소가 된다.

3. 생성된 요소를 DOM에 추가 appendChild() 메소드를 사용하여 생성된 노드를 DOM tree에 추가한다. 또는 removeChild() 메소드를 사용하여** DOM tree에서 노드를 삭제할 수도 있다.**

createElement(tagName)

• 태그이름을 인자로 전달하여 요소를 생성한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작한다.

createTextNode(text)

• 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
• Return: Text 객체
• 모든 브라우저에서 동작한다.

⭐appendChild(Node)

• 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
• Return: 추가한 노드
• 모든 브라우저에서 동작한다.

removeChild(Node)

• 인자로 전달한 노드를 DOM 트리에 제거한다.
• Return: 추가한 노드
• 모든 브라우저에서 동작한다.

// 태그이름을 인자로 전달하여 요소를 생성
const newElem = document.createElement('li');
// const newElem = document.createElement('<li>test</li>');
// Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<li>test</li>') is not a valid name.

// 텍스트 노드를 생성
const newText = document.createTextNode('Beijing');

// 텍스트 노드를 newElem 자식으로 DOM 트리에 추가
newElem.appendChild(newText);

const container = document.querySelector('ul');

// newElem을 container의 자식으로 DOM 트리에 추가. 마지막 요소로 추가된다.
container.appendChild(newElem);

const removeElem = document.getElementById('one');

// container의 자식인 removeElem 요소를 DOM 트리에 제거한다.
container.removeChild(removeElem);

잘못된 생각

최근까지 javascript는 함수 호출 시 참조형이면 넘길 때도 call by reference로 넘겨지고, 원시형이면 call by value로 넘겨지는 줄 알고 있었다.

그러다 최근 질문이 들어와서 답해주려다 자세히 알아보니, 잘못 알고 있었다는 것을 깨달았다.

Call by Value & Call by Reference 우선 흔히 알고 있는 두 가지 개념에 대해 살펴보자

Call by Value

호출자가 실제 매개 변수를 평가하고 그 값을 호출자에게 전달하는 관례 호출자에서 값 매개 변수의 수정 내용은 호출자에서 볼 수 없다.

Call by Reference

호출자(caller)가 함수에 전달한 실제 매개변수(actual parameter)가 변수일 경우, 컴파일러가 '해당 변수의 주소'를 호출된 함수(callee)에 전달한다. 호출된 함수 내에서 해당 매개 변수에 접근할 때, 실제 변수의 주소를 이용하여 값을 변경할 수 있게 된다. 함수 내에서 변경된 값이 호출자에서 전달한 변수에도 반영되는 결과를 가져오게 되는 것이다.

결론적으로 매개변수의 값이 아니라 주소가 전달되며, 이를 이용하여 함수 내에서 매개 변수의 값을 변경할 수 있다.

JS의 Call by reference?

간단히 말하면 JS에는 Call by reference가 존재하지 않는다.

이전까지는 초반에 언급했듯이 참조형이면 넘길 때도 call by reference로 넘겨지고, 원시형이면 call by value로 넘겨지는 줄 알고 있었다.

그래서 js는 c와는 다르게

매개변수의 타입이 참조형이면, call by reference 방식으로 넘겨주게 되어

callee 내에서 원본을 컨트롤할 수 있는 것이라고 생각했다.

아래의 예시로 착각했던 이유를 덧붙이겠다.

const test = (obj) => {
  obj.a = 23;
};

let b = { a: 1 };
console.log(b);
test(b);
console.log(b);

위 코드는 함수 내에서 전달받은 객체의 값을 23으로 바꾸는 역할을 한다.

실제로 실행해보면, 함수 호출 전의 출력과 호출 후의 출력이 변하여,

마치 call by reference에 의해 원본이 callee 내에서 수정된 것처럼 보인다.

사실 틀린 이해였다.

다른 예시를 이어서 보자.

const test = (obj) => {
  obj = { a: 23 };
};

let b = { a: 1 };
console.log(b);
test(b);
console.log(b);

얼핏 보면 이전 예시와 같은 동작을 하는 것처럼 보인다.

그러나 실행 결과를 확인해보면,

함수 실행 후에도 객체 b의 내용이 변하지 않은 것을 확인할 수 있었다.

그렇다면 지금 이게 무슨 상황인가?

??

우선 call by value였다면 첫번째 예시가 설명되지 않는다.

원본에 영향을 미쳤기 때문이다.

그런데 call by reference로도 설명이 되지 않는다.

두번째 예시에선 원본에 영향을 미치지 않았기 때문이다.

찾아보니 아래와 같은 개념이 있었다.

Call by Sharing

함수에 전달된 인수가 caller에서 볼 수 있는 방식으로 변형될 수 있지만, 인수로 전달된 특정 변수에 대한 엑세스는 제공되지 않는다.

이게 무슨 말인가?할 수 있다.

_**즉 참조값을 직접적으로 전달하는 것이 아닌,

그 주소에 대한 복사본을 만들어서 전달하는 방식인 것이다.**_

위에서 봤던 예시와 함께 다시 정리해보자

(예시에서 등장하는 메모리 주소는 임의의 값이다)

첫번째 예시

const test = (obj) => {
  obj.a = 23;
};

let b = { a: 1 };
console.log(b);
test(b);
console.log(b);

아래는 위 과정을 도식화한 것이다.

첫번째 예시는

넘겨받은 주소의 복사본을 통해 점 연산자 ( ' . ' )를 사용하여 원본 객체 프로퍼티에 접근하여 새로운 값을 할당해준 것을 알 수 있을 것이다.

두번째 예시

const test = (obj) => {
  obj = { a: 23 };
};

let b = { a: 1 };
console.log(b);
test(b);
console.log(b);

아래는 두번째 예시의 도식화 버전이다.

두번째 예시는

넘겨받은 주소의 복사본이 담겨있던 obj에 { a: 23 }이라는 새로운 값을 할당해준 것이기 때문에

다시 caller로 돌아왔을 때 0x01에는 여전히 { a: 1 }이 남아있는 것을 알 수 있을 것이다.

이렇게 Javascript는 call by sharing이라는 방식을 사용하고 있다

참고자료 https://hou27.tistory.com/entry/JS-call-by-reference%EA%B0%80-%EC%97%86%EB%8A%94-javascript

일반적인 배열은 동일한 크기의 메모리 공간이 연속적으로 나열된 밀집 배열이다.

이처럼 배열의 요소는 동일한 크기를 갖으며 빈틈없이 연속적으로 이어져 있으므로 아래와 같이 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근(임의 접근(random access), 시간 복잡도 O(1))할 수 있다. 이는 매우 효율적이며 고속으로 동작한다.

검색 대상 요소의 메모리 주소 = 배열의 시작 메모리 주소 + 인덱스 * 요소의 바이트 수

예를 들어, 위 그림처럼 메모리 주소 1000에서 시작하고 각 요소의 크기가 8byte인 배열을 생각해 보자.

인덱스가 0인 요소의 메모리 주소 : 1000 + 0 * 8 = 1000 인덱스가 1인 요소에 메모리 주소 : 1000 + 1 * 8 = 1008 인덱스가 2인 요소에 메모리 주소 : 1000 + 2 * 8 = 1016 이처럼 배열은 인덱스를 통해 효율적으로 요소에 접근할 수 있다는 장점이 있다. 하지만 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색(linear search), 시간 복잡도 O(n))해야 한다.

// 선형 검색을 통해 주어진 배열(array)에 주어진 값(target)이 요소로 존재하는지 확인하여 // 존재하는 경우 해당 인덱스를 반환하고 존재하지 않는 경우 -1을 반환하는 함수 function linearSearch(array, target) { const length = array.length;

for (let i = 0; i < length; i++) { if (array[i] === target) return i; }

return -1; }

console.log(linearSearch([1, 2, 3, 4, 5, 6], 3)); // 2 console.log(linearSearch([1, 2, 3, 4, 5, 6], 0)); // -1 또한 배열에 요소를 삽입하거나 삭제하는 경우, 배열 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 하는 단점도 있다.

배열 요소의 삽입과 삭제

자바스크립트의 배열은 지금까지 살펴본 일반적인 의미의 배열과 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)이라 한다.

이처럼 자바스크립트의 배열은 엄밀히 말해 일반적 의미의 배열이 아니다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다. 아래 예제를 살펴보자.

console.log(Object.getOwnPropertyDescriptors([1, 2, 3])); /* { '0': { value: 1, writable: true, enumerable: true, configurable: true }, '1': { value: 2, writable: true, enumerable: true, configurable: true }, '2': { value: 3, writable: true, enumerable: true, configurable: true }, length: { value: 3, writable: true, enumerable: false, configurable: false } } */ 이처럼 자바스크립트 배열은 인덱스를 프로퍼티 키로 갖으며 length 프로퍼티를 갖는 특수한 객체이다. 자바스크립트 배열의 요소는 사실 프로퍼티 값이다. 자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있다.

const arr = [ 'string', 10, true, null, undefined, NaN, Infinity, [ ], { }, function () {} ]; 일반적인 배열과 자바스크립트 배열의 장단점을 정리해보면 아래와 같다.

일반적인 배열은 인덱스로 배열 요소에 빠르게 접근할 수 있다. 하지만 특정 요소를 탐색하거나 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.

자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 배열 요소에 접근하는 경우, 일반적인 배열보다 성능적인 면에서 느릴 수 밖에 없는 구조적인 단점을 갖는다. 하지만 특정 요소를 탐색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

즉, 자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우에는 일반적인 배열보다 느리지만 특정 요소를 탐색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠르다. 자바스크립트 배열은 인덱스로 접근하는 경우의 성능 대신 특정 요소를 탐색하거나 배열 요소를 삽입 또는 삭제하는 경우의 성능을 선택한 것이다.

이처럼 인덱스로 배열 요소에 접근할 때 일반적인 배열보다 느릴 수 밖에 없는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구별하여 보다 배열처럼 동작하도록 최적화하여 구현하였다.

아래와 같이 배열과 일반 객체의 성능을 테스트 해보면 배열이 일반 객체보다 약 2배 정도 빠른 것을 알 수 있다.

const arr = [];

console.time('Array Performance Test');

for (let i = 0; i < 10000000; i++) { arr[i] = i; } console.timeEnd('Array Performance Test'); // 약 340ms

const obj = {};

console.time('Object Performance Test');

for (let i = 0; i < 10000000; i++) { obj[i] = i; }

console.timeEnd('Object Performance Test'); // 약 600ms

Next → 5.30 Higher order function Back to top

© 2021 Ung-mo Lee

Hosted on GitHub Pages Using MarkSheet

In his heart a man plans his course, but the LORD determines his steps.