My Boundary As Much As I Experienced

안드로이드 체크 안내 아이폰 판매 완료 알림 프로젝트 막판 스퍼트, 푸시 알림 구현 약 프로젝트 마감이 5일 남은 시점, 기존 페이지들 QA 테스트 결과 고쳐야할 버그들이 많이 남은 상황에서 '알림 기능', 'pwa 기능', 'SEO 최적화' 등 처리해야될 일들이 너무 많아진 상황이었다.. 사실 알림 기능과 pwa는 시간 없으면 포기하자고 PM팀이 이야기했다. 사실 이 기능들을 전에 구현해본 경험이 없어서 이게 얼마나 걸릴지 계산이 안 됐지만, '모바일 앱의 존재 이유는 알림이다. 사실 모바일 앱은 푸시알림 머신이다.' 등 푸시 알림의 중요성을 강조하는 말들을 들어왔기 때문에 선뜻 포기하고 싶지는 않았다. pwa는 전에 구현해본 경험이 있는 팀원분께 맡기고, 나는 fcm을 이용한 푸시 알림 기능을 구현해..

퍼센트 호텔의 핵심 비즈니스 로직 퍼센트호텔은 야놀자에서 구매한 숙소 중 무료취소가 불가능한 것을 빠르게 중고거래하는 플랫폼이다. 그러므로 원래 구매가보다 비싸게 파는 것은 금지되어있다. 애초에 고급 숙소를 성수기에 예약하여 프리미엄 리셀을 하는 플랫폼이 아니기 때문에 그런 수요를 가진 유저는 타겟유저가 아니었다. 또한 첫 가격으로 잘 안 팔리면 특정 시간 후에 2차 가격으로 다운시킬 수 있고, 이렇게 할인률이 높아지면 메인페이지에 노출될 가능성이 오른다. PM님의 요구한 예외 처리 조건들 이때 담당 PM님께서 예외처리할 항목들을 보내주셨는데 그 양이 꽤나 많았다. '1차 가격'은 '구매가'보다 무조건 1000원 이하 낮아야 함. ‘2차 가격’은 ‘1차 가격’보다 무조건 1000 원 이하 낮아야 함...

⚠️참고 사항: 이 기능의 최대 contributor는 @im-na0님(https://github.com/im-na0)입니다.캐로셀 구현은 우리팀 에이스 @im-na0님이 주도하셨다.(가명을 위해 깃허브 닉네임을 쓰겠다.)@im-na0님이 먼저 상세페이지의 캐로셀을 구현하기 위해 전체 형태와 드래그 기능을 구현하셨고,나는 이 컴포넌트와 훅을 복사해와서 나는 메인페이지의 '지역별 최대할인숙소'과 '주말특가'에 맞게 컨테이너를 변형하여 사용하였다. 그러면서 추가로 인디케이터를 만들고 애니메이션 작업을 진행하였다. 특이한 Carousel을 구현해달라는 부탁을 받다. 프로젝트 초반에 내가 인터랙션 구현에 관심이 많다고 어필했더니 기획자 분들과 UX 디자이너 분이 인터랙션 일감을 가져와주셨다.3초마다 자동 재생되..

1. 전통적 방식의 routing (WEB 1.0) 1990년, 아날로그의 책처럼 일련의 순서대로 된 것이 아닌 가상의 공간에서 텍스트에 새로운 문서에 대한 링크가 존재하는 개념의 하이퍼텍스트가 탄생하였다. 그러나 이때의 web은 읽기 전용의 공간이며 뉴스나 간단한 홍보글, 카탈로그 등을 올리는 정도의 역할만 하였다. 정보 제공자와 사용자가 완전히 분리되어 있었고, 사용자가 정보를 생성하는 것은 불가능했다. 전통적 방식의 routing link tag(Service 등)을 클릭하면 href 어트리뷰트 값인 리소스 경로가 URL의 path에 추가되어 주소창에 나타나고 해당 리소스를 서버에 요청한다. Home Service About Home This is main page 이때 서버는 html로 화면을 표..

Element.style 속성과 GetComputedStyle() 메소드의 차이점 쿼리셀렉터 혹은 getElement... 메소드로 가져온 HTMLElement의 css 속성을 조작하는데엔 2가지 방법이 있다. Element.style와 getComputedStyle이다. (사실 추가로 css in JS인 스타일드 컴포넌트를 쓰면 state로 조작할 수 있긴 하다..) 이 두 개의 차이점을 알아보자. 아래는 각기 다른 형태로 작성된 엘리먼트들이다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바깥에서 style 태그를 이용해서 외부에서 선언하도록 했다. Element.style 을 활용 elemen..

계속 까먹어서 적어둔다. .text { overflow: hidden; // 넘치는거 보이지 않게 처리 white-space: nowrap; // 2줄 처리 안 되게 text-overflow: ellipsis; // ... 처리 } /* 참고점 overflow나 white-space 설정이 저렇게 되어 있지 않으면 text-overflow는 작동하지 않는다. 그리고 부모 컨테이너의 width도 지정되어 있어야 한다. */ css in js이든 css이든 재사용 가능한 테마를 지원하므로 지정해서 원하는 곳에 추가해주면 좋다.

tl; dr 어떤 문제를 해결하려 했나? 끄지 못해서 빼곡해진 탭들 때문에 PC자체를 며칠동안 못 끄는 상황 어떻게 해결하려 했나? 지금 켜져 있는 탭들을 한 번의 클릭만으로 스냅샷 찍듯이 저장해놓는 서비스 발견한 문제점 개발 관련해서 리서치를 하다보면 두 세개씩 새로운 페이지를 킬때도 많고, 끄기도 힘든 경우도 많다. 그래서 내 브라우저 탭은 항상 제목이 짤리고 아이콘만 보일 정도로 빽빽한 경우가 많다. 그리고 북마크바에 정보를 넣으면 왜 이 정보를 넣었는지 기억이 안 나는 경우가 많다. 메타태그에 있는 사이트 이름만으로는 언제, 무슨 상황에서 정보를 저장했는지 알수도 없다. 그래서 나는 카카오톡에 오픈채팅방을 종류별로 만들어서 (나 혼자만 있다) 그 안에 다시 볼 정보들을 저장해놓는 습관을 가지고 있..

문제 Next.js 환경에서 window 객체에 접근해야되는 일이 생겼다. useInnerWidth하는 훅을 만들어서 resize 이벤트를 감지해서 위 gif 스티커들의 좌표와 크기를 반응형으로 조절해주는 기능을 구현하기 위해 필요했다. 그런데 Next.js 환경에선 window객체에 접근하면 referenceError: window is not defined라는 에러를 반환한다. 원인 Next.js에선 기본적으로 ssr로 페이지를 로딩하기 때문에 window 전역 객체가 브라우저를 뜻하지 않는다. 그러므로 구글에서 next.js의 window객체 접근 에러에 대해 찾아보면 흔히 'csr로 전환하기 위해서 "use client"를 해주면 해결된다.'라고 흔히 답을 찾을 수 있는데 이것만으로는 부족할 수 ..