프로젝트 슬롯사이트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 R&D를 진행 했었고, 그 테스트를 통한 가정을 프로젝트 실전에 적용을 해보려고 슬롯사이트 시도했다.

일단 예상했던 부분은 카드 디자인들을 컴포넌트로 많이 사용하지않을까로 예측했었는데 막상 카드들의 생성 자체가 for문으로 반복 생성된 부분들이어서 이를 굳이 컴포넌트화 슬롯사이트 시킬 필요는 없겠다고 판단했다.

따라서 페이지별로 반복되게 사용되는 부분을 찾아보니 '헤더+타이틀'과 '푸터'였고 이 두 가지 부분만 컴포넌트화 해보기로 결정했다.

지난번에 미리 진행해 슬롯사이트 본 방법대로 진행을 해보았는데…
(웹 컴포넌트 테스트 1 -
(웹 컴포넌트 테스트 2 -

아니나 다를까 페이지 이동을 했더니 템플릿을 불러오지 슬롯사이트 못하는 문제가 발생했다.
(지난번 테스트 때는 페이지 이동을 안해봤었다.) 역시 테스트와 실전은 다르고 항상 변수가 발생하는구나라는 걸 몸소 체감했다.

매 페이지마다 템플릿을 슬롯사이트 넣어주는 것은 컴포넌트화 하는 의미가 없어지기 때문에 효과적인 방법을 gpt와 함께 강구해보았다.

1. 매 탬플릿을 페이지마다 복제해서 넣어주지 않는다.
2. 그러면서도 슬롯을 슬롯사이트 통해 컴포넌트의 장점인 커스터마이즈 속성을 사용할 수 있게 한다.
이 두가지를 충족하면 되겠다고 판단하고 열심히 찾아보았다.

그렇게해서 이런 컴포넌트 js파일을 구축할 수 슬롯사이트 있었고 이렇게 사용하면 위 문제들을 해결할 수 있었다.


;



컴포넌트로 적용된 헤더+타이틀 부분




앞으로 진행해가면서 또다른 문제점을 발견할수도 있긴하겠지만 일단 내가 원했던 웹컴포넌트의 슬롯사이트 목적을 잘 구현한 부분들은 만족한다.