🔥

 👉 ALL-CON 바로가기 

 👉 Github 바로가기 

 👉 Project 회고 바로가기 

  • ALL-CON은 각 사이트들의 콘서트 정보를 한 눈에 볼 수 있는 콘서트 종합 정보 플랫폼이에요.

  • 각 사이트들의 단독 판매 콘서트까지 한눈에 보고 비교해보세요!🤩

  • 콘서트를 가고 싶은데 같이 즐길 친구가 없어 망설이셨나요?😢

  • 콘서트의 감동을 함께 나눌 콘친을 찾아 보세요!🤼‍♂️




🤔 ALL-CON은 무슨 뜻인가요?


"콘서트가 열리는 모든 날에 참석함"을 의미해요.

ALL-CON과 함께 올콘 참석에 성공하세요!🏃‍♀️🏃🏃‍♂️



🤔 ALL-CON에서는 무엇을 할 수 있나요?


자세히보기

👉 각 사이트들의 콘서트 정보(단독 콘서트 포함)를 한 눈에 볼 수 있어요.

👉 현재 인기 많은 콘서트, 오픈이 임박한 콘서트, 최근 등록된 콘서트 정보를 한눈에 볼 수 있어요.

👉 문자 알림 또는 메일 알림 기능을 이용해서 내가 원하는 콘서트의 예매 오픈시간을 놓치지 않을 수 있어요.

👉 콘서트 정보를 조회해서 콘서트장의 위치정보를 알 수 있어요.

👉 콘친 인증을 하면 콘서트에 함께 갈 콘친을 찾을 수 있어요.

👉 콘친이 될 유저의 정보를 볼 수 있어요.

👉 콘서트에 대한 기대 댓글을 작성할 수 있어요.

👉 내가 찾는 콘서트를 검색할 수 있어요.




🎬 ALL-CON 서비스 기능별 시연


  랜딩페이지

  • 데스크탑

    landing

  • 모바일

    landing(mobile)



  로그인

  • 데스크탑

    login_success

  • 모바일

    login_success(mobile)

  소셜 로그인

  • 데스크탑

    social_login_success

  • 모바일

    social_login_success(mobile)

  회원가입

  • 데스크탑

    signup_success

  • 모바일

signup_success(mobile)

  비밀번호 초기화

  • 데스크탑

    password

  • 모바일

password(mobile)



  메인페이지(포스터슬라이드)

  • 데스크탑

    main_jumbotron

  • 모바일

main_jumbotron(mobile)

  메인페이지(콘서트정보)

  • 데스크탑

    main_concert

  • 모바일

    main_concert(mobile)

  메인페이지(댓글)

  • 데스크탑

    main_comment

  • 모바일

    main_comment(mobile)



  콘서트페이지

  • 데스크탑

    concert

  • 모바일

concert(mobile)



  콘친찾기페이지(게시글 작성)

  • 데스크탑

    conchin_write

  • 모바일

conchin_write(mobile)

  콘친찾기페이지(게시글 레이아웃 변화)

  • 데스크탑

    conchin_article

  • 모바일

conchin_article(mobile)

  콘친찾기페이지(게시글 보기)

  • 데스크탑

    conchin_detail

  • 모바일

conchin_detail(mobile)



  마이페이지

  • 데스크탑

    mypage

  • 모바일

    mypage(mobile)

  마이페이지(프로필 수정 페이지)

  • 데스크탑

    mypage_profile

  • 모바일

    mypage_profile(mobile)

  마이페이지(콘친인증 페이지)

  • 데스크탑

    mypage_conchin

  • 모바일

    mypage_conchin(mobile)



  헤더

  • 데스크탑

    header

  • 모바일

    header(mobile)

  로그아웃

  • 데스크탑

    logout

  • 모바일

    logout(mobile)



🎥 ALL-CON 서비스 발표 영상





🤔 ALL-CON에서는 무엇을 담당하였나요?


🖥 Front-end
TypeScript React Redux Sass

  메인페이지

  • 콘서트 알람 조회 & 요청 기능 구현

  • 콘서트 댓글 작성 유효성 검사 & 수정 & 삭제 기능 구현


  콘서트페이지

  • 콘서트 페이지 레이아웃 구현

  • 콘서트 조회수순 & 임박예정순 & 등록일순 조회 기능 구현

  • 콘서트 상세 페이지 구현

  • 카카오 개발자 도구를 이용한 카카오맵 API 기능 구현


  모달

  • 로그인 모달 창 구현

    • 일반 로그인 & 구글 & 카카오 소셜 로그인 기능 구현

  • 회원가입 모달 창 구현

    • 회원가입 유효성 검사 기능 구현

  • 비밀번호 찾기 모달 창 구현

    • 타이머 & SMS 발송 및 입력값 유효성 검사 기능 구현



⚙️ Back-end
JavaScript Node.js Express MySQL Sequelize

  구조 작성

  • 라우터 & 컨트롤러 뼈대 구조 구현

  • Sequelizer 설정

    • migrations, models, seeders, associations 설정

  민감정보 암호화

  • crypto를 이용한 암호화

    • 해쉬 알고리즘과 솔트를 이용한 민감정보 암호화

  로그인 컨트롤러

  • JWT 인증방식 로그인 기능 구현

  • 닉네임 중복없는 OAuth 소셜 로그인 기능 구현

    • 구글 API & 카카오 API 를 이용한 두가지 로그인 방식 지원

  문자 인증 컨트롤러
  • Twillio를 이용한 6자리 난수 코드 SMS 전송

  웹 크롤링

  • Cheerio를 이용한 웹 크롤러 구현

  • Node Schedule을 이용한 크롤링 자동화 구현




🔧 Deployment
Amazon AWS

  클라이언트 배포 자동화

  • S3를 이용한 클라이언트 배포

  • CloudFront를 이용한 클라이언트 HTTPS 배포

  • CodePipeLine을 이용한 배포 자동화

  • Route 53을 이용한 도메인 연결




🎥 개인 기술 발표 영상




Q. 왜 Cheerio를 사용했나요?

A. HTML / XML 문서를 매우 쉽게 데이터 파싱 및 추출은 물론이며, 정말 빠른 속도로 가져올 수 있기에 선택하였습니다. 빠른 속도와 더불어 적은 리소스로 서버의 부담을 최대한 줄일 수 있었습니다.


Q. 왜 node-schedule을 사용했나요?

A. 앞서 말씀드린대로 무분별한 크롤링이 아닌, 1일 1회의 크롤링을 제어하기 위해 작업을 반복적으로 그리고 서버 정기점검 시간을 피할 수 있는 특정시간에 처리해야 할 수 있어야 했습니다.

npm compare 사이트를 통해 대표적인 스케쥴러 라이브러리 3가지를 선정하였으며, 그중 Agenda는 mongo DB가 반드시 필요하므로 제외하였습니다.


node Schedule 라이브러리는 가장 역사가 길며 다운로드수가 많은걸 보아 다양한 유저들이 사용하였다 판단되므로 에러핸들링하기 가장 진입장벽이 낮아보이는 node-schedule 라이브러리를 선택하였습니다.



Footer