[항해 99 클론코딩 주차 2일차]

<회고록>

오늘은 클론코딩에서 가장 까다로운 리스트 나열에 대해서 도전해보았다. 이게 무슨 말인지 이해하기 위해서는 다음과 같은 그림을 통해서 알 수 있다.

여기서 리스트 뷰가 바로 내가 구현해야 할 과제 였다. 이 과제에 핵심은 줄어드는 화면에 맞춰서 리스트뷰가 실시간으로 변경이 되어야 한다는 점이었다. 이게 무슨 말이냐면 만약 화면이 약간 줄어들었을 때는 리스트 뷰가 가로 3 세로 4로 바뀌고 화면이 중간 정도 줄어들었을 때는 리스트 뷰가 가로 2 세로 4로 바귀고 화면이 전부 줄어들었을 때는 가로 1 세로 4로 바뀌어야 한다는 점이 관건이었다. 이때 내가 처음에 적용한 방법은 display를 flex로 주는 것이었다. flex shrink와 flex grow를 통해서 늘어나는 화면 , 줄어드는 화면에 맞춰서 함께 반응하는 방식으로 위 문제를 해결했다. 하지만 이때 나타나는 2번째 문제는 만약 게시글이 하나일 경우 화면을 모두 차지한다는 점이었다. 왜냐하면 flex grow로 인해서 모두 차지해버리는 점 때문에 이런 현상이 발생했던 것이었다. 그래서 나는 이 문제를 해결하기 위해서 display : grid를 사용했다. display : grid의 장점은 화면의 비율과 상관없이 주어진 행과 열로 item을 정렬한다는 점이다. 하지만 화면에 비율에 상관없이 정렬한다는 점에서 만약 화면이 줄어들어도 그대로 아이템들의 위치가 고정된다는 것이다. 그래서 나는 media query를 사용해서 모바일 , 태블릿 , 데스크탑 이렇게 3가지 버전으로 각각의 행과 열을 다르게 하여 다음 문제를 해결했다.