[2025 1학기 React.js 스터디] 최은희 #5주차

eunhui06 2025. 5. 22. 23:55

-sass가 뭐에요?

css보다 강력한 문법을 가진다고 한다. (짱 멋진 스타일시트...)

css보다 좋은 점은 1. 변수를 쓸 수 있다는 것 2. 코드를 중첩구조로 써서 가독성이 좋다는 것 3. 재사용이 가능하다는 것 등등이 있다. 프로젝트가 카질수록 복잡해지는데 관리를 쉽게 할 수 있도록 돕는다.

이제 직접 실습을 해보면,,,

요렇게 자료를 보고 그대로 쓴거 같은데

이렇게 실행이 됐다..ㅜ 지피티랑 대판 싸웠지만 해결해주지 못해서..ㅜ

일단 자료 이해만하고 넘어가는 걸로.....

누군가 이 글을 읽고 있다면 저 좀 도와주세요 (당근을 흔들며)

-이걸 쓰면 css 클래스의 중첩을 막을 수 있다. 이게 무슨 말이냐면

다른 컴포넌트 파일에서 같은 클래스 이름 .button을 썼을 때, 나중에 로드된 CSS가 덮어쓴다.

하지만 모듈에선? 클래스 이름이 파일경로 이름 해시값으로 자동 변환되기 때문에 충돌하지 않는다고 한다.

또 실습으로 넘어가보면

이렇게 되었는데

하면서 발생했던 오류를 몇가지 리뷰해보면

1. Module not found: Error: Can't resolve './components/Button'

-> 파일이 존재하지 않거나 경로가 잘못된 경우라고 한다. 그래서 파일을 확인하고 제대로 import해주었다.

2. 'Button' is not defined

-> Button.js 내부에서 <Button />을 호출했다. 그래서 이걸 없애주었고

3. Module not found: Can't resolve 'react-icons/md'

-> react-icons 패키지를 설치 안 했다,, ㅋ 꼭 설치해주도록 하자.. ㅎㅎ!!

바로 실습 ㄱ

circle 컴포넌트에 color 이라는 props를 넣어서 파란색으로 바꿔주었습니다

huge라는 props를 설정하면 이렇게 큰 원도 만들 수 있어요

크기별로 알록달록하게 박스를 만든 모습이구요

여기까지 했는데 dialog 하다가 계속 오류가 떠서 ㅜㅜㅜ

빠른 시일 내에 .. 꼭 성공해서 찾아오겠습니다

모두들 평안한 밤 되세요 굿나잇