5월 24일.... FediDev KR 스프린트 두번째 모임이 있을 예정입니다...
洪 民憙 (Hong Minhee)
@hongminhee@hackers.pub · 961 following · 674 followers
Hi, I'm who's behind Fedify, Hollo, BotKit, and this website, Hackers' Pub! My main account is at
@hongminhee洪 民憙 (Hong Minhee)
.
Fedify, Hollo, BotKit, 그리고 보고 계신 이 사이트 Hackers' Pub을 만들고 있습니다. 제 메인 계정은:
@hongminhee洪 民憙 (Hong Minhee)
.
Fedify、Hollo、BotKit、そしてこのサイト、Hackers' Pubを作っています。私のメインアカウントは「
@hongminhee洪 民憙 (Hong Minhee)
」に。
Website
- hongminhee.org
GitHub
- @dahlia
Hollo
- @hongminhee@hollo.social
DEV
- @hongminhee
velog
- @hongminhee
Qiita
- @hongminhee
Zenn
- @hongminhee
Matrix
- @hongminhee:matrix.org
X
- @hongminhee
오픈소스 장점: 고쳐쓸 수 있다 🔨
그나저나, useEffect 에서 Server Actions 호출 할 수 있는 거 나만 몰랐지 또.
컴포넌트가 마운트되거나 종속성이 변경될 때 서버 액션을 호출하기 위해 React useEffect 훅을 사용할 수 있습니다. 이는 글로벌 이벤트에 의존하거나 자동으로 트리거되어야 하는 변이에 유용합니다. 예를 들어 앱 바로 가기를 위한 onKeyDown, 무한 스크롤을 위한 교차점 관찰자 후크, 컴포넌트가 마운트되어 뷰 수를 업데이트할 때 등이 있습니다:
라고 합니다.
안녕하세요, 업으로 프로그래밍을 하고 있는 컴퓨터 학부생 김무훈입니다.
현재 3년차 웹 프론트엔드 개발자로서, 다가오는 7월부터 함께할 정규직 포지션을 적극적으로 찾고 있습니다.
최근 학과 사무실에서 졸업 요건을 확인한 결과, 전공 필수 한 과목과 전공 선택 2학점(총 5학점)이 남아있음을 확인했습니다.
본래는 다음 2학기까지 수료 후 내년 2월에 졸업할 예정이었으나, 교수진과 상의한 결과 취업 및 재직이 확정된다면 수업 이수 방식을 보다 유연하게 결정할 수 있다는 긍정적인 답변을 받아 적극적으로 조기 취업을 추진하게 되었습니다.
이는 전공 필수 과목의 경우에만 해당이 되는 문제이고, 전공 선택 2학점의 경우 앞으로의 여름 학기 현장 실습 또는 다음 학기에 개설되는 하나의 원격 강의로 대체하여 문제가 없는 상태입니다.
지금까지의 업무 경험과 프로젝트는 아래의 포트폴리오에서 확인하실 수 있습니다.
📌 경력기술서 겸 포트폴리오 페이지: https://www.frontend.moe/portfolio/
좋은 인연을 찾을 수 있도록, 많은 관심과 연락 부탁드립니다!
@kodingwarriorJaeyeol Lee
@hongminhee洪 民憙 (Hong Minhee) 그 HS인가 앱 켜면 나오는 그... 저화질 로고라도...
@akastoot악하
@kodingwarriorJaeyeol Lee 뭐 로고는 나중에 생각하고 일단 후원 신청부터 했습니다.
해펍도 SNS니까... 5만원 내면... 커뮤니티 가능할까... (#파이콘한국2025 #후원사모집 #Call_for_Sponsors)
複数の文字列を受け付けられるようにしたv0.5.0を出荷しました。ほぼVibe Codingで更新しました。
@yamanoku/baseline-mcp-server - JSR
WASM 2.0 공식 릴리즈
------------------------------
- *Wasm 2.0 스펙* 이 공식적으로 발표됨
- Wasm Community와 Working Groups가 2022년부터 스펙을 완성했고, 주요 구현체는 이미 2.0을 지원하고 있었음
- 2.0부터는 *에버그린 모델* 이 도입되어, Candidate Recommendation 문서가 지속적으로 최신 상태로 갱신됨
- 새 버전이 발표될 때마다 최종 권고안으로…
------------------------------
https://news.hada.io/topic?id=20812&utm_source=googlechat&utm_medium=bot&utm_campaign=1834
Void Linux 미러의 Helm 차트를 정리해서 다양한 미러를 구성할 수 있는 Helm 차트를 만들었어요~~
https://github.com/kyokugirl/helm-charts/tree/main/charts/file-mirror
AWS 를 바닥 (vpc 세팅) 부터 새롭게 하고 있다. private, public subnet 나누고 NAT 인스턴스 올리고, 베스천으로 프록시점프해서 private 구간 인스턴스 ssh 접속 확인하고 nginx 올리고 next 프로젝트 가져와서 proxy pass 걸고 alb 넣고.. 콘솔에서 바닥부터 한땀한땀 설정하는 게 오랜만이라 그런가 재밌다.
(요즘 엔지니어들이라면 IaC로 단숨에 끝냈겠지만)
아무도 알아주지 않지만 견고하게(?) 세팅 끝냈다며 혼자 뿌듯해 하는 1인, 그렇게 하루종일 개발 안하고 인프라 만지작 거리다 하루가 끝났다.
I shipped a fix to https://fedidb.com addressing missing servers, the culprit was our updated crawler robots.txt logic.
Next up: software version tracker, feature matrix, FEP Library, People Directory, Dev Tools, and Starter Kits.
The fedi deserves great tools. We deliver. ✨
We're excited to announce that we've implemented RFC 9421 (HTTP Message Signatures) in #Fedify, complete with our double-knocking mechanism to maintain backward compatibility with the draft cavage version.
This implementation includes both signature generation and verification, meaning #RFC9421 is used when both sending and receiving activities. While we haven't merged the RFC 9421 implementation branch yet, we're currently conducting interoperability tests with development versions of Mastodon and other #ActivityPub implementations. Once these tests confirm compatibility, we'll proceed with the merge.
As noted in the attached docs, although RFC 9421 is the final and official standard for HTTP Signatures, the draft cavage version remains widely used across the #fediverse. Our double-knocking mechanism ensures maximum compatibility by trying the RFC 9421 version first, then falling back to draft cavage if needed.
Currently, we support RSA-PKCS#1-v1.5 key pairs for generating HTTP Message Signatures, with plans to expand to other signature types in future releases.
We look forward to contributing to a more standardized and secure fediverse!
학과 책장에 11년 전에 출간한 웹 접근성 책을 찾았습니다.
책 목차를 살펴보니 WCAG 표준에서 제정한 아래 4가지 원칙을 개별마다 많은 사례를 바탕으로 다루고 있네요.
- 인지할 수 있는(Perceivable)
- 조작 가능한(Operable)
- 이해할 수 있는(Understandable)
- 견고함(Robust)
자료가 오래되었지만 흥미 있는 사례집이라 읽어 보려고 합니다.
세계 접근성 인식의 날은 매년 5월 셋째주 목요일로 지정되어있고, 올해는 오는 5월 15일(목)입니다.
a11ykr 커뮤니티 멤버들과 함께 한국어 소개글을 준비해서 제출했는데, 사이트에 게시되면 좋겠습니다.
C++를 통해 Rust의 매력을 보여준 Matt Godbolt의 설득
------------------------------
- 20년 이상 C++을 사용한 저자가 *Rust의 장점을 재발견* 하게 된 계기를 Matt Godbolt의 강연을 통해 소개함
- C++에서는 *타입 혼동에 의한 실수* 가 컴파일러에서 제대로 잡히지 않지만, Rust는 이를 *컴파일 타임에 강하게 차단* 함
- Rust는 *단순한 메모리 안전성 외에도 API 오용 방지* 에 유리한 설계를…
------------------------------
https://news.hada.io/topic?id=20760&utm_source=googlechat&utm_medium=bot&utm_campaign=1834
JetBrains사의 C/C++ IDE인 CLion은 이제 비상업적 용도로는 무료로 쓸 수 있다고 한다.
CLion Is Now Free for Non-Commercial Use - https://blog.jetbrains.com/clion/2025/05/clion-is-now-free-for-non-commercial-use/
개발자의 저주: 고치는 능력을 가진 자의 무한한 책임감
------------------------------
- 사소한 자동화를 반복하다 보면 어느 순간 모든 도구와 시스템이 *고쳐야 할 대상* 으로 보이게 되는 *인지의 임계점* 에 도달하게 됨
- 기술력이 쌓일수록 문제를 단순히 인식하는 것을 넘어 *책임처럼 느끼게 되는 감정의 무게* 를 가지게 됨
- *고치고자 하는 욕구* 는 단순한 생산성 향상을 넘어서 감정…
------------------------------
https://news.hada.io/topic?id=20735&utm_source=googlechat&utm_medium=bot&utm_campaign=1834
나는 버전 올리기 강박증같은게 있는데, RN 초기에 불안정한 라이브러리들 많이 쓰다가 생긴거 같다. 일단 버전 올린다음에 빌드 터지는지 기존 기능 잘돌아가는지 확인하는데, 이거하느라 쓰는 시간도 꽤 된다. 실제로 시간을 아끼고 있는지(모르던 버그를 모르고 해결해서) 아닌지 모르겠다.
GitHub 저장소 코드를 분석해 AI로 문서화하는 도구. 다이어그램을 적극적으로 활용해 아키텍처를 쉽게 이해할 수 있고, 문서의 깊이와 정확도도 높다. 여러모로 <오픈 소스 소프트웨어 아키텍처>를 읽으며 아쉬웠던 부분들을 커버해주는 프로젝트. https://deepwiki.com/
AI에 대한 SW 엔지니어들의 자신감은 "어쨌거나 업계 내에서 만드는거라서-" 인거 같다. 손바닥 위에 있다는 감각(얼추 맞긴 하다).
타 직업군은 AI나 LLM 솔루션 자체를 다루는데도 한계가 있거니와(아무래도 fork떠서 고친다거나 할순 없으니까) 결과물도 자기 의사와 관계 없이 학습당하고 있기 때문에…
아예 거스를 수 없는 것이기 때문에, 타 분야에서는 오히려 공격적으로 자기 분야에 특화된 모델을 만들고, 기존 저작물들을 학습으로 부터 보호해서 우선권을 선점 하는게 그나마 좀 더 낫지 않을까?
근데 후자는… 테크기업이 양아치라서 잘 안될거같다.
Next.js 서버 액션은 서버 데이터를 가져오는 용도로 사용하기에 적합하지 않다. React 공식문서에서는 다음과 같이 말하고 있다.
Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
서버 액션이 여러 호출되면 바로 실행되는 대신 큐에 쌓이고 순차적으로 처리된다. 이미 실행된 서버 액션은 이후 취소할 수 없다.
이에 서버 액션을 데이터 가져오기로 활용하면 끔찍해지는 UX가 생길 수 있는데, 예를 들어 페이지의 목록 검색 화면에서 검색 후 데이터를 가져오는 상황에 않았다고 다른 화면으로 네비게이션이 불가능한 것은 일반적인 경험이 아니다.
이러면 RSC를 통해 무한 스크롤을 구현하지 못하는가? 에 대해서 의문이 생길 수 있는데 여기에 대해서 대안을 발견했다.
function ServerComponent({ searchParams }) {
const page = parseInt((await searchParams).page ?? "1", 10)
const items = await getItems(page)
return (
<Collection id={page}>
{items.map(item => <InfiniteListItem key={item.id} {...items} />)}
</Collection>
)
}
"use client"
function Collection({ id, children }) {
const [collection, setCollection] = useState(new Map([[id, children]]))
const [lastId, setLastId] = useState(id)
if (id !== lastId) {
setCollection(oldCollection => {
const newCollection = new Map(oldCollection)
newCollection.set(id, children)
return newCollection
})
setLastId(id)
}
return Array
.from(collection.entries())
.map(
([id, children]) => <Fragment key={id}>{children}</Fragment>
)
}
대충 이런 꼴이다. 이러고 page를 증가시키거나 감소시키는건 intesection observer나 특정 엘리먼트의 onClick 이벤트 따위를 의존하면 된다. 이러면 데이터 가져오기 패턴을 RSC 형태로 의존할 수 있다. InfiniteListItem는 서버컴포넌트, 클라이언트컴포넌트 무엇으로 구현하더라도 상관없다. 가령 아래와 같은 식:
function ServerComponent({ searchParams }) {
const page = parseInt((await searchParams).page ?? "1", 10)
const { items, hasNext } = await getItems(page)
return (
<div>
<Collection id={page}>
{items.map(item => <InfiniteListItem key={item.id} {...items} />)}
</Collection>
{hasNext && (
<IntersectionObserver nextUrl={`/?page=${page + 1}`} />
)}
</div>
)
}
검색 조건이나 검색어에 따라 상태를 초기화시키려면 다음과 같이 표현하면 된다.
function ServerComponent({ searchParams }) {
const page = parseInt((await searchParams).page ?? "1", 10)
const query = parseInt((await searchParams).query ?? "")
const { items, hasNext } = await getItems(page, query)
return (
<div>
<Form action="/">
<input name="query" />
<button />
</Form>
<Collection id={page} key={query}>
{items.map(item => <InfiniteListItem key={item.id} {...items} />)}
</Collection>
{hasNext && (
<IntersectionObserver nextUrl={`/?page=${page + 1}&query=${query}`} />
)}
</div>
)
}
매우 PHP스럽고, 암묵적이기도 하다. 다만 RSC의 데이터 가져오기 패턴을 활용하면서 기존 컴포넌트를 최대한 재사용할 수 있게 된다는 점이 좋다.
실제로 방금 어떤 사례를 발견했냐면, 계산이 살짝 까다로운 값에 대한 테스트를 만들라고 시켰더니 코드를 한 백줄 뱉어내는데
expect(x).toBe(42)
이렇게 값에 대한 테스트를 안하고
expect(typeof x).toBe("number")
이러고 넘어가려고 했다. 손바닥 이리내.
@hongminhee洪 民憙 (Hong Minhee) Isn't that FEP based on the GTS spec? If it's notably worse, I guess that says something about the process
@TakTak!
@hongminhee洪 民憙 (Hong Minhee) it's the other way around, FEP-5624 pre-dates GTS' interaction policies but was never implemented anywhere and did not get much traction; the bulk of the discussion at the time was about who should control the reply policy (original post author or person you immediately reply to)
GTS decided to pick the second solution even if it's not necessarily the ideal one, because it's much simpler to implement
GTS' interaction policies were then refined with a lot of back-and-forth with Mastodon devs when we were working on quote posts (resulting in FEP-044F which re-use GTS' interaction policies)
maybe we should retire FEP-5624
join을 지원하는 reactive한 SQLite client 개발 거의 다 되어간다. 혹시 중간에 관두는걸 막기위해 남긴다.
我认为 ActivityPub 应该实现到 GoToSocial 级别(
남한에서 '핵추진잠수함'이라 하는 것을 북한에서 '핵동력잠수함'이라 하는 것이 문득 떠오르네요.
RE: https://hackers.pub/ap/notes/01969960-f7e6-7b4f-8acf-3daecae56241
あー。drizzleって、PostgreSQLlのmoney(通貨型)はまだサポートしてないのか。なるほど、試さないと分からないもんだ。他の型で代用するか。
書籍「テスト駆動開発」か「リファクタリング第二版」でいうプログラムだけでなく、データベースもリファクタリングの対象にするというか、将来に向かって現在動くものを作る感じなんだな。これも。
오늘도 해커스펍 GraphQL API 깎기 해야지
아까 Post에 달린 이모지 리엑션 쪽 API 깎느라고 n시간 동안 삽질하다가 결국 때려치고 질문을 올렸었는데 아직 구현이 안 된 부분이었다고 해서 PR을 올렸다 (???
SolidJS는 React처럼 Reactivity 코어가 분리되어 있지않은거 같다? solid-three, solid-native 등의 프로젝트들이 있는데 2년넘게 관리되고 있지않다.
@bglbgl gwyng 커스텀 렌더러 (Solid에선 Universal Rendering이라고 부름) 지원 자체는 잘 되어 있는데 그냥 커뮤니티 망치가 부족해서 유지보수가 안 되는 것에 가깝고 😅 이런 물건은 왜인진 도저히 모르겠지만 나름 관리가 잘 되고 있습니다
프로젝트 이름 예쁘게 짓는 방법 구합니다
SolidJS는 React처럼 Reactivity 코어가 분리되어 있지않은거 같다? solid-three, solid-native 등의 프로젝트들이 있는데 2년넘게 관리되고 있지않다.
招待してもらったのでhackers.pubに出たり入ったりした→
@cocoa@hackers.pubAmaseCocoa
大文字小文字混ぜると問題起こる気がしたのでわざと@cocoaにした (そもそもこっちが正式ではなくもない)
print("Hello World")
Hackers' PubにLLMを活用した記事の自動翻訳機能が追加されました。これにより、Hackers' Pubに投稿された英語や韓国語の記事を日本語で閲覧できるだけでなく、日本語で書いた記事を海外の読者に紹介する事も可能に成りました。
なお、Hackers' Pubは招待制で運営されています。ご興味のある方は、DMでメールアドレスを教えていただければ、招待いたします。
오늘도 해커스펍 GraphQL API 깎기 해야지
Hello, Hackers' Pub!
This new FediDB v2 webapp can be self-hosted btw!
Working on adding a few new pages/features to FediDB, including:
- translation support (i18n)
- a federated wiki (👀)
- apps + clients
- popular accounts
- viral topics
- trends
- quarterly reports
- stats overview w/ geomaps + advanced filtering
And much more ✨
> git clone https://github.com/fedidb/fedidb-nuxt
부끄럽지만 typst로 깎은 이력서와 포트폴리오를 공개합니다: https://github.com/gidongkwon/resume
게임 클라이언트에서 웹 프론트엔드로 커리어 전환을 하는 단계에 있습니다.
혹 피드백주실 것이 있다면 언제든지 좋아요...!
직링크는 아래:
이력서 - https://gidongkwon.github.io/resume/resume-gidongkwon.pdf
포트폴리오 - https://gidongkwon.github.io/resume/portfolio-gidongkwon.pdf
Relay로 offline db sync를 하고 있었을땐, Relay가 Node의 Id나 Edge의 Cursor가 Opaque란 가정을 하고있는게 걸림돌이라고 느껴졌다. SQLite에 저장하려면 어차피 id로 부터 composite key를 구해야하고, 거기엔 또 order도 존재하는데 Relay는 이런데 전혀 무관심하다. 하지만 일반적인 웹사이트 렌더링에는 저런 가정이 전혀 무리가 없다.
Signal같은건데 incremental update도 되고 GC도 가능한 무언가를 만들려고 했더니 이런 정의가 나왔다. 혹시 비슷한거 알고 계신분 있나요?
type Dynamic<Value, Delta> = {
read(): Value;
disconnect(): void;
updated: Observable<Delta>;
fork(): Dynamic<Value, Delta>;
};
2개 이상의 기기를 동시 컨트롤 할 때 (주로 윈도와 맥을 오갈 때) synergy 라는 프로그램으로 마우스, 키보드 공유해서 사용해 왔는데, 오늘 처음 (MacOS 내장기능의) 맥미니와 맥북에어간의 마우스 키보드 공유를 해보고 놀라움을 금치 못했다. 끊김도 없고 거의 네티이브 유사한 느낌으로 자연스럽다. 물론 제대로 완성도를 느끼려면 더 써봐야겠지만.
그동안 Relay를 offline db sync 용도로 쓰고있었는데(첨부터 그러려고 했던건 아니고, API 두벌 만드는걸 피하다보니 그 역할도 떠맡음), 그래서 Relay가 킹론상 좋다는건 아는데 실질적으로 장점을 못누리고 살았었다. 근데 지금 추가하는 기능에서는 Relay를 본래 용도에 맞게 쓰고있는데, 설계 고민도 줄여주면서 코드가 쭉쭉 나온다.
Deno 2.3 is here:
🌱 deno compile with FFI & Node native add-ons
📦 Local npm packages
⭐ deno fmt CSS/HTML/SQL in tagged templates
🔭 OTel event recording & tracing in distributed services
and more —











![2부 웹 접근성 기본 4원칙
3장 인식의 용이성: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다
3.1
[검사항목 1] 적절한 대체 텍스트 제공 ... 111
3.1.1 [오류유형 1-1] 텍스트 이미지의 대체 텍스트 미 제공 ..• 113
3.1.2 [오류유형 1-1] 불충분한 대체 텍스트를 제공한 경우 ... 115
3.1.3 [오류유형 1-1] 대체 텍스트가 오타로 표기된 경우 ... 117
3.1.4 [오류유형 1-1] 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 ... 118
3.1.5
[오류유형 1-1] 게시물의 이미지에 대체 텍스트가 제공되지 않은 경우 ... 119
3.1.6
[오류유형 1-2] 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 ... 121
3.1.7
[오류유형 1-2] 의미 없는 이미지에 대체 텍스트를 제공한 경우 ... 123
3.1.8 [오류유형 1-2] 분리된 이미지 조각의 대체 텍스트 제공 ... 124
3.1.9 [오류유형 1-3] 〈Iongdesc〉의 파일이 없거나 연결되지 않은 경우... 125
3.1.10 [오류유형 1-3] 〈longdesc〉 내용이 의미나 기능을 파악하기 어려운 경우 ... 126
3.1.11 [오류유형 1-4] 이미지맵의 〈img〉 요소에 alt 속성을 제공하지 않은 경우 ... 129
3.1.12 [오류유형 1-5] 조직도 이미지맵의 〈area〉로만 대체 텍스트를 제공한 경우 ... 131
3.1.13 [오류유형 1-6] 대체 텍스트를 tite만으로 제공하는 경우 ... 133
3.1.14 [오류유형 1-7 QR 코드의 이동 주소 정보를 대체 텍스트 등으로 제공하지 않은 경우
... 133
3.1.15 [오류유형 1-8] 의미 있는 배경 이미지의 대체 콘텐츠를 제공하지 않은 경우 ... 135
3.1.16 [오류유형 1-8] 의미 있는 색상 배경 이미지에 대체 콘텐츠를 제공하지 않은 경우 ... 137
3.1.17 [오류유형 1-9] 플래시 콘텐츠에 대체 텍스트를 제공하지 않은 경우 ... 138
3.1.18 [오류유형 1-9] 웹 애플리케이션의 대체 콘텐츠가 접근성이 없는 경우 ... 141](https://media.hackers.pub/note-media/936d8e0a-f0d2-46f4-809f-97294ac5d7e7.webp)
![4장 운용의 용이성: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 한다
4.1
[검사항목 기 키보드 사용 보장 ... 191
4.1.1 [오류유형 1-1] 이미지에 onclick 이벤트를 적용하여 키보드로 제어할 수 없는 경우 ... 198
4.1.2 [오류유형 7-1] 키보드 이벤트를 적용하지 않아 키보드 접근이 안 되는 경우 ... 195
4.1.3 [오류유형 7-11 readonly 속성을 사용하여 대체 수단이 비활성화되는 경우 ... 197
4.1.4 [오류유형 1-1 마우스용 자바스크립트 사용으로 키보드 이용이 불가능한 경우 ... 198
4.1.5 [오류유형 7-2] 플래시 wmode 값 설정으로 키보드 이용이 불가능한 경우 ... 200
4.1.6 [주의사항 7-1] 웹 접근성 품질인증심사에서는 IE8 브라우저에서 키보드 테스트함 ... 203
4.1.7 [주의사항 7-21 onclick 이벤트 핸들러에 키보드로 제어가 불가한 경우 감점 ... 203
4.1.8 [주의사항 7-3] 예외 콘텐츠라도 주변 인터페이스는 키보드로 사용할 수 있어야 함 ... 203
4.1.9 [주의사항 7-4] 키보드로 탭메뉴에서 탭 내용을 확인할 수 없는 경우 감점 ... 204
4.1.10 [주의사항 7-5 oniocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 204
4.1.11 [주의사항 7-61 wmode를 transparent, opaque로 지정 시 화면 낭독기 인식 불가능
... 205
4.2
[검사항목 8] 초점 이동 ... 206
4.2.1 [오류유형 8-1] 초점의 이동 순서가 논리적이지 않으며 일관성이 없는 경우 ... 207
4.2.2 [오류유형 8-21 초점의 위치가 시각적으로 표시되지 않은 경우 .•. 209
4.2.3 [오류유형 8-3] 〈area〉 요소의 순서가 키보드 순서와 다른 경우 ... 213
4.2.4 [주의사항 8-11 onfocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 214
4.3
[검사항목 9] 응답시간 조절 ... 215
4.3.1 [오류유형 9-1] 페이지 재이동 시 회피할 수 있는 수단을 제공하지 않은 경우 ... 216](https://media.hackers.pub/note-media/ab959b1c-f2a1-416f-a9e9-f80c0b31bedf.webp)
![5장 이해의 용이성: 콘텐츠는 이해할 수 있어야 한다
5.1
[검사항목 15] 기본 언어 표시 ... 257
5.1.1
[오류유형 15-11 〈html〉에 lang 속성을 명시하지 않은 경우 ... 258
5.1.2
[오류유형 15-1] 〈html〉에 lang 속성을 잘못 명시한 경우 ... 259
5.1.3 [주의사항 15-1] lang 속성값에 국가별 지정언어 코드를 사용해야 함 ..• 260
5.1.4 [주의사항 15-21 페이지 중간에 언어가 바뀔 때 lang 속성으로 명시해주는 것을 권장 ... 262
5.2
[검사항목 16] 사용자 요구에 따른 실행 ... 263
5.2.1
[오류유형 16-1] 사용자가 예측하지 않은 새 창이 열리는 경우 ... 264
5.2.2
: [오류유형 16-1] 사전에 알리지 않은 새 창이 발생되는 경우 ... 267
5.2.3 [오류유형 16-2] 웹사이트 초기화면에 팝업창을 제공하는 경우 ... 268
5.2.4 [오류유형 16-3] 사용자가 의도하지 않은 초점 변화가 발생하는 경우 ... 271
5.2.5 [오류유형 16-4] 입력 서식의 값 변경만으로 제출되어 문맥이 바뀌는 경우 ... 273
5.2.6 [오류유형 16-4] 체크상자의 선택만으로 값이 제출되어 문맥이 바뀌는 경우 ... 274
5.2.7 [주의사항 16-1] onkeypress에 의해 포커스를 옮기는 동작만으로 새 창이 발생하면 감점
... 275
5.2.8 [주의사항 16-21 〈a targel="_blank">로만 새 창을 알린 경우는 감점하지 않음 ... 276
5.2.9
[주의사항 16-3] onfocus="this.blur)" 사용 시, 검사항목 7, 8, 16에서 감점 ... 276](https://media.hackers.pub/note-media/73ac2eb4-b098-4454-b5df-9c6757ffa581.webp)
![6장 견고성: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 최대한 호환되어야 한다
6.1
[검사항목 21] 마크업 오류 방지 ... 317
6.1.1 [오류유형 21-1] 태그의 열고 닫음 오류 ... 318
6.1.2 [오류유형 21-2] 태그의 중첩 오류 ... 319
6.1.3 [오류유형 21-3] 중복 선언된 속성 오류 ... 320
6.1.4 [주의사항 21-1] ID 값 중복 선언은 오류유형 21-3에서 심사 ... 320
6.1.5 [주의사항 21-2] 위에 언급된 항목 이외의 표준문법 오류는 포함하지 않음 ... 321
6.1.6 마크업 오류 세부 사례 ... 321
6.1.6.1 [열고 닫음 오류 사례 1 (a) 요소 여는 태그 미 제공 ... 321
6.1.6.2 [열고 닫음 오류 사례 2 〈ul〉 요소 여는 태그 미 제공 ... 322
6.1.6.3 [열고 닫음 오류 사례 31 div》요소 여는 태그 미 제공 ... 323
6.1.6.4 [열고 닫음 오류 사례 41 〈a〉 요소 닫는 태그 미 제공 ... 323
6.1.6.5 [열고 닫음 오류 사례 5] 《strong〉 요소 닫는 태그 미 제공 ... 324
6.1.6.6 [열고 닫음 오류 사례 61 〈h 요소 닫는 태그 미 제공 ... 325
6.1.6.7 [태그의 중첩 오류 사례] 《p》와 《strong》의 중첩 제공 ... 326
6.1.6.8 [속성 중복 오류 사례 11 〈p〉 요소에 대한 style》 속성 중복 제공 ... 326
6.1.6.9 [속성 중복 오류 사례 2] ID 속성 중복 제공 ... 327
6.2
[검사항목 22] 웹 애플리케이션 접근성 준수 ... 330
6.2.1 [오류유형 22-1] 접근성이 없는 웹 애플리케이션의 대체 콘텐츠가 없는 경우 ... 331
6.2.2 [오류유형 22-1] 대체 콘텐츠가 핵심 기능을 동등하게 제공하지 못한 경우 ... 332](https://media.hackers.pub/note-media/fd2e3ccf-e307-4908-979f-80338e4b39ca.webp)







