🥐 개요
입사 후 마주하게 된 outlook 프로젝트는 5년 동안 방치된 외로운 아이였다 😢
게다가 Polyer라는 처음 보는 JS 프레임워크로 작성되어 있어서 친해지기가 쉽지 않았다....
익숙하지 않은 플랫폼에서 나오는 버그들을 고치는데 어지러움을 느낀 나는
프로젝트를 개선할 기회가 주어진다면 내가 잘 아는 React로 프로젝트를 바꿔야겠다고 결심하게 된다.
그러던 중 어쩌다 기회가 주어지고 시작하게 된 리팩토링 프로젝트!
그 시작을 로컬 환경 구축으로 시작하려고 한다.
🍕 시작하기
- 본 내용은 outlook add-in 공식문서를 참고했습니다.
React를 사용하여 프로젝트를 시작하려면, 우선 Microsoft Office Add-in 개발에 필요한 "yo office"를 설치해야 한다.
(기존 프로젝트가 있다면 Office 관련 라이브러리를 설치해도 된다.)
"yo office"는 Yeoman을 기반으로 하며, Microsoft Office Add-in 개발을 위한 프로젝트 템플릿을 생성하는 데 사용된다고 한다.
npm install -g yo generator-office설치가 완료되면 "yo office"를 사용하여 아래 사진과 같이 원하는 프로젝트 템플릿을 생성하면 된다.
만약 Mac을 사용하고 있거나 회사 컴퓨터를 사용하는 경우 아래 사진과 같은 CA_certification 관련 error이 발생할 수 있다.
보통 HTTPS 연결 시 서버의 인증서가 자체 서명되었거나 인증서 체인에 문제가 있는 경우 발생하는데, 나의 경우에는 회사의 인증서 설정이랑 충돌이 났었다.
이럴 경우 관련 라이브러리들을 재설치하면 해결된다. (특히 Certificate 관련 라이브러리!)
🍔 프로젝트 세팅
outlook add-in 프로젝트는 일반적인 프로젝트와 조금 다른 플러그인과 라이브러리, 규칙들을 기본적으로 사용한다.
프로젝트 예시
그렇기에 프로젝트 설정할 때 삽질했던 2가지 부분에 대해서 추가적으로 설명하려고 한다.
- 절대 경로
지금까지 프로젝트를 세팅할땐 'craco' 라이브러리를 이용해서 절대경로를 설정했다
하지만 outlook 프로젝트에서 craco를 사용했을 땐 error가 발생했다.
// craco 예시
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},그 이유를 살펴보니 outlook 프로젝트는 위의 세팅 2번째 사진처럼 script 안 명령어의 시작이 office-addin ~~으로 시작한다.
craco를 사용하면 위 코드 예시와 같이 scripts 명령어 수정이 불가피했기에 다른 방법을 찾아야 했다.
의외로 답은 간단했는데, webpack의 'resolve.alias' 설정에서 그 답을 찾을 수 있었다.
webpack.config.js의 파일에서 module.exports 안 resolve > alias를 위의 사진처럼 설정하면
와 같이 절대 경로를 사용해서 컴포넌트들을 import 할 수 있다.
다만, 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 에 관련 설정들을 아래 코드 예시처럼 추가하면 된다.
자세한 내용은 링크에 적어 두었다.
설정 예시
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
type: 'asset/resource',
generator: {
filename: 'assets/[name][ext][query]',
},
},
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext][query]',
},
},
],
},
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] },🥞 마치며
내 생각이나 경험을 다른 사람에게 대화를 통해서 이해시키는 것도 어려운 일이지만 이를 정리해서 글을 쓰는 것 또한 어려운 일인 거 같다
계속 velog를 채워 나가면서 시간이 날 때마다 작성했던 글을 고쳐나가면 나도 좋은 작가가 되지 않을까..?
계속..
