Paper CSS 빌드 구성 토론

[kranian]

이번에 Contributon 톤 행사에 참여 하고 있는 개발 자입 니다.
이슈 다루면서 불편하점이 있어 문의 드립니다.

불편한 점은 화면 UI 에 구성 되은 CSS 디자인을 한땀 한땀 만들어서 이번에 추가 했는데요
Paper에 빌드시 CSS 전처리기 툴 같이게 들어가면 좋겠습니다.

예를 들어 Stylus 같은 CSS 전처기기 툴 같은거요

• https://www.stylus.com/
  • 간단히 소개하자면 스타일러스는 종속형 시트로 컴파일되는 동적 스타일시트 전처리기 언어입니다.

1. example stylus coding

.confirm-message
  background-color: white
  text-align: center
.message-content-layout
  max-width: 500px
  margin: 0 auto
  text-align: center
  .message-indexer
    padding: 0 0 10px 0
    font-size: 16px
  .message-indexer-holder
    height: 20px
    width: 100%

  > .message-content
    display: table
    width: 100%
    table-layout: fixed
    min-height: 100px
    padding : 0px
    > div
      display: table-cell
      vertical-align: middle
    > .center-message
      padding: 0px 50px
      color : #333
      .message-title
        padding: 0px 5px
        font-weight: bold
        > span
          padding: 10px 15px
          display: inline-block
          color : #333
        > i
          color : #333
          padding: 3px 5px
          font-size : 17px
      .center-message-content
        padding: 5px
.message-btns
  padding: 15px
.message-btns button
  cursor: pointer

2. stylus build 결과

.confirm-message {
  background-color: #fff;
  text-align: center;
}
.message-content-layout {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.message-content-layout .message-indexer {
  padding: 0 0 10px 0;
  font-size: 16px;
}
.message-content-layout .message-indexer-holder {
  height: 20px;
  width: 100%;
}
.message-content-layout > .message-content {
  display: table;
  width: 100%;
  table-layout: fixed;
  min-height: 100px;
  padding: 0px;
}
.message-content-layout > .message-content > div {
  display: table-cell;
  vertical-align: middle;
}
.message-content-layout > .message-content > .center-message {
  padding: 0px 50px;
  color: #333;
}
.message-content-layout > .message-content > .center-message .message-title {
  padding: 0px 5px;
  font-weight: bold;
}
.message-content-layout > .message-content > .center-message .message-title > span {
  padding: 10px 15px;
  display: inline-block;
  color: #333;
}
.message-content-layout > .message-content > .center-message .message-title > i {
  color: #333;
  padding: 3px 5px;
  font-size: 17px;
}
.message-content-layout > .message-content > .center-message .center-message-content {
  padding: 5px;
}
.message-btns {
  padding: 15px;
}
.message-btns button {
  cursor: pointer;
}

[gunlee01]

이부분을 잘 알지는 못하지만
CSS 전처리 방식으로 많이 사용하시는 것이 SASS, LESS 그리고 말씀해주신 Stylus가 있는 것 같네요.
@mindplates 의견도 궁금합니다.

---

추가적으로 말씀드리면
현재 PAPER가 기능 위주 개발 중심으로 되고 있긴 하지만,
기능 개발외에도 소스 구조 개선, 성능 개선, 도큐먼테이션, 사용자 확보/홍보 등도 고려되어야 하는데
여력이 없어 이런 부분들이 아직 별로 얘기 되지는 않았습니다.
의견들을 모은 후에 우선순위를 정해서 효과가 크고 빠르게 적용할 수 있는 것 위주로 진행되면 좋을 듯합니다.

예를 들어

• 빌드 구성
  • 말씀해 주신 CSS 빌드
  • 그리고 @makkaba 님께서 언급해 주신 source map 등
• 그외 React 구조의 개선할 부분들
• 성능 적인 부분
  • json 응답의 오버헤드를 줄이기 위해 API에서 thrift, protobuff 같은 바이너리 프로토콜을 사용하는 방안.
    • 특히 JSON의 Long 표현 문제로 숫자를 "string"으로 응답하고 있는 문제등.
    • API v2를 구상하고 있습니다. (Scouter Server / Paper 둘다 영향도가 큰 작업입니다.)
• Documentation 보완
  • Manual
  • Reference
  • Guide
• 밋업?

등등

브레인 스토밍 하듯 생각 나는 것들을 모두 이슈에다 남겨놓아도 좋을 것 같습니다.
그걸 어찌할지는 그 다음에 고민하면 되겠죠.

[kranian]

의견을 찾아봐 주시고 감사할 따름입니다. 추가로 CSS 빌더 관련해서 쓸려고 하는 이유에 대해 설명해 드리고자 합니다.

CSS 전처리 방식을 사용하는 이유는 CSS 충돌 회피, CSS NameSpace 화, CSS 모듈화 하여 컴포넌트 간 재사용, CSS를 변수처럼 처리 할수 있는 장점이 있어요, 하지만 반대로 초기에 적응하는 시간과 배우는 시간이 필요합니다. 개인적인 의견이지만 배우는 시간이 큰 비용 이라고 생각 되지는 않습니다. ^^

상세한 내용은 아래 링크 내용을 참고해 주세요

• 리액트 컴포넌트 스타일링 Sass/Scss 추천글

[gunlee01]

@kranian 좋은 의견 감사합니다.

전체 소스에 영향을 미치는 부분이라
여러 이슈가 등록되어 있고 PR도 많이 들어오는 컨트리뷰톤 기간에
소스 머지에도 영향도가 크므로
당장 적용하기는 어려울 듯 합니다만
이 thread는 계속 의견 교환이 진행되어 모이면 결정하여 적용되면 좋을듯합니다.

[kranian]

맞습니다 지금 당장 어렵다고 저도 생각 합니다
차후에 잘 의견이 잘 모아져 반영이 되었으면 좋겠네요

[mindplates]

좋은 의견입니다.
SCSS 부분은 빌드에 조만간 추가해보도록 하겠습니다.
최신 create-react-app에는 기본적으로 추가되어 있는 것 같아요. 해당 부분 참조해서 넣으면 될 것 같습니다. 다만 현재 css 부분을 scss로 변환하는 것은 시간이 조금 걸릴 것 같아서, 그 부분은 코드를 정리하면서, 함께 변경해보면 좋을 것 같구요. 당분간은 css와 scss를 혼용해서 사용 형태로 적용해볼 수 있을 것 같습니다.