본문 바로가기
FrontEnd/JS

웹 컴포넌트

by 행복한 기린님 2022. 9. 15.

코딩을 최근 접한 개발자라면 당연히 웹 컴포넌트 개념을 기준으로 개발을 시작했을 것이다.

여러 개발자를 만나보면서 자신이 사용하는 기술을 정확하게 알고 개발을 하는 사람이 많지 않다는 것을 깨달았다.

 

기술이란, 목적에 맞게 사용했을 때 가장 빛나는 것이며 다양한 기술들 중 알맞게 선택할 수 있어야한다.

나도 급할땐 기술먼저 적용한 적도 많았지만,

내가 쓴 기술은 어떤 장단점이 있고 

어떤 용도로 써야하며 

지금 목적에는 어떤 기술들이 있고 어떤것이 가장 적합한지 공부하고 정리하는 습관을 들이자.

 

모든 기술은 목적이 명확하고 그 근본이 되는 기술이나 개념이있다.

앞으로는 개념들을 여기 블로그에 정리해야겠다.

 

 

우선은 '웹 컴포넌트' 이다.

 

작년 프론트엔드 작업을 하면서 웹 컴포넌트에 대해 익히게 됐다.

모든 태그를 한 HTML에 우겨넣는 것이 아니라 컴포넌트 단위로 구성을 쪼개 페이지를 구성했다.

 

웹 컴포넌트의 핵심 가치는 '캡슐화' 이다.

동일한 기능을 하는 요소를 복사 붙여넣기 하는 형태가 아닌 컴포넌트를 선언하여 재사용 하면 된다.

컴포넌트 단위가 아니었다면, 기능이 바뀌었을 때 사용한 모든 곳에서 수정작업을 진행해야하고 

프로젝트가 커지면 어디에 썼는지 정확하게 알지 못하기도 하며 검색을 해서 수정을 하더라도 빼먹는 부분이 생기기 마련이다.

 

이러한 문제점을 보완하기 위해 나타난 개념이 웹 컴포넌트이다.

자세한 사항은 아래의 사이트를 참고할 것.

https://developer.mozilla.org/ko/docs/Web/Web_Components

 

웹 컴포넌트 | MDN

웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

developer.mozilla.org

 

 

 

'FrontEnd > JS' 카테고리의 다른 글

Fetch / Axios 비교  (0) 2023.04.14
콜백 함수란?  (0) 2023.01.20

댓글