연말 연초에 약속이 많다는 핑계로 오랜만에 글을 작성합니다.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로 마이그레이션 하면서 숨 가쁘게..

문제 사내 저장소를 Bitbucket에서 Github로 이전하게 되면서 편의성과 보안성 모두를 위해 PKA(Public Key Authentication) 기반의 SSH 키 등을 사용하여 개발을 진행하게 되었습니다. 이때 git을 이용하여 push나 pull 등 다양한 작업을 할 때 ssh연결을 여러 번 붙어야 하는 경우, 매번 passphrase를 요구하고 있어 불편함을 느껴 다른 방법을 찾게 되었습니다. 사실 보안적인 이유로 매번 passphrase를 입력해 주는 것도 좋지만, 귀찮고 불편하기 때문에 해당 과정을 건너뛸 수 있는 방법과 ssh 환경이 무엇인지를 작성해 보려고 합니다. (코드만 보고 싶으시다면 목차에서 해결방법을 눌러주세요!) SSH란? SSH란 Secure Shell Protocol,..

오랜만에 outlook 시리즈로 돌아왔다. 이번 글은 MS의 Office 전용 함수를 사용하여 사용자가 사용 중인 언어를 파악하여 프로젝트에서 다국어 지원 기능을 구현하는 방법과, 사용자가 서비스를 이용하고 있는 환경이 Outlook web 인지 Outlook desktop(365) app에서 사용하고 있는지 확인하여 활용하는 방법을 알아볼 예정이다. 추가적으로 Web과 Desktop App의 차이점이 무엇인지 알아보고 어떻게 구분해서 개발할 것인지를 작성할 것이다. Outlook 사용자의 언어와 환경 확인하기 * 사용자 언어 파악하기 * MS의 서비스들은 전 서계적으로 사용되기 때문에 기본적으로 다양한 언어를 지원한다. Outlook 역시도 다양한 언어들을 지원하며, 시작 언어는 사용자 MS 계정 설정..

이 글은 Outlook desktop app에서 GA 이벤트가 잘 수집되지만, Web 페이지 안 Outlook에서는 이벤트 수집을 못하는 이슈를 해결하면서 경험한 내용을 정리한 글이다. Outlook Add-in에서만 한정된 이슈가 아니라 iframe에 GA 이벤트를 사용하는 모든 서비스에서 일어날 수 있으며, 이번 사내 세미나에서 발표를 맡게 되어 겸사 겸사 작성하게 되었다. iframe과 Cookie 우선 이슈로 들어가기 전 iframe과 Cookie에 대해서 알아야 한다. iframe은 inline Frame의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링 되고 있는 문서 안에 또 다른 HTML 페이지를 삽입할 수 있도록 하는 기능을 제공한다. 보통 글 아래에 유튜브 동영상..

프론트엔드 개발자로서 실무에서 css를 사용하다 보면 가상 클래스와 가상 요소 선택자라는 단어를 많이 들을 수 있다. 평소엔 이 두 선택자의 차이를 구분하지 못하고 사용했는데, 이번 기회에 각 선택자의 특징과 차이점에 대해서 알아보려 한다. 가상 클래스 먼저 가상 클래스란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 부여해 css로 제어하는 것을 의미한다. (동적으로 스타일 부여) 예를 들어, 특정 a태그에 마우스를 올려 (hover) 색상을 변경하려고 할 때 가상 클래스를 사용하지 않는다면 a 태그에 스크립트로 mouseover 이벤트를 이용하여 해당 이벤트 발생 시 색상을 변경해는 로직을 추가해야 한다. Button 이러한 상황에선 마우스 오버라는 이벤트 상황에 맞춰 실제로 존..