Component Design ▸ Develop

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

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

디자인 파일 분석

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

디자인 → 개발 프로세스

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

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

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

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

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

API

설명

요소 노드 생성

텍스트 노드 생성

요소 노드 속성 쓰기

요소 노드 속성 읽기