diff --git a/app/Http/Controllers/AcademyController.php b/app/Http/Controllers/AcademyController.php index f1e8a354..2c35f0bd 100644 --- a/app/Http/Controllers/AcademyController.php +++ b/app/Http/Controllers/AcademyController.php @@ -34,4 +34,13 @@ public function serverKnowledge(Request $request): View|Response return view('academy.server-knowledge'); } + + public function frontendDev(Request $request): View|Response + { + if ($request->header('HX-Request')) { + return response('', 200)->header('HX-Redirect', route('academy.frontend-dev')); + } + + return view('academy.frontend-dev'); + } } diff --git a/resources/views/academy/frontend-dev.blade.php b/resources/views/academy/frontend-dev.blade.php new file mode 100644 index 00000000..fd3de1d1 --- /dev/null +++ b/resources/views/academy/frontend-dev.blade.php @@ -0,0 +1,1346 @@ +@extends('layouts.app') + +@section('title', '프론트엔드 개발 백과사전') + +@push('styles') + +@endpush + +@section('content') +
+ + +
+
+
+
+ 아카데미 + + 프론트엔드 개발 +
+

프론트엔드 개발 백과사전

+

HTML, CSS, JavaScript부터 프레임워크, 성능 최적화까지 — 비개발자도 이해하는 프론트엔드 가이드

+
+
+
+ + + + + + + + + + + </> + +
+
+
+
+ +
+ + + + +
+ + +
+
+ + + 목차 보기 + + +
+
+ + {{-- ============================================================ --}} + {{-- 1. 프론트엔드란? --}} + {{-- ============================================================ --}} +
+
+

+ 1 + 프론트엔드란? +

+ + +
+

+ + 프론트엔드 vs 백엔드 +

+
+

+ 프론트엔드(Front-end)란 사용자가 직접 보고, 클릭하고, 입력하는 화면 전체를 말한다. + 웹 브라우저에 표시되는 버튼, 메뉴, 입력창, 표, 이미지 등 눈에 보이는 모든 것이 프론트엔드의 영역이다. +

+
+
+

비유: 식당의 홀과 주방

+

+ 프론트엔드는 식당의 홀이다. 손님이 메뉴판을 보고, 주문하고, 음식을 받는 공간이다. + 백엔드는 주방이다. 손님은 보지 못하지만, 주문을 받아 요리하고 결과를 내보내는 곳이다. + 홀이 예쁘고 편해야 손님이 만족하듯, 프론트엔드가 잘 만들어져야 사용자가 편하게 시스템을 쓸 수 있다. +

+
+
+
+
+ +
+

프론트엔드 (홀)

+

사용자가 보는 화면
HTML, CSS, JavaScript
버튼, 폼, 메뉴, 테이블

+
+
+
+ +
+

백엔드 (주방)

+

서버에서 처리하는 로직
PHP, Python, Java
데이터 저장, 인증, 계산

+
+
+
+ + +
+

+ + 웹의 3요소 +

+

+ 프론트엔드는 세 가지 기술로 구성된다. 이 셋은 항상 함께 작동한다. +

+
+
+
+ +
+

HTML (구조)

+

건물의 뼈대
방, 거실, 주방의 위치를 정한다

+
+
+
+ +
+

CSS (디자인)

+

인테리어
벽지, 가구 배치, 조명을 결정한다

+
+
+
+ +
+

JavaScript (동작)

+

전기 배선
스위치를 누르면 조명이 켜진다

+
+
+
+

+ SAM 시스템의 프론트엔드: + SAM도 프론트엔드와 백엔드로 분리되어 있다. MNG(관리자 웹)는 Blade + HTMX로, React 앱은 Next.js로 화면을 구성하고, + API 서버(Laravel)가 데이터를 처리한다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 2. HTML — 웹의 뼈대 --}} + {{-- ============================================================ --}} +
+
+

+ 2 + HTML — 웹의 뼈대 +

+ + +
+

+ + 태그와 구조 +

+
+

비유: 건물의 설계도

+

+ HTML은 건물의 설계도와 같다. 여기는 거실, 저기는 주방, 위층은 침실 — 이렇게 공간의 위치와 구조를 정한다. + HTML 태그가 바로 이 역할을 한다. <div>는 방, <p>는 메모지, <img>는 액자다. +

+
+

+ HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어다. + 모든 웹 페이지는 HTML 태그로 구성된다. +

+
<!-- HTML 기본 구조 --> +<html> + <head> + <title>페이지 제목</title> + </head> + <body> + <h1>안녕하세요</h1> + <p>첫 번째 문단입니다.</p> + <button>클릭</button> + </body> +</html>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
태그비유역할
<div>빈 방영역을 나누는 범용 컨테이너
<p>메모지문단(paragraph)
<h1>~<h6>간판(크기순)제목(heading), h1이 가장 큼
<a>문 (다른 방으로)링크(anchor)
<img>액자이미지 표시
<form>주문서사용자 입력 양식
<table>엑셀 표표 형식 데이터
<ul> / <li>목록 메모순서 없는 목록
<button>누름 버튼클릭 가능한 버튼
<input>빈 칸텍스트 입력 필드
+
+
+ + +
+

+ + 시맨틱 태그 +

+

+ 시맨틱(Semantic) 태그는 "의미가 있는" 태그다. <div>만 쓰면 검색엔진이나 스크린리더가 내용을 이해하기 어렵다. + 시맨틱 태그를 사용하면 "여기가 메뉴 영역이고, 여기가 본문이고, 여기가 푸터"라고 알려줄 수 있다. +

+
<!-- 시맨틱 태그로 구성한 페이지 --> +<header> 로고, 네비게이션 (건물 입구) </header> +<nav> 메뉴 목록 (안내 표지판) </nav> +<main> 핵심 콘텐츠 (본관) </main> +<section> 주제별 구역 (각 층) </section> +<article> 독립 콘텐츠 (개별 사무실) </article> +<footer> 하단 정보 (건물 로비 안내판) </footer>
+
+

DOM 트리 구조 (문서 객체 모델)

+ 
+document
+ └── html
+      ├── head
+      │    └── title
+      └── body
+           ├── header
+           │    └── nav
+           ├── main
+           │    ├── section
+           │    └── section
+           └── footer
+

+ 브라우저는 HTML을 읽어 위와 같은 트리(나무) 구조로 변환한다. 이를 DOM(Document Object Model)이라 한다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 3. CSS — 웹의 옷 --}} + {{-- ============================================================ --}} +
+
+

+ 3 + CSS — 웹의 옷 +

+ + +
+

+ + 선택자와 박스모델 +

+
+

비유: 인테리어 디자인

+

+ CSS는 인테리어와 같다. HTML이 방의 위치를 정했다면, CSS는 벽지 색, 가구 크기, 조명 밝기를 결정한다. + "거실 벽은 흰색, 소파는 가운데 배치" 같은 지시서가 CSS인 셈이다. +

+
+

+ CSS(Cascading Style Sheets)는 HTML 요소의 외양을 꾸미는 스타일 언어다. + 선택자로 "어떤 요소를" 지정하고, 속성으로 "어떻게" 꾸밀지 정한다. +

+
/* CSS 선택자 기초 */ +p { color: blue; } /* 태그 선택자 — 모든 <p> */ +.warning { color: red; } /* 클래스 선택자 — class="warning" */ +#header { color: green; } /* ID 선택자 — id="header" */
+

+ 박스모델: 모든 HTML 요소는 상자(box)로 취급된다. 상자 안쪽부터 바깥쪽 순서로 구성된다. +

+
+ 
+┌──────────────── margin (바깥 여백) ────────────────┐
+│  ┌──────────── border (테두리) ──────────────┐     │
+│  │  ┌──────── padding (안쪽 여백) ────────┐  │     │
+│  │  │                                     │  │     │
+│  │  │          content (내용물)            │  │     │
+│  │  │                                     │  │     │
+│  │  └─────────────────────────────────────┘  │     │
+│  └───────────────────────────────────────────┘     │
+└────────────────────────────────────────────────────┘
+
+
+ + +
+

+ + Flexbox와 Grid +

+

+ 현대 CSS 레이아웃의 두 기둥이다. 요소를 가로/세로로 배치하는 강력한 도구다. +

+
+
+

Flexbox (1차원 배치)

+

한 줄(가로 또는 세로)로 요소를 나란히 배치할 때 사용한다.

+
display: flex; +justify-content: space-between; +align-items: center;
+
+
+

Grid (2차원 배치)

+

행과 열을 동시에 제어하는 바둑판식 레이아웃에 사용한다.

+
display: grid; +grid-template-columns: 1fr 1fr 1fr; +gap: 1rem;
+
+
+
+

+ SAM에서는 Tailwind CSS를 사용한다. + Tailwind는 CSS를 파일에 따로 작성하지 않고, HTML 클래스명으로 직접 스타일을 적용하는 방식이다. + 예: class="flex items-center gap-2 bg-white rounded-lg p-4" +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 4. JavaScript — 웹의 두뇌 --}} + {{-- ============================================================ --}} +
+
+

+ 4 + JavaScript — 웹의 두뇌 +

+ + +
+

+ + 변수와 함수 +

+
+

비유: 전기 배선

+

+ JavaScript는 전기 배선과 같다. HTML이 방을 만들고 CSS가 꾸몄다면, + JavaScript는 스위치를 누르면 조명이 켜지고, 리모컨을 누르면 TV가 켜지는 동작을 담당한다. +

+
+
// 변수 — 값을 담는 상자 +let userName = '홍길동'; // 변경 가능 +const MAX_COUNT = 100; // 변경 불가 (상수) + +// 함수 — 재사용 가능한 명령 묶음 +function greet(name) { + return '안녕하세요, ' + name + '님!'; +} + +greet('김사원'); // → "안녕하세요, 김사원님!"
+
+
+

이벤트 처리

+

클릭, 입력, 스크롤 등 사용자 행동을 감지하여 반응한다.

+
+
+

JSON (데이터 형식)

+

서버와 데이터를 주고받을 때 사용하는 텍스트 형식이다.

+
+
+
+ + +
+

+ + DOM 조작과 비동기 통신 +

+

+ JavaScript는 DOM(문서 객체)을 조작하여 화면을 동적으로 변경할 수 있다. + 또한 fetch()를 사용하면 페이지 새로고침 없이 서버 데이터를 가져올 수 있다. +

+
// 버튼 클릭 → API 호출 → 화면 업데이트 예시 +const btn = document.querySelector('#load-btn'); +const result = document.querySelector('#result'); + +btn.addEventListener('click', async () => { + const response = await fetch('/api/orders'); + const data = await response.json(); + result.textContent = `주문 ${data.length}건 로드 완료`; +});
+
+

+ 비동기 통신이란? 서버에 데이터를 요청하면서도 화면이 멈추지 않는 방식이다. + 마치 식당에서 주문을 넣고 기다리는 동안 물을 마시거나 대화를 할 수 있는 것과 같다. + fetch(), async/await, Promise가 이 역할을 한다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 5. 프레임워크와 라이브러리 --}} + {{-- ============================================================ --}} +
+
+

+ 5 + 프레임워크와 라이브러리 +

+ + +
+

+ + 프레임워크 vs 라이브러리 +

+
+

비유: 반조립 가구 vs 공구 세트

+

+ 프레임워크는 이케아의 반조립 가구 — 설계도와 부품이 정해져 있어서 순서대로 조립하면 완성된다. + 라이브러리는 공구 세트 — 필요할 때 원하는 도구만 꺼내 쓴다. 설계는 내가 한다. +

+
+
+
+
+ R + React +
+

Meta(Facebook) 개발

+
    +
  • • 컴포넌트 기반 설계
    • +
  • • 가상 DOM으로 빠른 렌더링
    • +
  • • 생태계가 가장 큼
    • +
+
+
+
+ V + Vue +
+

Evan You 개발

+
    +
  • • 학습 곡선이 완만
    • +
  • • 양방향 데이터 바인딩
    • +
  • • 한국에서 인기
    • +
+
+
+
+ A + Angular +
+

Google 개발

+
    +
  • • 풀(Full) 프레임워크
    • +
  • • TypeScript 기본
    • +
  • • 대규모 엔터프라이즈
    • +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
기술유형특징
Next.jsReact 기반 프레임워크서버사이드 렌더링(SSR), 파일 기반 라우팅
HTMX경량 라이브러리HTML 속성만으로 AJAX 요청 처리
jQuery라이브러리 (레거시)DOM 조작 간소화, 2006년 등장 후 한 시대를 풍미
+
+
+ + +
+

+ + SAM의 프론트엔드 구조 +

+
+

+ SAM은 이중 프론트엔드 구조를 사용한다. +

+
+
+

MNG (관리자 웹)

+

Laravel Blade + HTMX + Tailwind CSS

+

서버에서 HTML을 생성하여 전달

+
+
+

React 앱 (모바일/대시보드)

+

Next.js + React 18

+

브라우저에서 JavaScript로 화면 구성

+
+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 6. 반응형 디자인 --}} + {{-- ============================================================ --}} +
+
+

+ 6 + 반응형 디자인 +

+ +
+

+ + 브레이크포인트와 모바일 퍼스트 +

+
+

비유: 물은 그릇 모양에 따라 변한다

+

+ 반응형 디자인은 물과 같다. 컵에 담으면 컵 모양, 접시에 부으면 접시 모양이 된다. + 화면 크기(모바일, 태블릿, 데스크톱)에 따라 레이아웃이 자동으로 바뀌는 것이 반응형이다. +

+
+

+ 브레이크포인트(Breakpoint)는 레이아웃이 전환되는 화면 너비 기준점이다. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기기너비Tailwind 접두사예시
모바일~639px(기본)스마트폰
태블릿640px~sm:아이패드
중간768px~md:태블릿 가로
데스크톱1024px~lg:노트북
대형1280px~xl:대형 모니터
+
+
/* 모바일 퍼스트 — 작은 화면부터 설계 */ +.card { + width: 100%; /* 모바일: 전체 너비 */ +} +@media (min-width: 768px) { + .card { width: 50%; } /* 태블릿: 2열 */ +} +@media (min-width: 1024px) { + .card { width: 33.3%; } /* 데스크톱: 3열 */ +}
+
+

디자인 흐름 (모바일 퍼스트)

+
+ 1 + 모바일 레이아웃 + → + 2 + 태블릿 확장 + → + 3 + 데스크톱 완성 +
+
+
+

+ viewport 메타 태그: + <meta name="viewport" content="width=device-width, initial-scale=1"> + — 이 한 줄이 없으면 모바일에서 데스크톱 크기로 축소되어 보인다. 모든 반응형 페이지의 필수 태그다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 7. 브라우저 동작 원리 --}} + {{-- ============================================================ --}} +
+
+

+ 7 + 브라우저 동작 원리 +

+ +
+

+ + 렌더링 파이프라인 +

+
+

비유: 통역사

+

+ 브라우저는 통역사와 같다. HTML/CSS/JavaScript라는 "외국어"를 읽고, 우리가 볼 수 있는 화면으로 번역해준다. + 이 번역 과정을 렌더링(Rendering)이라 한다. +

+
+
+

렌더링 과정 (6단계)

+
+
+ 1 +
HTML 파싱 — HTML 코드를 읽어 DOM 트리를 생성한다
+
+
+ 2 +
CSS 파싱 — CSS를 읽어 CSSOM(스타일 트리)을 생성한다
+
+
+ 3 +
렌더 트리 — DOM + CSSOM을 합쳐 실제 화면에 표시할 요소를 결정한다
+
+
+ 4 +
레이아웃 — 각 요소의 정확한 위치와 크기를 계산한다
+
+
+ 5 +
페인트 — 계산된 결과를 실제 픽셀로 그린다
+
+
+ 6 +
합성 — 여러 레이어를 합쳐 최종 화면을 완성한다
+
+
+
+
+
+

개발자 도구 (F12)

+

브라우저에서 F12 키를 누르면 개발자 도구가 열린다.

+
    +
  • Elements — HTML 구조 확인/수정
    • +
  • Console — JavaScript 실행/오류 확인
    • +
  • Network — API 요청/응답 확인
    • +
  • Performance — 성능 분석
    • +
+
+
+

주요 브라우저

+
    +
  • Chrome — 점유율 1위, V8 엔진
    • +
  • Safari — Apple 기기 기본 브라우저
    • +
  • Firefox — Mozilla 재단, 개인정보 보호
    • +
  • Edge — Microsoft, Chromium 기반
    • +
+
+
+
+ + CORS 에러가 발생하는 이유 + +
+

+ CORS(Cross-Origin Resource Sharing)는 브라우저의 보안 정책이다. + A 도메인의 웹페이지에서 B 도메인의 API를 호출하면, 브라우저가 "이거 허가받은 요청이야?" 하고 확인한다. +

+

+ 서버가 응답 헤더에 Access-Control-Allow-Origin을 포함하지 않으면 브라우저가 요청을 차단한다. + 이때 콘솔에 빨간 CORS 에러가 표시된다. +

+

+ 해결법: 서버(백엔드) 쪽에서 CORS 헤더를 설정해야 한다. 프론트엔드만으로는 해결할 수 없다. +

+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 8. API 연동 --}} + {{-- ============================================================ --}} +
+
+

+ 8 + API 연동 +

+ +
+

+ + REST API와 HTTP 메서드 +

+
+

비유: 식당의 주문서

+

+ API는 주문서와 같다. 프론트엔드(홀)가 백엔드(주방)에 "이 데이터를 주세요"라고 정해진 양식으로 요청하는 것이다. + 주문서에는 "무엇을(URL) 어떻게(메서드) 해달라"고 적는다. +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTTP 메서드비유용도예시
GET메뉴판 보기데이터 조회GET /api/orders
POST새 주문하기데이터 생성POST /api/orders
PUT주문 변경데이터 수정PUT /api/orders/1
DELETE주문 취소데이터 삭제DELETE /api/orders/1
+
+
+
+

JSON 데이터 형식

+
{ + "id": 1, + "customer": "홍길동", + "amount": 150000, + "status": "진행중" +}
+
+
+

fetch()로 API 호출

+
const res = await fetch( + '/api/orders', + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ customer: '홍길동' }) + } +);
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
상태 코드의미비유
200성공주문한 음식이 나왔다
400잘못된 요청주문서를 잘못 작성했다
401인증 실패회원증 없이 회원 전용 식당에 왔다
404찾을 수 없음해당 메뉴가 없다
500서버 오류주방에서 화재가 났다
+
+
+

+ SAM의 API 통신: + SAM React 앱은 api.sam-erp.com의 API 서버와 통신한다. MNG에서는 HTMX가 서버에 요청을 보내고 HTML 조각을 받아 화면을 업데이트한다. +

+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 9. 개발 도구와 워크플로우 --}} + {{-- ============================================================ --}} +
+
+

+ 9 + 개발 도구와 워크플로우 +

+ +
+

+ + 핵심 도구와 개발 흐름 +

+
+
+

VS Code

+

가장 널리 쓰이는 코드 에디터. 확장 프로그램으로 기능을 무한히 추가할 수 있다. 무료.

+
+
+

npm (Node Package Manager)

+

JavaScript 패키지(라이브러리)를 설치·관리하는 도구. npm install로 의존성을 설치한다.

+
+
+

Git

+

코드 버전 관리. 변경 이력 추적, 협업, 되돌리기가 가능하다. (→ 서버지식 백과사전 참고)

+
+
+

린터 & 포매터

+

ESLint(코드 오류 검출), Prettier(코드 스타일 자동 정리). PHP에서는 Pint를 사용한다.

+
+
+
+
+

Vite (현대적 번들러)

+

차세대 프론트엔드 빌드 도구. 빠른 개발 서버와 효율적인 번들링을 제공한다.

+
    +
  • • 즉시 시작되는 개발 서버
    • +
  • • 변경 사항 즉시 반영 (HMR)
    • +
  • • Rollup 기반 최적 빌드
    • +
+
+
+

Webpack (전통적 번들러)

+

오랫동안 표준이었던 번들러. 복잡하지만 강력한 설정이 가능하다.

+
    +
  • • 풍부한 플러그인 생태계
    • +
  • • 세밀한 설정 가능
    • +
  • • 대규모 프로젝트에 적합
    • +
+
+
+
+

개발 워크플로우

+
+
+ 1 +
코드 작성 — VS Code에서 HTML/CSS/JS 작성
+
+
+ 2 +
린트 검사 — ESLint/Prettier로 코드 품질 확인
+
+
+ 3 +
로컬 테스트 — 브라우저에서 동작 확인 (개발 서버)
+
+
+ 4 +
Git 커밋 — 변경사항 저장 (버전 관리)
+
+
+ 5 +
빌드 — 프로덕션용 최적화 코드 생성
+
+
+ 6 +
배포 — 서버에 적용하여 사용자에게 서비스
+
+
+
+
+
+
+ + {{-- ============================================================ --}} + {{-- 10. 성능 최적화 --}} + {{-- ============================================================ --}} +
+
+

+ 10 + 성능 최적화 +

+ +
+

+ + Lighthouse와 Core Web Vitals +

+

+ Lighthouse는 Google이 제공하는 웹 성능 측정 도구다. + Chrome 개발자 도구(F12) → Lighthouse 탭에서 실행할 수 있다. +

+
+
+

Performance

+

로딩 속도

+
+
+

Accessibility

+

접근성

+
+
+

Best Practices

+

모범 사례

+
+
+

SEO

+

검색 최적화

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지표이름비유좋은 기준
LCPLargest Contentful Paint큰 간판이 보이는 시간2.5초 이내
FIDFirst Input Delay버튼 눌렀을 때 반응 시간100ms 이내
CLSCumulative Layout Shift화면 레이아웃이 튀는 정도0.1 이내
+
+
+
+

최적화 방법

+
    +
  • • 이미지: WebP 포맷, 적절한 크기, lazy loading
    • +
  • • 코드 분할: 필요한 코드만 로드
    • +
  • • 캐싱: 브라우저 캐시, CDN 활용
    • +
  • • 압축: gzip/brotli로 전송 크기 축소
    • +
+
+
+

성능 저하 원인

+
    +
  • • 대용량 이미지 무압축 로드
    • +
  • • 사용하지 않는 JavaScript 번들
    • +
  • • 렌더링 차단 CSS/JS
    • +
  • • 너무 많은 API 요청
    • +
+
+
+
+ + Lighthouse로 SAM 성능 측정하는 법 + +
+

1. Chrome에서 SAM 페이지를 연다

+

2. F12를 눌러 개발자 도구를 연다

+

3. 상단 탭에서 Lighthouse를 클릭한다

+

4. "Analyze page load"를 클릭한다

+

5. 30초~1분 후 결과가 표시된다

+

+ 각 항목에서 100점에 가까울수록 좋다. 90점 이상이면 녹색, 50~89점은 주황색, 49점 이하는 빨간색이다. +

+
+
+ + +
+

핵심 정리

+

+ 프론트엔드는 "사용자가 보고 만지는 모든 것"이다. + HTML로 뼈대를 만들고, CSS로 꾸미고, JavaScript로 동작을 넣는다. + React, Vue 같은 프레임워크로 복잡한 화면을 효율적으로 관리하고, + 반응형 디자인으로 모든 기기에서 잘 보이게 만든다. + API를 통해 백엔드와 데이터를 주고받고, Lighthouse로 성능을 측정하여 최적화한다. + SAM은 MNG(Blade+HTMX)와 React(Next.js) 이중 프론트엔드 구조로, 이 모든 기술을 활용하고 있다. +

+
+
+
+
+ +
+
+
+ + +
+ + +
+ + + + + +@include('components.academy-glossary', ['domain' => 'frontend-dev']) +@endsection diff --git a/resources/views/components/academy-glossary.blade.php b/resources/views/components/academy-glossary.blade.php index 827ebb44..8fd4ce4e 100644 --- a/resources/views/components/academy-glossary.blade.php +++ b/resources/views/components/academy-glossary.blade.php @@ -1,7 +1,7 @@ {{-- Academy Glossary Tooltip Component @include('components.academy-glossary', ['domain' => 'fire-shutter']) - 도메인: fire-shutter | it-planning | server-knowledge + 도메인: fire-shutter | it-planning | server-knowledge | frontend-dev --}} @push('styles') @@ -169,6 +169,35 @@ "이해관계자": "프로젝트의 결과에 영향을 받거나 영향을 미치는 사람 또는 조직.", "로드맵": "제품·프로젝트의 중장기 계획을 시간 축으로 시각화한 전략 문서." }; +@elseif($domain === 'frontend-dev') +window.__GLOSSARY_DATA['frontend-dev'] = { + "DOM": "문서 객체 모델(Document Object Model). 브라우저가 HTML을 읽어 만든 트리 구조. JavaScript로 조작할 수 있다.", + "시맨틱 태그": "의미를 가진 HTML 태그. header, nav, main, footer 등. 검색엔진과 스크린리더가 콘텐츠를 이해하는 데 도움을 준다.", + "박스모델": "CSS에서 모든 요소를 상자로 취급하는 개념. content → padding → border → margin 순으로 구성된다.", + "Flexbox": "1차원(가로 또는 세로) 레이아웃을 쉽게 구현하는 CSS 기능. display: flex로 활성화한다.", + "Grid": "2차원(행+열) 레이아웃을 구현하는 CSS 기능. 바둑판처럼 요소를 배치할 수 있다.", + "미디어쿼리": "화면 크기에 따라 다른 CSS를 적용하는 규칙. @media (min-width: 768px) 형태로 사용한다.", + "viewport": "브라우저에서 웹 콘텐츠가 표시되는 영역. meta viewport 태그로 모바일 대응을 설정한다.", + "브레이크포인트": "반응형 디자인에서 레이아웃이 전환되는 화면 너비 기준점. 예: 768px, 1024px.", + "컴포넌트": "재사용 가능한 UI 조각. 버튼, 카드, 모달 등을 독립적인 단위로 만들어 조합한다.", + "상태관리": "애플리케이션 내 데이터(상태)를 체계적으로 관리하는 방법. Redux, Zustand 등의 라이브러리를 사용한다.", + "SPA": "Single Page Application. 페이지 전환 없이 하나의 페이지에서 콘텐츠를 동적으로 교체하는 웹 앱.", + "SSR": "Server-Side Rendering. 서버에서 HTML을 생성하여 브라우저에 전달하는 방식. SEO와 초기 로딩에 유리하다.", + "CSR": "Client-Side Rendering. 브라우저에서 JavaScript로 HTML을 생성하는 방식. SPA의 기본 렌더링 방식이다.", + "번들러": "여러 JavaScript/CSS 파일을 하나로 합치고 최적화하는 도구. Vite, Webpack이 대표적이다.", + "트랜스파일러": "최신 JavaScript 문법을 구형 브라우저에서도 동작하도록 변환하는 도구. Babel이 대표적이다.", + "린터": "코드의 오류, 스타일 위반, 잠재적 버그를 자동으로 검출하는 도구. ESLint가 대표적이다.", + "CDN": "Content Delivery Network. 전 세계에 분산된 서버로 콘텐츠를 빠르게 전달하는 네트워크.", + "CORS": "Cross-Origin Resource Sharing. 다른 도메인 간 리소스 공유를 제어하는 브라우저 보안 정책.", + "REST API": "URL과 HTTP 메서드(GET/POST/PUT/DELETE)로 자원을 관리하는 웹 API 설계 방식.", + "JSON": "JavaScript Object Notation. 서버와 클라이언트 간 데이터를 주고받는 경량 텍스트 형식.", + "npm": "Node Package Manager. JavaScript 패키지를 설치·관리하는 도구이자 세계 최대 패키지 저장소.", + "반응형 디자인": "화면 크기에 따라 레이아웃이 자동으로 조정되는 웹 디자인 방식.", + "이벤트 리스너": "사용자 행동(클릭, 입력 등)을 감지하여 정해진 함수를 실행하는 메커니즘.", + "콜백": "다른 함수의 인자로 전달되어 나중에 호출되는 함수. 비동기 처리의 기본 패턴이다.", + "Promise": "비동기 작업의 완료 또는 실패를 나타내는 객체. then/catch로 결과를 처리한다.", + "가상 DOM": "실제 DOM의 가벼운 복사본. React가 변경 사항을 비교하여 최소한의 실제 DOM만 업데이트한다." +}; @elseif($domain === 'server-knowledge') window.__GLOSSARY_DATA['server-knowledge'] = { "Nginx": "고성능 웹 서버 소프트웨어. 리버스 프록시, 로드 밸런싱 등을 처리한다.", diff --git a/routes/web.php b/routes/web.php index 5e4a9278..0a43a484 100644 --- a/routes/web.php +++ b/routes/web.php @@ -1464,6 +1464,7 @@ Route::get('/fire-shutter', [\App\Http\Controllers\AcademyController::class, 'fireShutter'])->name('fire-shutter'); Route::get('/it-planning', [\App\Http\Controllers\AcademyController::class, 'itPlanning'])->name('it-planning'); Route::get('/server-knowledge', [\App\Http\Controllers\AcademyController::class, 'serverKnowledge'])->name('server-knowledge'); + Route::get('/frontend-dev', [\App\Http\Controllers\AcademyController::class, 'frontendDev'])->name('frontend-dev'); }); // SAM E-Sign - 인증 필요