본문 바로가기

전체 글

tailwind CSS를 이용한 디자인 파운데이션 구축하기(color palette, typography) 배경현재 팀내에선 qr/nfc오더를 개발하는 과정에 있었는데 현 회사에서 처음 참여하게된 B2C개발이였다.B2B서비스와는 다르게 일관된 디자인적 요소를 제공하는것이 중요하다고 판단하여 디자인 시스템을 전부다 구성할 수 있으면 좋겠지만, 일정상 디자인과 개발을 함께 진행해야 하는 상황에서 가장 기초가되는 파운데이션만큼이라도 가져가자고했다.tailwindCSS를 선택하게된이유tailwindCss는 utility-first CSS framework로, 제공하는 config파일을통해 color palette이나, typography를 쉽게 정의가 가능하고, 일관된 방식으로 css를 작성할 수 있다는점이 좋다고 생각했다.물론 다른 css-in-js방식또한 변수로써 관리를 할 수 있지만, tailwindCSS를 사.. 더보기
webpack module federtaion을 활용한 Micro Frontend도입(사장님앱) 도입배경사장님앱 어플리케이션은 식당 테이블에 놓인 태블릿에 노출되는 메뉴와 분류에 대한 정보를 확인하고 수정하는 기능과 식당에 줄을 서는 대기줄을 관리하는 기능을 사장님에게 제공하는 관리자용 어플리케이션이다. (메뉴관리, 대기관리로 구분지어 명칭)생각해봤을때 두개의 기능은 독립적인 기능으로, 대기관리페이지에 오류가 발생하여도 메뉴관리기능을 사용할 수 있어야하고 그반대도 마찬가지다. 배포관점에서 봤을때도 독립된 두 서비스는 독립적으로 배포가되어야 배포시 발생할 수 있는 문제를 최소화 할 수 있을것이라 판단하였다.목표1. 독립적인 두 애플리케이션은 분리되어 관리되어야한다.2. 독립적인 두 애플리케이션은 배포과정에 있어 서로에게 독립적이여야한다.마이크로 프론트엔드(Micro Frontend) 독립적으로 제공 .. 더보기
iframe을 활용한 Micro Frontend도입(사내 어드민) 도입 배경어드민을 사용하는 입장(서비스개발 조직 외)서비스개발조직에서 서비스마다 어드민을 개발하게 되면 어드민 사용성에서 효율이 떨어짐ex) 특정 업무를 위해 두 개의 어드민 브라우저를 띄워놓아야 하는 상황 발생 -> 한 곳에서 필요한 정보를 모두 보여준다면, 업무효율성이 높아질 것사용자는 각자 업무에 맞는 어드민 콘텐츠만 활용할 것으로 예상ex) 웨이팅서비스 고객응대를 담당하는 조직이 태블릿오더서비스의 어드민페이지를 볼필요는 없다.ex) 테블릿오더서비스의 콘텐츠를 배포하는 과정에서 오류가 발생하여 로그인이 불가능하다면 웨이팅 서비스담당자는 고객응대가 불가능해진다.ex) 어드민 학습 비용이 늘어난다.(어떤 위치에 어떤 콘텐츠가 있는지 인지하는 과정 등등)어드민을 개발하는 입장(서비스개발 조직)특정서비스조.. 더보기
api개발시 프론트엔드 <->백엔드의 독립적인 개발,소통일원화를위한 - api 솔루션 도입기(apidog) 배경지금까지의 개발프레스는 다음과 같다notion으로 백엔드와 프론드가 api명세를 정의개발진행프론트엔드: msw등 자체 mocking 환경 구성백엔드: Postman으로 api개발 후 swagger에 배포개발 url에서 정상동작 확인배포여기서 겪었던 문제점으로개발과정에서 api명세가 수정되었을 때 특정 툴에만 수정사항이 반영됨동일한 작업을 내가아닌 다른 동료가 해야하는 상황이 발생하였을때 명세가 수정되어있지않음결국 개발서버에서 테스트를 할 때까지 모르다가 확인 후 수정하여 다시 배포하는 번거로움이 발생구두로 소통 후 각자의 개발환경에서만 수정하고 개발을 진행하게 됨시간이 지나면서 개개인마다 주로 참고하는 툴들이 달라짐개발팀 내 일관성이 떨어져 불필요한 소통비용이 발생함notion 같은 경우 정해진 양식.. 더보기
AngularJS Git Commit Message Conventions을 활용한 커밋 메시지 작성법( + react) 배경vsCode를 통해 작업을 진행하면서 평소와같이 커밋을 하려는데 메세지 입력이 50자로 제한되어있는것을 확인하게되었다.단순히 커밋을 작은단위로 유지시키기위해 vsCode에서 강제한 것인가? 라는 생각과함께 메세지 구조에대해 궁금증을 갖게되어 찾아보니 the AngularJS commit conventions 라는 문서를 기반으로 많이 작성하는것을 알게되었다. 다음과같은 말을 많이들어봤을텐데좋은 커밋 메세지를 작성하자작은단위로 커밋 메세지를 구성하자1. 커밋 메세지를 잘 작성하자여기서 ‘좋은’이 의미하는 바가 무엇일까?협업과 관련이 있을것같은데 우리는 혼자가 아닌 다른동료들(혹은 미래의나)과 함께 작업을 하기때문에 결국 다른사람이 내가 작성한 커밋 메세지를 보고 어떤 작업을 진행했는지 이해하기쉽게 작성.. 더보기
[troubleShooting] flutter inappwebview - 안드로이드, ios환경에따라 뒤로가기, 스와이프 제어하기 flutter inappwebview환경에서 특정상황(ex. 웹에서 모달이 열였을 때, 홈화면일 때 등등)에서 ios의 뒤로 가기 스와이프를 막는 설정에 대해서 알아보자 우선 최초 버그내용으로는 다음과같았다 "모달을 띄운 후 페이지를 뒤로 갔을 때 모달이 그대로 유지됩니다" 이는 확인해 본 결과 모달을 전역적으로 유지하고 있었기 때문에 발생한 문제였고, 모달을 해당 페이지컴포넌트 내부로 이동하여 페이지가 원마운트될 때 자연스럽게 사라지도록 하여 버그를 해결했었다 근데 문제는 추가 구현사항이었다 1. android: 모달이 열려있을 때 디바이스의 뒤로가기에해당하는 물리버튼을 눌렀을때 모달 닫힘 2. ios: 모달이 열려있을때 스와이프 제스처 막기 처음봤을 땐 둘중 하나의 요구사항을 충족하면 나머지하나는 자.. 더보기
frontend 모노레포 구성하기 모노레포를 설명하기 전에 workspace의 개념에 대해서 알고 가자 yarn에서 잘 정의되어 있는 것 같아 가져와보면 Workspaces are the name of individual packages that are part of the same project and that Yarn will install and link together to simplify cross-references. -> 즉, workspace란 하나의 프로젝트를 구성하는 여러 패키지들 중 하나의 단위를 의미한다고 한다 (패키지 === workspace) 그렇다면 모노레포구조를 왜 사용해야 할까? 1. 각각의 서비스들이 독립적인 레포로 관리되다 보면 유지보수가 힘들어짐 특정 라이브러리 업데이트, 컨벤션 변경과 같은 상황이 발.. 더보기
첫 스프린트 회의 회고: 기획해보기 재취업을 준비하고 6개월 만에 새로운 회사에 입사하게 되었다. 나는 신규프로젝트에 투입되었다. 신규프로젝트팀에 확정된 인원이 나포함 프론트엔드 2명이라 기획, 백엔드, 디자이너가 공석인 상태지만 여러 가지 경험을 해볼 수 있는 기회라 생각했다. 아직 초기단계라 주 2회(월, 금) 스프린트 방식으로 윗분들과 상황을 공유하기로 했다. 사업성과 예비 고객은 기존에 잡혀있는 상태였기 때문에 첫 임무로 기획의 대략적인 스케치를 구상하는 임무를 맡게 되었다. 기획안 스케치 툴은 피그잼을 활용하기로 했다. 기획을 어떤 식으로 구성하면 좋을까? 프로젝트는 총 3개의 프론트 어플리케이션으로 구성된다. 나는 기존 회사에서 어드민을 개발한 경험이 있어 어드민서비스 개발 스케치를 맡았고 선임 개발자분은 객실 쪽 서비스를 맡게.. 더보기

티스토리툴바