bluegram - 12일차

1. image-carousel 수정

기존에는 넣어준 이미지를 넣기 전에 구분하고, 처음과 마지막 이미지를 직접 추가해서 넣어줬어야 했는데 코드도 길어지고 불편함을 느껴서 수정했습니다.

현재는 그냥 이미지를 넣어주기만 하면 내부적으로 처리를 해주도록 변경했습니다.

아래 코드를 보시면 기존에는 이미지 개수에 따라서 분기를 나눠서 처리를 했으며, 여러 개의 이미지일 경우에는 첫 이미지와 끝 이미지를 수동적으로 추가해서 image-carousel에 넣어주었습니다.
이점이 불편하고 코드가 길고 지저분하다고 판단되어서 이미지를 넣어주기만 하면 image-carousel에서 자체적으로 이미지 개수에 따라 다르게 처리하고 추가해야 될 이미지들을 추가해 주도록 만들었습니다.

• 기존 코드

{post.Images.length === 1 ? (
  <img
    src={process.env.IMAGE_URL + "/" + post.Images[post.Images.length - 1].name}
    alt="게시글의 이미지"
    className="post-image"
  />
) : (
  <ImageCarousel speed={300} length={post.Images.length}>
    <li>
      <img src={process.env.IMAGE_URL + "/" + post.Images[post.Images.length - 1].name} alt="게시글의 이미지" />
    </li>
    {post.Images.map(image => (
      <li key={image._id}>
        <img src={process.env.IMAGE_URL + "/" + image.name} alt="게시글의 이미지" />
      </li>
    ))}
    <li>
      <img src={process.env.IMAGE_URL + "/" + post.Images[0].name} alt="게시글의 이미지" />
    </li>
  </ImageCarousel>
)}

• 수정한 코드

<ImageCarousel speed={300} length={post.Images.length}>
  {post.Images.map(image => (
    <li key={image._id}>
      <img src={process.env.IMAGE_URL + "/" + image.name} alt="게시글의 이미지" />
    </li>
  ))}
</ImageCarousel>

2. 반응형 적용

모든 페이지와 컴포넌트에 반응형을 적용했습니다.
기준은 480px, 768px, 1024px, 1600px으로 나눠서 적용했고 대표적으로 게시글을 클릭했을 경우 보여주는 모달창을 캡쳐한 이미지입니다.

아직 댓글, 좋아요 등의 기능은 구현하지 않아서 영역만 잡아둔 상태입니다.

• 768px 이하일 경우
  
• 768px 초과일 경우
  

3. 애니메이션

게시글 생성 모달, 게시글 읽기 모달, 메뉴창에 각각 다른 애니메이션을 적용해 줬습니다.
애니메이션 이름과 효과들은 여기를 참고했고, 코드를 참고한 것은 아니고 결과물을 보고 직접 만들었습니다.
앞으로 필요하다고 느껴지면 계속 추가할 생각입니다.

• /css/animation.css

@keyframes appear-scale {
  from {
    transform: scale(0, 0);
  }

  80% {
    transform: scale(1.2, 1.2);
  }

  to {
    transform: scale(1, 1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes back-in-down {
  from {
    transform: translateY(-100vh) scale(0.8, 0.8);
  }

  80% {
    transform: translateY(0) scale(0.8, 0.8);
  }

  to {
    transform: translateY(0) scale(1, 1);
  }
}

4. css

고정적인 단위는 px로 통일해서 사용했고, 나머지 유동적인 단위는 rem과 vh, vw만을 사용해서 구현을 했었습니다.
반응형을 위해서 css를 공부하면서 적용하다가 em 같은 다른 단위의 쓰임새도 알게 되었고, calc()같은 함수도 알게 되었습니다.

이런 단위, 함수, media query, animation 등의 CSS 자체적으로 제공해 주는 유용한 요소들에 대한 공부가 부족했다는 것을 느껴서 틈틈이 공부하면서 적용해 볼 만한 것들이 있다면 적용해 볼 생각입니다.

그리고 Grid는 잘 몰라도 Flex는 어느 정도 알고 있다고 생각했는데 이번에 반응형으로 배치를 바꿔가면서 스타일을 적용하는데 엄청난 어려움을 느꼈습니다.

결론은 CSS에 대해 자만하지 말고 공부하자입니다.

마무리

1. 힘들었던 점

어제저녁부터 오늘 저녁까지 대부분 CSS만 수정했는데 시간이 정말 많이 걸리고 배치를 제대로 하는데 힘들었습니다.
물론 지금도 필요한 속성들만 사용해서 가장 효율적으로 동작하는지는 미지수입니다.

이렇게 된 이유는 기본 지식이 부족하고, 처음 만들 때 제대로 안 하고 추후에 제대로 수정하려고 하다 보니 기존 코드와 충돌이 계속 발생해서 서로 보완을 해주는 과정이 발생해서 그렇습니다.

그리고 반응형을 적용할 땐 작은 사이즈부터 큰 사이즈를 만들라고 들었긴 한데 이번에 무시하고 큰 것부터 만들고 작은 걸 만들면서 그 말에 의미를 이해했기 때문에 앞으로는 이런 관행을 지키면서 만들기 위해 노력하려고 합니다.