🦁_21.12.01(2) TIL

21년 12월 01일(2)

📎 Vending Machine with SCSS - 코드 리뷰

CSS/SCSS 선언 순서 고려

• 지금은 mixin만 사용했지만 조건문이나 반복문, 함수 또는 Javascript가 같이 포함된다면 어짜피 순서는 바뀌게 되어있으므로 크게 고려하지 않아도 된다.

긴 변수명

• 더 같단하게 사용하기 위한 변수의 변수명이 길게 작성되어 있으므로 일관성이 있고 간결한 변수명을 사용해야 한다.

// 변수명이 너무 길다.
@mixin flex($direction: row, $align: center, $justify: center) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify; 
}

지정해놓은 mixin의 모든 속성을 사용하지 않고 아주 일부만 사용하게 되는 경우

• 반복되는 속성은 mixin으로 작성하고 @content를 이용해 스타일을 추가하여 전달

mixin의 초기값을 null 지정

• 이 경우도 위와 같이 @content를 이용하기

@mixin fontStyle($c, $s, $w: $font-w-500, $l: null) {
  color: $c;
  font-size: $s;
  font-weight: $w;
  line-height: $l;
}

중복되는 스타일이라면 클래스로 선언

• 중복되는 스타일이라면 mixin을 사용하는 것보다 클래스를 만들어서 사용하는 것이 효율적이다.
  => 내가 SCSS로 작성한다고 모든 것을 SCSS로만 해결하려고 했음

코딩 전 체크

• 코딩을 시작하기 전에 디자인을 확인하고 같은 스타일을 적용해도 되는 부분들은 디자이너와 협의해서 수정
• 작업 전 협의 후 코딩 시작하기

미디어쿼리

• 프로젝트의 규모에 따라, 회사에 따라 또는 개인에 따라 다를 수 있다.
• 미디어 쿼리를 분리된 파일 내에 작성
• 미디어 쿼리를 따로 모아서 작성
• 해당 요소 스타일 바로 다음 줄에 미디어 쿼리 작성 등 다양하다

float 해제 방법

• float 속성이 디자인을 위해 생겨난 요소가 아니기 때문에 다른 방법을 사용하는 것이 좋다.
• 다른 브라우저의 호환성을 위해 float을 사용해야 한다면 overflow: hidden보다 clear-fix 사용을 권장

대문자로 시작하는 파일명

• 파일명에 대문자를 사용하면 안되는 것은 아니지만 대문자로 시작하는 파일명은 주의하기

&:not(:first-child)

li + li {
  margin-top: 20px;
}

/* 위의 방법보다는 :not 선택자 사용하기 */
li:not(:first-child) {
  margin-top: 20px;
}

• :not() : 지정된 선택자에 특정한 요소를 제외할 경우 사용

// :not selector syntax
:not(selector) {
  css declarations;
}

---

마무리

• 모던 자바스크립트 Deep Dive 1회독 해보자아아아
• 계속 바쁘게 의식해서 타자 치기!
• 코드 리뷰는 즐겁다아! 이걸 이렇게 작성해도 되나? 의문이 들었는데 속시원하게 해결-
  • 확인받고 싶은 부분 명확하게 전달하기
  • 어떤 부분을 고려했는지
  • 왜 코드를 이렇게 짰는지
  등 확실히 전달하고 코드 리뷰 부탁하기
  => 내가 궁금한 부분을 전달했지만 내용이 부족했다. 되도록 자세히 설명을 하고, 질문도 미리 잘 준비해두기
• 나한테 주어진 시간 잘 활용해야겠다. 이제 멋사 교육이 한달이 지났으니 적응시기는 완료하고 효율적으로 공부해야겠다.