연초에 새웠던 계획 중 하나인 사이드 프로젝트를 좋은 팀원들을 만나 하게 되면서 Flutter에 입문하게 되었다. 퇴근 후 진행되는 회의와 해야하는 작업들은 종종 압박이 되긴 했지만, 서비스 개발부터 배포까지 직접 해보는 게 재미있어서 열심히 진행중이다. 인스타 챌린지와 함께 진행되는 만큼 마켓 반응도 있으며 글을 작성할 당시 구글 스토어 다운로드 수 500+ 앱 스토어 다운로드수 1000+ 을 달성하며 나름 순항하고 있다. ❤️ SNAPBODY 많이 사랑해 주세요 ❤️ 이번 글은 주제는 SNAPBODY의 신규 기능이자 혼자 개발을 맡은 통계 부분 중 도넛 차트 (원형 그래프)를 구현하는 방법이다. Flutter 에는 그래프 관련 멋진 라이브러리들이 많지만 우리 서비스에 필요한 도넛 차트를 그리는데 적합..

오랜만에 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 이러한 상황에선 마우스 오버라는 이벤트 상황에 맞춰 실제로 존..

들어가며 최근 새로운 프로젝트를 시작하게 되었고, 팀 문화를 작은 부분부터 개선하기 위해 노력하고 있다. 테스트 코드 도입, Storybook 도입 등 다양한 의견들 중에서 1 순위는 GitHub Pull Request(이하 PR)을 이용한 코드 리뷰의 강화 뽑혔다. 때문에 Commit Convention 및 버너닝을 확실하게 하고 앞으로 쉽게 지켜 나가기 위해 commitizen 사용을 결정하게 되었으며, 이 글은 그 과정 속 시스템을 구축한 이야기를 담고 있다. Commitizen + cz-customizable 을 이용한 Commit Convertion 지키기 Commitizen은 일정한 commit message 작성을 도와주는 라이브러리로, Commit Header 와 Scope, Descrip..

Flutter 개발을 시작하면서 내가 보려고 정리한 최소한의 Dart 문법 - 2 Null Safety - null 값에 대한 안정성을 보장하기 위해 flutter 2.0, dart 2.12에 업데이트 - 기본값 초기화(initialize) 없이 선언하는 변수는 타입을 nullable과 non-nullable 로 구분 필요 * nullable - 일반 타입 뒤 물음표(?)를 추가하면 해당 변수는 해당 타입 or null 이 될 수 있음을 의미 - 초기화 없이 사용시 null 값 할당 void main() { String? name; int? age; bool? student; print(name)//null } * non-nullable - 물음표(?)가 없는 일반 타입은 null이 될 수 없는 값을 의..

Flutter 개발을 시작하면서 내가 보려고 정리한 최소한의 Dart 문법 - 1 기본 문법 및 언어 특징 - 객체지향언어로 모든 상수, 변수, 함수 심지어 숫자까지 객체 - 단일 상속(single inheritance)과 mixin을 지원 - 행의 끝은 세미콜론( ; )이 필요하며 함수는 중괄호 { }, 문자열은 싱글쿼테이션( ' )을 사용 - 로그출력을 위한 함수는 prinf(), 코멘트 작성은 더블 슬레쉬 ( // ) 타입 종류 * 기본 자료형 - int : 정수형 - double : 실수형 - num : int, double를 포함하는 타입 - bool : true, false - string : 문자열 * 집합 자료형 - List : 중복 O, 순서 O - Set : 중복 X, 순서 X - Ma..

개요 입사 후 마주한 outlook 프로젝트는 5년동안 방치된 외로운 아이였다. 🥲 게다가 Polyer라는 처음 보는 JS 프레임워크로 작성되어 있어서 친해지기가 쉽지 않았다... 익숙하지 않은 개발환경에서 나오는 버그들을 고치는데 어지러움을 느낀 나는 프로젝트를 개선할 기회가 주어진다면 내가 잘 아는 React 프로젝트로 바꿔야겠다고 결심하게 된다. 그러던 중 어쩌다 기회가 주어지고 시작하게 된 리팩토링 프로젝트! 그 시작을 로컬 환경 구축으로 시작하려고 한다. 시작하기 본 내용은 outlook add-in 공식문서를 참고했습니다. React 기반 프로젝트를 시작하려면, 우선 Microsoft Office Add-in 개발에 필요한 "yo office"를 설치해야 한다. "yo Office"는 Yeom..