[Outlook add-in] 프로젝트 생성 및 세팅 - 1

개요

입사 후 마주한 outlook 프로젝트는 5년동안 방치된 외로운 아이였다. 🥲

 

게다가 Polyer라는 처음 보는 JS 프레임워크로 작성되어 있어서 친해지기가 쉽지 않았다...

 

익숙하지 않은 개발환경에서 나오는 버그들을 고치는데 어지러움을 느낀 나는 

 

프로젝트를 개선할 기회가 주어진다면 내가 잘 아는 React 프로젝트로 바꿔야겠다고 결심하게 된다.

 

그러던 중 어쩌다 기회가 주어지고 시작하게 된 리팩토링 프로젝트!

 

그 시작을 로컬 환경 구축으로 시작하려고 한다.

시작하기

본 내용은 outlook add-in 공식문서를 참고했습니다.

 

React 기반 프로젝트를 시작하려면, 우선 Microsoft Office Add-in 개발에 필요한 "yo office"를 설치해야 한다.

 

"yo Office"는 Yeoman을 기반으로 하며, Outlook Add-in 개발을 위한 프로젝트 탬플릿을 생성하는 데 사용된다고 한다.

 

npm install -g yo generator-office

설치가 완료되면 "yo office"를 사용하여 아래 사진과 같이 원하는 프로젝트 템플릿을 생성하면 된다.

 

만약 Mac을 사용하고 있거나 회사 컴퓨터를 사용하는 경우 아래 사진과 같은 CA_certification 관련 error이 발생할 수 있다.

SELF SIGNED CERT IN CHAIN 에러

보통 HTTPS 연결 시 서버의 인증서가 자체 서명되었거나 인증서 체인에 문제가 있는 경우 발생하는데, 나의 경우에는 회사의 인증서 설정이랑 충돌이 났었다. 

이럴 경우 관련 라이브러리들을 재설치하면 해결된다. (특히 Certificate 관련 라이브러리!)

 

프로젝트 세팅

outlook add-in 프로젝트는 일반적인 프로젝트와 조금 다른 플러그인과 라이브러리, 규칙들을 기본적으로 사용한다.

프로젝트 예시

그렇기에 프로젝트를 설정할 때 삽질했던 2가지 부분에 대해서 추가적으로 설명하려고 한다.

🥞 절대 경로

지금까지 프로젝트 세팅에는 webpack을 직접 수정하지 않는 장점 때문에 'craco' 라이브러리를 이용해서 절대경로를 설정했다.

 

하지만 outlook 프로젝트에서 craco 라이브러리를 사용했을 땐 error 가 발생했다.

 

craco 설정 예시

그 이유를 살펴보니 outlook 프로젝트는 위의 세팅 2번째 사진처럼 script 안 명령어의 시작이 office-addin ~~으로 시작한다.

craco를 사용하면 위 코드 예시와 같이 scripts 명령어 수정이 불가피했기에 다른 방법을 찾아야 했다.

의외로 답은 간단했는데, webpack의 'resolve.alias' 설정에서 답을 찾을 수 있었다.

webpack 안 resolve 설정 부분

webpack.config.js의 파일에서 module.exports 안 resolve > alias를 위의 사진처럼 설정하면

절대 경로 예시

위 사진과 같이 절대 경로를 컴포넌트에서 사용할 수 있다.

 

다만, vsCode에서 불러온 컴포넌트에 (window 기준) ctrl과 마우스 클릭을 동시에 했을 때 해당 모듈의 정의로 이동하는 기능이 작동하지 않는다.

이 경우 jsconfig.json 파일에 다음과 같은 설정을 추가하면 해결할 수 있다.

 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "Hooks/*": ["./src/Hooks/*"]
      ~~
      ~~
    }
  },
  "exclude": ["node_modules", "build"]
}

🥞 webpack 이미지 파일 설정

outlook add-in 프로젝트를 처음 시작하게 되면, 당연하게도 webpack 설정들은 빠져 있다.

webpack.config.js의 파일에서 module.exports 안 module > rules 에 관련 설정들을 아래 코드 예시처럼 추가하면 된다.

 

자세한 내용은 링크에 적어 두었다.

설정 예시

마치며

항상 느끼는 점인데 프로젝트 세팅 부분은 고민했던 거에 비해서 작업량은 적은 게 아쉽다.

 

다음 글은 Office에서 제공하는 함수를 사용해 사용자가 사용하고 있는 언어와 환경을 파악하는 글을 작성할 예정이다.

 

계속....