WEB FE Repository 10

BEM - CSS,JS 용 클래스 네이밍 규칙

처음 HTML, CSS 를 사용하려고 하다 보면, 각 태그들을 구별할 뚜렷한 클래스 명명 규칙을 찾기 어려워 멋대로 지정해보다가, 프로젝트의 규모가 커지면서 답답함을 느끼게 된다. 선대 개발자들은 이런 문제를 해결하기 위한 고민을 이미 진행해왔으니, 이를 알아보자.태그 위주로 이름 짓기태그를 기준으로 클래스를 네이밍해보자.article { /* ... */ } article aside { /* ... */ } article aside figure { /* ... */ }article div header { /* ... */ } article ul li { /* ... */ } article div ul li { /* ... */ } article div ul li.special { /* ... */ } ..

WEB FE Repository 2026.01.23

시멘틱 태그 - Semantic Tag

시맨틱 태그가 무엇인가?HTML5의 여러 태그들은 그 자체로 어떤 의미를 지니고 있다.이 태그들은 기능적으로는 div 태그와 동일하지만 각각의 종류 자체가 페이지에서 해당 요소가 갖는 의미와 역할을 나타내기 때문에, 시맨틱 태그라고 불린다.시맨틱 태그를 쓰면 뭐가 좋은가?웹 접근성 개선스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월히 찾을 수 있다.SEO (Search Engine Optimization)검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움이 된다.유지보수와 가독성모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽다.태그별 설명header페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용된다.로고와 제목, 검색창 등이 들어간다. MDN ..

WEB FE Repository 2026.01.23

HTML - HEAD 태그

DOCTYPE문서가 형식과 버전으로 작성되었는지를 명시선언시 standards mode(최신 형식)로 문서 실행선언하지 않을 경우 quirks mode(익플5, 네이게이터 4 등 옛날 브라우저를 모방)로 문서를 실행한다.DOCTYPE은 꼭 선언해주자.head 태그메타데이터(기계가 읽을 정보)가 담기는 곳페이지의 제목파비콘기타 메타 정보CSS와 자바스크립트 등의 코드 및 링크title 태그브라우저의 탭에 표시브라우저 즐겨찾기의 제목으로 표시검색엔진 검색결과의 제목으로 표시meta 태그와 속성들a. charset 페이지가 어떤 문자로 작성되었는지 명시 - 글자가 깨지지 않도록UTF-8 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식문서 저장 형식도 UTF-8로 맞출 것!참고: html 태그의 l..

WEB FE Repository 2026.01.23

Material UI 기반 디자인 진행 순서

1. 요구사항 & UX 리서치서비스 목표·주요 유저 시나리오 정의어떤 기능/화면이 필요한지 플로우 정리 (로그인, 대시보드, 설정 등)경쟁 서비스 벤치마킹 (UX 패턴 참고 → MUI 컴포넌트 맵핑 가능)2. 정보 구조 & 와이어프레임페이지 플로우 / IA: 어떤 페이지들이 있고, 어떤 경로로 이동하는지 결정와이어프레임: 흑백 박스 수준에서 구조만 정의예: 상단바(Header), 좌측 네비게이션, 메인 콘텐츠, 버튼 위치이때부터 MUI 기본 컴포넌트(Button, AppBar, Grid 등)로 대응할 수 있음3. 디자인 토큰 확정 (MUI Theme Mapping)브랜드 컬러 → theme.palette.primary / secondary폰트/글자 크기 → theme.typography간격/라운드 값 →..

WEB FE Repository 2025.10.03

FE 작업 순서 (Material UI + 일반 Webapp 기준)

0) 킥오프 · 요구사항 정리화면 목록/유스케이스/권한/네비게이션 플로우 확정API 스펙 합의(가능하면 OpenAPI/Swagger 문서로 고정)디자인 산출물(Figma) 수령 및 컴포넌트 카탈로그 확정1) 디자인 → 디자인 토큰화 (MUI 테마 맵핑)브랜드 컬러/중립 컬러 → theme.palette타이포 시스템(폰트/크기/행간) → theme.typography라운드/간격 → theme.shape.borderRadius, spacing 스케일브레이크포인트 → theme.breakpoints→ 산출물: “디자인-토큰 치환표(맵핑표)” 1장토큰이란, 색상, 글꼴, 크기, 간격, 그림자 같은 디자인 속성들을 재사용 가능한 변수로 추상화한 것을 의미한다. const theme = createTheme({ ..

WEB FE Repository 2025.10.03

useReducer

useReducer 훅은 컴포넌트 내부에 새로운 State를 생성하는 조금 특별한 리액트 훅이다.상태 변화 함수 대신 “상태 변화 요청 함수” 를 사용한다.useState와 달리 “상태 관리 코드”(이벤트 핸들러로 쓰거나 했던 setState 함수를 사용하는 함수들)를 컴포넌트 외부로 분리할 수 있다.모든 useState는 useReducer 로 대체 가능하다.컴포넌트는 렌더링하기 위한 함수인데, 컴포넌트가 내부적으로 "도메인 로직"을 갖게 되면 책임 분리가 잘 안되게 된다.즉, State를 관리하는 코드가 컴포넌트 안에 길어지는 상황을 막기 위해 사용한다.즉, useReducer는 다음과 같은 경우에 사용한다.컴포넌트 내부에 보관해야 하는 상태가 도메인 로직과 밀접한 상태일 때컴포넌트 내부에 보관해야 ..

리액트 컴포넌트의 라이프사이클과 useEffect

상태 전이는 그 상태 전이의 발생을 알리는 방식의 설계로 무궁무진한 응용 가능성을 갖고 있다.그렇기 위에 꼭 알아둬야 하는 리액트 컴포넌트의 생명주기와, 이를 활용할 useEffect에 대해 알아보자.리액트의 컴포넌트의 생명주기Mount컴포넌트가 탄생하는 순간.화면에 처음으로 렌더링되는 순간.Update컴포넌트가 리렌더링 되는 순간.UnMount컴포넌트가 화면에서 사라지는 순간.컴포넌트가 렌더링에서 제외되는 순간.useEffect리액트에선 각 생명주기 별로 명령을 지정해둘 수 있다.이를 라이프사이클 제어 라고 하며, useEffect() 훅을 통해 구현할 수 있다.리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅.사이드 이팩트란?컴포넌트의 동작에 따라 파생되는 여러 효과 (생명주기 제어 등)useEf..

State, 리렌더링, 리액트 훅과 커스텀 훅 - 리액트의 핵심 기능

리액트에서의 State모든 컴포넌트들은 State를 가질 수 있다.현재 State에 따라 렌더링 결과를 다르게 할 수 있다.State의 변화에 따라 렌더링을 다시 하는것을 Re-Rendering이라고 한다.리액트는 변수의 값의 변화로는 리렌더링 되지 않고(버퍼에 담김), State가 변화해야만 즉각적으로 리렌더링을 수행한다.“react” 에서 useState를 import 하는것으로 State를 갖게 할 수 있다.이때, “react”에는 useState만 있는것이 아니므로 다음과 같이 코드를 작성해야 한다import { useState } from "react";state의 구성요소state는 배열, useState() 함수를 통해 얻을 수 있다.state가 처음 생성됐을 땐 [ undefined, f ..

컴포넌트, jsx, 이벤트와 이벤트 객체 - 리액트의 기초 기능 사용 방법

개인 학습용 정리로, 리액트 첫 학습을 목적으로 찾아보고 계신다면 공식 문서를 강력히 권장드립니다. 자습서: React 시작하기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 컴포넌트란?js에서 html 코드를 반환하는 함수.컴포넌트들은 트리 구조로 관리되며, root 컴포넌트를 루트 노드로 삼는다.특정 컴포넌트의 리턴값 안에 들어있는 컴포넌트를 특정 컴포넌트의 “자식 컴포넌트” 라고 한다.리액트는 클래스 기반 컴포넌트와 함수 기반 컴포넌트가 있지만, 리액트에서는 주로 함수 기반 컴포넌트를 사용한다.함수 기반 컴포넌트는 반드시 첫글자가 “대문자”여야 한다.jsx에서 소문자로 시작하는 이름은 html 요소로 보고j..

리액트 소개

리액트의 특징 (추구하는 것)컴포넌트를 기반으로 UI를 표현한다.이는 재사용성이 높은 UI의 구현을 위해 적용되었다.화면 업데이트 구현이 쉽다.선언형 프로그래밍 방식(추상화된 기능) 으로 동작하기 때문에, 구현이 간편하다.선언형 프로그래밍 ↔ 명령형 프로그래밍(하나부터 열까지 전부 지시)으로 이해하면 좋다.화면 업데이트가 빠르게 처리된다. (SPA)리액트의 SPA는 Virtual DOM(버퍼 객체) 을 구성함으로써, JS로 인한 DOM의 수정 사항을 모아서 객체로 처리하다가, 마지막에 DOM을 한번만 수정하고, 그러므로 수정 시간을 단축시킨다.브라우저의 렌더링 과정HTML 을 DOM(Document Object Model)으로 변환하고, CSS를 CSSOM(CSS Object Model)로 변환한다.DO..