개발 준비 - 01

일단 개발의 "개"자도 잘 모르니, 발로 개발하지 않기 위해서는 일단 검색해서 공부 좀 해보기로 했습니다

 

구글에서 "구글 확장프로그램 개발"을 검색하니 나오는 첫번째 링크가

마침, 회고라서 잘 읽어보고자 했습니다

(zuminternet.github.io/Zum-Chrome-Extension/)

 

확장 프로그램 개발은

- HTML, JavaScript 및 CSS와 같은 웹 기술을 기반으로 해야하고,

- Chrome 개발자 대시 보드를 통해 배포한답니다

 

확장 프로그램의 성격으로는

바로가기 링크형, 개인화 위젯형, 월페이퍼형, 툴바형으로 나뉘는데,

 

저는 목표하는 바가 있어 개인화 위젯형 + 툴바형을 고려하고 있습니다

개인화 위젯형	툴바형
- 별도의 웹 사이트 이동 없이 한 페이지에 투데이성 정보와 링크를 제공 - 사용자의 자유도를 높여 직접 커스텀하여 자신만의 홈페이지를 만드는 컨셉 - 다만 개인화에 익숙한 사용자만 이용하는 경우가 많음	- New Tab은 아니지만, 팝업의 작은 영역을 활용하여 사용자 맞춤형 정보 제공

 

개발과정 소개로 넘어가자마자 안읽히기 시작합니다...

그래도 일단 정리는 해보겠습니다 (나름대로, 열심히, 나를 위해)

 

(1) 프로젝트 구조

폴더들이 어떤 용도로 사용되고, 무엇을 담고 있는지 정의해 두는 것 같습니다

- 여기서는 Vue-cli를 이용해 프로젝트를 구성했답니다

- Build Script라는 것을 만들어 사용하나 봅니다

  이를 실행하면, 메인 파일에서 버전을 파싱하고, 결과물 폴더를 압축하여,

  버전을 포함한 이름을 명명하며, 버전별 압축파일 모음 폴더에 파일을 생성하는 것으로 보입니다

 

(2) *.json

json 포맷 파일로, 필수적으로 있어야 하며,

확장 프로그램의 이름, 버전과 같은 기본 정보와 사용하는 기능을 명시해야 한답니다

 

1) Content Security Policy (CSP)

HTTP Response Header에 명시하는 것으로, 사용자 에이전트가 주어진 페이지에 대해

로드할 수 있는 리소스를 제어할 수 있답니다

- 요청한 리소스가 어떤 권한을 사용할 것인지 정확히 명시하는 과정

서버 원본 및 스크립트 end-point 지정이 포함되어

크로스 사이트 스크립팅 공격(XSS) 으로부터 보호할 수 있답니다.

 

2) Chrome API

API 호출 결과는 callback에게 반환하기 때문에 조금 더 유연하게 사용하기 위해선 Promise로 감싸서 사용해야 합니다

 

3) 개발모드에 대한 핸들링

퍼블리싱팀이 최대한 신경쓰지 않도록 작업하기 위해, 협업을 위해 로컬서버에서 작업했답니다

그러면

- 데이터를 가져오는 구문을 위한 테스트용 데이터가 필요하게 되고,

- 외부로 요청을 하는 상황에서의 응답이 필요하기에

개발환경에서 사용하는 요소들에 대해 미리 준비하고 정의해둘 필요가 있습니다

(음, 이 부분은 나중에 직접 해보면서 경험해야 할 것 같습니다)

 

4) 확장프로그램을 크롬 개발자 모드에서 확인하기

크롬 브라우저에서 개발자 모드를 활성 후 압축해제된 확장 프로그램을 로드함으로써 확인할 수 있습니다

 

4. 시스템 아키텍쳐

소개할 수 있는 영역까지만 나왔으며, 저도 이런 식으로 하는 구나만 봐두고,

제가 하려는 시스템 아키텍쳐는 머리 속에 담아만 두었다가,

나중에 필요할 때 참고해서 그려봐야 겠습니다

 

정리를 보면,

back-end에서

크롬 확장 프로그램은 웹서비스가 아니기 때문에 확장 프로그램 전용 서버가 존재하지 않고,

따라서 확장 프로그램에서 API를 사용할 땐 외부에서 접근 가능한 API를 사용해야 한답니다

 

이것이 일반적인지 아닌지는 차차 공부해 가며 알아봐야 하겠습니다

저는 확장 프로그램이 다른 서버에서 데이터를 가져와 사용자에게 뿌려주는 방식을 생각하고 있는데,

크롬 확장 프로그램으로 이것이 구현 불가능한 것인지,

아니면 여기서는 이런 식의 기능이 아니라서 존재하지 않는다 표현한 것인지 모르겠습니다

그리고 API를 언급한 관점에서, 굳이 서버가 아니라 API에 응답하는 것을 준비해야 한다는 것이면,

서버이지만 웹서비스까지는 필요가 없고, API 응답기능만 있어도 된다는 것을 말한 것인지도 모르겠습니다

다만, 제가 생각하는 프로그램은 웹서비스도 제공하면서 API도 응답해줘야 하는 것은 아닐까 모르겠습니다

 

이후에는 검수와 배포 과정에 대한 이야기가 있었습니다

앞이 보이지 않는, 검수 과정에 대한 준비 및 대응 이야기가 있으니,

나중에 문제 생기면 꼭 참고해야 하겠더라구요

 

오늘은 여기까지 공부했습니다, 요즘 유행하는 미라클 모닝이 아닌, 미라클 이브닝이었습니다