33일차 배운 것 정리

목차

1. CSS (Day31)

1.1 transform 3D

1.1.1 속성 소개

1.1.2 card 뒤집기 효과 적용하기

• rotateY(180deg) 시 뒤집어지면 보이지 않음_

1.1.3 정리

• transform: 변환효과 (정가운데를 기준)

• transform-origin: 변환의 기준을 변화 (50% 50% 정가운데가 default)

• perspective
• 3차원 변화 시, 원근감을 줄 수 있다
• perspective 함수와 속성으로 나뉜다
• 함수 : 요소 자체에서 설정
• 속성: 요소의 상위(container)에 적용 (많이 사용)

• perspective-origin
• 원근 설정은 멀리서 물체를 지켜보는 방식으로 생겨난다.
• 지켜보는 기준 점 위치를 변경가능 (default: 50% 50% 정가운데)

• backface-visibility
• 뒷면을 보여줄 지 여부를 결정(defalt: visible)

1.2. Columns

텍스트를 정리하기 위한 다단의 개념

1.2.1 속성 소개

1.2.2 정리

1.3 Filter

흐림효과나, 반전, 그림자 등의 속성을 지정할 수 있는 속성

1.3.1 속성소개

1.4 변수

1.4.1 사용법

• 선택자 안에서 변수 선언하면, 해당 선택자 안에서만 자유롭게 사용가능 (유효범위를 가짐)
• root로 지정시 전역에서 사용

:root {
	—-color-primary: royalblue;
	—-color-danger: royalblue;
	—-color-success: royalblue;
}
.primary{
	background-color: var(--color-primary);
}

• 변수의 재할당
• 재할당 할 경우 해당 선택자에서만 재할당된 값 적용됨

1.5 @supports

브라우저가 지원하는지 여부를 체크하고, 분기처리를 해주는 기능 , 복수명임을 기억

• 패턴1: firefoxs는 backdrop 사용 불가

• 패턴2: and와 or 키워드 로 여러개 조건 나열 가능

• 패턴3: selector() 함수 사용하기 (. , # , :dir 등의 selector 선택의미)

1.6 @media

@media 타입 and (기능) { 스타일 } 꼴로 사용

1.6.1 속성

• width 고려하기

• 주의사항
• not 연산자를 사용할 때는 media 타입을 반드시 입력해주어야 함
• @media not all and (max-width:700px) and (min-width: 400px) { 스타일 }

• 참고
• media 에는 all, print, tv 등 있지만 자주 사용하지는 않는다. (default: all)
• @media(orientation: portrait){ 스타일 } 의 경우 가로길이보다 세로길이가 길 때만을 의미
• 모바일 세로 모드일 경우 고려 시에 작성한다.
• @media(orientation: landscape){ 스타일 } 의 경우 가로길이가 세로길이 보다 길 때
• 모바일 가로 모드일 때 의미

• CSS 파일을 불러올 때, media에 따라 가져오도록 할 수 있다.
• <link media=“query”>
• 모바일, 데스크탑에 따라 css파일 따로 작성하여 적용 등 활용

2. SCSS (Day32)

2.1 SCSS 개요

2.1.1 SCSS 장점 소개

1. CSS Compatible
• 표준 CSS와 충분한 호환성을 가지고 있다.
• 기존 CSS 코드를 그대로 작성하는 것도 가능하다

2. 기능이 풍부하다

3. Mature
• 출시년도가 14년이 지나, 버그가 적고 성숙하다
 

2.1.2 SCSS와 Sass 의 차이

• Sass가 먼저나오고, CSS와의 호환성을 위해서 SCSS 가 등장했기 때문에, 우리는 SCSS를 공부하고 사용하는 것이 바람직

• SCSS 는 조금 더 CSS와 가깝다.
• 중괄호와 세미콜론을 가진다

• Sass
• 중괄호가 없는 대신, 들여쓰기를 통해 범위를 잡기 때문에 주의해야한다.

2.1.3 Sass meister

• SCSS를 CSS로 변환해주는 사이트

• 연습가능

SassMeister | The Sass Playground!

SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

https://www.sassmeister.com/

2.2 SCSS - 주석, 중첩

2.1.1 SCSS 주석

• 기존 CSS의 주석 → 컴파일됨
• /* 메세지 */

• SCSS에서만 사용가능한 주석 → 컴파일 되지 않음
• // 메세지

• sass 에서는 들여쓰기를 맞추어주어야 여러줄 주석 처리가능

2.1.2 SCSS의 중첩

• 기존 CSS의 문제
중첩요소의 대해 매번 선택자(selector)를 반복하여 입력해주어야한다는 점

• &
• 상위선택자
• 중첩에서 상위 선택자 참조를 의미하는 기호 (예시)

• $
• 변수 만들기
• $size: 100px 과 같이 $키워드로 변수선언 및 사용

• @at-root
• 중첩 밖으로 벗어나기

• { }
• 중첩속성 간소화
• 반복되는 속성이름이 있을 경우 범위로 만들어서 처리 가능
• flex, margin(top, left, right), font (size, weight, family) 등 속성에서 중첩속성 사용가능
• before
{ flex-grow:1, flex-shrink: 0; flex-basis: auto;}
• after
{ flex : {grow: 1; shrink:0; basis: auto } }

• ,
• 다중선택자
• 다중 선택자가 여러개 있을 때, 각각 적용된다.
• 부모2, 자식2 이면 총 4개의 중첩 태그 생성
• ul, ol { li, span } ⇒ ul li, ul span , ol li, ol span

2.3 변수, 데이터 , 연산자

2.4 재활용

3. 6주차 과제(고양이사진첩) 코드리뷰 반영

Before

// App.js

this.setState = (nextState) => {
    isValidState(this, nextState, "App");
    if (!isHaveAnyChange(this.state, nextState)) {
      return;
    }

    this.state = { ...this.state, ...nextState };

    const updateMap = new Map(); // {key: component, value: property[] }
    const setProperty = (key, property) => {
      if (updateMap.has(key)) {
        const newPropertyList = [...updateMap.get(key), property];
        updateMap.set(key, newPropertyList);
      } else {
        updateMap.set(key, [property]);
      }
    };

    if (nextState.hasOwnProperty("isLoading")) {
      setProperty(loading, "isLoading");
    }
    if (nextState.hasOwnProperty("visitedNodeList")) {
      setProperty(breadcrumb, "visitedNodeList");
    }
    if (nextState.hasOwnProperty("isRoot")) {
      setProperty(nodes, "isRoot");
    }
    if (nextState.hasOwnProperty("nodeList")) {
      setProperty(nodes, "nodeList");
    }
    if (nextState.hasOwnProperty("selectedImageUrl")) {
      setProperty(imageViewer, "selectedImageUrl");
    }

    //* map 순회하며, 컴포넌트 별 setState 진행
    [...updateMap].forEach(([component, propertyList]) => {
      const newState = {};
      propertyList.forEach((p) => (newState[p] = this.state[p]));
      component.setState(newState);
    });
  };

After

this.setState = (nextState) => {
    if (!isHaveAnyChange(this.state, nextState)|| !isValidState(this, nextState, "App")) {
      return;
    }

    this.state = { ...this.state, ...nextState };

    const { isLoading, visitedNodeList, isRoot, nodeList, selectedImageUrl } = this.state;

    loading.setState({ isLoading });
    breadcrumb.setState({ visitedNodeList });
    nodes.setState({ isRoot, nodeList });
    imageViewer.setState({ selectedImageUrl });
  };

code refactor