... 장작 이틀 동안 고생하면서, 왜 JS가 적용이 안 되는지 고민했다.
강의도 중간부터 못 들으면서 말이다.
덕분에 오랜만에,
문제를 해결해 보겠다고 다양한 시도를 했다.
구글, 유튜브 검색, Normad Coder와 Stack Over Flow 커뮤니티에 글도 남기고, 다행히 SOF가 나를 살렸다.
살려지는 경험(?)은 언제나 쪽팔리면서도 즐겁달까.
묻고 답해주는 커뮤니티가 활성화 된 개발 분야로 넘어오길 잘 했다는 생각이 오늘도 든다.
(ps. 문제의 원인은 ^^ 오타.. oh gosh..)
기술 블로그의 첫 글은,
또 이 방법을 잊을 미래의 나와, 같은 문제를 겪을 다른 분들을 위해서 쓴다.
JS or CSS가 웹페이지에 적용이 안 될 때
1. 오타 확인
2. 캐시 비활성화하기
(웹페이지 우클릭 --> 요소 검사 --> 네트워크 --> 캐시 비활성화)
3. 코드의 파일명 버전 바꿔주기 (파일명 변경 or 버전 추가)
4. 강력한 새로고침하기 cmd (or ctrl) + R
5. 한 폴더에 있는 경우, 각각 CSS, JS 다 다른 폴더로 넣어주기
6. 파일 새로 만들어서 코드 복붙하기
7. 다시 오타 확인하기 ^^
2. 캐시 비활성화 &&
3. 코드의 파일명 버전 바꿔주기 (파일명 변경 or 버전 추가) &&
4. 강력한 새로고침하기 cmd (or ctrl) + R
나머지는 이해가 될 테지만, 3번의 버전 추가가 이해가 되지 않을 것 같아서 내가 이해한 선에서 추가로 설명을 해보려고 한다.
여러 글들을 읽어본 결과,
한 파일의 작업을 장기간 동안 하면서 계속해서 새로운 데이터를 웹페이지에 저장하게 된다.
이 때, 정보를 빠르게 불러오기 위해 캐시(cache)가 계속 추가되면서 어떤 문제가 생길 수도 있다고 한다.
그렇기에 화면이 로딩되는 시간이 오래 걸릴 수 있더라도, 2번처럼 캐시 비활성화를 선택해보라고 많이들 추천한다.
마찬가지로, 3번의 버전 추가도 반복되는 파일 명으로 인해서 웹이 같은 내용으로 잘못 읽을 수도 있기에, 파일명 변경이 아닌, 버전을 추가해보라고 추천한다.
버전 추가는 아래 코드에서 볼 수 있듯이 "파일 명 변경이 아니라, 확장자 뒤에 ?v="를 추가해 주는 것이다. = 뒤에는 아무 숫자나 붙이면 된다. 예시 코드 뒤에 붙인 것은 "?v=24345Q" 아무런 의미없이 그냥 누른 것이다.
SFO를 조금 더 찾아 보면, 코드화 시킨 경우도 있는데 안되면 찾아보길 바란다.
그리고 무언가 변화를 주었으면, 새로고침을 해야 하는 데 5번 cmd (or ctrl) + R을 사용하면 된다.
5. 한 폴더에 있는 경우, 각각 CSS, JS 다 다른 폴더로 나눠주기
또, 찾아보니 폴더를 나눠서 따로 저장해 두라고 하는 경우도 많아서 그것도 아래 예제에서 한 번에 볼 수 있다.
"파일명 앞에 폴더명/"를 해주면 된다.
<이전>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<script src="index.js"></script>
</body><변경>
<head>
<link rel="stylesheet" href="CSS/index.css?v=24345Q" />
</head>
<body>
<script src="JS/index.js?v=24343Q"></script>
</body>
위 방법 중에 한 가지는 통해보길 바래본다.
챗GPT에게도 물어봤었는데..
오타는 아직 못 찾으니깐,
저렇게 해도 안 되면 SFO에 물어보세요..ㅎ
그전에 제발.. 오타 다시 확인하시구요.
'Web Developing > JS' 카테고리의 다른 글
| [JS] background image 변경하기 (0) | 2024.03.16 |
|---|---|
| [JS] to-do list 만들기 (1) | 2024.03.16 |
| [JS] form 만들고 저장하기 (사용자 이름 기억하게 하기) (2) | 2024.03.16 |
| [JS] 시계 만들기 (2) | 2024.03.16 |
| [JS] classList를 써서 methods를 활용, 특히 toggle (0) | 2024.03.16 |