코드 리뷰 사이트 개인 회고 4일차

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 다뤄볼려고 한다. 

 

1. 반응형.... 정말 하.... 재밌다 ㅎㅎ

: 내가 만든 프로젝트 한계점은 여러 사용자의 유저들이 이 프로젝트를 사용할 수 없다는 것이다. 즉 데스크탑을 기준으로 프로젝트를 보여주기 때문에 테블릿 , 모바일 환경에서 들어오는 사람들은 이 프로젝트를 보지 못한다. 그래서 나는 이 프로젝트의 사용성을 높이기 위해서 반응형을 구현했다. 반응형을 구현할 때 사용한 css 전처리기는 scss 였는데 이 scss가 굉장히 간단해서 생각보다 반응형을 구현하는데 어렵지 않았다. 실제로 반응형을 위한 로직은 다음과 같다.

$breakpoint-mobile: 335px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

@mixin mobile {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

실제로 이를 함수처럼 사용하여 관리하는 방식이다. 실제로 사용예시는 다음과 같다.

@import "../../../utils/mixin";

@include desktop {
  .review-template {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding-top: 80px;
    background: #f8f8f7;
  }
}

@include tablet {
  .review-template {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding-top: 80px;
    background: #f8f8f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

@include mobile {
  .review-template {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding-top: 80px;
    background: #f8f8f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

위처럼 구현하면 손쉽게 구현할 수 있다.