TIL - 2022.02.10 목요일

오늘 배운 것

- 오늘은 Midterm을 봤다. 8시간 안에 게시판 하나를 구현했다. (기능 구현을 할 줄 아는지 여부에 초점을 맞춘 시험이었기 때문에 css는 최소한으로만 함) 프로젝트 생성부터 시작하는 시험이다보니 레이아웃부터 다 만들어야했다. css grid를 시험해 볼 기회다 싶어서 냅다 썼다. 확실히 레이아웃 잡을 때에는 좋다. 코드 분량이 확 줄어들더라.

// 각각 분리된 컴포넌트의 emotion을 모아놓은 것이라 컴포넌트 명이 겹칠 수 있음
// Next.js 기반으로 작업했다.

// Container
const Container = styled.div`
  display:grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 120px 280px 1fr;
`
// Header
const Wrapper = styled.div`
  text-align: center;
  border-bottom: 2px solid #663399;
  grid-column: 1/3;
  grid-row:1;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  
  h1 {
    font-size: 30px;
  }
`
// Sidebar
const MenuBox = styled.div`
  grid-column: 1;
  grid-row: 2/4;
  border-right: 1px solid #dddddd;
`
// Carousel
const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  background: #dddddd;
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
  overflow:hidden;
`
// Body
const Body = styled.div`
  grid-column: 2;
  grid-row: 3;
  min-height: 400px;
  padding: 10px;
  background: #f6f6f6;
  max-width: calc(100vw - 280px);
  &.noBanner {
    grid-row: 2/4;
  }
`

위의 이미지와 같은 레이아웃을 잡는 데에 이정도 코드면 충분하다! 크로스 브라우징 이슈만 해결된다면 (혹은 크로스 브라우징을 신경쓰지 않아도 되는 프로젝트라면) 그리드와 플렉스를 혼합해서 사용하면 정~말 편할 듯.

 

- Can I use를 수시로 확인하자. 😣

https://caniuse.com/?search=display%3A%20grid

 

앞으로 할 것

- 리뷰 게시판 : 게시글 넘버링 넣어주기 / 이미지 입력 Validation 넣어주기 / Write 페이지 구조 개선 (리팩토링)

- 로그인 인증 프로세스 머릿속에 확실하게 넣기