Team

Team Introduction

사범기

• Postion : Backend (팀장)
• Stack : nodeMailer, crypto-js, node.js, multer-s3, sequelize, express, jwt, mysql, aws-s3, aws-ec2, aws-RDS , aws-Route53, aws-CloudFront, ELB, Axios,socket.Io
• Contributions

• Node.js
  • Node.js 프레임워크 Express 기반 백엔드 개발 환경 구축
  • Sequelize ORM과 MVC 디자인 패턴 사용
  • MySQL 데이터베이스 연결 및 환경변수 세팅
  • Sequelize의 Migrations, Models, Seeders 세팅
  • CRUD 기능
• Auth
  • crypto-js를 활용한 암호화
  • nodeMailer를 활용한 회원가입 시 이메일 인증 링크 전송, 인증 후 로그인 가능
  • Passport를 사용하지 않은 Oauth 2.0 이용한 소셜로그인
  • JWT을 이용한 자체 회원가입 및 로그인 인증 구현
• Location
  • 현재 위도 경도를 사용하여 위치기반 데이터를 전달
• Chat
  • socket.io를 이용한 실시간 채팅
• AWS
  • AWS 배포 환경 구축
  • S3, EC2 생성 및 배포 환경 구축
  • RDS 생성 및 데이터베이스 구축
  • 회원 프로필, 동네소식 글, 중고거래 글 S3 이미지 업로드 구현 (multer 등 사용)
  • 도메인 구매 및 ACM을 활용한 SSL 인증서 발급
  • Route 53을 이용한 호스팅 영역 레코드 생성, HTTPS 연결
  • CloudFront 세팅 및 대체 도메인 추가, SSL 인증서(버지니아 북부) 적용
  • LoadBalancer 세팅, 리스너 세부설정 및 SSL 인증서 적용
  • LoadBalancer를 이용한 http → https 리다이렉트 적용

이성민

• Postion : Backend (팀원)
• Stack : nodeMailer, crypto-js, node.js, multer-s3, sequelize, express, jwt, mysql, aws-s3, aws-ec2, aws-RDS , aws-Route53, aws-CloudFront, ELB, Axios,socket.Io
• Contributions

• Node.js
  • Node.js 프레임워크 Express 기반 백엔드 개발 환경 구축
  • Sequelize ORM과 MVC 디자인 패턴 사용
  • MySQL 데이터베이스 연결 및 환경변수 세팅
  • Sequelize의 Migrations, Models, Seeders 세팅
  • CRUD 기능
• Auth
  • crypto-js를 활용한 암호화
  • nodeMailer를 활용한 회원가입 시 이메일 인증 링크 전송, 인증 후 로그인 가능
  • Passport를 사용하지 않은 Oauth 2.0 이용한 소셜로그인
  • JWT을 이용한 자체 회원가입 및 로그인 인증 구현
• Location
  • 현재 위도 경도를 사용하여 위치기반 데이터를 전달
• Chat
  • socket.io를 이용한 실시간 채팅
• AWS
  • S3, EC2 생성 및 배포 환경 구축
  • RDS 생성 및 데이터베이스 구축
  • 회원 프로필, 동네소식 글, 중고거래 글 S3 이미지 업로드 구현 (multer 등 사용)
  • 도메인 구매 및 ACM을 활용한 SSL 인증서 발급
  • Route 53을 이용한 호스팅 영역 레코드 생성, HTTPS 연결
  • CloudFront 세팅 및 대체 도메인 추가, SSL 인증서(버지니아 북부) 적용
  • LoadBalancer 세팅, 리스너 세부설정 및 SSL 인증서 적용
  • LoadBalancer를 이용한 http → https 리다이렉트 적용

김정훈

• Postion : Frontend (팀원)
• Stack : Javascript, React and Hooks, ReactRouter, Axios, express,KakaoMapsAPI, Styled-Compont, Daum Postcode
• Contributions

• 팀 로고 디자인
• 랜딩 페이지
  • 패럴렉스 스크롤링 애니메이션
  • 화면 너비에 따른 반응형 UI
  • Footer 디자인
• 마이페이지
  • 마이페이지 프로필 이미지, 닉네임, 동네 수정 기능
    • 원하는 정보만 골라서 수정 가능하도록 구현
  • 본인과 관련된 게시글을 카테고리별로 조회
• 비밀번호 변경 및 회원탈퇴 모달
  • 유효성 검사를 통한 비밀번호 변경
  • 유저 재 확인 및 회원확인 후 회원탈퇴
• 동네 소식 작성 페이지
  • 동네소식 카테고리 설정 기능
  • FormData를 통한 이미지 파일 첨부 기능
  • KakaoMaps AIP를 사용하여 지도 첨부 기능, 맵 마커 커스텀 디자인
• 중고 거래 상세보기 페이지
  • 판매 상태 변경에 따른 즉각적인 판매 상태 태그 변경
  • Slider를 사용하여 여러가지 이미지를 넘겨 볼 수 있도록 구현
  • 일반, 제시 거래에 따라 다른 옵션 선택 기능
  • Styled-Component를 통한 일반, 제시 거래에 따른 다른 UI 구현
  • 게시글 수정 페이지
• 중고 거래 작성 페이지
  • 중고거래 작성 페이지 css
• 채팅 페이지
  • 채팅 목록 및 채팅 화면 css

이승준

• Postion : Frontend (팀원)
• Stack : React and Hooks, JS, ReactRoter, styled-components, Axios, Sequelize, mysql, express
• Contributions

• 로그인, 회원가입 모달
  • 회원가입시 이메일, 닉네임, 암호에 대하여 유효성 검사를 하였습니다.
  • 로그인과 회원가입 모달창이 자유롭게 전환되도록 구현하였습니다.
  • 회원가입시 주소를 입력할 때 위치기반인증이 되도록 구현하였습니다.
• 랜딩 페이지
  • header 부분을 반응형으로 제작하여 너비가 줄어들면 햄버거 메뉴로 바뀌게 하였습니다.
  • 움직이는 글자를 추가하기 위해 레이어를 조정하였습니다.
• 동네소식 리스트 페이지
  • 카테고리별 게시글 조회
    • 카테고리를 선택하면 해당 카테고리 글만 보이고 다시 선택하면 전체조회로 변경되도록 하였습니다.
    • 선택한 카테고리에 css를 다르게 지정되게 하였습니다.
  • 검색어를 통해 해당하는 글만 조회할 수 있게 하였습니다.
  • 무한 스크롤을 통해 불러오는 데이터양을 조정해서 조금씩 나타나게 하였습니다.
  • 글이 생성된 시간을 사용하여 언제 작성 되었는지 표시하였습니다.
• 동네소식 상세 페이지
  • 글에 대한 수정, 삭제 기능을 추가하고 작성자만 이 기능을 사용할 수 있게 하였습니다.
  • 댓글 작성 기능을 추가하고 수정과 삭제는 댓글 작성자만 가능하게 두었습니다.
• 중고거래 리스트 페이지
  • 제시글에 마감기한에 따른 남은 시간을 표시하였습니다.
  • 동네소식 리스트 페이지와 같은 기능을 구현했습니다. (검색어, 카테고리, 무한 스크롤)
    • 검색어를 입력하면 제목또는 내용을 필터하게 구현했습니다.
• 중고거래 글 작성 페이지
  • 가격에는 숫자만 가능하고 8자리 제한을 두었습니다.
  • 마감기한을 두기위해 react-datepicker을 사용하여 달력 구현을 구현하였습니다.
  • 사진은 5장까지 제한을 두고 메인 사진을 선택했을 때 css가 달라지게 하였습니다.
• 채팅 페이지
  • 채팅에 나타나는 메시지 css작업을 통해 나의 메세지와 상대방의 메시지를 구분하였습니다.
  • 채팅헤더 부분에 어떤 게시글에 대한 방인지 알 수 있도록 구현했습니다.