Why stylelint? ✅ 협업을 하다보면 팀원 각자만의 퍼블리싱 스타일, 즉 css 속성을 작성하는 규칙이 매우 다릅니다. 따라서, css 코드에 일관성을 주고 가독성을 높여주기 위함입니다. ✅ 디자인 변경이나 개선을 할 때, 시간을 줄여줄 수 있습니다. stylelint 적용하기 Home | Stylelint npm version stylelint.io 라이브러리 설치 우선, 각자 환경(npm/yarn)에서 필요한 라이브러리를 설치해주세요. 저는 아래 4가지만 devDependencies에 설치했습니다. stylelint

이번에 또 새로운 프로젝트를 진행하게 되었습니다. (with. 레고) 주차장의 모든 것을 알려주는, 기존 주차장 관련 서비스의 단점을 개선한 서비스입니다. (아직 이름은 미정..) 일단, 굵직하게 [React + Typescript + Vite] 요 조합으로 시작해보려고 합니다. 왜 [React + Typescript + Vite] ?? 사용자의 인터랙션에 따라 매번 다른 주차장 정보를 불러와야 하기 때문에, Next(SSR)보다는 React(CSR)가 더 적합하다는 판단을 내렸습니다. Typescript는 이제 선택이 아닌 필수가 되어버린 느낌,,, Vite는 번들링(소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결)없이 서버를 구동하고 빌드하기 때문에, 일반 webpack과 비교..

고객의 소리에 귀를 기울이며 느낀 점 초반에 열정적인 토론을 통해 결정된 사안은 고객의 한마디에 한 숨에 꺾일 수 있으며 생각보다 고객은 세세한 것에 관심이 없다. 그냥 내가 기대하는 기능이 정상적으로 작동하는 것 뿐! 단순하게 생각하자. 단순하게. 초반의 불필요한 토론은 줄이고 작은 사이클 완성 구현에 집중하자. 임시, 회원 고객을 따로 보여줄지, 함께 보여줄지, 회원만 보여줄지 쿠폰 혹은 스탬프의 유효기간은 어떻게 할지 쿠폰 리스트의 디자인과 애니메이션은 어떤 것이 좋을지 모두 다 중요도/우선순위가 낮은 것이었다! 하나의 서비스를 완성하고 유지보수하니 이런 면에서 통찰력이 높아진 것 같아서 뿌듯하다. 다음 프로젝트에는 뭐가 중요하고 덜 중요한지, 어떤 일 부터 해야할지, 잘 정립할 수 있을 듯 하다...

5차데모데이의 목표는 1. 실제 사용자 유치 (카페사장 1명, 사용자 10명) 2. 코드 리팩토링 및 완성도 높이기 두가지 였다. ☕️ 실제 사용자 유치 사용자를 유치하기 위해서 갖은 노력을 했다. 네이버 카페에 서비스 홍보글도 남겼지만 운영자에 의해 삭제되고 인스타계정도 만들어서 수많은 개인카페 사장님들에게 DM을 보냈지만 아무런 응답이 없었고 우리 서비스를 간단히 소개할 수 있는 카드뉴스도 제작했다. 효과가 미미한 마케팅 만을 하다보니 지치고 아무도 쓰지 않는 서비스를 만들었다는 생각에 개발 의욕마저 떨어져갔었다 😩 ... 마지막 찬스는 카페를 하고 있는 지인들에게 부탁을 하는 것이었다. 진심을 다해 서비스의 기획의도를 설명하고 홍보했다. 나의 간절한 마음이 닿았는지 정말 정말 감사하게도 우리 서비스..

이번 미션은 'memegle 웹사이트의 성능을 개선하라!' 였다. 미션 전의 나는 '성능'에 대해서 제대로된 정의조차 할 수 없었다. 단순하게 "그냥 빠르게 돌아가면 되는 것..?" 추상적으로 떠올렸다. 아래의 요구사항 체크리스트를 하나씩 짚어가며 천천히 알아가보자! ✅ 미션 요구사항 및 체크리스트 정적파일 크기 줄이기 1. 소스코드 크기 줄이는 방법 1-1) Gzip 압축하기! Gzip이란? 압축프로그램이다. 모던 브라우저에서는 모두 내장되어 있으며, 서버(ex. aws, 스프링, nginx)에서 설정가능하다. 따라서 나는, aws CloudFront에서 지원하는 Gzip 압축 기능을 활용했다. CloudFront 동작 설정에 `자동으로 객체 압축` 옵션을 Yes로 선택! 1-2) .css 파일 압축하..

1. color-thief-react 사용기, 카드 애니메이션 스탬프크러쉬 서비스의 핵심가치 중 하나인, '고객이 카페의 쿠폰을 한 눈에 확인할 수 있다'를 실현한 페이지이다. color-thief-react 라이브러리를 이용해 쿠폰의 main 색상을 추출하여 배경색으로 활용하였고, 카드가 넘어가는 애니메이션을 구현하였다. 쓰면서 어려움을 겪었던 점은, 이미지가 구글 드라이브 url일때는 라이브러리가 올바르게 동작하지 않았다. 엄청난 구글링 끝에,, 구글 프록시 url을 넣어주니 해결되었다. export const addGoogleProxyUrl = (url: string) => 'https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?..

1. Git 브랜칭 전략 우리팀은 Git Flow, Github Flow도 아닌, 우리팀에게 필요한 브랜칭 전략을 수립하였다. 1) main production 서버에 제품으로 배포되는 branch로서, develop branch의 배포 버전만 merge하여 관리한다. 2) hotfix main branch에서 분기하여 긴급한 버그 및 에러를 수정하고 main branch에 다시 merge하기 위해 사용하는 branch이다. 3) develop 다음 출시 버전을 대비하여 공동으로 개발하는 branch로서, main에 merge 전 최종테스트를 진행하는 branch이다. 4) feature develop branch에서 분기해 issue단위의 각자 기능을 구현하는 branch로서, 변경사항이 develop..