vscode extension 개발일기4: 로그인 코드 수정

Client 포트 지정

개요

인증을 위한 client웹서버가 client포트가 5500으로 지정되어 있다. 생각해보니 만약 사용자가 5500포트를 사용하는 다른 서비스가 존재하면 포트가 충돌나서 사용을 못할 것이라고 생각하였다.(Ex: VSCode extension중 live server은 기본 포트가 5500이다.) 그래서 사용자가 client포트를 직접 지정할 수 있는 기능을 추가하고자 한다. 해당 기능은 설정 UI를 통해 변경할 수 있도록 제작할 것이다.

구현

설정 소주제 변경

인증을 위한 정보인 ClientID, ClientSecret, RedirectURI의 소주제를 OAuth2에서 Client.OAuth2로 변경하여 해당 정보를 Client를 동작시키기 위해 필요한 정보임을 명시하였다

해당 과정을 수행하면서 enum타입을 만들어서 코드를 정리하였다.

Add Enum.ts · dev-green-flamingo/vscode-with-tistory@6428bf2

함수 이름 변경

토큰을 받아오기 위해 사용자에 설치되어 있는 브라우저를 통해 로그인을 요청하는 기능을 수행하는 함수인 authorizateTistory함수명을 certifyTistory로 변경하였다. 함수명을 변경한 이유는 함수명은 동사를 사용하는 것이 좋다는 지인의 조언을 받아서 바꿨다.

authorizateTistory => certifyTistory · dev-green-flamingo/vscode-with-tistory@b1d1142

정규식

정규식을 통해 추가적인 입력 없이 RedirectURI에 속한 포트 번호를 파싱해서 이를 포트번호로 사용하기로 하였다. 이를 위해 regexp에 존재하는 패턴을 약간 수정하였다.

• /(?:\:\d{2,4})/ig

RegExr: Learn, Build, & Test RegEx

위의 패턴이 regexp에서 검색한 url에서 포트를 파싱해주는 정규식으로서 최소 2자리, 최대 4자리의 포트번호를 찾는 패턴이다.

그러나 이 패턴을 그대로 사용하면 부적절하다. 이유는 결과에 포트임을 뜻하는 : 문자가 같이 반환되기 때문이다. 또한 사용자가 사용할 수 있는 포트의 범위가 0~65535를 모두 채워주지 않는다. 그래서 패턴을 다음과 같이 변경하였다.

• /(?<=\:)\d{1,5}/

lookaround패턴을 사용하여 앞 에 : 문자가 포함을 되는 것만 확인하고 결과에는 반영시키지 않고 범위를 최소 1자리에서 5자리까지로 확대하였다. 또한 url은 1개만 입력될 것이라고 예상되므로 global, insensitive 플래그를 제거하였다.

Client시작 포트 입력받기

기존의 코드에는 5500포트를 하드코딩으로 삽입해놓고 수행시켰다. 그래서 입력 파라미터로 포트를 받도록 변경하였다.

export const runClient = (port: number): void => {
    if (!client.listening) {
        client.listen(port, () => {
            console.log("Start Client");
        });
    }
};

---

위의 수정사항들을 모두 완료한 커밋 로그는 url을 첨부한다.

Parsing Port · dev-green-flamingo/vscode-with-tistory@6a4b4f1

---

테스트

redirectURL을 http://localhost:5500에서 http://localhost:6600으로 바꾸었을 때 6600으로 파싱을 수행하는지 테스트 하였다.

기본값인 5500이 아닌 입력된 6600포트로 포트번호가 잡히는 것을 확인하였다.

코딩하면서 조건을 수행시킬 로직을 작성하는 것보다 적절한 변수명 짓는 것이 어렵다. 흑