vscode extension 개발

1. Login 기능 - 서버 연결

Login 버튼을 누르면 data를 서버로 바로 보내지 않고, extension으로 보낸 후에 extension에서 서버로 data를 보낸다. extension이 nodejs runtime으로 작동해 cors 정책에 걸리지 않기 때문에 extension을 프록시로 삼아 데이터를 전송하는 것이다. 서버는 요청을 처리하고 extension으로 보내면 extension은 그 결과만 extension webview로 전송해 결과만 출력한다.

2. Register 창 전환 오류 해결 중 → 해결

서버 연결 전에는 창 전환에 이상이 없었으나 서버를 연결하면서 window.postMessage를 vscode.postMessage로 변경하게 되면서 webview 간의 전환에 문제가 생겼다. 문제를 찾는데도 한 세월이 걸렸는데 copilot도 딱히 해결을 못해줘서 어떻게 해결할 지 더 생각을 해봐야 할 것 같다.

시도해볼 만한 옵션

• 창 전환은 window.postMessage로 해본다.
• vscode.postMessage로 보내기는 하는데 extension.ts에서 webview 간의 전송을 받지 않도록 예외처리해서 남는 webview끼리 통신이 되도록 하기. → 이렇게 하면 다른 창 전환들도 섞이게 될 것 같은데 각 창 전환마다 보내는 요청이 다르니 상관없을 것도 같다.

  document.getElementById('register-btn').addEventListener('click', () => {
    // vscode.postMessage({ type: 'toRegister' });
    console.log('[Webview] Register button clicked');
    renderRegisterView();

webview 내 UI 전환이니까 extension과 통신하는 부분 없애고 바로 창 전환하도록 함수 설정함으로써 문제 해결했다.

3. 회원가입 에러 메세지 매핑 에러

예상 출력

• 중복되는 이메일 - '이미 등록된 이메일입니다'
• 중복되지 않는 이메일 - '사용 가능한 이메일입니다.'

실제 출력

• 중복되는 이메일 - 'Request failed with status code 404'
• 중복되지 않는 이메일 - '이미 등록된 이메일입니다'

error를 받고 그에 따라 분기를 나눠서 에러 메세지를 설정했는데, 실제로 서버에서 돌아오는 에러 메세지는 status code 뿐이어서 매핑 에러가 발생했다. 그래서 받는 error를 status code로 변경하여 매핑하여 에러를 해결했다.