[UMC 블로그 챌린지] 0주차 - 웹 프론트엔드 기초

랜드마크

시맨틱 태그를 사용할 수 없거나, 요소의 의미를 더 명확하게 알려줘야 할 때 사용합니다. 또 수정하기 어려운 기존 코드를 보완할 때도 사용 가능합니다.

보조 기술(AT) 사용자가 페이지에서 자신의 위치를 파악하고 페이지의 다양한 영역으로 쉽게 이동할 수 있도록 도와줍니다. 이렇게 하면 보조 기술 사용자와 키보드 사용자 모두 방대한 콘텐츠를 탭 키를 눌러 탐색하는 수고와 시간을 절약할 수 있으며, 기존의 "링크 건너뛰기" 기능과 유사한 효과를 얻을 수 있습니다.

랜드마크의 role 값

• banner 페이지별 콘텐츠보다는 사이트 관련 콘텐츠가 주로 포함된 영역입니다.
• search검색 기능을 구현하기 위해 전체적으로 결합되는 항목 및 객체 모음을 포함하는 영역입니다.
• complementary 주요 콘텐츠를 뒷받침하면서도 그 자체로 독립적이고 의미 있는 영역입니다.
• contentinfo 저작권 및 개인정보 보호 정책 링크와 같은 상위 문서에 대한 정보를 포함하는 영역입니다.

사용 예시

<div role="banner">site logo and name, etc. here</div>
<div role="search">search functionality here</div>
<div role="navigation">a list of navigation links here</div>

동일 유형의 랜드마크일 경우

동일한 유형의 랜드마크를 가지는 경우 각 인스턴스에 고유한 레이블을 지정할 수 있습니다.

화면에 이미 존재하는 다른 요소의 글자를 이름으로 사용하고, 참조할 요소가 없는 경우 aria-label을 사용합니다.

• aria-label: 내가 이름을 직접 써준다
• aria-labelledby: 이미 화면에 있는 글자를 이름표로 연결한다

동일한 유영의 랜드마크를 가지는 경우 각 인스턴스에 고유한 레이블을 지정할 수 있습니다.

화면에 이미 존재하는 다른 요소의 글자를 이름으로 사용하고, 참조할 요소가 없는 경우 aria-label을 사용합니다.

사용 예시

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
  <ul>
    <li><a href="/news">News</a></li>  <nav aria-label="Vehicles">
    
    

<nav aria-label="Vehicles">
  <ul>
    <li><a aria-current="page" href="/cars">Cars</a></li>
    <li><a href="/trucks">Trucks</a></li>
    <li><a href="/bikes">Bikes</a></li>

새롭게 알게된 HTML 시맨틱 태그

HTML에서는 단순히 화면의 모양만 표현하는 것이 아니라, 콘텐츠의 의미에 맞는 태그를 사용하는 것이 중요하다. 의미에 맞는 태그를 사용하면 코드의 구조를 이해하기 쉬워지고 접근성도 향상된다.

태그	설명
<dl> + <dt> + <dd>	설명 목록을 만들 때 사용한다. <dt>에는 용어나 이름을, <dd>에는 해당 용어에 대한 설명을 작성한다.
<small>	저작권 문구, 주의사항, 법적 고지와 같은 부가 정보나 작은 주석을 나타낸다. 단순히 글자 크기를 줄이는 용도로 사용해서는 안 된다.
<details> + <summary>	사용자가 클릭하여 열고 닫을 수 있는 영역을 JavaScript 없이 만들 수 있다.
<dialog>	모달이나 대화상자를 나타낸다. showModal()과 close()를 이용해 열고 닫을 수 있으며, ::backdrop으로 배경을 꾸밀 수 있다.
<figure> + <figcaption>	이미지, 그래프, 코드 등의 콘텐츠와 설명을 묶을 때 사용한다. alt는 이미지의 대체 설명이고, <figcaption>은 화면에 표시되는 제목이나 부가 설명이다.
<fieldset> + <legend>	관련된 입력 항목을 하나의 그룹으로 묶는다. 라디오 버튼이나 체크박스를 하나의 질문으로 묶을 때 유용하다.
<time>	사람이 읽는 날짜와 컴퓨터가 인식할 날짜를 함께 표현한다. 예: <time datetime="2026-09-30">2026년 9월 30일</time>
<abbr>	약어의 전체 의미를 알려준다. 예: <abbr title="Progressive Web App">PWA</abbr>
<blockquote>	문단 단위의 긴 인용문을 나타낸다.
<q>	문장 안에 들어가는 짧은 인용문을 나타낸다.
<cite>	책, 영화, 논문, 노래 등 인용한 저작물의 제목을 나타낸다.

브라우저가 화면을 만드는 과정

브라우저는 HTML과 CSS를 읽고 화면을 구성한다.

1. HTML을 해석하여 DOM을 만든다.
2. CSS를 해석하여 CSSOM을 만든다.
3. DOM과 CSSOM을 결합해 화면에 표시할 구조를 결정한다.
4. 각 요소의 크기와 위치를 계산한다.
5. 계산된 결과를 화면에 그린다.
6. JavaScript가 DOM을 변경하면 필요한 부분을 다시 계산하고 그린다.

일반적인 <script> 태그는 JavaScript 파일을 처리하는 동안 HTML 해석을 멈출 수 있다.

<script src="main.js"></script>

defer를 사용하면 HTML을 해석하면서 JavaScript 파일을 함께 다운로드하고, HTML 해석이 끝난 후 JavaScript를 실행한다.

<head>
  <script src="main.js" defer></script>
</head>

DOM이란?

DOM(Document Object Model)은 브라우저가 HTML을 JavaScript로 다룰 수 있도록 객체 구조로 변환한 것이다.

다음과 같은 HTML이 있다면,

<h1 class="title">안녕하세요</h1>

JavaScript는 DOM을 통해 해당 요소를 선택하고 변경할 수 있다.

const title = document.querySelector(".title");

title.textContent = "반갑습니다";
title.classList.add("active");

DOM을 이용하면 다음과 같은 작업을 할 수 있다.

• 화면의 텍스트 변경
• 속성과 스타일 변경
• 클래스 추가 및 제거
• 새로운 요소 생성
• 기존 요소 삭제

이벤트와 이벤트 핸들러

이벤트는 사용자의 행동이나 브라우저에서 발생하는 변화를 의미한다.

대표적인 이벤트는 다음과 같다.

• click: 요소를 클릭했을 때
• input: 입력값이 변경될 때
• submit: 폼을 제출할 때
• keydown: 키보드 키를 눌렀을 때
• load: 페이지나 파일의 로딩이 끝났을 때

이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수이다.

<button class="button">클릭</button>
<p class="message"></p>

const button = document.querySelector(".button");
const message = document.querySelector(".message");

button.addEventListener("click", () => {
  message.textContent = "버튼을 클릭했습니다.";
});

이 코드의 실행 과정은 다음과 같다.

1. JavaScript가 버튼과 문장 요소를 선택한다.
2. 버튼에 click 이벤트 핸들러를 등록한다.
3. 사용자가 버튼을 클릭한다.
4. 등록된 함수가 실행된다.
5. DOM의 텍스트가 변경된다.
6. 변경된 내용이 화면에 표시된다.

즉, 이벤트는 사용자의 행동을 감지하고, 이벤트 핸들러는 해당 이벤트가 발생했을 때 화면을 변경하는 작업을 실행한다.

Node.js가 필요한 이유

JavaScript는 원래 브라우저에서 실행되는 언어이지만, Node.js를 사용하면 브라우저 밖에서도 JavaScript를 실행할 수 있다.

프론트엔드 개발에서 Node.js는 다음과 같은 작업에 사용된다.

• Vite와 같은 개발 서버 실행
• React 및 TypeScript 개발 환경 구성
• TypeScript와 JSX 코드 변환
• 프로젝트 빌드
• ESLint와 Prettier 실행
• npm 패키지 설치 및 관리

React 코드가 모두 Node.js에서 실행된다는 의미는 아니다. Node.js는 주로 React 프로젝트를 개발하고 빌드하는 도구를 실행하는 데 사용된다. 완성된 프론트엔드 코드는 최종적으로 브라우저에서 실행된다.

패키지와 패키지 매니저

패키지

패키지는 다른 개발자가 만들어 배포한 재사용 가능한 코드나 개발 도구이다.

대표적인 패키지는 다음과 같다.

• react: UI를 만들기 위한 라이브러리
• axios: HTTP 요청을 보내기 위한 라이브러리
• typescript: TypeScript 코드를 JavaScript로 변환하는 도구
• eslint: 코드의 문제를 검사하는 도구

패키지 매니저

패키지 매니저는 패키지를 설치하고 업데이트하거나 삭제하며 버전을 관리하는 도구이다.

대표적인 패키지 매니저에는 npm, pnpm, yarn이 있다.

npm install axios

위 명령을 실행하면 일반적으로 다음과 같은 변화가 발생한다.

• axios 패키지가 설치된다.

• package.json에 패키지 정보가 기록된다.

• 실제 패키지 파일이 node_modules에 저장된다.

• 정확한 설치 버전이 잠금 파일에 기록된다.

  
  

현재 폴더를 확인해야 하는 이유

패키지 매니저 명령은 현재 터미널이 위치한 폴더를 기준으로 실행된다.

pwd
ls

잘못된 폴더에서 npm install을 실행하면 다음과 같은 문제가 발생할 수 있다.

• 다른 프로젝트의 package.json이 수정될 수 있다.
• 엉뚱한 위치에 node_modules가 생성될 수 있다.
• 필요한 프로젝트에는 패키지가 설치되지 않을 수 있다.
• 실행하려는 명령이 프로젝트 설정을 찾지 못할 수 있다.

따라서 패키지를 설치하거나 개발 서버를 실행하기 전에는 현재 위치와 package.json의 존재 여부를 확인해야 한다.