[React]원격 서버에서 메뉴바가 보이지 않는 상황

로컬에서 개발할땐 왼쪽 상단에 expandable한 메뉴 바가 보였다. 그런데 원격 서버로 화면을 띄워보니 메뉴 바가 보이지 않았던것!

 

이러한 이유는 몇가지가 있다. 잠재적인 이유는

 

1. 콘솔 오류 확인: 브라우저의 개발자 도구를 열고 콘솔에 오류가 있는지 확인하자. (JavaScript 오류나 리소스 로드 오류).

콘솔은 아무런 오류 메시지가 없다! 

 

2. 파일 경로 확인: CSS와 JavaScript 파일의 경로가 잘못된 상황 :  하지만 난 따로 CSS파일을 두지 않고, style속성을 이용하고 있으니 이 부분은 걱정 안 해도 될것같다.

 

3. 브라우저 캐시: 브라우저 캐시 문제일 수 있다.

•  여기서 캐시가 또 다시 등장하니 다시 한번 오랜만에 상기하고 넘어가보자!
•  캐시는 자주 사용되는 데이터나 리소스를 따로 저장해두는 곳으로, CPU에서 DRAM까지 내려가는 비용이 비싸기 때문에 캐시를 이용하면 원하는 자원들을 훨씬 더 빠르게 가져올 수 있다. 여기서 브라우저 캐시는 웹 페이지, 이미지, CSS, JavaScript 파일 등을 저장하여 다음 번에 동일한 리소스를 요청할 때 더 빠르게 로드할 수 있도록 한다.
•  그렇다면, 이 캐시가 왜 메뉴버튼이 보이지 않는것에 대해 문제가 될까? - 오래된 캐시: 웹 페이지를 업데이트했지만 브라우저가 오래된 캐시된 버전을 사용하여 변경 사항이 반영되지 않을 수 있다.
  리소스 충돌: 동일한 파일 이름으로 다른 내용의 리소스를 업데이트하면, 브라우저가 새로운 리소스를 제대로 로드하지 못할 수 있다.

하지만 캐시를 지워도 문제는 해결되지 않았다... 그러면 element 탭을 좀 더 자세히 살펴 보도록 하자

 

개발자 도구를 열고, element탭을 열고, html태그들이 제대로 로드 되었는지 부터 확인한다.

그런데 HTML 태그는 제대로 로드되어 있지만, 화면에는 나타나지 않는 점이 이상했다. 아래와 같다.

 

보면 왼쪽 위에 div태그로 감싸진 태그를 볼 수 있고, 오른쪽 개발자 도구에서 저 fa-bars로 마우스를 올리면 저렇게 태그가 로드되어 있는걸 볼 수 있다. 

 

자 그럼, 이제 문제는 더 좁혀진다.

 

- 정상적으로 로드는 되었으나 보이지 않는 문제는 코드상의 문제일 확률이 높다.

 

---- 그런데 코드를 정말 하나하나 꼼꼼히 살펴 봐도 코드상의 문제는 아니였다. 그렇다면 ,,,

 

1. 개발자 도구를 열었을때, 로딩이 되지 않는 컴포넌트는 따로 없다. 모두 다 제대로 로딩이 되고 있다.

2. 코드상의 문제를 발견하지 못했다.

 

그렇다면 유력한 이유는 하나이다. 제대로된 라이브러리를 import하지 않았거나, 원격 서버에서 설치하지 않은것. 하긴, 로컬에선 되는데 원격에서 되지 않으면 코드상의 문제일리는 없다. 그래서 내가 쓰려던 메뉴바를 어디서 가져왔는지 다시 한번 확인해보자. 그래서 

 

import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';

 

위 두 부분을 import 해주고 다시한번 서버를 재시작 했더니 메뉴 바가 보이기 시작했다.

 

 

이렇게! 그래서 다시 알아두어야 할 점은...

 

1. 개발자 도구를 열어 모든 컴포넌트가 렌더링 되는지 확인

2. 코드를 자세히 살펴보기

3. import나 라이브러리 설치를 까먹지 않았나 확인