[#3] 라우팅 및 레이아웃 설정 #4
Conversation
| @@ -51,4 +51,4 @@ | |||
|
|
|||
| ## 예상 화면 | |||
|
|
|||
| [예상 화면도](https://github.com/lionleeee/vanilla-figma-spa/wiki/%EC%98%88%EC%83%81-%ED%99%94%EB%A9%B4%EB%8F%84) | |||
| [예상 화면도](https://github.com/f-lab-edu/vanilla-figma-spa/wiki/%ED%99%94%EB%A9%B4-%EC%98%88%EC%83%81%EB%8F%84) | |||
There was a problem hiding this comment.
이건 직접 그리신건가요? 아니면 다른 레퍼런스가 있나요?
There was a problem hiding this comment.
figma로 직접 그렸습니다.
피그마 링크 공유드립니다
| @@ -0,0 +1,45 @@ | |||
| class Router { | |||
There was a problem hiding this comment.
만약에 router 가 서비스내에서 여러개 생성되면 어떤 일이 일어날까요?
그걸 방지할 방법도 있을까요?
There was a problem hiding this comment.
이벤트 중복, 라우팅 충돌, DOM 조작 중복 등이 발생 할 수 있을 것 같습니다.
싱글톤 패턴을 사용해서 하나의 인스턴스만 생성되게 할 수 있습니다.
싱글톤 패턴 추가해서 여러 인스턴스 생성이 안되게 수정하겠습니다
| } | ||
| } | ||
|
|
||
| customElements.define('app-tools-sidebar', ToolsSideBar); |
There was a problem hiding this comment.
app 을 붙이는 건 네이티브 태그와의 차별을 위함이라고 이해했는데 네임의 룰이 궁금하긴하네요. 규칙이 따로 없는 거 같기도 해서요.
There was a problem hiding this comment.
역할에 따른 네이밍을 하려고 했는데 다시 보니 네이밍을 잘못한 것 같습니다.
네이밍 규칙 세워서 수정하겠습니다.
| super(); | ||
| } | ||
|
|
||
| connectedCallback() { |
There was a problem hiding this comment.
이 함수의 실행 타이밍은 어떻게 되나요?
만약 innerHtml 을 랜더할 태그가 존재하지 않으면 어떤 문제가 생기나요?
부모가 해당 태그를 미리 만들어놔야지만 이 컴포넌트가 동작하는데 이 컴포넌트를 여러개 만들려면 어떻게 해야하나요?
There was a problem hiding this comment.
- 브라우저가 커스텀 태그를 읽고 DOM에 추가했을 때 실행됩니다.
- 현재 router에서 main을 기준으로 컨텐츠를 삽입하고 있습니다. 해당 태그가 null이면 컨테츠가 렌더되지 않습니다.
-> 랜더할 태그가 존재하는지 먼저 확인을 하고 없을 경우 먼저 삽입을 하는 로직이 추가되어야 할 것 같습니다. - document.createElement로 태그를 만들어 appendChild로 삽입하는 방식으로 동적으로 여러개를 만들 수 있습니다.
There was a problem hiding this comment.
3번 같은 경우에는 지금과 다른 구조로 바꿔야 겠다는 말씀으로 이해했는데 지금은 외부에서 태그 만들어두고 그 태그에 개별컴포넌트에서 append 하는 방식인데...
여러개를 만들어야 할때는 부모에서 태그를 다이나믹하게 만들고 개별 컴포넌트를 append 하시겠다는 말씀이실까요?
예를 들어 Button 컴포넌트가 있다고 하면 그걸 하나 하나 그리실 건가요? 원하는 곳마다 Button 을 넣어야 한다면 어떻게 하시려는 건지도 궁금하네요.
| render() { | ||
| this.innerHTML = ` | ||
| <app-header></app-header> | ||
| <main></main> |
There was a problem hiding this comment.
메인의 역할은 app 이 아니라 body app-body 인건가요
There was a problem hiding this comment.
네 맞습니다. main 태그에 동적으로 라우팅된 컴포넌트들이 렌더링됩니다.
고정된 UI와 동적으로 변하는 UI를 분리하여 관리하려고 했는데 질문을 곱씹어보니 main 태그를 그대로 사용하면 해당 역할이 명확하게 드러나지 않는 것 같습니다.
동적인 컴포넌트를 렌더링하는 역할을 하는 커스텀 태그를 만들어 처리하면 가독성이 더 좋아질 것 같습니다.
|
Related Issue : #3
TODO
COMMENT
구현 방식은 HTMLElement를 상속받아서 CustomElement를 생성하는 방식으로 구현하였습니다.
Component 클래스 구현하여 직접 기능을 구현하여 상속받는 형태도 고민해봤으나, 다음과 같은 장점이 있어 선택하게 되었습니다.
예상 화면 잘못된 경로 수정했습니다.
예상 화면도