해커톤 리뷰

404·2022년 9월 4일
0

기획

목록 보기
3/3
post-thumbnail

제 1회 마켓컬리 해커톤 리뷰

gitHub - https://github.com/FUNco247/kurly_hack
notion - https://claradana.notion.site/claradana/2022-79e802e1e3c74fa696ab6a5f6ef92c25
시연영상 - https://youtu.be/7MuKBWnGtiY

1. 기획

  • 문제 정의

    우리 식탁에 가장 자주 오르내리는 신선식품의 가격은 기온의 상승, 자연 재해, 추석 명절 등등 특정 이슈 전과 후로 많이 요동친다. 조류독감으로 인해 수만마리의 닭이 폐사되었을 때, 살아남은 모든 닭이 황금 알을 낳기 시작했다. 과연 몇 명의 소비자가 조류독감 소식을 접한 뒤에 금계란 사태를 예측하고 계란을 미리 사뒀을까? 올 해 처럼 폭염 과 폭우가 반복되는 여름엔 상추 값이 널뛰기를 한다. 주말 삼겹살 파티가 예정되어있던 A씨는 이런 자명한 사실을 알고 있었을까? 그렇가면 언제 상추를 구매했을까?

    "OO의 가격이 폭등하고 있습니다." 또는 "OO의 가격이 폭등했습니다." 라는 소식은 흔히 접하지만 "OO의 가격이 오를것 같습니다." 또는 "이러한 이상징후 후엔 항상 OO의 가격이 올랐습니다." 와 같은 정보는 들어본 적이 없는 것 같다.

  • 목적

    소비자로 하여금 가격 인상 이슈를 쉽게 파악할 수 있게 하고, 구매에 적절한 시기를 판단할 수 있는 근거자료를 제공하주는 서비스를 만들고 싶었다.

  • 서비스 흐름

    https://www.kamis.or.kr/customer/main/main.do
    농산물 유통정보

    1) KAMIS에서 제공하는 농산물 가격정보의 변동 추이를 파악함과 동시에 네이버 뉴스 api에서 해당 상품 관련 기사를 받아와 ["상승", "폭등"] 등등의 키워드로 추려낸다.

    2) 가격 변동 추이가 상향인 상품과 키워드 매칭된 뉴스 정보를 종합하여 가격 상승 요인이 존재하고, 실제 가격이 상승중인 품목을 골라낸다.

    3) 가격 변동 내용을 그래프로 시각화 하여 소비자에게 보여주고 관련 기사를 함께 제공한다.

    4) 구독 신청을 하면 3번의 정보를 메일이나 문자로도 받아볼 수 있다.

2. Tech (Front-end)

필자는 프론트엔드 파트로 참여했으므로 관련 기술만 적어본다 (프론트엔드 1인)

  • React.js

    SPA는 이제 거의 표준화 되었다고 생각한다. 따라서 SPA로 개발은 더 나은 사용자 경험을 위한 것이 아니라 사용자가 당연하게 느끼는 퀄리티가 되었다고 생각한다. 이러한 점을 느끼고 React를 공부하고 있었으므로 다른 선택지는 고려하지 않았다.

  • React Query

    리액트 쿼리가 가장 큰 장점은 무엇보다 "자동 캐싱" 이라고 생각한다. 특히 이커머스 사이트에서는 여러 상품들을 둘러보기 위해 페이지 이동이 굉장히 잦을 것이라고 생각한다. 이렇게 페이지를 이동할 때 마다 API로 부터 Data Fetch를 한다면 굉장한 리소스 낭비가 되기 때문에 캐싱은 반드시 필요하다 생각했다. Loading state 까지 덤으로 주니 코드의 길이도 현저히 줄어든다.

    참고 : https://velog.io/@funco247/React-useQuery-react-query

  • styled-component

    리액트를 접하기 이전(HTML, CSS, Vanilla JS로 작업하던 시절)을 떠올려보면 class명을 작성하는것, 별도 CSS 파일을 만들어 주입시켜야 하는 것이 가장 싫었다. Styled-component는 이 모든것을 말끔하게 해결해주고 component의 독립성 및 재사용성을 높혀준다. 솔직히 styled-component 이전의 react는 개발을 하는 내 입장에서 그다지 섹시하게 느껴지지 않았다면 지금은 다를 방법을 생각조차 하기 싫게 만든다.

    styled-component를 사용하면 HTML 요소의 class명을 랜덤하게 생성해주며 컴포넌트 단위의 css 스타일을 지정할 수 있다.
    https://velog.io/@funco247/React-styled-component

  • Infinte scroll

    이 프로젝트 전에 무한스크롤을 구현해본 경험이 없었다. 데이터가 엄청 많아서 종으로 무수히 많은 컴포넌트가 렌더링되는 그런 무한스크롤이 아닌.... pagenation된 api 요청에 따라 효율적으로 구현하는 무한스크롤 말이다.

    https://github.com/FUNco247/kurly_hack/blob/master/src/routes/NewsPage.js

    React Query 안에 있는 useInfiniteQuery 라는 훅과 react-intersection-observer 안에 있는 useInview 라는 훅을 사용했다.
    특정 요소에 inView = true 상태가 되면 useInfiniteQuery 안의 getNextPage() 메소드를 호출시켜 api로부터 다음 페이지의 데이터를 받는 방식이다.

  • Apex Chart

    수업중에 연습해본적 있는 차트 라이브러리이다. DOCS가 매우 보기 쉽도록 예제코드와 함께 설명되어 있어 구현하는데 시간을 정말 많이 줄여줬다. 하지만 커스텀 하는데 한계가 있어 디자인 요구사항을 수정해야 했는데 이 점이 아쉽다.

3. 후기

  • 아쉬움

    1) 사실 디자인 요구사항을 지키지 못한 부분이 많다.
    앞서 언급한 차트 라이브러리의 지원 한계도 있었지만 그 외에도 많은 세부사항들이 나와 외부의 기술력과는 무관하게 지켜지지 않았다. (대충 나의 휴먼 에러라는 뜻)
    현업에서 개발자로 일하게 되거나 이런 협업 경험을 또 하게 될 기회가 생긴다면, 반드시 개선할 것이라고 스스로 다짐해본다.

    2) 최적화를 위한 노력을 충분히 하지 못했다.
    메인페이지에서는 거의 모든 상품들에 대한 데이터를 받아온다. 이후 상세페이지로 유저가 이동할 때 추가로 해당 상품에 대한 데이터를 서버로부터 받아오도록 설계했는데 이는 큰 비효율이다. 이미 받아둔 데이터를 조각내어 상세페이지 렌더링시 props로 전해주면 추가적인 fetching 없이 페이지를 구현해 낼 수 있다.

    사용자가 직접적으로 상세페이지의 url을 입력하여 들어갈 상황까지 고려하여 데이터를 fetching하는 로직을 아얘 제거할 수는 없겠지만 전달받은 props가 있는지 여부를 판단하여 fetching을 진행할지, 말지 여부를 결정하도록 로직을 짤 수 있었을 것이다.

  • 느낀점

    물류와 테크 기반 회사에서 일할 수 있다면 커리어 성장에 큰 도움이 될것 같다는 생각을 했다.

    전 직장에서 제품 운반비, 원자재 발주 및 재고관리 등 SCM 관련 업무를 했었고 이커머스는 “큰 물” 이었다. 또는 관련 도메인을 살려 개발 관련 직군으로 종사할 수 있길 기대했다 (하고있다)

    이번 해커톤은 완벽한 기회였다. 그동안 생각해왔던 이커머스와 물류에 대한 문제를 스스로 해결해보고 내가 가진 아이디어에 대해 검증받을 수 있는 기회, 그리고 맞춤형 특전까지!

    처음 만난 사람들과 팀을 꾸렸고 프론트엔드 개발 파트로 참여해 1주일도 안되는 짧은 기간이었지만 정말 열심히 개발했다.

    결과는 참가 총 156팀 중 결선 12팀에 진출 성공! 개발 공부를 시작한지 만 1년, 리액트를 시작한지 2달만에 이룬 성과로는 정말 과분하다고 느낀다.

    결선 무대에는 정말 엄청난 팀들이 많았는데 특히 AI와 머신러닝 알고리즘을 이용한 결과물들이 많았다. 그에 반해 우리 팀은 핵심 기술의 임팩트가 약했던것 같다. 하지만 우리 팀은 그동안 없던 (없었다고 믿는)서비스를 제안했고 그 적절성 만큼은 인정받았다고 생각한다.

    너무나 즐겁고 행복한 경험을 준 컬리와 팀원들에게 감사하다는 말씀을 전한다. 앞으로 컬리로 입사전형 결과가 어떻게 될지 모르지만, 나의 1회 해커톤이자 컬리의 1회 해커톤이었던 이 행사는 삶의 큰 원동력이 될것 같다.

profile
T.T

0개의 댓글