1.준비

• ✔️ 새로운 클론 방법

  • 내 터미널에서 git clone 을 하게 되면 폴더만 복사할 뿐 내 원격 저장소와 remote 되지 않는다.
  • 그래서 원하는 원격저장소를 포크(Fork)해오면 된다. → 자동으로 내 원격저장소로 복사

• 이미 한번 깔았던 패키지들은 노드모듈과 package.json에 기억되는데 그래서 한꺼번에 불러오기 위해 npm i 만 하면 자동으로 깔린다.

2. Sass 프로젝트

• 콘텐츠 블록
  • 인자 전달 외에도 믹스인은 콘텐츠 블록을 사용할 수 있다.
  • 중괄호를 사용해 전달되며 @content 위치에 전달된 콘텐츠가 삽입된다.

$break : 768px;

@mixin mobile {
  @media (max-width: #{$break - 1}) {
    @content;
  }
}

body {
  @include mobile {
    background: yellow;
  }
}

• 함수

// 단위 제거 함수 ------------------------------------------------------------------ /
@function removeUnit($value) {
  @return math.div($value, $value * 0 + 1);
}

⚠️ 곱하기 일때는 단위가 같으면 결과물은 단위가 탈락한 채로 return 된다.

// px을 rem 단위로 변경하는 함수 ------------------------------------------------------- /
@function rem($value, $base: $rootUnit) {
  $removeValue: removeUnit($value);
  $removeBase: removeUnit($base);
  @return math.div($removeValue, $removeBase) * 1rem;
}

• @import 와 @forward는 불러오는 순서가 정말 중요하다.
  

→ 캐스케이딩의 영향 때문에 적용되는 순서가 달라진다.
→ 그래서 default를 가장 마지막에 선언해야 한다.

@forward "normalize";
@forward "reset";
@forward "default";
//내가 어떤 순서로 가져와야 할지 정말 중요하다.

• ⚠️ 배포 시에는 절대경로를 불러와야한다.

• 상대경로는 배포 시 경로 때문에 오류가 날 수 있다. (@use 해온 파일마다 위치가 다르기 때문에)

  → 절대경로 : url(/assets) = src/assets

  → 상대경로 : url(./../../assets)
  

3. 회고

어제는 엄청난 멘붕이어서 잘 이해가 안간 상태로 개인프로젝트를 진행하다가 계속 막혀서 포기하고싶었다. 하지만 운이 좋게 내가 막혔던 부분에 대해 오늘 수업에서 다뤄졌고 그래서 어제 가지고 있던 의문점을 풀 수 있었다. 역시 나는 반복학습이 맞는 공부법인지 두번 세번 하고나니까 이해가 가기 시작했다. 어제는 @forward 와 @use가 너무 헷갈려서 굳이 왜 이렇게 써야할까 싶었는데 계속 코드를 쳐보고 필요할 때마다 가져오고 내보내기를 하고 나니까 이해가 아주 조금 됐다.

하지만 그래도 새로운 거 나갈 때마다 나만 이해못하는건가 싶은데 다들 어렵다고 하셨다. 나만 이해가 안가는게 아니라 안심이 됐지만 정말 다들 나만큼 이해를 못하고 있는걸까 라는 의문점과 불안감이 들긴했다ㅠㅠㅠ 그리고 하면 할 수록 Sass가 정말 편하다고 생각됐디. 코드의 재활용을 정말 많이 한다. 내가 만든 부품의 이름과 속성만 제대로 각인시키면 빠르게 스타일 작업을 할 수 있을 것이다. 오늘의 혁명은 내가 가장 어려워했던 px 을 rem 단위로 변환해주는 함수... 진짜 꿀템이다. 한번 함수를 정의해두면 계속 쓸 수 있다는 정말 크나큰 장점!! 이건 혁명이다!

파일 왔다갔다 하고 너무 많은 @mixin 을 만든 것 외에는 어제에 비해 엄청 크게 어려운 건 없어서 다행이였다. 그런데 각 파일마다 존재하는 이유를 이해해야 할 것 같다. 갑자기 color 파일가고 media-query 파일 갔다오고 정신없었다. 그래도 오늘 수업 덕분에 개인프로젝트 header부분을 완성시킬 수 있을 것 같다. 유명한 사이트들 들어가서 개발작모드로 보면 주석이 별로 없는 것보고 다들 천재인가 싶었는데 배포모드에서는 주석을 안내보낼 수 있는 방법을 알고나니까 이래서 배포모드와 개발모드가 다르다고하는구나 싶다.

목요일에 프로젝트조 발표가 나는데 강사님께서 저번 기수들은 다 싸웠다는 얘기를 듣고 무서웠다. 우리 조 제발 평화롭게 지내요...ㅎㅎㅎ 저도 열심히 할테니...ㅎㅎㅎ