공동 목표: CSS까지 JS파일에 합쳐서 폴더 없이 하나의 파일로 웹 컴포넌트 작성하기

[sounmind]

No description provided.

[sounmind]

나중에 코드를 보는 사람들에게 풍부한 맥락을 제공하기 위해 작성합니다 🙇‍♂️

배경

• 미래의 유지보수 담당자이자 Product Owner(@DaleSeo)의 결정.
• 한 파일 안에서 HTML, CSS, JS를 모두 볼 수 있기 때문에 가독성이 좋음.
• 디렉토리 구조도 마찬가지로, 각 컴포넌트 디렉토리를 만들 필요 없이 components/{component-name}.js 형태로 유지보수에도 용이.

지켜봐야 할 점

• 현재의 Tech Stack과 멤버들이 사용하고 있는 개발 환경으로는 스타일 코드 작성 시 syntax highlighting과 formatting이 안 됨.
  • Example

편리했던 점

• 리뷰 받는 피드백을 반영하는 입장에서도 한 파일에 있어서 깃허브 사이트에서 검토하기 편함 (이범수)

[DaleSeo]

formatting이 안 됨

아, 요건 미처 고려 못했군요... 🤦‍♂️ Bad DX 😭
(그런데 또 한편으로 드는 생각은, CSS을 빼더라도, HTML은 여전히 formatting을 직접 해야함)

전 여러분의 현재 개발자 경험과 미래의 유지보수 용이성 사이에서 딜레마에 빠졌습니다. 🙃
다음 모임에서 이 방법으로 개발하였을 때, 개발자 경험이 얼마나 안 좋은지 허심탄회하게 알려주세용!

[sounmind]

(deprecated, not recommended)
아래 VSCode Extension 사용하면 최소한의 주석으로 Syntax Highlighting, Hinting을 이용할 수 있습니다.
template literal 앞에 /*html*/ 주석만 작성하면 됩니다.

Extension 정보

Name: Web component HTML formatter and highlighter
Id: begaroth.web-component-formatter
Description: Format and highlight HTML code inside ES6 string literal in JavaScript or TypeScript
Version: 1.0.8
Publisher: Thomas M. Ziirsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=begaroth.web-component-formatter

[sounmind]

아래 extension이 가장 신뢰로운 것 같아요. 기존 extension 보다 다운로드 수도 많고 동작에도 오류가 없습니다.

---

Name: es6-string-html
Id: Tobermory.es6-string-html
Description: Syntax highlighting in es6 multiline strings
Version: 2.15.0
Publisher: Tobermory
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html