오늘 공부
알고리즘 문제 풀기(프로그래머스)
https://github.com/hoinlee-moi/Algorithm
JS기본문법 다시 공부
https://github.com/hoinlee-moi/ModernJS
React 강의 듣기
https://github.com/hoinlee-moi/React_prac
이번 주말엔 가게 일을 해야해서 거진 아침에 일어나서 저녁 9시까진 계속 일을 해야하다 보니 공부할 시간이 많이 없어 React 강의만 어느정도 듣고 끝냈다
그래도 내 스스로 약속한 매일 최소 30분 이상 코딩하기가 있기 때문에
React
저번부터 아직 css 스타일링에 관해 다루고 있는데 처음 css파일에서 선택자를 이용해 적용시키고 필요한 컴포넌트에서 import 하는 식으로 사용했는데 이는 컴포넌트에서만 사용되는 css가 아니었다.
어디간 DOM에서 이 선택자를 사용하게 되면 이 컴포넌트에 import 한 css지만 전역으로 사용되게 되고 이는 꼭 나쁜 건 아니지만(선택자나 id에 신경써서 코딩하면 되기 때문에) 대규모 프로젝트에서는 잠재적으로 수많은 개발자들이 같은 코드에서 작업하고 있다.
->이는 한 이름이 두 번 사용될 수도 있는 상황이 생길 수도 있는 것이다.
이를 피하기 위해 2가지 방법이 있다.
- style components 패키지를 사용하는 것
-> 특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와주는 패키지! 이 스타일이 첨부되는 컴포넌트에만 영향을 미치고 다른 컴포넌트에는 전혀 영향을 미치지 않는다.
이는 똑같이 전역으로 css스타일을 주는 것은 똑같지만 패키지가 자동으로 중복되지 않는 css 선택자를 걸어주기 때문에 이 컴포넌트에서만 css가 유효하도록 만들어준다.
- css 모듈
※css 모듈은 그 기능을 지원하도록 설정된 프로젝트에서만 사용 가능한데 이유는 브라우저에서 코드가 실행되기 전에 코드의 변환이 필요하기 때문이다
css 파일에 module이란 이름을 추가한뒤 improt를 통해 JSX에서 동적인 값을 넣으면 css 선택자가 나오는데 컴포넌트이름_클래스 이름__고유한 해시값이다
css 클래스나 css 파일을 가지고 그 클래스 이름을 고유하게 바꾸는 것이다
import 되고 있는 모든 css 파일을 고유하게 만드는 것!
css 모듈의 개념은 css파일에서 설정한 css 스타일의 범위가 이 파일에 임포트하는 컴포넌트에 한정된다는 것을 확실하게 해준다
대신 컴포넌트에서 사용될 때 객체 속성으로 접근!
- 그래서 우리는 css 파일에 스타일을 설정하지만 우리가 사용하는 컴포넌트로만 범위를 한정할 수 있어 js나 jsx 파일에 css요소를 적을 일이 없고 완전히 분리시켜 사용할 수 있으며 컴포넌트도 한정할 수 있어 깔끔하고 독립적으로 만들 수 있다!
