Portfolio

🚩 목표

☑️ 유튜브 메인화면 클론

☑️ SCSS

☑️ 코드 품질 개선

💡 시작하기

Live Sass Compiler 확장 프로그램 설치. SASS 컴파일을 자동으로 해주는 플러그인임.

파일 하나를 컴파일하는 명령어는 구조.

npm install -g sass

💻 CSS로 트랜스 파일하기

👉 npm 문서 확인하기

SASS 파일이 수정될 경우 자동으로 컴파일 되도록 하기.

sass --watch input.scss output.css

🤔 컴파일 vs 트랜스파일

컴파일 - 사람이 알아들을 수 있는 언어를 기계가 알아들을 수 있게 바꾸는 것.

트랜스파일 - 사람이 알아들을 수 있는 걸 다른 형태의 파일로 바꾸는 것.

컴파일은 하이 레벨 언어에서 로우 레벨 언어로 변환하는 것을 말하는데 이것은 정확히 기계어만을 의미하진 않음. 넓게 보면, SCSS(개발용) 코드를 CSS(브라우저용) 코드로 변환하는 것도 충분히 컴파일이라고 할 수 있음.

다만 트랜스 파일이란 정확한 단어가 있는만큼 넓게 볼 필요는 없다고 생각함.

결론 : 'SCSS 컴파일' 혹은 'SCSS 컴파일러' 용어 사용에 문제가 없다(맞다가 아님)고 판단하지만, 또 다른 입장이 있음.

✏️ 배운 것

dist의 의미

dist는 distribution의 약자로 public/ 또는 build/라고도 불림. 파일이 배포나 퍼블릭으로 사용된다는 의미를 가짐. 따라서 SCSS에서 CSS로 컴파일 된 것이 실제로 사용되는 것이기 때문에 dist란 단어를 사용함.

💡

css외에도 html, JS 파일 또한 dist 폴더에 들어감.

⚠️

dist는 최종 배포할 결과물이 들어가는 폴더임. PR 등의 개발 단께에서 활용하기엔 적합하지 않음. 개발할 때는 기준이 되는 index.html 파일은 루트 경로에 작성하는 것을 권장함.

중복 트랜스파일

import한 파일의 코드가 중복됨.

CSS는 신경쓰지말자! SCSS가 겹치지 않으면 되는 것임. 추후 사용하지 않는 파일은 .gitignore파일을 만들어 대체하면 됨 or 언더바를 사용하면 트랜스 파일 되지 않음.

mixin으로 중복을 없애자! → mixin은 스타일 재활용이라는 목적이 모호해짐.

@use 사용하기

sass 버전 확인 결과 deprecated된 node-sass를 사용 중이었음.

삭제하고 dart scss로 재설치하면 됨.

package-lock.json

package-lock.json 파일은 의존성 트리에 대한 정보를 모두 가지고 있음.

package-lock.json 파일은 저장소에 꼭 같이 커밋해야 함.

package-lock.json 파일은 node_modules 없이 배포하는 경우 반드시 필요함.

반복문 쓰기

반복문을 이용하여 imgUrl과 gifUrl을 연결해줌.

이때 변수끼리 조합은 어려울 수 있음. 조합하기 전 url을 참조하기 때문.


@for $i from 1 to 7 {
    &__img:nth-child(#{$i}) {
      width: 320px;
      height: 180px;
      background-size: cover;
      $imgUrl: map.get($img, $i);
      $gifUrl: map.get($gif, $i);
      background-image: url($imgUrl);
      &:hover {
        background-image: url($gifUrl);
      }
    }
  }

Git .gitignore File 적용하기

gitignore란 Project에 원하지 않는 Backup File이나 Log File , 혹은 컴파일 된 파일들을 Git에서 제외시킬수 있는 설정 File임.

gitignore는 상태 변경 트래킹을 원치 않는 파일을 대상으로 작성함.

img나 json 등의 commit이 필요한 파일은 gitignore하는 게 아님.

그 외

mixin을 통해 flex-center를 템플릿화 시킬 수 있음.

BEM 방법론과 SCSS를 함께 쓰면 좋은 이유 : & 키워드를 통해 클래스 이름을 생략할 수 있음.


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px;
  div > * {
    margin-right: 10px;
  }
  &__logo {
    width: 100px;
    height: auto;
  }
	&__right,
  &__center {
    @include flex-center;
  }
}

cdn에서 제공하는 reset.css 파일 사용할 수 있음,


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"
/>

SCSS로 UI 클론하기