프론트엔드 개발자로서 실무에서 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, Descripti..

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

개요 첫 회사에 입사하여 축하파티를 한 게 엊그제 같은데 벌써 2년 차가 되었다. 그 기간을 회상해 보면 프로젝트가 성공적으로 마무리되어서 행복했던 순간들과, 계속된 야근으로 힘들었던 순간 등 많은 일들이 있었지만 모든 순간들이 성장의 밑거름이 될 거라 생각한다. 그 순간들 중 가장 기억에 남고 가장 의미 있는 프로젝트를 선택하자면, outlook add-in 프로젝트가 아닐까 한다. 기존에도 velog에 outlook 시리즈를 쓰고 있었지만, 이번에 tistory로 이전하게 되면서 부족한 내용들을 채우면서 지난 기억들을 기록하려고 한다. Outlook Add-in이 뭐야 ??? Outlook Add-in은 Mocrosoft Outlook의 기능을 확장하거나 개선하기 위한 소프트웨어 응용 프로그램이다. ..