오랜만에 Outlook 시리즈 글을 작성합니다. 사실 이 시리즈는 그만 작성하려 했지만, Outlook 시리즈를 계속 읽어주시는 분들도 있고, 요즘 너무 글을 작성하지 않아서 간단한 내용이라도 글을 작성하려고 합니다. 앞선 글들을 보면 Outlook Add In의 개발 환경은 크게 웹과 데스크탑 앱 두 가지로 나누는 것을 확인할 수 있습니다. 이때, 웹의 경우 인터넷 브라우저의 개발자 도구를 통해서 쉽게 디버깅할 수 있지만, 데스크탑의 경우 같은 방법으로 디버깅할 수 없습니다. 하지만, 웹과 데스크탑은 디자인적으로 차이가 있으며 웹보다는 데스크탑 앱을 사용하는 경우가 많기 때문에 데스크탑 앱에서의 디버깅은 필수적입니다. (예전에는 확인할 방법이 없었지만, 2023년에 처음으로 방법이 생겼습니다) Mac에..

안녕하세요. 추운 날들이 반복되고 있는데 다들 감기 조심하세요. 🤧🤧🤧 이번글은 React에서 children을 다룰 때 유용한 React.Children에 대해서 정리해 보려고 합니다. 사실 React 공식문서에서는 Children의 사용이 코드의 취약성(Fragile Code)로 이어질 수 있어 사용을 추천하지 않습니다. 하지만 오늘도 회사에서 발견했듯이 많은 레거시 코드들이 남아있으며, 당분간 계속 볼 거 같기에 Children API를 정리하려고 합니다. 추가적으로 글의 마지막 부분에서는 React 공식 문서에서 추천하는 Children을 사용하지 않는 방법 등을 작성할 예정입니다. React Children API란? React에서 정말 자주 사용하는 children과 Children API는 ..

연말 연초에 약속이 많다는 핑계로 오랜만에 글을 작성합니다.Outlook Add-in 관한 글을 쓰는 건 더 오랜만인데 이유가 있습니다 🥲 새로운 해를 맞이하면서 회사에 큰 조직 개편이 있었으며, 그 결과 더 이상 outlook 개발을 하지 않게 되었습니다 🥲🥲🥲대신에 새로운 데스크톱 앱 개발을 시작할 거 같은데, 조만간 새로운 시리즈로 돌아오겠습니다. ---이번 글은 불친절한 공식문서와 참고할만한 레퍼런스가 없어서 고통받던 '그 시절'에 개발한 소셜 로그인 부분을 작성하려고 합니다. 간략하게 먼저 설명하자면 Web과 Desktop App 두 환경에 동일한 코드를 적용하기 위해서 라이브러리를 사용하지 않았으며,OAuth 2.0 Redirect URI 방식으로 개발하였습니다. (환경의 차이점에 대한..

들어가며 이번 글은 새로 산 맥북에 flutter을 세팅하면서 생긴 버그를 작성해 보려 합니다. (M3 Max 샀다고 자랑하는 중) 처음에는 Flutter를 컴퓨터에 세팅하는 과정을 작성할까 하다가, 어려운 부분도 없고 이미 다른 블로그들이 작성을 많이해서 다른 주제를 찾아야 하던 중 고맙게도? 아래 사진처럼 버그가 발생했다. 해결 과정 결론부터 이야기하자면 Flutter SDK가 버전 3.16.x 가 새로 나오면서 기존 라이브러리들과 호환성이 맞지 않는 게 원인이었다. (글 하단 부분에서 정리할테지만, SDK를 직접 설치 후 버전을 내려주면 해결됩니다!) 그래서 나는 그럼 다른 SDK 버전을 사용하면 되겠구나 하면서 방법을 찾던 중 photo_manager의 시험 버전인 3.0.0-dev.2를 사용하면..

다들 연말은 잘 보내고 있으신가요? 저는 저번 글에 작성했던 연말을 타깃으로 한 작은 서비스를 성공적으로 마무리하면서, 따뜻한 하루를 보내고 있습니다. (모두 편지 쓰러 오세요~~~ , 링크) 서비스를 오픈한 지 일주일도 안 되는 시간에 방문자 수 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,..