LIGHTLOG
article thumbnail
article thumbnail
[우테코] '스탬프크러쉬'팀 6차데모 후기

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

article thumbnail
[우테코] '스탬프크러쉬'팀 5차데모 후기 | 실제 사용자 유치, 코드 리팩토링, 서비스 완성도 높이기

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

article thumbnail
[우테코] 레벨3 '프론트엔드 성능' 미션 회고

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

article thumbnail
[우테코] '스탬프크러쉬'팀 3차데모 후기 | color-thief-react 사용기, 카드 애니메이션, react-query

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

article thumbnail
[우테코] '스탬프크러쉬'팀 2차데모 후기 | Git 브랜칭 전략, 프론트엔드 테스팅, 개발, 배포

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..

article thumbnail
[우테코] '스탬프크러쉬'팀 1차데모 후기 | 기획, 팀문화 빌딩, 유저시나리오, 기능명세서, 와이어프레임

😮 레벨3가 시작되다. 발표할 때 떨려서 손을 달달떨고 속사포랩을 해버렸지만 감사하게도 많은 분이 투표해주셔서 내 기획안이 선정되었다! 🤩🥳 열심히 해야지. 🏗 팀문화(Ground Rule) 빌딩 그라운드 룰은 '의사소통, 의사결정, 업무 진행 방식, 회의 등에서 각 팀원들의 행동 모델을 구성원 모두의 합의 하에 정의한 정책이자 지침'이라고 한다. 아직 어색어색한 팀원들끼리 미래에 어떤 일이 일어날지 한치앞도 모른 채 그라운드 룰을 짜는 것은 꽤 힘들었다. 어색한 분위기를 조금이라도 풀어보고자 '취미, 퇴근시간, 왜 개발자를 하게되었는지' 등등을 서로 물어보았다. 또한, 프로젝트 목표를 설정하였다! 1. 도장깨기 서비스 이용자 카페 1곳, 사용자 10명 유치 2. 기능요구사항 100% 구현(선택사항 제외..

article thumbnail
[우테코] 레벨2 '장바구니' 미션 회고

1. 미션 소개 2. 미션에서 기억에 남는점 2-1. 백엔드와의 협업 경험 2-2. msw 2-3. 나의 api 변천사 3. 리뷰리뷰스터디 1. 미션 소개 🛒 장바구니 배포 페이지 🛒 이번 미션은 장바구니 기능이 중점적인 간단한 커머스 사이트를 구현하는 것이었다. ver. Mobile ver. Web 2. 기억에 남는 점 2-1. 백엔드와의 첫 협업,, 🎤 📌 API 명세서 백엔드에서 일방적으로 명세를 보내주지 않고, 만나서 명세를 어떻게 주고받으면 좋을지 얘기해서 굉장히 유익했다. 또한, 자잘한 요청들을 쉽게 할 수 있었고 백엔드에 대한 이해도를 높일 수 있었다. 만나서 소통하니까 일하는 느낌을 받아서, 함께 만들어나간다는 느낌도 강하게 받을 수 있었다. 초반에 서로 얼굴을 보지 못한 채로 테스트 할 ..