[07APR, 2021] TIL

🌈 Daily

오늘은 Css도 정말 많은 공부를 해야 한다는 것을 또 한 번 느낀 하루였다. 자꾸 내 맘대로 움직이지 않아서 이리저리 많은 시도를 했다... 그랬더니 시간이 훅 갔다..! 그런데 정말 많이 해보면 배우는 속도가 다르다고 생각한다! 오늘 하루 종일 잡고 있었더니 확실히 알게 된 부분들이 많았다. 오늘로써 navbar는 안녕!! 생각보다 오래 잡고 있었지만 배운 점이 많았기 때문에 의미 있는 시간이었다. 내일부터는 계속 타입스크립트 + 리덕스로 기능 구현의 시간이어서 걱정이 되지만 자신감을 가지고! 해보자! 

 

✨  Learned

✔️ Scroll event

오늘 스크롤 이벤트를 몇 개 처리하면서 리액트에서 이벤트를 처리하는 데 새로운 사실들을 알았다. 사실 기본적인 내용이지만 내가 놓쳐서 몰랐다는 것을  깨닫고 반성했다. (그래서 스크롤은 따로 정리를 해놓아서 분리해서 포스팅 할 예정이다!) 스크롤 이벤트를 할까 말까 SR단계에서 확실히 정하지 못했는데 구현하다 보니 사용자 입장에서 이 이벤트가 처리가 안되면 불편할 것 같다는 생각을 해서 구현하게 되었는데 직접 테스트할 때도 훨씬 편해져서 뿌듯했다.

 

✔️ Navbar 반응형 구현

Navbar을 데스크탑 버전으로만 구현했었는데 모바일 버전도 오늘 구현을 완료했다. 전체적으로 아직 react-responsive를 쓸지 media-query를 쓸지 정해지지 않아서 우선 navbar는 media query로 구현했다. 1차 프로젝트 때 navbar를 반응형으로 만드는 데 이슈가 있었는데 이번에는 순조롭게 잘 구현되어서 너무 행복했다🧚🏻

 

✔️ module.scss

사실 이거는 오늘 알게 된 점은 아니지만 잊을 수도 있을 것 같아서 적어본다! 우리 팀은 이번에 CSS Module을 사용하기로 했다. 이를 사용하면 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다는 점이 장점이다. css파일을 만들 때 확장자를 이름.module.css 로 만들고 컴포넌트를 만드는 곳에서 import 해서 사용하면 된다. 

 

🌷 Tommorow

* 리덕스

=> 리덕스 파일 분리

 

* 코드 정리

 

* Scss 좀 더 효율적으로 쓰는 법 찾아서 적용해보기