Web/TIL

WebStorm vs VS Code: URL 동작 방식 차이와 Cypress 에서의 적용

wjdwwidz 2025. 1. 9. 18:44

웹스톰에서 실행되는 브라우저 URL 

웹스톰에서 브라우저 파일을 실행하면 

http://localhost:63342/js-counter-test/index.html?_ijt=96qe1sjtml43gd0fvi088tabrj&_ij_reload=RELOAD_ON_SAVE

와 같은 주소를 얻을 수 있다. 이 url 은 localhost:8080 과 달리 실행할 때마다 계속 바뀌는 값이다.

 

리로드 할 때마다 값이 변경되는 이유는 웹스톰이 내부에서 자동으로 브라우저 파일을 띄워 제공하기 때문이라고 한다.

URL에 포함된 쿼리 파라미터(?_ijt=...&_ij_reload=...)는 웹스톰의 실행 환경에 의해 자동으로 생성된 값들이다.

 

이 값들은 웹스톰의 디버깅 기능이나 실시간 리로딩 기능과 관련이 있다.

_ijt와 같은 파라미터는 웹스톰이 페이지를 로드하거나, 실시간으로 리로딩 할 때 세션과 디버깅 상태를 추적하기 위해 생성된다.

각 실행마다 이 값들이 달라져서 URL이 바뀌는 것이다.

 

반면 localhost:8080과 같은 주소는 서버가 제공하는 기본 포트이기 때문에 바뀌지 않는다. 

 

웹스톰과 VS Code Live Server의 동작 방식

vscode의 live-server를 사용하면 Localhost:8080 과 같은 고정 url 을 얻을 수 있다. 하지만 웹스톰은 그렇지 않았다. 어떤 이유 때문일까?

 

1. VS Code Live Server

HTTP 서버 제공: Live Server는 Node.js 기반의 HTTP 서버를 실행한다.

  • 따라서 localhost 또는 설정된 포트에서 실행되며, 브라우저에서 해당 주소로 접근한다. 
  • 이 방식은 정적 파일을 실제 서버 환경에서 제공하는 것이기 때문에 주소가 고정된다. 
  • 리로드 시에도 주소가 변경되지 않는다.

2. WebStorm의 기본 동작

웹스톰은 별도의 HTTP 서버를 실행하지 않는다. 대신 내부에 포함된 파일 서버를 사용하여 브라우저에서 파일을 연다.

  • 이 파일 서버는 프로젝트 디렉토리와 연동되어 동작하며, 각 파일 로드마다 고유한 세션 정보를 추가한다.

 

3. WebStorm에서 고정된 URL 사용 방법

웹스톰 에서도 VSCODE 처럼 고정된 localhost를 사용하려면 프로젝트에서 외부 HTTP 서버를 실행해야 한다. 

Node.js, Python 등을 이용하여 프로젝트 디렉토리를 정적 서버로 호스팅하고, 브라우저에서 해당 서버로 접속한다. 

또는 Webstorm에서 VScode Live Server와 유사한 플러그인을 설치해 사용할 수도 있다. 

 

 

 

 

Cypress에서 URL 적용해보기

웹스톰에서 제공한 URL을 이용해 cypress로 visit 해보면 404 라며 테스트에 실패한다. 

웹스톰 내부 브라우저는 cypress가 접근할 수 없다는 경고가 뜬다. 웹스톰이 프로젝트 디렉토리를 이용해 URL을 생성한다고 해서

아래와  같이 file 절대경로로 입력해 주었지만 실패했다.

describe("example counter app", ()=> {
    beforeEach(() => {
        cy.visit("file:///Users/jeonghye/Desktop/code/js-counter-test/index.html")
    });

 

결과 :

CypressError: `cy.visit()` failed because the 'file://...' protocol is not supported by Cypress.

 

 

해결 

node 에서 지원하는 http-server를 설치하여 서버를 임의로 띄워 서버를 실행하기로 했다.

설치하려는 디렉토리에서 

npm install --save-dev http-server

 

를 입력하여 의존성 설치, 해당 디렉토리에서 

 npx http-server

 

로 서버를 실행한다.

Available on:
  http://127.0.0.1:8080
  http://192.168.219.96:8080
Hit CTRL-C to stop the server

 

이제 http://127.0.0.1:8080 에서 서버가 실행되고 있다. 

 

 

정적인 주소로 cypress 테스트를 실행해보자 

 

결과

describe("example counter app", ()=> {
    beforeEach(() => {
        cy.visit("http://127.0.0.1:8080")
    });

 

 

이렇게 입력하면 테스트에 성공하는 것을 확인할 수 있다.