코드·프레임워크

코드에서 화면으로

WORKSPACE / FRAMEWORKS

HTML / CSSReactTypeScript상품명

type Props = { name: string };

function Product({ name }: Props) {
  return <h3>{name}</h3>;
}

<Product name={"AGM Battery"} />

Product / UI

AGM Battery

컴포넌트 연결

담당 업무와 산출물

1. 01

   언어·컴포넌트 개발

   HTML과 CSS로 구조와 표현을 만들고, JavaScript·TypeScript와 React로 상태와 재사용 가능한 컴포넌트를 구현합니다.

   산출물

   타입 정의 · UI 컴포넌트 · 상태 로직

2. 02

   프레임워크·화면 연결

   Next.js의 페이지 구조에 맞춰 라우팅, 데이터 전달과 렌더링 경계를 정리하고 공통 UI를 연결합니다.

   산출물

   페이지·라우트 구조 · 데이터 연결 · 공통 레이아웃

3. 03

   코드 품질·유지보수

   타입 검사, 린트와 동작 검증으로 변경 영향을 확인하고 중복된 UI와 예외 처리를 정리합니다.

   산출물

   검증 기록 · 공통 모듈 · 유지보수 기준