[TIL] 기록 74일차

Today I Learned

• Sass를 활용해서 React의 컴포넌트에 CSS를 추가해보는 튜토리얼을 해봤다.
• CSS module에 대해 알게 되었다. 클래스 네임을 고유한 값으로 만들어줘 컴포넌트 스타일 중첩 현상을 방지할 수 있다.
  • 이를 사용하기 위해서는 [파일이름].module.css 혹은 scss로 사용할 수 있다.
• 'classnames' 라이브러리는 CSS 클래스를 조건부로 사용할 때 유용하다. 아울러 가독성도 높일 수 있다.
• 'styled-components' 말 그대로 'CSS in JS' 즉, 자바스크립트 안에서 CSS를 작성할 수 있도록 해준다.
  • 먼저 styled-components의 문법 또한 내게 생소해서 가독성이 좀 떨어지는 것처럼 느껴졌고, 그냥 CSS 파일을 나눠서 불러오면 오히려 기능 별로 파일을 나눌 수 있기 때문에 더 관리가 쉬울 거라고 생각했고, 굳이 JS 파일 안에서 CSS를 사용할 필요가 있나 싶어서 좀 찾아봤다.
    • 최근에는 React, Vue, Angular와 같은 Modern JavaScript가 떠오르면서 웹개발의 패러다임이 바뀌고 있다.
    • React 같은 경우에는 이미 JSX에서는 HTML과 JavaScript를 포함하고 있는 형태를 띠고 있는데 여기서 CSS까지 컴포넌트 안에서 활용할 수 있으면 하나의 컴포넌트에서 HTML, CSS, JavaScript 모두 제어가 가능한 것이다.
    • 이미 코드 재활용이 쉬운 형태인 컴포넌트로 분리하고 이를 사용하는 방법이 주류를 이루게 되면서 HTML, CSS, JavaScript를 몽땅 하나의 컴포넌트에 넣어버리는 방식이 많이 사용되고 있다고 한다.
• 2020년의 목표를 작성했다.