4주차 위클리 미션
디자인 시안 확인하기
4주차 디자인 시안
요구사항 파악하기
UI 구현 자체는 간단했지만, 기존 코드들과 새로 만들 요소들을 웹 컴포넌트로 만드는 게 가장 어려운 요구사항이었다.
리팩토링하기 - 지난 주(3주차) 위클리 미션
js 파일에서 기능 별로 분리하기
기존 /signin, /signup 파일의 자바스크립트 코드를 기능 별로 최대한 분리했다. 그리고 이 파일들을 전부 uitils 폴더로 관리했다.
공통 스타일을 common.css로 분리하기 && svg 파일로 관리하기
공통된 css를 common.css로 분리했다.
그리고 모든 이미지들을 원래 svg 태그로 html에 직접 삽입했는데,
그러다 보니 html 코드가 너무 더러워졌다. 그래서 전부 img 태그로 변경하고 svg 파일을 연결하는 방식으로 변경했다.
이번 주 미션 구현하기
shadow DOM 이해하기
웹 컴포넌트를 직접 만들어 본 적이 없어서 고생을 많이 했다.
웹 컴포넌트를 구현하기 위해 아래 링크들을 읽으며 주로 참고했다.
Web Components(2): Custom Elements
웹 컴포넌트(3) - 쉐도우 돔(#Shadow DOM)
원래는 단순히 클래스로만 구현하고 js 파일을 import하면 되지 않을까? 라는 생각을 했다.
근데 shadow DOM을 사용하면 HTML와 CSS에 스코프를 줄 수 있다는 걸 이해하고는 shadow DOM을 활용하기로 마음을 먹게 되었다.
처음 코드들을 보면 이해하기 어렵지만, 차근차근 읽어보면 어렵지 않게 웹 컴포넌트를 만들 수 있었다.
HTMLElement에서 클래스를 상속받아서 새로운 커스텀 클래스를 생성한다.
export default class Card extends HTMLElement {
constructor(){
super()
}
// ... connectedCallback()에서는 커스텀 컴포넌트가 DOM에 추가되었을 때의 기능 코드들을 작성해준다.
커스텀 컴포넌트를 추가하기 위해
this.attachShadow()를 사용해서 shadow DOM을 열어주고this.shadowRoot안에 컴포넌트로 만들고 싶은 html 코드들을 작성해준다.- 이 안에서 style 태그를 사용해서 인라인으로 스타일도 적용해준다.
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = /* html */ `
// ...
<style>
// ...
</style>
`disconnectedCallback()에서는 DOM에서 커스텀 컴포넌트가 제거되었을 때의 기능 코드들을 작성해준다.
그외에 메서드들이 많지만, 당장 이번 주 요구사항을 충족하기 위해서는 이 정도의 기능만 알아도 충분하다고 생각했다.
shadow DOM 안에서 이벤트를 어떻게 조작하지?
여기서 예상 외로 시간을 많이 썼다.
왜냐하면, 커스텀 컴포넌트의 최상위 요소를 this로만 선택해야 한다고 착각하고 있었다. 그래서 this로 자식 요소들을 못 찾으니 계속 막혔었다.
그러다가 찾은 게 event.composedPath 프로퍼티로 임의로 찾아야 하나? 라고 고민하던 찰나에 this가 아니라 this.shadowRoot로 찾으면 너무 쉽게 자식 요소들을 querySelector로 선택할 수 있었던 걸 깨달았다..
컴포넌트를 폴더로 관리하기
components 라는 폴더를 생성해서 여기에 컴포넌트들을 관리했다.
img 태그와 부모 태그의 높이가 왜 다르지
요구사항을 충족하기 위해 코드를 작성하면서 계속 어려웠던 게
img 태그와 부모 태그의 높이가 미묘하게 다르다는 점이었다.
이때 img 태그를 정확하게 다루기 위해서는,
부모 태그에 width를 주고 자식인 img 태그에는 다음과 같이 block을 부여해야 한다.
display: block;
width: 100%;
height: auto; 배운 것들
직접 구현해봐야 보이는 것들
사실 웹 컴포넌트에 대해 한번 읽어본 적은 있다.
꽤나 꼼꼼하게 읽었다고 생각했는데, 막상 코드를 작성하려니 머리가 하얘졌다.
위클리 미션을 진행하면서 매주 느끼는 거지만,
눈으로 읽는 것과 직접 구현해보는 건 하늘과 땅 차이다.
