전체 글 (52) 썸네일형 리스트형 vscode extension 개발일기8: 이미지업로드, 게시글 수정 로직 기능을 구현하기 전에 이미지 업로드, 게시글 수정은 어떤 로직을 가져야 하는지를 서술한다. 이미지 업로드 티스토리 게시글에 이미지를 첨부한다. 해당 기능을 제공하기 위한 로직은 다음과 같다. 게시글을 읽는 과정에서 이미지 옵션을 발견한다. 이미지를 업로드를 수행하고 로컬경로로 설정되어있는 경로를 업로드한 경로로 변경한다. 포스팅 수행 여기서 이미지 옵션을 찾는다고 해서 모든 파일을 업로드하지 않는다. 파일의 경로가 로컬 경로이면 업로드를 수행하고 단순 외부링크일 경우에는 별도로 티스토리에 업로드를 수행하지 않는다. 게시글 수정 게시글 수정은 새로운 게시글을 작성하는 것과 로직이 거의 동일하다. 그러나 거의 동일한 것이지 완전히 같다는 것은 아니다. 게시글 수정만 가지는 특징은 다음과 같다. post.. vscode extension 개발일기7: 테스트 코드 이식 앞의 과정에서 기능은 구현되었다. 그러나 기능을 테스트 유닛에서 구현되었으므로 실제 extension에 적용된 것은 아니다. 그래서 extension에 구현된 기능을 삽입해야 한다. 이 과정에서 어떤 과정을 거쳐 코드를 최적화시켰고 구현중 빠진 기능이 무엇이며 이를 어떻게 구현하였는지를 서술한다. 테스트 코드 이식 1. 카테고리 ID불러오기 테스트 코드작성중 빠트린 내용이다. 사용자 측면에선 카테고리가 이름으로 보이지만 티스토리 입장에선 카테고리 ID라는 정수로 표현된다. 사용자는 카테고리ID를 알 수 없기 때문에 사용자가 카테고리명을 입력하면 이를 통해 티스토리에 카테고리 리스트를 받아 탐색을 수행하여 카테고리 ID를 대신 매핑시켜준다. 2. Class 작성 전처리를 수행해야 하는 옵션들이 많아 api.. vscode extension 개발일기6: markdown-it모듈, 포스트 정보 파싱 테스트 블로그 포스팅 구현하기 블로그 포스팅을 구현하기 위해서는 아래의 4가지 조건을 모두 만족해야 한다. 해당 기능을 구현하기 위한 로그를 작성한다. 마크다운을 html로 변경 이미지 업로드 필요에 따라 첨부파일 업로드 수행 동일한 글이 중복되어 올라가는 것을 방지. 마크다운을 html로 변경 해당 기능을 구현하기 위해선 2가지 선택사항이 존재한다. [x] 외부 모듈을 사용 [ ] 직접 구현 외부 모듈을 사용하면 마크다운을 html로 변경 가능한 범위를 파악해야 하고 외부 모듈에 의해 제공할 수 있는 기능이 제한된다. 직접 구현은 자유롭게 기능을 구현할 수 있으나 여러 사람에 의해 검증된 외부 모듈에 비해 항상 비슷한 상황에서 오류없이 동작한다는 보장이 없다. 또한 직접 개발하므로 개발 기간이 더 늘어냐게 된.. vscode extension 개발일기5: 포스팅 기능 설계 준비 & Mocha를 이용한 테스트 유닛 작성 PostInfo를 class로 작성할까 interface로 작성할까 사용자의 마크다운에서 블로그에 올릴 정보를 PostInfo라고 한다. 티스토리에서는 블로그를 게시를 할 수 있는 api가 존재한다. api를 사용하기 위한 파라미터를 interface로 관리를 진행할 것인지, class로 관리하여 진행할 것인지 고민을 하였다. 이러한 고민을 한 이유는 다음과 같다. 입력값의 전처리가 필요하다 태그 기능을 이용할 시 ,(반점)을 기준으로 입력된 태그 내용을 전처리를 수행하여야 한다. 전처리가 있으면 typescript 의 class에 존재하는 getter, setter을 통해 수행하는 것이 코드가 더 깔끔할 것 같아서 class의 필요성을 느꼈다. 그러나 굳이 클래스에서 작성할 필요가 없이 api에서 전처.. vscode extension 개발일기4: 로그인 코드 수정 Client 포트 지정 개요 인증을 위한 client웹서버가 client포트가 5500으로 지정되어 있다. 생각해보니 만약 사용자가 5500포트를 사용하는 다른 서비스가 존재하면 포트가 충돌나서 사용을 못할 것이라고 생각하였다.(Ex: VSCode extension중 live server은 기본 포트가 5500이다.) 그래서 사용자가 client포트를 직접 지정할 수 있는 기능을 추가하고자 한다. 해당 기능은 설정 UI를 통해 변경할 수 있도록 제작할 것이다. 구현 설정 소주제 변경 인증을 위한 정보인 ClientID, ClientSecret, RedirectURI의 소주제를 OAuth2에서 Client.OAuth2로 변경하여 해당 정보를 Client를 동작시키기 위해 필요한 정보임을 명시하였다 해당 과.. vscode extension 개발일기3: 블로그 작성1 주의 본 글은 2021년 8월 19일날 작성된 개발일기로서 현재 버전에서 제공하는 기능이랑 상이할 수 있다. 블로그 선택 문제 티스토리에는 1개의 계정으로 여러개의 블로그를 관리하는 기능이 존재한다. 여러개의 블로그가 전재할 경우 어떤 블로그를 메인 페이지로 구성을 할까에 대한 고민을 하였다. 해결방안 사용자들이 자주 사용하는 블로그는 디폴트 블로그로 사용할테니 디폴트 블로그에 포스팅 하는 것으로 결정하였다. 코드 interface BlogInfo { name: string; url: string; secondaryUrl: string; nickname: string; title: string; description: string; default: "Y" | "N"; blogIconUrl: string;.. javascript this binding 자바나 코틀린같은 다른 언어를 사용하다보면 this context를 사용해본 경험이 있을 것이다. 자바스크립트에서도 this context가 존재하나 다른 언어와 다른점이 있어서 포스팅을 한다. this context 자바스크립트에는 선언할 때 결정되는 부분이 있고 호출할 때 결정되는 부분이 있다. 자바스크립트에서 this는 함수를 호출할 때 결정되며 함수를 호출한 객체가 this로 지정한다. 즉 this는 함수의 실행 context를 의미한다. 다음의 코드를 보자 const person={ name:'Mike', age:'10', getName: function(){ console.log(this); return this.name; }, } person.getName(); // 1번 setTimeout.. vscode extension 개발일기2: 외부서버 없이 OAuth인증구현 개요 extension을 개발하는 중에 oauth를 이용하여 access token을 받고 이를 통해 api를 받아야 하는 동작을 수행하여야 한다. 그러나 내부에서 웹뷰를 사용하는 것은 한계가 있어서 사용자 브라우저에서 해당 과정을 수행해야 하는데 이 과정에서 access_token을 발급하는 과정을 vscode만으론 관여하기 힘들다는 문제가 있다. 로컬 서버 이 문제를 해결하기 위해 redirect_uri를 위한 웹 서버를 구현해서 실행시켜야 하였다. NodeJS에서 유명한 웹서버 프레임워크와 oauth 라이브러리인 express와 passport 를 사용할려 했다. 그러나 이를 사용할려고 하니 기능에 비해 모듈이 너무 많이 붙어있다는 생각을 하여서 http 소켓프로그래밍으로 작성하기로 하였다. 서버 .. 이전 1 ··· 3 4 5 6 7 다음
