Skip to content

Team Introduction

Jump to bottom
Songha Im edited this page Dec 3, 2021 · 25 revisions

Team Name

AlzarTakkarsen (알잘딱깔센 : 알아서 잘 딱 깔끔하고 센스있게)


Contributors
kangseokho usreon dddttt000 LeeSangHeon

강석호

  • Position : Back-end
  • Stack : React.js, styled-components, react-router-dom, axios
Work

손연주

  • Position : Back-end
  • Stack : NodeJs, Express, Axios, JWT, 0Auth, Mysql, Sequelize, Bcrypt, CryptoJS,
  • AWS : EC2, LoadBalancer, CodePipeline, Certificate Manager, Route53
Work

SR

  • 프로젝트 기획 및 아이디어 구상
    • 특정 영화에 대해 친구들과 이야기 나눌 때 서로 같은 영화를 봤어도 개인마다 느끼는 감정과 생각이 다르고 그에 따라 좋아하는 장면 또한 다르다는 걸 알았습니다. 이에 대해 좀 더 전문적으로 이야기를 나누며 사람들과 공감하고 싶어, urscene 서비스가 탄생하게 됐습니다.
  • RESTful API 문서 작성
  • 와이어프레임, 워크 플로우 작성
  • 깃허브 프로젝트 레포지토리 관리

Deploy

  • EC2 설정
  • CodeBuild / CodeDeploy / CodePipeline 을 이용한 배포 자동화
  • 도메인 구매 및 인증서 발급
  • 서버 HTTPS 배포
  • 환경변수 설정
  • 배포 실시간 점검 및 디버깅

Server

  • SignUp

    • 이메일 유효성 검사
    • 비밀번호 유효성 검사
    • 이메일 및 닉네임 중복 검사
    • Bcrypt를 이용한 비밀번호 암호화
    • 프로필 사진 미선택시 디폴트 사진으로 자동 저장
    • DB에 유저 정보 저장

  • SignIn

    • IUWT 기반 토큰 인증 기술을 이용한 로그인 구현
    • 로그인시 개인 고유의 UUID 발급, CryptoJS로 암호화 후 JWT 토큰 헤더에 실어준다. 평문 UUID는 쿠키에 담아서 JWT 토큰과 쿠키를 클라이언트로 보낸다.
    • 비밀번호 해싱 후 DB 비밀번호 값과 비교

  • Auth

    • CryptoJS로 JWT토큰에 담긴 암호화된 UUID 복호화 후 쿠키에 담긴 평문 UUID 값과 비교해서 일치하면 정상 유저라고 판단한다. 미들웨어를 만들어 유저 인증이 필요한 기능에 추가해주었다.

  • SignOut

    • JWT 토큰 삭제
    • 평문 UUID가 들어있는 쿠키 삭제

  • Withdraw

    • JWT 토큰 삭제
    • 평문 UUID가 들어있는 쿠키 삭제
    • DB에서 유저 정보 삭제

  • Google Login

    • 구글 소셜 로그인 구현

  • MyPage

    • 회원 정보 받아오기
    • 회원 정보 닉네임, 프로필 사진, 비밀번호 수정 기능 (입력한 값만 수정하도록 구현)
    • 수정한 닉네임 중복 검사, 비밀번호 유효성 검사 후 통과시 해싱해서 DB에 저장

  • My Gallery

    • 유저가 좋아한 장면, 갤러리 정보 받아오기

  • Gallery

    • 갤러리 작성
    • 나의 장면 갤러리에 추가하기

  • KOBIS OPEN API

    • 영화 검색 기능 구현
    • API 호출을 최소화하기 위해 하나의 키워드로 한 번 검색시 충분한 데이터를 DB에 저장, 프론트 응답으로는 DB에서 데이터를 찾아서 보내준다. 다음 유저가 같은 키워드로 검색시 API 호출을 하지 않고 DB에서 데이터를 찾아서 응답할 수 있다.

DB

  • DB Schema 설계
  • OPEN API를 통해 사용자가 검색한 영화 데이터 DB에 저장

임송하

  • Position : Front-end
  • Stack : React.js, Styled-components, react-router-dom, axios
Work

Common

  • 아이디어 구상
  • 와이어프레임, 워크 플로우 작성
  • 깃허브 프로젝트 레포지토리 관리

Client

  1. 로그인 페이지 기능 구현

    • useContext 이용 커스텀 훅 제작으로 전역에서 상태관리

  2. 회원가입 페이지 기능 구현

    • 이메일, 비밀번호 유효성 검사, 닉네임 중복 검사

    • 검사에 따른 메세지 제공

  3. 페이지 로딩 시 LoadingIndicator 적용

  4. 메인페이지 장르별 장면 기능 구현

    • 장르별 이미지 필터링

  5. 나의 장면 상세페이지 기능 구현

    • 나의장면 설명글 수정 및 삭제

    • 좋아요 실행 및 취소, 댓글 달기 및 삭제

  6. 마이갤러리 페이지 회원정보 수정 기능 구현

    • 프로필 이미지 수정

    • 닉네임 중복검사, 비밀번호 유효성 검사

  7. UI/UX 디자인 및 반응형 웹 CSS

  8. 랜딩 페이지 제작

이상헌

  • Position : Front-end
  • Stack : express, node.js, JWT, React, React-router-dom
Work

Client

  1. 메인 페이지
  • 인기 갤러리 기능 구현
  1. 모든 장면 보기 / 모든 갤러리 보기
  • 무한 스크롤 구현
  1. 나의 장면 게시하기 :
  • 이미지 업로드(AWS SDK) 기능 구현
  • 영화 제목 검색 및 선택(드랍 다운) 창 구현
  1. 갤러리 상세 페이지
  • 장면 사진 클릭시 장면 상세 페이지로 이동
  • 갤러리 수정 및 삭제
  • 좋아요 상태 확인 및 추가, 취소
  1. 검색 페이지
  • 검색 기능 구현
  • 갤러리 / 장면 클릭시 상세 페이지로 이동
  1. 마이 갤러리
  • 나의 장면 / 나의 갤러리 페이지네이션(더보기) 기능 구현
  • 좋아요한 장면/ 갤러리 페이지네이션(더보기) 기능 구현
  • 갤러리 / 장면 클릭시 상세 페이지로 이동
  1. 반응형 웹 (PC, Tablet, Phone) CSS 구현
  2. AWS Domain, HTTPS, 자동화 배포 설정

Clone this wiki locally