[Team 17][FE] Todo List 1주차 PR

[ju-kkim]

team-17 프론트엔드

안녕하세요. 이든, J입니다.
리뷰 잘 부탁드립니다.

협업과정

• live share를 이용하여 html, css를 페어로 작성하고 있습니다.
• 백엔드와 함께 아침 스크럼에서 어제 한 일과 오늘 할일을 얘기하고 저녁 리뷰에서는 진행과정을 공유합니다.
• 이슈, 프로젝트, 마일스톤을 이용하여 프로젝트 관리를 하고 있습니다.

진행사항

• 빌드환경 세팅
• HTML 작성
• SCSS 작성

고민한 사항

• webpack dev server를 띄우는 과정에서 Cannot GET /라는 오류가 발생하였습니다. dev server에 대한 설정은 해주었지만 html을 연결하는 과정이 잘못되었다고 생각하였습니다. 그래서 HtmlWebpackPlugin의 template키를 이용하여 적용될 html경로를 설정하여 해결하였습니다.

• scss color 변수를 지정할 때 $highlight-color와 $blue-color 중에 어떤 것으로 하는게 좋을지 고민했습니다.
  포인트 color가 변경될 경우를 생각하면 $highlight-color로 하는게 좋을 것 같았지만, 좀 더 명시적으로 color를 알기위해 $blue-color와 같이 네이밍하는 것으로 정했습니다.

• html, css 먼저 vs 대략적인 레이아웃, 기능 후 css

  1. 미리 하드코딩으로 html, css 작업 후 js 작업 할 때 템플릿 리터럴로 가져가서 컴포넌트화 하기.
  2. 처음부터 html body안에 비워둔 채로 js로 컴포넌트 분리 하여서 작업하고 css하기.

  결론 : 2번은 컴포넌트를 먼저 고민하려는 시도였지만 js에서는 처음부터 템플릿으로 작업하는것이 수월하지 않을 것 같아서 figma를 보며 재사용될 컴포넌트만 미리 파악하며 1번으로 진행하기로 하였습니다.

질문사항

빌드환경을 세팅하면서 dist 폴더구조에 대해 고민이 생겼습니다.
기존 작업 폴더 구조

└── src
    ├── css
    ├── img
    └── js

dist 폴더 구조

└── src
    ├── css
    ├── img
        62c00551442b36ae2930610ce9328ad8.png
    └── js
    f98c080e728aef29e35f.png

이미지가 중복으로 img폴더 내,외부에 생성이 되고있습니다. 그리고 css에서 background url의 경로를 img폴더경로로 하고 싶은데 외부의 png에 접근하는 상황입니다. webpack으로 dist폴더를 만들면서 현재 img폴더의 외부의 png파일이 있는데 이것이 디폴트로 외부에서 생성될 수 밖에 없는지 궁금합니다. 그리고 css 경로 처리를 해당 img폴더의 png파일로 접근하게 할 수 있는지 궁금합니다.
추가로 html 이미지태그에 사용한 이미지는 어떻게 dist에 추가하는지 알아보다가 app.js에서 html파일을 import 시키고 html-loader를 사용하는 방법을 알게됐는데 이 방법으로만 이미지를 가져올수 있는지 궁금합니다.

[choisohyun]

안녕하세요~ 리뷰어 Hoo라고 합니다.
우선 너무 고생많으셨습니다~!!
웹팩 설정과 scss 작업이 깔끔하게 잘 하신 것 같습니다. 웹팩 설정의 경우에는 지금의 설정을 보일러플레이트로 삼아 앞으로 필요한 설정을 추가해 나가는 것을 추천드립니다.
아래 질문사항에 대해 답변을 드렸는데 부족하거나 이해 안가는 부분이 있으면 답변 달아주시면 확인을 다시 해보도록 하겠습니다.

질문에 답변을 드리자면 dist 폴더구조에 대해서는 크게 신경쓰지 않으셔도 됩니다. 서버 단으로 서빙하기 위한 한 벌의 js, css, imgs로 모아둔 것이기 때문입니다. 일반적으로 dist 디렉토리 자체를 github에 올려두지 않기 때문에 보통은 로컬 테스트 외에는 볼 일이 잘 없습니다. 이미지 링크는 웹팩에서 자동으로 설정해 주기도 하구요.
html 이미지 태그 같은 경우는 copy plugin을 사용해 볼 수 있을 것 같습니다.

[choisohyun]

요런 템플릿 활용 좋네요 👍

[choisohyun]

보통은 번들 결과물인 dist 디렉토리도 gitignore로 등록합니다!
gitignore인 이유는 자동배포를 하는 경우에는 npm run build 등의 빌드 명령어를 서버환경에서 해주기 때문에 dist를 올릴 필요가 없어서 입니다.

[choisohyun]

scss 변수 지정하는 컨벤션은 찾아보니 color를 우선 $color-blue 같은 형태로 저장해 두고 ui 이름을 따와서 다시 저장해서 사용하는 내용이 많이 있네요!
제가 찾은 자료도 참고용으로 두고 갑니다 :)
https://css-tricks.com/what-do-you-name-color-variables/

[HongJungKim-dev]

// COLOR
$blue-color: #0075de;

// UI config
$hightlight-color: $blue-color;
$button-color: $gray-color

이런식으로 사용하여 어떤 ui항목인지 파악할 수 있고 수정시에도 UI config만 수정하면 되어서 유용한 것이군요.

[choisohyun]

webpack과 core js도 번들링할 때 사용되는 의존성이어서 devDependencies로 옮겨도 될 것 같습니다~
https://stackoverflow.com/questions/40143357/do-you-put-babel-and-webpack-in-devdependencies-or-dependencies

[choisohyun]

의미 있는 마크업으로 해주신 게 좋네요 👍

[choisohyun]

index.html에도 스타일 링크가 들어있던데 여기도 넣어줘야 번들링이 제대로 되나요??
웹팩에 스타일 관련 로더들이 설정되어 있어서 js에만 넣어줘도 동작할 것 같네요!

[ju-kkim]

넵! js파일에만 올려도 되네요!! webpack을 처음쓰다보니 어려워요😭

[choisohyun]

class 만드실 때 BEM 방식을 참고해 보셔도 좋을 것 같습니다!
https://nykim.work/15

[choisohyun]

현재는 개발 중이라 개발 모드만 있어도 괜찮지만,
프로덕션에 나가는 용도일 경우에는 mode: 'production', 으로 주면 웹팩이 인식하여 자동으로 코드에서 공백 문자열등을 제거해 주어서 파일 용량을 줄여 줍니다!
mode 변경후에 빌드해 보시면 index.html이 한줄로 줄어 있을 거에요

[choisohyun]

webpack-dev-server에서 indext.html을 자동으로 찾아서 삽입해 주지 않기 때문에 HtmlWebpackPlugin로 index.html을 잡아주는 작업이 필요합니다!

[choisohyun]

바닐라로 작업하게 되면 많이 고민하게 되는 부분 중 하나 같습니다.
저도 공통 먼저 보고 html 작업 먼저 하게 되는 것 같아요~
추후 리액트나 뷰 등의 View 중심의 프레임워크를 하게 되면 이런 고민을 덜 하면서 컴포넌트를 분리할 수 있을 것 같네요 ㅎㅎ