237일차(모험 146일차) - ⭐문제 해결⭐

중간 정리

팀원과 디코로 현재 상황 정리 후 앞으로 해야할 부분을 milestones로 올려뒀다.

일주일 동안 하나의 기능을 구현하는데 집중하기로 했다.

 

⭐ !!!!!!!!!!!!! 문제 해결 !!!!!!!!!!!!!! ⭐

몇 일, 몇 주 계속 로그인 css 적용 안되는 문제 때문에 그동안 계속 삽질을 해오고 기록해왔는데

(찾아보면 엄청 많을 것 같다..)

 

오늘 ! ! ! ! ! ! ! ! 

그 문제를 해결했다😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

 

 

문제

 

 

 

Refused to apply style from 'http://localhost:8080/css/login.css' 

because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

 

구글링을 해보면 95%는 노란색으로 칠해진 부분의 괄호 안에 ('text/html')가 들어가고

나머지 5%는 ('application/json')으로 표시되는데 나는 ''으로 빈 값이 떠서 해결 방법을 몰랐다. 

 

팀원은 시큐리티 문제인 것 같다고 그 부분을 고쳐보라고 말했으나 이전에는 실행이 잘 되었는데

갑자기 안되기 시작한 문제라서 구글링으로 많이 검색을 해봤었다.

초반에는 css 적용이 안되는 줄만 알고 경로를 계속 바꾸는 작업을 많이 해보다가

후반에 xml 설정에 url-pattern 추가하면 css와 js가 띄워진다는 글을 보았으나

현재는 xml 대신 @SpringBootApplication 이 다 해준다고 해서 따로 설정을 해서 추가하는 방법을 알아봤다.

그러다가 계속 구글링만 하면 답이 안나올 것 같아서

임시로 프로젝트를 생성한 후 다시 작성해보면서 동작을 확인해보니 오늘에서야 그 문제를 해결할 수 있었다...!!

 

---

 

 

어제 작성하면서 웹소켓 코드를 제외한 게시글, 로그인, test 코드를 모두 작성하고 실행했을 때

잘 동작하는 것을 확인했었다.

[TIL] - 236일차(모험 145일차) - 처음부터 다시 해보기

 

그래서 남은 건 웹소켓 하나라서 WebSocketConfig 부터 하나씩 코드를 작성하다가

엔드포인트 경로를 보고 혹시? 하는 생각이 들었다. 그리고 그 생각이 맞았다. 

 

모든 페이지에 css와 js가 적용이 안되는 에러는 WebSocketConfig 에 있었다.

엔드포인트 설정을 "/"으로 작성했었는데 클라이언트 주소에 맞춰 변경하니 css, js가 잘 적용이 되었다.

😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂 😂

 

 

정리

정리하자면 클라이언트 주소에 맞게

let socket = new WebSocket("ws://localhost:8080/websocket");

 

엔드포인트 주소를 "/" 대신 "/websocket"으로 변경했다.

@Override
// connection을 맺을때 CORS 허용
public void registerStompEndpoints(StompEndpointRegistry registry) {

    registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
    // endpoint는 양 사용자 간 웹소켓 핸드 셰이크를 위해 지정
}

 

 

 

 

궁금증 🤔

이제 오류를 해결했으니 드는 생각

엔드포인트를 잘못 적용했는데 왜 css와 js가 적용이 안되는건지 궁금해졌다.

 

엔드 포인트는 아이피 주소와 포트 번호의 조합을 의미
모든 TCP 연결은 2개의 앤드 포인트로 유일하게 식별되어질 수 있다.
따라서 클라이언트와 서버 간 여러 개의 연결이 맺어질 수 있다.

출처 : 소켓이란 무엇인가? (엔드 포인트)

 

 

실제로 '/'가 스프링 내에서 사용되는 path이기 때문에 충돌이 일어났고 위 코드도 controller로 써주고 있기 때문에
스프링에서 쓰는 엔드포인트와는 겹치면 안되도록 작성해야 한다.

 

html은 다이렉트로 접근해서 바로 보이는 것이고,

html에서 요청하는 css와 js 파일은 서버에서 static 파일을 갖다주는거기 때문에 문제가 생기는 것이다.

 

---

 

영영 에러를 해결하지 못하는건 아닐까? 내가 해결할 수 있는 에러가 맞을까? 하면서

애원도 하고 해결하고 싶은 마음에 새벽에도 찾아보고 별짓을 다 했는데

드디어 해결해서 너무 짜릿하다. 흐어ㅜ