컴포넌트란 무엇인가

다시 돌아온 (?) 원티드 프리온보딩 챌린지.. 생각보다 난이도나 내용, 그리고 내 컨디션이 들쑥날쑥해서 정리를 잘 하지 못했는데 6월은 할 수 있을 것 같다.

컴포넌트란

컴포넌트는 무엇이고 우리가 생각하는 컴포넌트란 어떤 것이 있을까.

component의 사전적 의미

• 형용사: 구성하는, 구성하고 있는, 성분의
• 명사: 구성 요소, 성분

⇒ 여러 요소들을 모아 짜내어 이룬다.

Web Component

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

웹표준으로 있는 기술이고 웹컴포넌트 라이브러리도 있다.

웹에서 컴포넌트가 생긴 이유

초기 웹에서는 상태관리나 컴포넌트가 필요할까 싶을 정도의 모습이었다.

시간이 지나고 다양한 컴포넌트가 생겼다. 모바일이 대두되면서 작은 화면에 많은 것을 보여줘야 하는 상황이 되었다. 그러기 위해서는 추상화가 필요하다. (Headless UI 라이브러리 같은게 바로 추상화의 예시라고 볼 수 있다.)

Headless component

머머리 컴포넌트

헤드리스 컴포넌트 UI 라이브러리들이 다른 UI 라이브러리와 다른 점: 기능만 제공하겠다 스타일은 당신이 만들어.

기존의 잘 되어 있는 UI 라이브러리들은 작은 토이프로젝트할 때는 매우 유용했지만, 실제 서비스에 가져다 쓰는 것은 꺼려졌다. 왜냐하면 스타일이 이미 적용되어 있어서 스타일을 기존 서비스에 맞게 커스텀 하는게 더 힘들었기 때문이다. 그럴 때 스타일은 제외하고 기능만 제공하는 헤드리스 컴포넌트를 사용하면 더 유연하게 가져가 쓸 수 있다.

예시

• contenteditable
  • https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable
  • HTML의 전역 속성이다. 이것이 true일 때 요소의 내용을 편집할 수 있다.
  • 웹에서 노션을 개발자 도구로 확인해 보면 div 태그에 contenteditable=”true”로 되어 있는 것을 볼 수 있다.
• Zag
  • https://zagjs.com/
  • chakraUI 만드신 분이 만든 헤드리스 라이브러리. 차크라는 스타일이 포함된 컴포넌트였는데 Zag는 로직만 처리해 주는 듯.
• Editable
  • https://docs.editablejs.com/
  • 텍스트 에디터 프레임워크
• use-editable
  • https://github.com/FormidableLabs/use-editable
  • 코드 에디터와 같이 편집 가능한 요소를 반환하는 리액트 훅
• headless ui
  • https://headlessui.com/
  • tailwindcss 팀에서 만든 헤드리스 라이브러리.
  • 가짓수가 적다. 여기에 tailwind로 스타일링이 다 되어있는 템플릿 같은 거를 tailwind ui에서 팔고 있다.

컴포넌트 공부 방법

컴포넌트 패턴

Patterns.dev - Modern Web App Design Patterns

The Kent C. Dodds Blog

컴포넌트 나누기

• bottom → up: 작은 컴포넌트에서 페이지로 만들기 시작한다. 엄청 어렵지만 좋고, 스토리북과 함께 사용하면 더 좋다.
• Children을 활용하자
• 다른 UI 라이브러리 코드를 참고하자

프론트엔드 근현대사를 듣고 나서 쓰는 2023년에 내가 프론트엔드를 공부하는 기분

강사님이 테오콘에서 발표하셨던 것을 다시 발표해주셨는데 아주 흥미롭게 봤다. 2016년부터 올해까지 프론트엔드 개발에 무슨 일이 있었는가를 요약해서 볼 수 있었다. 어떻게 이렇게 빠르게 바뀔 수 있는 건지 놀랍다.

• 2019년: 이전까지 개발과 관련없이 살고 있었는데, 취업을 위해 웹디자인 국비과정을 듣게되었다. 디자인과 퍼블리싱 둘 다 배웠는데 생각보다 디자인에 적성과 흥미가 없었고, 퍼블리싱이 재밌어서 본격적으로 공부 시작. 당시에는 퍼블리셔라는 직업이 없어질거다, 공부해도 필요없다 등의 그런 얘기를 많이 접해서 겁을 먹었던 적이 있다. 하지만 아직도 퍼블리셔 꽤 괜찮은 직업같다.
• 2020년: 퍼블리셔 취업! 신규 웹서비스 전체 퍼블리싱 해보는 좋은 기회도 있었고, 교육컨텐츠라는 생소한 분야를 처음 접하기도 했던 때이다. 교육컨텐츠 퍼블리싱 첫 인상은 흥미로웠지만 달갑지는 않았다.
• 2021년: 퍼블리싱 계속! 교육컨텐츠도 하고.. 디지털 교과서를 처음 만들어 보던 해. 디지털 교과서 너 진짜 할 말이 많지만 (지금은) 하지 않겠어. 디지털 교과서 만들면서 두 달 정도 주말 과정으로 Vue 수업을 들었다. 해당 수업을 듣고 자신감이 많이 생겼다. 프로젝트가 없어서 쉬는 기간은 길었다.
• 2022년: 퍼블리싱 또! 연초에 바닐라 자바스크립트 공부를 열심히 했고, 프론트엔드 개발자 면접을 본 적이 있음 완전 멘붕에 털림. 생활고에 허덕이다가 디지털 교과서 또 만들어 봄. IE와 구버전 안드로이드 대응에 초연해짐. 그리고 현실을 깨닫고 개발자 부트캠프 다니게 되었음. 직접 만들어본 팀프로젝트가 확실히 도움이 되었음.
• 2023년: 신입 개발자에게 원하는 수준이 너무 높은거 같아. 아직 반도 못 하고 있는듯. 휩쓸리지 않고 뭐라도 꾸준히 할 수 있어야 할 거 같다.

2023년에 공부하는 기분은.. 나쁘지 않다. 좀 더 일찍 공부를 시작할 걸이라는 생각은 좀 했는데, 그동안 최선의 선택의 연속이었기 때문에 후회는 없다. 그리고 영어 공부 해야된다..