TIL23, React: 1차 프로젝트 3일차, 배운내용 정리

1차 프로젝트를 하면서 실제로 구현해보니, 여러가지 몰랐던 부분들을 배우게 된다. 잊지 않도록 기록으로 남겨본다.

---

CSS: 형제 선택자

형제 선택자는 서로 형제 관계에 있는 요소들을 선택한다. 예로,

img {
      width: 40px;
      margin-right: 10px;
      border-radius: 50%;

      &:hover {
        opacity: 0.5;

        & ~ span {
          opacity: 0.5;
        }
      }
    }

와 같이 선택자가 쓰이면, img 태그에 호버가 됬을 때, 형제하는 span 에 opacity 가 적용된다.

형제 선택자는 + 와 ~ 가 있는데,
+ 선택자는 같은 부모를 가지고 바로 뒤에 오는 요소를 선택할 때 쓰이고,
~ 선택자는 같은 부모를 가지고 뒤에 오는 요소를 선택할 때 쓰인다. 바로 뒤에 올 필요가 없다.

주로 복수의 요소에 스타일을 동시에 줄 때 사용. 다만, 선택자 뒤에 오는 요소가 반드시 첫번째 요소 뒤에 있어야 하는 것이 한계.

---

calc()

scss를 사용하면 연산자를 사용할 수 있을 줄 알았다. 물론,

Left: 100px - 49px;

과 같이 같은 픽셀 단위라면 문제 없이 사용 가능하다. 하지만, 오늘 프로젝트의 레이아웃을 짜던 중, % 값에서 픽셀 값을 빼야하는 경우가 있었는데, 이와 같은 경우, 연산자는 작동하지 않는다. 따라서, 단위가 다를 경우, CSS calc() 함수를 사용한다.

left: calc(50% - 100px);

찾아보면 CSS 내장 함수가 괜찮은 것이 많더라. 잘 활용할 수 있도록 합시다.

---

visibility 애니메이션

마우스를 가져다 두었을 때, 아래로 서브 메뉴가 나타나는 애니메이션을 구현하였다.

처음에는 display: none 으로 해두고, 호버를 할 시 display: block 을 해서, 창을 띄워주는 방식을 이용하였다. 다만, display 는 transition 을 사용할 수 없기 때문에, visibility 를 대신이용한다. 코드는 아래와 같다.

.filterCardWrapper {
    position: absolute;
    top: 30px;
    left: calc(50% - 100px);
    padding-top: 20px;
    background-color: white;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.1s linear;

    &:hover {
      visibility: visible;
      opacity: 1;
    }
  }

작고 이쁜 내 코드 잘 나온다 ^-^

---

동기적, 비동기적 차이!!!!

도저히 외워지지가 않아, 기록으로 남겨 계속 리마인드 시킬 수 있도록 하자.

동기적(Synchronous): 어떤 작업을 요청했을 때, 그 작업이 종료될 때 까지 기다린 후 다음 작업을 수행하는 방식
비동기적(Synchronous): 어떤 작업을 요청했을 때, 그 작업이 종료될 때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식.

---

생각보다 CSS부분에서 새로 배우는 게 많다. CSS에 대해서 어느정도 많이 알고 있었다고 생각하고 있었는데, 하면 할수록 아무것도 모르고 있었구나 라는 걸 많이 깨닫게 되는 듯. 오케이. 다 배워서 다 찢어버린다.