Debelloper

Web Component 웹 컴포넌트는 코드들을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다. 슬롯(Slot) 웹 컴포넌트의 여러 기술들 중 HTML 템플릿에는 ‘template’과 ‘slot’ 엘리먼트가 있다. 이들은 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해주며, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용 할 수 있다. HTML ‘slot’ 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 placeholder이다. [예제] ㄴ 템플릿 작성 이것은 외부에서 넘어온 헤더입니다. 이것은 외부에서 넘어온 푸터입니다. ㄴ sl..

Situation 마켓 컬리 사이트 클론 코딩 프로젝트 중에 레이아웃이 깨지는 문제가 발생하였다. 아이디 입력란과 비밀번호 입력란은 동일한 클래스를 주고 같은 스타일을 적용하였는데 비밀번호는 원하는대로 스타일이 나와주었고 아이디 입력란만 먹통이였다. 회원가입 페이지도 마찬가지로 아이디와 이름 입력란만 레이아웃이 깨지는 현상이 발생하였다. Task 로그인 페이지와 회원가입 페이지의 레이아웃 깨짐 현상을 해결하여 원하는 스타일이 나오도록 해야했다. Action 먼저 시도해 본 방법은 캐시 비우기 및 강력 새로고침이였다. 그대로다. 두 번째 시도해 본 방법은 작성한 코드와 로컬 서버 상태를 확인하는 것이였다. 코드를 아무리 보아도 클래스를 잘못 주었다거나, 스타일을 잘못 준 것도 아니였다. 로컬 서버의 문제도..