Coder Social home page Coder Social logo

f-lab-edu / jbly Goto Github PK

View Code? Open in Web Editor NEW
48.0 1.0 4.0 24.14 MB

[성능 40배 튜닝] 크롤링을 이용한 쇼핑몰 모아보기 서비스

Java 49.86% Python 36.27% HTML 2.52% CSS 1.68% JavaScript 9.28% Dockerfile 0.39%
ai github-actions java jpa mysql pycharm python react springboot tensorflow vscode

jbly's Introduction

Hits

👚JBLY

두 팀원 모두 의류 산업에 관심이 많아 평소 자주 사용하는 패션 플랫폼을 직접 만들어보고자 시작하게 되었습니다. 사이트 구조와 특징이 각기 다른 세 개의 쇼핑몰에서 상품 데이터를 스크래핑한 후 화면에 사용자가 알아보기 쉽게 보여주는 서비스 입니다. (추후 성과에 대한 내용을 추가 할 예정입니다)

💡 문제 상황과 해결 방법

1. 동적 크롤링을 하기 위해 Selenium을 사용한 결과 4078개의 데이터를 MySQL DB에 적재하는데 총 2시간 28분이 걸렸습니다.

➡️ 동적 크롤링을 할 때 추가한 Selenium 라이브러리를 사용하기 위해선 sleep과 같이 병목이 발생할 수 있는 코드를 추가해야 했습니다. 또 스크래핑 하는 과정에서 브라우저가 렌더링 되는 시간을 전부 기다려야 했기 때문에 속도가 느렸고, 웹 스크래핑 전반적인 과정이 Single-Thread로 동기처리되어 성능 개선이 필요했습니다. MySQL에 스크래핑한 데이터를 적재하는 과정에서도 단일 insert를 반복문으로 처리했기 때문에 4078개의 데이터를 Python으로 스크래핑해 DB에 적재하는데 약 2시간 30분이 걸렸습니다.

☑️ 요구사항

1. 크롤링 기능

  • 크롤링은 하루에 1번 주기적으로 일어나야하며, 크롤링 주기는 바뀔 수 있다.
  • 3개 이상의 쇼핑몰을 크롤링하여 해당 쇼핑몰의 데이터를 MySQL에 적재한다.

2. JBLY 쇼핑몰 기능

  • 사용자는 초기 화면에서 회원가입, 로그인을 할 수 있다.
  • 사용자는 카테고리별로 상품을 조회할 수 있다.
  • 상품을 클릭하면 상품의 상세 정보를 확인 할 수 있다.
  • 로그인한 사용자는 마이페이지 기능과 로그아웃 기능을 사용할 수 있다.

⚒️ Project Architecture

Project_Architecture

📖 사용 기술 및 개발 환경

Backend Side

  • Spring Boot, Java17, Gradle, Naver Cloud, H2, MySQL, JPA

Frontend Side

  • HTML, CSS, JS, React

Data Engineering

  • Python, BeautifulSoup

Infra

  • GithubAction Cron Scheduler, GithubAction CI

🛠 Project UI/UX

Project UI/UX

✅ Project Goal

1. 요구사항 충족

  • 요구사항을 해결하면서 문제를 발견하고 정의하며, 팀의 상황에 맞는 최선의 조건을 선택해 문제를 해결합니다.

2. Backend Side OR Infra 개발 이외에 다양한 환경 경험

  • 기술 스택을 사용하면서 해당 기술의 컨셉을 이해하고 사용하면서 어떻게 통합하여 사용하는지에 대한 경험을 쌓습니다.

3. 테스트 격리와 요구사항에 맞는 테스트 코드 작성

4. 병렬 프로그래밍으로 성능 개선

  • 2시간 28분이 걸린 스크래핑 작업을 5분 이내로 줄이는 것이 목표입니다.

5. 커뮤니케이션 스킬 향상

  • 상대 팀원과 지속적으로 소통하며 빠르고 정확하게 기능을 구현 할 수 있도록 합니다.
  • 구체적이고 꾸준한 상호 피드백으로 "계속 협업 하고 싶은 팀원"이 될 수 있도록 노력합니다.

✍🏻 협업 제약조건

  • [Github-flow]에 따라 프로젝트에 대해 공동 작업을 수행합니다.(https://docs.github.com/ko/get-started/quickstart/github-flow)
  • 이슈별로 브랜치를 관리하며 모든 작업은 코드리뷰를 받아야합니다.
  • 코드리뷰가 끝난 작업은 반드시 상대 팀원의 APPROVE가 있어야 MERGE가 가능합니다.
  • 이슈는 최대한 작은 작업 단위로 생성하고 추후 진행할 기능에 대해서는 반드시 팀원과 협의합니다.
  • 매주 일요일 주간 피드백에 배운 것과 느낀 것, 상대 팀원의 칭찬할 점과 개선하면 좋을 점을 적어 공유합니다.

🎥 Demo Video

  • 추후 업로드 예정입니다.

🏠 Blog

👀 Code Convention

jbly's People

Contributors

ecofriendlyapplesu avatar parksojeongjeong avatar f-lab-bot avatar

Stargazers

김민지 avatar  avatar prebird avatar Daeyeol Ryu avatar 윤여준 avatar Tuan Duc Tran avatar Jeonjiyee avatar  avatar 이상민 avatar Jeongrok Oh avatar puy avatar 정주영 avatar Woo KyungJun avatar Minsuk kim avatar  avatar aorri2 avatar Eugene J. Ryu avatar luckshim avatar Yeonguk avatar  avatar Penguin avatar MiGyeong Kim avatar  avatar  avatar Dveamer avatar JIAH LEE avatar 2jun0 avatar Nari Yoo avatar drkdev avatar 손현경 avatar Hyun Yi avatar Sangwoo Joh avatar SangGyu Lee avatar Hwa Young, Lee avatar  avatar Jaeyoung, Choi avatar bigboss avatar JoonHyeok Oh avatar Hyeonguk Ryu avatar  avatar 김병준 avatar 이은비 avatar  avatar  avatar f-lab avatar  avatar youngsik won avatar Habist avatar

Watchers

 avatar

jbly's Issues

[feature/detailhtml] the-verlin site product detail html crawling

url참조 방식의 단점

  • jbly가 해당 url을 위한 하나의 경로가 되어 버린다.
  • jbly가 url호스트 서버와 계속 통신하는 서버 사이클에 종속된다.
  • 참조 url이 바뀔 경우 해당 url을 더이상 사용할 수 없고 변경해줘야 하는 문제가 발생할 수도 있다.

->위와 같은 문제들을 해결하기 위해 파일 저장 방식을 url참조에서 html 크롤링으로 변경

[refactor/custom-annotation] 인증 인가를 위한 custom annotation 생성

문제 정의

  • signup을 하려고 하는데 인증 인가 로직이 signup api에도 수행되는 것이 문제
    -> excludePathPatterns에 추가할 수 있지만 이렇게 되면 추후 생길 인증 인가 로직이 필요없는 api도 다 추가하는 작업을 해야함
    -> url 패턴 매칭은 모든 api에서 인증 인가가 필요할 때 유용할 것 같다고 생각

  • signup url 패턴을 추가하는 것이 과연 좋은 방법인가?
    -> 우리 서비스는 인증인가가 필요없는 api도 많아서 url 매칭 방법이 효율적인지에 대해 고민해봐야함

어떻게 해결 할 것인가?

핸들러마다 애노테이션을 달아서 컨트롤러에서 구분

[feature/react-detailpage] product detail information page 구현

고민해볼 내용

  • db에 적재되어있는 detailInfo url과 mapping하는 방식, html 코드 전체를 띄워주는 방식 중 어떤 방식을 택할 것인지?
    -> 전자 방식을 선택하면 상세 페이지를 볼 때마다 트래픽이 외부 사이트(실제 쇼핑몰 사이트)로 나가게 됨.
    -> 코드 구현은 간편하지만 JBLY 비즈니스 측면에서 이점이 없음(ex. 수수료)
    -> 후자 방식은 한 product를 선택 했을 때 그 product의 html만 가져오는 방식으로 구현 할 수 있음(속도, 용량 컨트롤 필요)

[feature/auth] 회원 인가 처리

기능

  • 회원 인가 기능

상세 내용

  • 로그인에 성공한 회원은 서비스를 이용할 수 있습니다.
  • Session을 통해 구현합니다.
  • Session을 갖고 있는 사용자가 보내는 모든 요청은 Controller 처리 전에 전처리됩니다.

❓ Filter와 Interceptor중 어느 것을 사용해야 할 지 선택해야합니다.

🍎 Spring Security 를 사용하지 않는 이유는 불필요한 의존성 추가라고 생각되기 때문입니다.

[chore/flyway] flyway 적용

🍎 팀원 각각의 Local에서 진행된 프로젝트가 이젠 Cloud를 사용함으로 같은 DB를 바라보게 됩니다. DB 형상 관리가 필요하다고 생각되어 형상 관리 툴인 flyway를 적용합니다.

[feature/logout] 회원 로그아웃 기능

기능

  • 회원로그아웃 기능

상세 내용

  • 로그인된 사용자 상태를 로그아웃 시킵니다.
  • 인가가 허용된 사용자의 토큰을 삭제합니다.
  • 세션을 삭제시킨 후 redirect로 메인 페이지로 이동합니다.

[feature/detailhtml-p]porterna site product detail html crawling

고민할 내용

  • 태그 구조가 more-cherry, the-verlin과 다름
  • 이미지가 나열되어 있는 형식이 아니라 버튼을 눌렀을 때 다음 이미지가 보여지는 구조에서 추후 이미지 크롤링을 어떻게 할지?
  • 상세 페이지 태그 크롤링 과정에서 일어날 수 있는 exception

[feature/logIn] 회원 로그인 기능

기능

  • 회원로그인 기능

상세 내용

  • 가입된 회원의 정보를 갖고 회원 로그인을 진행합니다.

  • 사용자는 가입된 회원 정보를 입력합니다.

  • 필수 정보 : 아이디, 비밀번호

  • ❗ 비밀번호는 암호화 과정을 거쳐 DB에 있는 데이터와 비교합니다.

🍎 회원 로그인을 하기 위해 아래 과정을 진행합니다.

  1. 필수 정보를 모두 입력하였는지 검증 아이디, 비밀번호
  2. 입력된 비밀번호를 암호화
  3. 암호화된 비밀번호와 아이디를 DB에 조회해 일치한 값이 있다면 로그인 성공 메세지를 띄우고 실패하면 실패 메세지를 띄웁니다.

[feature/product] paging을 이용한 상품 조회 기능

  • 상품 이름을 통해 해당 상품을 조회할 수 있다.

  • 상품 조회 후 상품 클릭시 상세정보(상품 이름, 카테고리, 쇼핑몰 이름, 가격, 상품 등록일)가 보여진다.

  • 사용자는 쇼핑몰 이름을 조회해 해당 쇼핑몰의 전체 상품을 조회할 수 있다.

  • 사용자는 카테고리 별로 상품을 조회할 수 있다.

  • category:
    TOP,
    BOTTOM,
    OUTERWEAR,
    SHOES,
    ACCESSORY

[chore/setting] 프로젝트 생성

  • 프로젝트 초기 설정

세부 내용

  • Project: Gradle(7.6)
  • Language: Java
  • Spring Boot: 3.0.2
  • Packaging: Jar
  • Java: 17
  • Dependencies: Spring Web, Lombok

[feature/signup] 회원가입 기능

회원가입 기능

  • 중복된 아이디는 사용이 불가능하다.
  • 사용자 비밀번호는 암호화되어 저장된다.
  • 아이디와 비밀번호는 각각 유효성 검사가 진행된다.

추후 구현할 내용

회원가입 테스트 코드 작성

Naver Cloud JBLY DB 연동

  • Naver Cloud Mysql DB 생성
  • DB Public Domain 생성
  • 팀원에게 DB 접근 권한 할당
  • Test Table을 만들어 DB 연결 Check
  • Spring Application DB 연결
  • Crawling Application DB 연결

[test/Account_XXX] 회원 Entity TestCode 작성

기능

  • 단위 테스트, 통합 테스트, 인수 테스트 중 명세에 알맞는 것을 선택해 사용합니다.

상세 내용

  • 우선순위는 단위테스트 > 통합 테스트 > 인수 테스트입니다.
  • 중요한 것을 명세를 검증하는 것입니다. 즉, 의미있는 TestCode를 작성하는 것입니다.

🧪 명세를 테스트합니다.

  • 회원 가입 테스트 (test/Account_signUp)
  • 회원 로그인 테스트 (test/Account_login)
  • 회원 수정 테스트 (test/Account_update)
  • 회원 삭제 테스트 (test/Account_delete)

[infra/redis] Redis 세션 클러스터링

🍎 인가 처리 시 NCP에 존재하는 Session table에서 인가 정보를 처리하는 것이 아닌 Redis nosql을 사용해 인가 처리를 수행합니다.

📝 Redis를 사용하는 이유는 아래와 같습니다.

  • Redis는 InMemory DB로 빠른 Access를 제공합니다. Redis는 메모리 내에서 데이터를 저장하고 읽기 때문에 디스크 Access에 비해 속도가 빠릅니다. 결과적으로 웹 애플리케이션의 응답 시간을 줄일 수 있습니다.

    • JBLY Project에선 위와 같은 이유로 도입해 사용합니다.
  • 그 외에 Redis를 사용할 경우. 웹 애플리케이션의 확장성, 지속성 및 유연성을 향상시킬 수 있습니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.