Written by coh at home

개발자로서 1년차를 회고하다

och — Wed, 18 Feb 2026 23:59:31 +0900

사실 1년이 지난 지는 꽤나 지난 시점이다. 25년 11월 11일에 1년차가 되었고, 이미 설연휴까지 지난 시점이다. 이미 많은 시간이 지났지만 스스로 다짐과 목표를 다시금 상기하는 의미로 블로그에 회고를 공개하고자 한다.

25년에는 참 많은 야근을 했던 것 같다. 지금 생각하면 바보 같은 일이지만, 신입으로서 뛰어난 퍼포먼스를 보여주고 싶었고 무리를 해서라도 일정 내에 일을 끝내고 싶었다. 그래서 밤 10시에 퇴근하기도 했고, 부모님 환갑 휴가도 쓰지 않고 반납하며 일을 진행했다. 팀원으로서 인정을 받았을지언정 나의 건강이나 내면은 나빠져갔다. 그러다가 이렇게 일을 하면 안 된다는 것을 1년차에 깨닫게 되었다.

팀장님에과 일정을 조율할 때 내가 야근을 하지 않고, 회의와 모든 이벤트를 고려했을 때 일정을 도출해야한다는 사실을 1년차가 되어서야 깨달았다. 그 사실을 아무도 알려주지 않았고, 회사를 다니며 다른 동료직원이 일정을 못 맞춰서 팀장님에게 깨지는 것을 옆에서 듣고 깨달았다. 그래서 1월부터는 그렇게 일정을 세웠다. 그 결과 저녁이 있는 삶이 보장이 되었고 그 결과 회사는 꽤나 다닐만한 곳이었다. 일정을 세울 때 간트차트로 이야기하게 되었고, 이를 통해 내 업무의 자율성을 획득하고 야근 압박에서 벗어나게 되었다. 빨리 알았다면 참 좋았을 텐데.

25년도 내 성과 평과는 B를 받았다. 시키는 것만 잘했다는 의미이다. 그래서 이번엔 시키는 것 + a를 하고 있고, 도전적인 주제를 전달해서 우리 팀의 생산성과 성과를 높이고자 한다. 무엇을 만들면 좋을지 고민하고 그것을 개발해서 내 성과를 높이고자 한다.

25.12 ~ 26.01 Agent DB design

26.01 ~ 26.01 Parameter Validation 고도화 기능 -> (+a 장비의 전체뷰, 보고서 엑셀 기능 추가)

26.02 ~ 26.02 Machine Issue Management 요청사항 처리 -> (+a 로 댓글기능에서의 알림기능을 추가하고자 함)

2월 4째주는 회사 워크숍교육으로 인해 일을 못한다.

26.03 Agent Web FrontEnd 작업

26.03 ~ 26.04 Server Monitoring (제안)

26.04 ~ 26.05 Asset Monitoring (제안)

[혼공바코] 3주차

och — Wed, 18 Feb 2026 22:40:47 +0900

- 학습

# Claude.md

proj의 구조, 코딩스타일, 핵심명령어를 문서화한 설정파일. 클로드코드 실행 시 자동으로 읽어들임. 3가지 특징이 핵심.

1. 맥락유지

2. 규칙저장

3. 자동로드

간결하고 명확하게 작성해야한다.

## 작성하는 법

처음에 /init명령어를 통해 기본 프로젝트 구조를 클로드가 파악한 후 작성하게 된다.

- 기본숙제

프로그램 만들고 인증하기.

- 심화숙제

[혼공바코] 2주차

och — Sun, 18 Jan 2026 19:30:32 +0900

2주차 기본미션

PROJECT 2. 마케팅 포트폴리오 웹페이지 만들고 캡처하기

p.66, p.80-81 확인 문제 풀고 인증하기

P66

1. 3번

2. 5W1H

3. 2번

4. 2번/구체적인 프롬프트

P80-81

1. 3번

2. 2번

[혼공바코 with 클로드코드] 1주차

och — Sun, 11 Jan 2026 17:15:04 +0900

바이브코딩이란?

AI와 대화를 하며 개발하는 코딩 방식

모델선택형 vs 전용 모델형

모델 선택 : 커서, 윈드서프 -> 도구사용료 + 모델비용

전용 모델 : 클로드, 제미나이 -> 모델비용만 지불. 로컬 파일 접근 가능

웹페이지 만들어보기

https://github.com/taehojo/vibecoding/blob/master/PROMPTS.md
클로드 홈페이지에서 앤트로픽의 아티팩트를 이용하여 생성.
아티팩트 > 새 아티팩트 > 웹/앱 만들기

프롬프트의 중요성

좋은 프롬프트란? 정확하고 구체적인 명령.

명확성 : 모호한 표현 피하고 원하는 결과 전달
구체성 : 필요한 기능이나 조건 세부적 지시
맥락제공 : 왜 필요한지, 어떤 상황에 사용되는지 전달

좋은 프롬프트를 만드는 프레임워크 : 5W1H

Why
Who
What
When
Where
How

이건 결국 PRD와 일치하게 된다.
PRD란, 제품 기획서로 개발 전에 작성하는 문서

AI에게 PRD를 만든 후 이를 기반으로 작성하는 것이 가장 효과적인 프롬프트.

뼈대 : 기본 HTML구조 및 섹션 별 고유 아이디
기능 : 실제 데이터 추가 및 로직 구현
디자인 : UI/UX 적용 및 레퍼런스 (WD press)
점검 : 테스트 및 품질 검수

기본미션

1. 나의 첫웹페이지 만들고 캡쳐하기

2. p33, p54-55

p33

1번문제. 순서대로. 챗지피티, 커서, 클로드코드

2번문제. 순서대로. 바이브코딩, AI어시스턴트, 모델 선택형, 전용 모델형

p54-55

1번문제. 딥러닝 -> 뉴럴넷 -> 트랜스포머 -> LLM

2번문제. 도구사용료와 모델 비용을 모두 지불한다.

3번문제. 아티팩트

4번문제. 게시

5번문제. 사용자지정

[도서리뷰] 혼자공부하는 바이브코딩

och — Mon, 29 Dec 2025 22:24:19 +0900

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

바이브 코딩에 대한 관심이 높아지는 와중에 한빛미디어에서 바이브코딩 자습서를 출간했습니다. 저 또한 개발을 하면서 바이브 코딩을 많이 하고 있는데요, 그래서 특히 관심이 가서 읽어보게 되었습니다.

우선, 책은 '클로드 코드'를 이용하여 실습 위주의 내용이 주를 이루고 있습니다. 해당 책을 통해 간단한 포트폴리오 웹사이트, 손글씨 인식 프로그램 등을 만들어 볼 수 있는데요, 직접 코딩하지 않고 명령어를 프롬프트에 전달하는 것만으로도 프로그램을 만들어 볼 수 있습니다. 그래서 개발을 전혀 할 줄 몰라도 프로그램을 뚝딱 만들 수 있다는 것이 이 책의 특징입니다.

개발자로서 책에서 좋았던 것은 3가지 입니다.

1. 어떻게 프롬프트를 이용해야 하는가

2. 클로드 설정 파일(CLAUDE.md)을 어떻게 이용해야 하는가

3. 클로드 코드를 처음 사용할 때 알면 좋은 기능 정보들.

지금까지 AI를 활용하면서 5W1H(프롬프트를 작성할 때 전달할 내용)을 작성해보진 않았는데, 제가 지금껏 느낌적으로 작성했던 프롬프트와는 좀 달라서 한번 적용해보려고 합니다. ㅎㅎ 그리고 클로드 설정파일은 저는 무조건 활용해야한다고 생각했는데 책에서 다루고 있어서 그 점이 좋았습니다. 마지막으로 저는 클로드 코드를 처음 접했을 때, 모르는 것이 많아서 못 쓰는 기능이 많았습니다. 그런 부분을 혼공바에선 확실하게 긁어주고 있습니다. 혼공바에선 기능들을 실습과 함께 어떻게 사용하는지 배울 수 있어서 사용자가 문서를 읽는 시간을 아낄 수 있습니다.

AI시대, 어떻게 개발이 진행되고 있는지 관심이 있다면 꼭 추천해주고 싶은 책입니다.

[Real Mysql] 시스템변수

och — Sat, 13 Dec 2025 15:41:53 +0900

[DB] 백업 및 복원 고도화

och — Fri, 7 Nov 2025 22:57:23 +0900

개요

목적

기존의 백업도구(mysqldump)는 데이터량에 따라 백업과 복원 시간이 선형적 혹은 그 이상으로 증가한다. 이를 개선한다.
백업과 복원이 얼마나 진행되었는지 정보를 제공한다.
백업과 복원에 대한 히스토리를 제공한다.
목표
백업과 복원 속도를 개선한다.
백업과 복원에 대한 정보를 제공한다.
배경
DB의 메모리는 서버의 50%까지 사용한다.
서버의 하드디스크 크기는 1Tb이다.

운영환경

DB에 5초마다 730건의 record가 insert가 되고 있다.
최초 풀백업 데이터량은 약 5억건이다.
이미지, 동영상 파일도 백업이 되어야한다.

테스트 환경

0.1초마다 730 record insert를 1000회 수행 후 증분백업 진행. (약 5000초 가정)

기존 시스템

우리의 DB에는 약 9억건의 데이터가 존재하는 DB가 있다. 이를 mysqldump로 풀백업 및 복원을 했을 때 시간은 다음과 같다.

백업 : 약 1시간
복원 : 약 14시간

이는 mysqldump의 특징으로 데이터의 양이 많을 수록 복원 성능이 무척 떨어진다. 이를 이해하기 위해선 논리적 백업과 물리적 백업에 대해 이해할 필요가 있다.

논리적 백업 vs 물리적 백업

논리적 백업 : 데이터를 sql문으로 저장한다. 실제로 mysqldump의 파일을 열어보면 insert로 백업이 되는 것을 확인할 수 있다.
물리적 백업 : 데이터 파일을 직접 복사한다. 따라서 백업된 파일의 크기가 DB의 크기와 비슷하다.

논리적 백업은 insert를 계속하게 되면 OS에서는 더티페이지가 쌓이게 되고 이것을 주기적으로 플러싱하는 과정이 발생하게 된다. 따라서 데이터양이 많을수록 복원시간은 선형시간보다 더 증가하게 된다.

물리적 백업은 데이터 파일을 직접 복사하다보니 백업 파일의 용량이 크다. 따라서 용량 관리가 필수적이다. 복원도 파일을 다시 복사하는 방식이다보니 백업 속도와 비슷하다.

각 백업 종류에 따른 풀백업 및 복원 시간 비교

9억건	논리적 백업	물리적 백업
백업시간	1시간 8분	57분
복원시간	14시간 52분	45분

<소문난 명강의> 크리핵티브의 한 권으로 끝내는 웹 해킹 바이블

och — Mon, 27 Oct 2025 07:25:34 +0900

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

“공격을 알아야 방어가 보인다”라는 문구가 딱 맞는 책이다. 이 책은 웹 개발자와 정보보안 입문자가 실무에서 통하는 보안 감각을 빠르게 기를 수 있도록 구성된 실용서다. 단순한 공격 나열이나 도구 사용법에 그치지 않고, 왜 그런 공격이 가능한지(원리)와 프로그램·프레임워크·운영체제·네트워크 관점에서 취약점이 어떻게 연결되는지를 함께 설명하려는 점이 가장 큰 장점이다.

핵심 구성과 장점

기본기부터 실습까지의 자연스러운 흐름
웹 기술의 기초를 다진 뒤, 웹 프록시 등 실습 도구로 직접 공격을 재현해보는 구조라 따라가기가 쉽다. 이론 → 도구 이해 → 실습의 흐름이 학습 곡선을 완만하게 만들어 준다.
핵심 공격 기법의 실전적 접근
SQL 인젝션, OS 커맨드 인젝션, XSS 등 주요 취약점에 대해 단편적 예제가 아니라 실제 환경에서의 재현과 해석을 통해 “왜 취약한가”를 체득하게 한다. 이 때문에 단순히 시그니처만 찾는 수준을 넘어서 구조적·근본적 취약점 식별 능력이 생긴다.
시스템 전반을 보는 시야 확장
코드 수준뿐 아니라 프레임워크, 라이브러리, 운영체제, 네트워크 등 다양한 층(layer)을 연결해 설명해 주므로, 문제를 더 넓게 보는 습관이 생긴다. 이는 보안 실무에서 매우 중요한 능력이다.

아쉬운 점

초보자에게는 일부 심화 설명이 빠르게 느껴질 수 있다. 기본 개념에 아주 서투른 독자라면 별도의 기초 자료와 병행 학습하면 더 효과적이다.

[혼공학습단] 후기

och — Sun, 24 Aug 2025 22:32:37 +0900

이야,,, 회사일을 병행하면서 공부를 하는 게 쉽지 않더라구요,, 특히 7월말부터 플젝 마감과 이슈 대응을 하면서 저녁 늦게 야근을 많이했는데요... 거의 회사에 있는 시간만 12시간이 넘어갔어요... (오전 8시 ~ 오후 8:30)

그러다보니 혼공스를 읽는 속도도 더뎌지더라구요,,, 매번 기한 늘려주신 족장님 다시한번 감사하고 죄송합니다 ㅜㅜ

근데! 사실 병행해서 힘들었단 이야기보다 오히려, 병행을 했기때문에 더 보람찬 주말을 보낼 수 있었다는 이야기를 하고 싶어요. 주중에 이렇게 일이 힘들면, 주말엔 그냥 누워서 영화나 드라마 보면서 시간을 보내곤 했을 텐데 혼공학습단 덕분에 완주를 할 수 있었습니다.

물론 아직 ch8이 남아있어서 불완전한 완주지만요 ㅠㅠ 이건 반드시 다음주 내로 다 읽고 업데이트 하도록 하겠습니다.

게으른 제가 힘내서 책을 읽을 수 있게 도와주신 족장님 다시한번 너무 감사드립니다.

정말 혼공학습단 아니었으면 이 기간을 보람차게 보내지 못했을 것 같아요. 다음에도 꼭 참여할 건데, 그땐 기한 꼭 지키도록 하겠습니닷!!

[혼공스] 6주차 Ch7, 8

och — Sun, 24 Aug 2025 22:19:22 +0900

숙제

p352 누적예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기

<!DOCTYPE html>
<html lang="en">
<head>
<script>

document.addEventListener('DOMContentLoaded', () => {

    const todoList = document.querySelector('#todo-list')
    const input = document.querySelector('#todo')
    const addBtn = document.querySelector('#add-button')

    let keyCount = 0;
    const addTodo = () => {
        if (input.value.trim() === '') {
            alert ('Add your todo-list')
            return
        }
        const item = document.createElement('div')
        const checkBox = document.createElement('input')
        const text = document.createElement('span')
        const button = document.createElement('button')

        const key = keyCount
        keyCount += 1

        item.setAttribute('data-key', key)
        item.appendChild(checkBox)
        item.appendChild(text)
        item.appendChild(button)
        todoList.appendChild(item)

        checkBox.type = 'checkbox'
        checkBox.addEventListener('change', (e) => {
            item.style.textDecoration = e.target.checked ? 'line-through' : ''
        })

        text.textContent = input.value;
        button.textContent = 'remove'
        button.addEventListener('click', (e) => {
            // item.parentNode.removeChild(item)
            removeTodo(key);
        })

        input.value =''

    }
    const removeTodo = (key) => {
            const item = document.querySelector(`[data-key="${key}"]`)
            todoList.removeChild(item);
        }

    addBtn.addEventListener('click', addTodo)
        input.addEventListener('keyup', (e) => {
            const ENTER = 13; 
            if (e.keyCode === ENTER)
                addTodo()
        })
})
</script>
<style>
    h1 { user-select: none;}
</style>
</head>
<body>
    <h1>할 일 목록</h1>
    <input id="todo" />
    <button id="add-button">ADD</button>
    <div id="todo-list"></div>
</body>
</html>

ch7 문서책체

html의 태그들을 자바스크립트에서는 document object라고 부른다. 이런 태그들로 만든 형태를 문서객체모델(DOM)이라고 한다.

DOMContentLoaded

<!DOCTYPE html>
<html>
    <head>
        <title>Doc</title>
    </head>
    <body>
    </body>
</html>

웹브라우저의 실행 순서는 다음과 같다.

: html5문서구나
html 태그 만들어야지
head 태그 만들어야지
title 태그가 있으니 반영해야지
body 태그가 있으니 반영해야지

만약 body태그가 만들어지지 않았는데 body에 무언가를 출력하려고 하면 문제가 발생한다.
따라서 이를 해결하기 위해서, 웹브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트가 DOMContentLoaded이다.

documnet.addEventListener('DOMContentLoaded', () => {
    const h1 = (text) => `<h1>${text}</h1>`;
    document.body.innerHTML += h1('hello');
});

문서객체 가져오기

head, body, title태그를 제외한 다른 요소들은 querySelector라는 메서드를 통해서 요소를 가져올 수 있다.

document.body
document.head
document.title

document.querySelector(선택자) // 문서객체 한 개
document.querySelctorAll(선택자) // 문서객체 여러개

선택자 부분에는 CSS 선택자를 입력해야한다. 기본적인 CSS 선택자는 다음과 같다.

이름	선택자형태	설명
태그 선택자	태그	특정 태그를 가진 요소 추출
아이디 선택자	#아이디	특정 id 속성을 가진 요소를 추출
클래스 선택자	.클래스	특정 class 속성을 가진 요소를 추출
속성 선택자	[속성=값]	특정 속성 값을 갖고 있는 요소를 추출
후손 선택자	선택자_A 선택자_B	선택자_A 아래의 선택자_B를 선택

querySelector
문서 객체 한 개 선택.

document.addEventListener('DOMContentLoaded', () => {
        const header = document.querySelector('h1')

        header.textContent = 'HEADER'
        header.style.color = 'white'
        header.style.backgroundColor = 'black'
        header.style.padding = '10px'
    })

querySelectorAll
문서객체 여러 개 선택. forEach문을 사용해서 활용한다.

document.addEventListener('DOMContentLoaded', () => {
        const header = document.querySelectorAll('h1')

        header.forEach((header, idx) => {
            header.textContent = 'HEADER_' + idx
            header.style.color = 'white'
            header.style.backgroundColor = 'black'
            header.style.padding = '10px'
        })
    })

글자 조작하기

속성이름	설명
문서객체.innerHTML	입력된 문자열을 html형식으로 넣는다
문서객체.textContent	입력된 문자열 그대로 넣는다

    document.addEventListener('DOMContentLoaded', () => {
        const a = document.querySelector('#a')
        const b = document.querySelector('#b')

        a.textContent = '<h1>textContent</h1>'
        b.innerHTML = '<h1>innerHTML</h1>'
    })

속성 조작하기

메서드를 통해 문서 객체의 속성을 조작할 수 있다. class, src, id 등 속성을 부여하거나 가져올 수 있다.
setAttribute(속성이름, 값)
getAttribute(속성이름)

    <img class="rect" />
    <img class="rect" />
    <img class="rect" />
    <img class="rect" />
...

document.addEventListener('DOMContentLoaded', () => {
        const rects = document.querySelectorAll('.rect');

        rects.forEach((rect, idx) => {
            const width = (idx + 1) * 100;
            const src = `http//placekitten.com/${width}/250`
            rect.setAttribute('src', src);
        })
    })

스타일 조작하기

문서 객체의 스타일을 먹이기 위해서 style 속성을 사용한다. CSS파일을 이용할 때와 이름이 살짝 다르다. 낙타표기법을 사용한다.
text-align -> textAlign 이렇게!

속성을 먹이는 방법은 다음과 같다.
h1.style.backgroundColor = 'black'

    document.addEventListener('DOMContentLoaded', () => {
        const divs = document.querySelectorAll('div')

        divs.forEach((div, idx) => {
            console.log(div, idx)
            const val = idx * 10;
            div.style.height = `10px`
            div.style.backgroundColor = `rgba(${val}, ${val}, ${val})`;
        });
    });

문서객체 생성하기

document.createElement(문서객체이름) 메서드를 통해 문서객체를 생성할 수 있고 이것을 어떤 요소 아래에 달 건지를 결정해야한다. 트리구조와 똑같다. 따라서 appendChild메서드가 있다.

부모객체.appendChild(자식객체);

document.addEventListener('DOMContentLoaded', () => {
    const h1 = document.createElement('h1');
    h1.textContent = 'hello';
    h1.style.color = 'white';
    h1.style.backgroundColor = 'black';
    h1.setAttribute("data-custom", '사용자 정의속성');
    document.body.appendChild(h1);
})

문서객체 이동하기

appendChild()는 문서객체를 이동할 때도 사용할 수 있다. 해당 객체에 대한 부모는 언제나 하나여야 한다.
따라서 문서객체를 다른 문서객체에 추가하면 문서 객체가 이동한다.

document.addEventListener('DOMContentLoaded', () => {

    const divA = document.querySelector('#first')
    const divB = document.querySelector('#second')

    const h1 = document.createElement('h1')
    h1.textContent = '이동하는 h1 tag'

    const toFirst = () => {
        divA.appendChild(h1);
        setTimeout(toSecond, 1000)
    }

    const toSecond = () => {
        divB.appendChild(h1);
        setTimeout(toFirst, 2000)

    }
    toFirst()
})

문서객체 제거하기

부모객체.removeChild(자식객체)

자식객체.parentNode.removeChild(자식객체)
자식은 부모에 parentNode를 통해 접근할 수 있다. 그래서 일반적으로 위와 같은 코드를 많이 사용한다.

    setTimeout(() => {
        const h1 = document.querySelector('h1')
        h1.parentNode.removeChild(h1);
    }, 3000);

이벤트 설정하기

addEventListener를 통해서 진행한다.
user-select:none 으로 지정하면, 해당태그를 마우스로 드래그할 수 없다.

<script>
document.addEventListener('DOMContentLoaded', () => {
    let count = 0;

    const h1 = document.querySelector('h1');
    h1.addEventListener('click', (e) => {
        count++;
        h1.textContent = count;
    });
})
</script>
<style>
    h1 { user-select: none;}
</style>

이벤트 제거하기

removeEventListener를 통해서 제거한다.
문서객체.removeEventListener(이벤트이름, 이벤트리스너)

document.addEventListener('DOMContentLoaded', () => {
    let count = 0;
    let isConnect = false;

    const h1 = document.querySelector('h1');
    const p = document.querySelector('p');
    const connectButton = document.querySelector('#connect')
    const disconnectButton = document.querySelector('#disconnect')

    const listener = (e) => {
        h1.textContent = `click:${count++}`;
    }

    connectButton.addEventListener('click', () => {
        if (isConnect === false) {
            isConnect = true;
            h1.addEventListener('click', listener);
            p.textContent = `이벤트상태:${isConnect}`
        }
    })

    disconnectButton.addEventListener('click', () => {
        if (isConnect === true) {
            isConnect = false;
            h1.removeEventListener('click', listener);

            p.textContent = `이벤트상태:${isConnect}`

        }
    })
})

이벤트 모델

사전 html기본을 알고 있어야 한다. 이제 지금까지 배운 것을 전부 활용해보자

이벤트를 연결하는 방법을 이벤트 모델이라고 한다. 이건 두 가지로 나뉜다.
표준이벤트 모델 : addEvenetListener
고전이벤트 모델 : 문서객체 onxx 시작하는 속성에 이벤트 연결하는 것
인라인이벤트 모델 : html요소에 함수를 넣는 것

const listener = (event) => {...}
<div onkeyup="listener(event)" ></div>

사실 표준이벤트를 많이 쓰고, 요즘은 인라인이벤트도 조금씩 쓰고 있다.

키보드 이벤트

이벤트	설명
keydown	키가 눌릴 때 실행. 꾹 누를 때, 입력될 때. 한국어 처리는 못할 때가 있음
keypress	키가 입력되었을 때 실행. 아시아권 문자는 처리 못할 때도 있음
keyup	키보드에서 키가 떨어질 때 실행

일반적으로 keyup을 사용한다. 하지만 꾹 눌렀을 때 글씨를 세지 못하는 문제가 있다.

document.addEventListener('DOMContentLoaded' () => {
    const textArea = document.querySelector('textarea');
    const h1 = document.querySelector('h1');

    textArea.addEventListener('keyup', (e) => {
        const length = textArea.value.length
        h1.textContent = `글자수:${length}`
    })
})

키보드 키코드

키보드 이벤트가 발생할 때는 이벤트 객체로 어떤 키를 눌렀는지를 알 수 있다.

이벤트 속성 이름	설명
code	입력한 키
keyCode	입력한 키를 나타내는 숫자
altKey	alt키를 눌렀는지
ctrlKey	ctrl키를 눌렀는지
shiftKey	shift키를 눌렀는지

code 속성은 입력한 키에 대한 문자열이 들어있고 altKey, ctrlKey 등은 boolean값이 들어있다.

<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const h1 = document.querySelector('h1')
    const print = (e) => {
        let output = ''
        output += `alt:${e.altKey}<br>`
        output += `ctrl:${e.ctrlKey}<br>`
        output += `shift:${e.shiftKey}<br>`
        output += `code:${typeof(e.code) !== 'undefined' ? e.code : e.keyCode}<br>`
        h1.innerHTML = output;
    }

    document.addEventListener('keydown', print)
    document.addEventListener('keyup', print)
})
</script>
<style>
    h1 { user-select: none;}
</style>
</head>
<body>
    <hr>
    <textarea></textarea>
    <h1></h1>
    <hr>
</body>
</html>

별을 이동시키는 게임을 구현할 때는 keydown을 많이 사용한다. 꾹누르는 것을 지원해줘야하기 때문.

document.addEventListener('DOMContentLoaded', () => {
    const star = document.querySelector('h1')
    star.style.position = 'absolute'

    let [x, y] = [0, 0]
    const block = 20
    const print = () => {
        star.style.left = `${x * block}px`
        star.style.top = `${y * block}px`
    }
    print()

    const [left, up, right, down] = [37,38,39,40]
    document.body.addEventListener('keydown', (e) => {
        switch (e.keyCode)
        {
            case left:
                x -= 1
                break
            case up:
                y -= 1
                break
            case right:
                x += 1
                break
            case down:
                y += 1
                break
        }
        print()
    })
})

이벤트 발생객체

이벤트 리스너 함수를 외부로 빼낸 경우 변수 접근 문제가 생길 수 있습니다. 이럴 때 어떻게 해결할까용

event.currentTarget 속성을 사용합니다.
this키워드를 사용합니다.

화살표 함수가 없을 때는 2번째 방법을 많이 사용했지만, 지금은 둘 다 많이 사용합니다. 라이브러리와 프레임워크에 따라 선호하는 방식이 다릅니다.

const listener = (event) => {
    const len = event.currentTarget.value.length
    const h1 = document.querySelector('h1')
    h1.textContent = `글자수:${len}`
}

document.addEventListener('DOMContentLoaded', () => {
    const textArea = document.querySelector('textarea')
    textArea.addEventListener('keyup', listener)
})

글자 입력 양식 이벤트

사용자로부터 어떠한 입력을 받을 때 사용하는 요소를 form이라고 합니다.
input, textarea, button, select 태그 등이 모두 입력양식입니다.

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('input')
    const button = document.querySelector('button')
    const p = document.querySelector('p')

    button.addEventListener('click', () => {
        const inch = Number(input.value)

        if (isNaN(inch))
        {
            p.textContent = 'not a number'
            return
        }
        const cm = inch * 2.54
        p.textContent = cm;
    })
})

들여쓰기를 줄이면 코드가 깔끔해집니다. else문은 최대한 안쓰는 게 좋죠.

드롭다운

select 태그와 option태그를 통해 구현할 수 있습니다. 이건, value도 사용이 가능하긴 한데, 보통 options와 index를 통해 접근하는게 더 안전한 거 같습니다.

document.addEventListener('DOMContentLoaded', () => {
    const select = document.querySelector('select')
    const p = document.querySelector('p')

    select.addEventListener('change', (e) => {
        const value = e.currentTarget.value;
        const idx = e.currentTarget.selectedIndex;

        p.textContent = `choice:${value}`
    })
})

여기서 multiple 속성을 부여하면 select박스의 아이템을 여러개 선택할 수 있습니다. 보통 체크박스가 낫습니다.