철저하게 기록용, 다시 작업을 하게 될때 참고하며 같은 실수를 반복하지 않길,,😎
1. 시작은 회고로
회사에서 프로젝트를 진행하며 반응형 페이지를 만들어야하는 때가 왔다, 반응형은 클론 코딩도 해보았고 나름 경험이 있다고 생각했지만 쉽지않았다. 생각해보니 쉽지 않았던 이유가 있었다.
- 구현하기 전, PC버전과 모바일 버전을 보며
구조를 먼저잡았어야 했다 - emotion으로
반응형 스타일을 어떤 방법으로 효율적으로 줄 것인지생각했어야 했다 - next js는
ssr로 window를 그냥 잡아서 냅다리(?) 사용할 수 없다
다른 이유들도 있었겠지만 대표적으로는 위와 같은 이유로 반응형이 쉽지않게 느껴졌다. 게다가 전에 구현해놓은 것이 기한에 쫓기듯 구현해서 확장성은 고려하지 못한 코드를 짠 것 같다.
2. Emotion의 이야기
emotion은 동적 요소를 관리하거나 중복되는 코드를 막기 아주 좋은 css-in-js인 것 같다.
동적인 요소가 어디 들어가느냐 생각해본다면, 로그인 상태에 따라, 라우터에 따라, viewport 사이즈에 따라 (반응형) 동적으로 변하는 레이아웃이나 ui가 존재한다. 또한 styled-component처럼 컴포넌트 파일 내부에서 스타일을 지정하여 중복되는 코드를 줄일 수 있다.
emotion은 스타일 prop 전달도 편리하고 블록 전체 스타일을 상속할 수도 있다. 그런 점이 정말 편리하다. (추후 emotion 사용법도 정리해봐야😄)
3. 그럼 구현은?
보통 반응형을 구현한다면 media-query를 사용하게된다. emotion 공식문서에도 나와있는 방법을 보면 아래와 같이 breakpoint를 나누고 가져와서 사용한다. 저렇게 사용하면 매번 breakpoint를 생각하지 않아도 바로 가져올 수 있어서 좋다.
const breakpoints = [576, 768, 992, 1200]
const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`)${mq[2]} {
width: 20px;
height: 20px;
}보통 정말 화면 크기에 따른 스타일은 저런식으로 해주기도 하지만, 레이아웃 자체가 바뀐다면 저 방법으로는 쉽지 않다.
그럴때 사용한 것이 viewport에 따라서 레이아웃을 변경하는 방법이다.
아쉽게도 자세한 코드 공유는 안되지만,,, next에서 window 사용하는 방법은 검색하면 비슷하게 잘 나온다, 나는 비슷하게 그걸 hook으로 빼서 사용해주었다.
+ Next Image
Next Image는 사이즈를 직접 할당해야하기 때문에 곤란했다. 내가 선택한 방법은 디자인 나온 이미지의 최대값 사이즈(PC버전)를 max-width / max-height로 잡아주고 Image 태그를 div 로 감싸서 그 div의 사이즈를 수정하는 방식으로 적용한 것 같다. 아래처럼.
div {
img {
max-width: pc버전_width;
height: auto;
}
}5. 마지막으로
- fecepaint라는 라이브러리를 사용하면 미디어쿼리를 편리하게 사용할 수 있다고 한다. (화면 범위에 따른 스타일 지정 가능) 하지만 프로덕트에 라이브러리가 많아지는 것은 부담이 되는군
- @emotion/css 를 사용해서 인라인 스타일을 최소화 하면 좋을 것 같다.
- 구조를 먼저 생각하는 것이 가장 중요한 것 같다, 디자인을 보고 조금 더 효율적으로 구현하기 위해 생각할 시간을 가져봐야겠다.
