window.innerWidth

react 프로젝트중에 웬만하면 보지 못했던 vanila JS스러운(?)코드를 보았다. 브라우저 윈도우의 넓이 값인데 반응형을 고려할때 요긴하게 쓰일수 있다. ex) if (window.innerWidth <= 960)

addEventListener resize

이것도 react를 쓰면서 오랜만에 만나는 addEentListener 브라우저 화면의 size가 바뀔때마다 코드가 실행된다.
이런 실용적인 속성들을 만날 때마다 좀 더 vanila JS를 깊게 공부해야겠다는 생각이든다. JS코드를 깊게 알수록 코드낭비를 훨씬 줄일 수 있을 것 같다.

flex-grow 1

flex grow, shrink, basis등의 속성에 대한 이해는 쉬우나 가끔가다보면 flex: 1을 설정해주는 코드들을 발견할 수 있다. 도대체 무슨 의미일까 생각했는데 아직도 완벽하게 이해하지 못했으나. 이번 프로젝트에서 사용해보았을때는 width: 100% = flex: 1의 경우가 되었다. 좀 더 알아봐야 할 것 같다.

::before ::after

주로 content와 같이 쓰이는데 +position: absolute와 함께 쓰이는 경우도 많다. ::before, ::after 속성이 붙은 태그를 꾸며주기 위해 장식용으로 많이 쓰인다.