[weather-NextJS] 개발기#2

8.1 (화)

수행한 것

• 모바일 & 데스크탑 반응형 css 적용
• 상하 margin(my)로 인한 스크롤 바 버그 수정
  • 컴포넌트의 마진 적용이 스크롤 바에도 적용되는 버그(➡️ 스크롤 바가 마진 만큼 내려옴)
• 세부 날씨 컴포넌트 구성 & 적용
• 각종 css 수정

고민한 것

• 전날에 세부 날씨 컴포넌트를 어떻게 구성해야 할지 고민했었는데, 최종적으로 재사용 가능한 컴포넌트로 구성하기에는 무리가 있다고 판단하여 하드코딩했다. 코드가 너무 길어지는 감이 있어서 별로 보기 좋아보이지는 않지만, 아직까지는 적절한 대안이 생각나지 않았다.
• 스크롤 시 애니메이션을 어떻게 적용할 수 있을까?
  • Framer-motion을 적용하려고 공식 문서를 찾아봤다. useScroll과 useMotionValueEvent를 사용하면 될 것 같은데, 아직 애니메이션이 중요하지 않기에 뒤로 미뤘다. 애니메이션은 기능이 모두 구현된 다음에 적용할 예정이다.
• tailwindCSS가 이번이 거의 처음 스스로 적용해보는 것이기에, 속성들에 대해서 공부의 필요성을 느꼈다.
  • CSS를 열심히 해야겠다.
• CSS 디자인의 적용 시점이 언제여야 하는지?
  • 여기서 디자인이라 하면, 반응형이나 레이아웃 구성이 아닌 사용자가 보기에 편해보인다던가, 예뻐보인다던가, 화려해보이는 그런 것..

배운 것

• 스크롤 버그를 수정하면서 알게 된 것이 있다.

기존 코드의 일부를 보면, 아래와 같다.

<section id='today' className='snap-start'>
	<TodayWeather promise={todayWeathers} />
</section>

TodayWeather 컴포넌트가 브라우저의 상단과 간격없이 붙어 있어서 레이아웃이 좋아보이지 않았다. 그래서 my-10 속성을 붙여줬다.

그랬더니, 스크롤도 my-10이 적용이 되어서, 기존 레이아웃에서 달리진게 없었다.

그래서 아래와 같이 코드를 수정했다.

<section id='today' className='snap-start scroll-my-10 my-10'>
	<TodayWeather promise={todayWeathers} />
</section>

왜 이런 문제가 발생했는지 생각해보니, snap-start라는 속성이 margin에는 적용이 되지 않고, content에만 적용이 되기 때문이다. 그래서, 스크롤 바가 my-10만큼 내려와서 적용이 되었던 것이다.

✅ snap 속성은 컴포넌트의 margin에는 적용이 되지 않고, content부터 적용된다.
✅ 그렇기에, margin을 적용했다면 scroll에도 같은 크기만큼의 margin을 적용해야 한다.(e.g. scroll-my-10)

중간 결과물

모바일 화면

데스크탑 화면

아직 디자인을 하지 않아 매우 엉성하지만, 반응형은 나름 잘 적용이 됐다.

여전히 항상 고민인 것은, 위에서 말했듯이 '디자인을 언제 적용해야 하는가?' 이다.

유튜브에 클론 코딩을 보면 디자인도 동시에 뚝딱뚝딱 적용하던데, 짜여진 스크립트를 보면서 하기에 그런 것인지, 아니면 일반적으로 그렇게 하는 것인지 잘 모르곘다.