연말 연초에 약속이 많다는 핑계로 오랜만에 글을 작성합니다.Outlook Add-in 관한 글을 쓰는 건 더 오랜만인데 이유가 있습니다 🥲 새로운 해를 맞이하면서 회사에 큰 조직 개편이 있었으며, 그 결과 더 이상 outlook 개발을 하지 않게 되었습니다 🥲🥲🥲대신에 새로운 데스크톱 앱 개발을 시작할 거 같은데, 조만간 새로운 시리즈로 돌아오겠습니다. ---이번 글은 불친절한 공식문서와 참고할만한 레퍼런스가 없어서 고통받던 '그 시절'에 개발한 소셜 로그인 부분을 작성하려고 합니다. 간략하게 먼저 설명하자면 Web과 Desktop App 두 환경에 동일한 코드를 적용하기 위해서 라이브러리를 사용하지 않았으며,OAuth 2.0 Redirect URI 방식으로 개발하였습니다. (환경의 차이점에 대한..
다들 연말은 잘 보내고 있으신가요? 저는 저번 글에 작성했던 연말을 타깃으로 한 작은 서비스를 성공적으로 마무리하면서, 따뜻한 하루를 보내고 있습니다. (모두 편지 쓰러 오세요~~~ , 링크) 서비스를 오픈한 지 일주일도 안 되는 시간에 방문자 수 3000+ 실 이용자 수 200명을 넘기며, 개발의 즐거움을 오랜만에 느끼는 지금! 이번 프로젝트에서 진행한 프로젝트 세팅 및 csv로 data를 추출한 과정을 작성해 보려고 합니다. 참고로 이번 서비스는 제목처럼 Next.js와 TypeScript, 그리고 MongoDB를 사용했습니다. MongoDB 호스팅 시작하기 이번 서비스는 로그인 기능도 없는 간단한 서비스지만, 편지를 받아볼 유저의 정보를 저장해야 하기 때문에 DB가 필요했습니다. 저는 크게 관계형과..
어느덧 1년을 마무리하는 12월이 되었습니다. (모두 올해 고생하셨습니다!) 저는 연말을 의미있게 보내기 위해 이곳 저곳을 기웃거리다가, 간단하더라도 실제 서비스를 오픈해 보고 싶은 마음에 친한 동생과 연말 이벤트를 만들게 되었습니다. 그러던 중 '텍스트 에디터' (웹 에디터)를 만들게 되었는데, 그 과정을 이번글에 작성해 보려고 합니다. 기술 스택 많은 개발자들이 사용하는 React 답게 텍스트 에디터 관련 라이브러리 또한 다양합니다. 사람들이 주로 사용하는 라이브러리로 React-Quill과 Tiptap을 꼽을 수 있었는데, 저는 이 둘 중 고민하다가 Tiptap을 사용하였습니다. 그 이유는 React-Quill은 XSS 보안 취약성이 있다는 이슈를 보았으며, 무엇보다도 최근 업데이트 및 패치가 감소..
(이 글은 다크모드에 최적화되어 있지 않습니다 ㅠ, 라이트 모드로 봐주시면 감사하겠습니다) 반성하고 있습니다. 🥲🥲🥲신입 FE 개발자로 취업 후 야근 + 눈물과 함께 만든 서비스의 성능이 이렇게 안 좋을지 몰랐습니다... 이번글은 정말 아무것도 몰랐던 신입 개발자가 Lighthouse 성능 점수를 16점 (25%) 올렸던 경험담을 소개하려 합니다.참고로 Lighthouse 점수는 '성능', '접근성', '권장사항', '검색엔진 최적화' 이렇게 4가지 기준으로 산정됩니다. (이 글은 '성능' 개선 과정에 대해서 중점적으로 다루도록 하겠습니다.) Lighthouse 도입 이유작년 6월에 회사에 입사하여 기존에 있던 5년 된 Polymer 기반 레거시 프로젝트를 React로 마이그레이션 하면서 숨 가쁘게..
오랜만에 outlook 시리즈로 돌아왔다. 이번 글은 MS의 Office 전용 함수를 사용하여 사용자가 사용 중인 언어를 파악하여 프로젝트에서 다국어 지원 기능을 구현하는 방법과, 사용자가 서비스를 이용하고 있는 환경이 Outlook web 인지 Outlook desktop(365) app에서 사용하고 있는지 확인하여 활용하는 방법을 알아볼 예정이다. 추가적으로 Web과 Desktop App의 차이점이 무엇인지 알아보고 어떻게 구분해서 개발할 것인지를 작성할 것이다. Outlook 사용자의 언어와 환경 확인하기 * 사용자 언어 파악하기 * MS의 서비스들은 전 서계적으로 사용되기 때문에 기본적으로 다양한 언어를 지원한다. Outlook 역시도 다양한 언어들을 지원하며, 시작 언어는 사용자 MS 계정 설정..
개요 첫 회사에 입사하여 축하파티를 한 게 엊그제 같은데 벌써 2년 차가 되었다. 그 기간을 회상해 보면 프로젝트가 성공적으로 마무리되어서 행복했던 순간들과, 계속된 야근으로 힘들었던 순간 등 많은 일들이 있었지만 모든 순간들이 성장의 밑거름이 될 거라 생각한다. 그 순간들 중 가장 기억에 남고 가장 의미 있는 프로젝트를 선택하자면, outlook add-in 프로젝트가 아닐까 한다. 기존에도 velog에 outlook 시리즈를 쓰고 있었지만, 이번에 tistory로 이전하게 되면서 부족한 내용들을 채우면서 지난 기억들을 기록하려고 한다. Outlook Add-in이 뭐야 ??? Outlook Add-in은 Mocrosoft Outlook의 기능을 확장하거나 개선하기 위한 소프트웨어 응용 프로그램이다. ..