Giter VIP home page Giter VIP logo

connect-foundation / 2019-16 Goto Github PK

View Code? Open in Web Editor NEW
14.0 2.0 8.0 4.43 MB

✏스터디, 모집부터 예약까지 한번에! 스터디원을 모집하고 원하는 지역에 이용 가능한 스터디룸을 예약할 수 있도록 검색해주는 플랫폼

Home Page: https://studycombined.shop

HTML 1.46% JavaScript 97.51% Shell 1.03%
microservices-architecture reactjs expressjs bulma-css-framework

2019-16's Introduction

📝 Study Combined 📝

Documentation node node

✏ 스터디원을 모집하고 원하는 지역에 이용 가능한 스터디룸을 예약할 수 있도록 검색해주는 플랫폼입니다.

프로젝트 소개

주제 선정 이유

프로젝트 주제를 정하기 위해 강남역에서 만나기로 한 16조. 스터디룸을 예약하기 위해서 전화를 돌려보기 시작한다. 하지만 남아있는 스터디룸을 찾다가 지쳐버리는데... 두-둥

이렇게 된거 스터디룸 사용을 편하게 하는 서비스를 우리가 만들어 보자!👊

기술 스택

Front-End Back-End DevOps Etc
React Express Git Action jest
Bulma mongoDB socket
Kakao Maps API elasticsearch OAuth

특징

  • 마이크로서비스 아키텍쳐
  • 소켓 통신 프로토콜 구현
  • 결제 서비스
  • 엘라스틱 서치 검색
  • 내 지역 기반 스터디 그룹/스터디룸 검색

마이크로서비스 아키텍쳐

서비스구성도2

화면 구성

스크린샷 2019-12-23 오후 2 10 00 스크린샷 2019-12-23 오후 2 10 00
메인 페이지 검색 페이지
스크린샷 2019-12-23 오후 2 10 00 스크린샷 2019-12-23 오후 2 10 00
스터디 그룹 생성 페이지 스터디룸 예약 페이지
스크린샷 2019-12-23 오후 2 10 00 스크린샷 2019-12-23 오후 2 10 00
카카오페이 결제 페이지 결제 완료 페이지

팀원 소개

👤 이아람

  • 언제나 즐겁게 코딩하는 것이 꿈이자 목표입니다. 맏은 일은 끝까지 책임지고 진행하려 노력합니다.
  • log 서비스, group 서비스, CI/CD 담당
  • '나'에게 '이아람'이란..?
    • 김세진: 아람이가 없으면 3형제가 집을 난장판으로 만들어 놓는 느낌??
    • 임태현: 작지만 연비 좋은 슈퍼카, 식사도 그렇고 공부도 그렇다.
    • 이수배: 빠른 결단. 빠르게 적용하는 능력. 걸음속도 마저 빠른 그..

👤 김세진

  • 팀원들에게 문서화에 대한 중요성을 끊임없이 강조하는 잔소리꾼입니다. 사용자와 동료를 위한 코드를 짜기 위해 항상 생각하고 프로젝트의 큰 그림을 보는 것을 좋아합니다.
  • reservation 서비스, analytics 서비스 담당
  • '나'에게 '김세진'이란..?
    • 임태현: 수염이 우리나라에서 몇 안되게 어울리는 영국 신사, 덩치 값 less, 하지만 인생은 "세진킴"처럼...
    • 이아람: 꼼꼼대마왕이다. 항상 코드에 대한 걱정이 한가득이다🤣
    • 이수배: 필기란 이렇게 하는 것.. 정리의 중요함이랄까. 항상 나에게 강조한다. 왜 나일까..

👤 이수배

  • 주체적으로 일하는것을 좋아하고, 코드의 품질은 팀의 으쌰으쌰 하는 분위기가 중요하다고 생각합니다. 팀원 모두가 하고싶은 것을 담당해서 했으면 하는 마음입니다.
  • 마이크로아키텍처 설계 및 서비스간 통신을 위한 구조 및 클래스, 모듈
  • 서비스 : search, group
  • '나'에게 '이수배'란..?
    • 임태현: 결혼 준비해야하는데 술 먹는데 돈을 왜 이렇게 많이 쓸까... 우리의 총무, 우리의 돈과 프로젝트를 책임지는 맏형
    • 김세진: 30대의 뚝심!!! 가능성이 보이면 만들어낸다. (feat. 인디언 기우제)
    • 이아람: 자유로운 막내. 여러가지 상황에 대한 고민을 많이 한다.

👤 임태현

  • 한 곳에 이목이 가면 끝까지 파고 드는 개발자 입니다. 함수형 프로그래밍을 좋아하고, 팀내 비동기 제어 디버거로 사용됩니다.
  • 아키텍처 공동 설계, group 서비스 및 전체적인 클라이언트 담당, analytics 공동 담당
  • '나'에게 '임태현'이란..?
    • 김세진: 16조의 메인 딜러. 개발 속도가 가장 빠른 플레이어. 손이 빠른건가?
    • 이아람: 우리조 열정마왕😈 코드리뷰를 열심히 해준다.
    • 이수배: 그래.. 한창 이것저것 관심 많을 때지..

2019-16's People

Contributors

connectfoundation avatar dependabot[bot] avatar dlatns0201 avatar plm9606 avatar saygenie avatar soob-forest avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

2019-16's Issues

distributor 모듈 생성

  • 실행되는 있는 프로세스에게 요청을 받아, 정보 저장
  • 새로운 프로세스가 생성되면, 모든 프로세스들에게 정보 추가 요청
  • 프로세스가 없어지면, 모든 프로세스들에게 정보 삭제 요청
  • 자신이 모은 정보를 3초마다 api gateway한테 전달

GitHub Actions로 PR test 검증 로직 구현

완료조건

  • PR 요청이 올 경우 jest로 테스트를 돌린다
  • 테스트 실패시 close PR, issue 생성
  • 한명 이상의 리뷰어가 리뷰를 남기고 automerge 라벨을 붙이면 자동으로 머지한다

스터디그룹 상세페이지 정보 카드 구현

완료조건

  • 생성된 컴포넌트들을 조합하여 스터디그룹 상세 페이지의 스터디그룹 정보 카드를 구현한다
  • 프로토타입과 동일한 색상으로 만든다
  • Bulma css를 적용한다

카카오프렌즈 피쳐리스트 실습

FE

BE

  • 모든 아이템 불러오기
  • 인기도 순에 따라 데이터 불러오기
  • 만들어진 날짜 순에 따라 데이터 불러오기
  • 현재 세일 상태인 데이터들 불러오기

파트너페이지 캘린더

캘린더 클릭시 해당 일의 예약 리스트 슬라이딩
예약자 이름 클릭시 예약자의 전화번호 등 기본정보 표시

파트너 데이터베이스 생성

  • 개발 서버에 8101:27017 컨테이너로 생성 (파트너 사용자 DB)
  • 외부에서 8101로 접근 가능
  • root 유저 생성
  • mongoDB 버전은 2019년11월12일 기준 latest

npm 에서 모듈 취약점을 알려주는데 몇가지가 있음

added 916 packages from 610 contributors and audited 878659 packages in 365.95s
found 5 high severity vulnerabilities
run npm audit fix to fix them, or npm audit for details
PS C:\Users\soob\Desktop\boostcamp\2019-16\server> npm audit

                   === npm audit security report ===                        

Run npm install --save-dev @commitlint/[email protected] to resolve 5 vulnerabilities

SEMVER WARNING: Recommended action is a potentially breaking change

High Prototype Pollution

Package lodash

Dependency of @commitlint/cli [dev]

Path @commitlint/cli > @commitlint/lint > @commitlint/rules >
@commitlint/ensure > lodash

More info https://nodesecurity.io/advisories/1065

High Prototype Pollution

Package lodash

Dependency of @commitlint/cli [dev]

Path @commitlint/cli > @commitlint/lint > lodash

More info https://nodesecurity.io/advisories/1065

High Prototype Pollution

Package lodash

Dependency of @commitlint/cli [dev]

Path @commitlint/cli > @commitlint/load >
@commitlint/resolve-extends > lodash

More info https://nodesecurity.io/advisories/1065

High Prototype Pollution

Package lodash

Dependency of @commitlint/cli [dev]

Path @commitlint/cli > @commitlint/load > lodash

More info https://nodesecurity.io/advisories/1065

High Prototype Pollution

Package lodash

Dependency of @commitlint/cli [dev]

Path @commitlint/cli > lodash

More info https://nodesecurity.io/advisories/1065

found 5 high severity vulnerabilities in 878659 scanned packages
5 vulnerabilities require semver-major dependency updates.

완료조건

  • 취약점 해결

스터디 태그로 검색

  • 스터디 상세 페이지의 이름 하단에 태그 구현
  • 태그 클릭시 해당 키워드로 검색된 메인 페이지로 이동

케로셀 구현

  • 포커스 되어있지 않는 섹션은 로딩 컴포넌트로 변경
  • 포커스 된 페이지의 리렌더링 프로세스 구성

스터디 태그 컴포넌트 생성

완료조건

  • 재사용 가능한 스터디 태그 button 컴포넌트 생성
  • 프로토타입과 동일한 색상으로 만든다
  • Bulma css를 적용한다

네이버 로그인

요청 데이터 필드

  • 이름
  • 이메일
  • 연령대
  • 성별

인증 상태 확인

  • 관련 미들웨어 작성 (passport)

파트너 로그인 화면

파트너를 위한 로그인

  • 로그인 버튼을 누르면 POST /auth/partners/login 요청을 하게 되고, 요청이 오기 전까지 로그인 버튼을 loading 버튼으로 변경한다.
  • 로그인이 성공하면(pass 데이타가 도착하면) /partners 페이지로 리디렉션 시킨다.
  • 로그인이 실패하면(fail 데이터가 도착하면) 로그인 입력창 밑에 경고 문구를 만든다.
  • 에러가 발생하면 /partners/login으로 리디렉션 시킨다.
  • 이메일 입력창, 비밀번호 입력창, 로그인 버튼은 컴포넌트로 재사용한다.

스터디 마감 버튼

  • 스터디장일 경우에만
  • 조건(인원수) 충족시 마감 버튼 활성화
  • 토글로 구현
  • 마감 버튼 클릭시 예약 버튼 활성화

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.