[React] 리액트 App.js 화면에 꽉 차게 설정

💥 트러블 슈팅 

문제점 : 

 

 

개발 중 굉장히 거슬리는 문제 하나가 발생하였다.. 

 

맨 위 헤더 컴포넌트의 border를 설정했는데.. 저렇게 hr처럼 나온다. 

확인해보니 화면에 꽉 차지 않는 이유 때문 ! 

 

 

아니 왜 App.js가 화면에 꽉 차지 않지? 

 

그래서 style에 width : 100%도 추가해주었는데.. 되지 않았음 😭 

 

 

---

 

하지만 문제는 생각보다 간단히 해결된다. 

해결방법 - 기본 스타일 초기화

브라우저의 기본 스타일이 영향을 미칠 수 있다고 한다. CSS 리셋이나 노말라이즈 CSS를 사용하여 기본 스타일을 초기화하자 ! 

 

npm install normalize.css

 

// index.js
import 'normalize.css';

 

이렇게 간단하게 해결 가능 ~