위스타그램 JS에서 React로 바꾸면서 느끼게 된 개발자 도구 사용법

리액트로 변환 후에 깨진 비정상적인 모습

배운 점
아무리 생각하고 동기 분들에게 물어봐도 무엇이 문제인지 몰라서 멘토님께 조언을 구했다. 그 때 멘토님께서 개발자도구로 확인해보셨냐고 물었는데, 나는 코드만 살폈을 뿐 개발자 도구로 보지는 않았다. 아직 개발자의 습관이 안되어 있는 것이다. 개발자 도구를 열어서 문제 부분을 찍어서 스타을 부분을 확인을 해보니, (아직 Router를 안배워서 분리를 안해둔 상태) className이 main으로 겹쳐서 Login 페이지의 css가 main page의 css에도 적용되어 기대와 다른 값이 나와버린 것이다.(아래의 빨간 박스가 문제의 부분, text-align이 적용이 되어 문제였다.)
그래서 main 페이지의 main에 다른 className을 줘서 문제를 수정했다.