Component Design ▸ Develop

컴포넌트 디자인 분석 ➡ 웹 컴포넌트 구현

과제 실습에서 React를 다루지 않는다고 실망하지 마세요. React는 결국 UI 구현을 위한 도구일 뿐. 제출된 과제를 온전히 수행할 수 있어야 Front-End 개발자라고 볼 수 있겠죠. 😎 React 도구 사용자가 아닌...

디자인 파일 분석

학습용으로 제공된 예제 파일을 다운로드 받아 Figma에서 연 후, 디자인 된 속성을 살펴본 후 실습을 진행합니다.

27KB

Icon, UploadButton.fig

디자인 실습 파일.fig

디자인 → 개발 프로세스

디자인 시안을 분석한 후, 순수한 HTML, CSS, JavaScript를 사용해 UI 컴포넌트로 제작하는 실습을 진행합니다.

업로드 버튼을 클릭하면 Console 패널에 메시지가 출력되어야 합니다.

디자이너 ⇨ 개발자 프로세스

디자인 시안을 분석해 최대한 비슷하게 UI 스타일링 해야 합니다. 디자이너는 시안과 결과물이 다를 경우 매우 민감하게 반응합니다. 실제로 디자이너와 개발자 사이에 발생하는 갈등은 이러한 경우가 대부분입니다. 오죽 답답하면 디자이너가 개발자 대신 코딩하겠다며 배우러 올까요? 😩

그러니 제공 된 디자인 시안과 최대한 비슷하게 컴포넌트 스타일을 작성해보길 바랍니다.

HTML 하드 코딩 대신, DOM 표준 API를 사용해 동적으로 업로드 버튼 컴포넌트를 브라우저 화면에 렌더링 해봅니다.

API	설명
createElement	요소 노드 생성
createTextNode	텍스트 노드 생성
setAttribute	요소 노드 속성 쓰기
getAttribute	요소 노드 속성 읽기
dataset	커스텀 속성 읽기/쓰기
classList	class 속성 읽기/쓰기
appendChild	노드의 마지막 자식 노드로 삽입
insertAdjacentElement	노드의 특정 위치에 (형제 또는 자식) 노드 삽입
addEventListener	노드에 이벤트 리스너 연결
removeEventListener	노드에 연결된 이벤트 리스너 제거

클래스 프로그래밍

추가적으로 UploadButton 클래스(class)를 작성해 다음과 같이 작동되도록 구현해봅니다.

업로드 (idle) 클릭 🔜 업로드 중... (pending) 🔜 완료 (resolved) 🔜 비활성 (disabled)