Frontend Fundamentals

Accessibility (A11y) is a fundamental principle aimed at making the web easier and more convenient for all users.

As a frontend developer, you are responsible for creating HTML structures and defining interactions. Because you design the web experience closest to the user, you are the starting point and the core driver of accessibility. By focusing on A11y, you ensure that the web is usable by everyone.

This documentation provides practical core concepts and common mistake patterns applicable in real-world development, such as:

• Why nesting buttons inside buttons is problematic.
• The issues caused by placing a <button> inside an <a> tag.
• How screen reader users consume content.
• Practical application of terms like 'Screen Reader', 'Keyboard Navigation', and 'ARIA'.

This tutorial provides a hands-on experience with Webpack by building a sample project called 오늘의 이모지 (Emoji of the Day). You will learn how to bundle various resources including external libraries, images, fonts, and CSS to understand the importance of bundling in web development.

The learning path follows these stages:

1. Starting a Web Project: Initializing with Node.js and npm, installing Webpack, and creating your first bundle.
2. Understanding Module Systems and Bundling: Installing libraries via npm, importing them as modules, and using Webpack to merge modules.
3. Modern Frontend Development: Using TypeScript for type safety, React for component-based development, and treating CSS, images, and fonts as modules.
4. Efficient Development Environments: Extending functionality with plugins and increasing productivity with a development server.

To improve web content accessibility, follow these four core principles:

1. Build correct structures (🧱 올바른 구조 만들기): Ensure HTML elements are wrapped and placed correctly (e.g., avoid nesting buttons inside buttons).
2. Communicate meaning accurately (🗣️ 의미를 정확하게 전달하기): Clearly inform users what an element is and what its role is (e.g., naming interactive elements and adding descriptions to elements with duplicate names).
3. Create predictable interactions (🎯 예측 가능한 인터랙션 만들기): Ensure visual appearance matches actual behavior (e.g., matching button roles to their actions and wrapping input elements in <form> tags).
4. Do not rely solely on visual information (🌈 시각 정보에만 의존하지 않기): Supplement colors, images, and icons with text or other means (e.g., providing alternative text for images and icons).

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript. Since browsers cannot read JSX directly, it must be transformed into standard JavaScript calls (specifically React.createElement) using a tool like Babel.

Example Transformation:

// JSX syntax
const element = <h1 id="title">Hello, {name}!</h1>;

// Transformed JavaScript
const element = React.createElement("h1", { id: "title" }, "Hello, ", name, "!");

```jsx
// JSX 문법
const element = <h1>Hello, {name}!</h1>;

// 변환된 JavaScript
const element = React.createElement("h1", null, "Hello, ", name, "!");
```埋

Bundling is the process of combining multiple resource files (such as JavaScript, CSS, and images) into one or a few files, known as a bundle.

In modern web development, applications are often split into hundreds of small, modular files for easier development. However, if a browser attempts to request each file individually, it increases network overhead and slows down loading speeds. Bundling solves this by reducing the number of requests.

Babel is a JavaScript compiler that converts modern JavaScript (ES6+) into older versions (ES5) so that code can run in older browsers. In a React project, Babel is essential for:

• JSX Transformation: Converting JSX syntax into React.createElement() calls.
• Syntax Downleveling: Converting arrow functions to standard function keywords, classes to prototype-based constructors, template literals to string concatenation, and destructuring to standard variable assignments.
• TypeScript Support: Using @babel/preset-typescript to strip TypeScript types and output plain JavaScript.

A Loader is a tool that transforms non-JavaScript files (such as CSS, images, or TypeScript) into JavaScript modules. This allows the bundler to read and connect these files during the module resolution process (following import or require statements).

Without a loader, if you attempt to import a non-JS file, the bundler will fail because it only understands JavaScript by default. For example, importing a .css file in a .tsx file without a loader will result in a Module parse failed: Unexpected token error.