Part of your World

0️⃣  Instagram 클론코딩 ⭐️

Instagram 클론코딩

1️⃣ 기술 스택

FrontEnd

• Tech stack
• Styled Component
• React Router
• React Query
• React

BackEnd

• Tech stack
• Spring Framework
• Spring Security
• Amazon EC2
• RDS
• Redis(Remote Dictionary Server)
• Spring Data
• Spring Boot
• Querydsl

2️⃣ 아키텍처 및 설계

• ERD(클릭하시면 이미지를 보실 수 있습니다)
• 
• API 명세서
• 제목 없음

3️⃣ 트러블 슈팅

• 트러블 슈팅
• 
• 

4️⃣ 기능구현

• 기능소개
• 
• 
• 

5️⃣ Sites & Notion

Web page

Team Notion

5조 Instagram 클론코딩

시연영상

https://www.youtube.com/watch?v=p8W-KzFsETk&t=3s

Github Organization

hanghaeClone3team

6️⃣ Teammates

• 팀원들과 함께 ERD에 대해 공부를 하여 같이 만들었습니다. 추가적인 기능에 대해서 같이 논의하고 필요한 부분을 수정하였습니다.
• 게시글에 사진과 간단한 동영상을 올릴 수 있도록 확장자를 추가하였고, 용량은 10MB로 제한을 두어 속도가 느려지는 것에 대비하였습니다.
• 사용자 1명당 무한으로 좋아요를 누르지 못하게 로직을 만들었고, 댓글에 대댓글은 한개까지만 허용하여 무한으로 대댓글이 생성하는 것을 막았습니다.
• websocat을 스톰프로 적용하여 1:1 메세지 기능과 채팅기능을 완성하여 다른 팀원이 만든 채팅방과 연결하였습니다.
• CI/CD를 고민과 redis 연결을 위한 docker 공부
• 해쉬태그에 대한 JPA DB 로직 고민(쿼리 dsl 연습)
• 아키텍처 설계 - 한정된 예산을 고려하여 시스템 아키텍처를 구성하였습니다.

7️⃣ Contact

이름 Position 깃허브 주소

서비스 이용 사이트 : https://ddal-ggak-fe.vercel.app/

사용설명서 : https://youtu.be/DQg2FMLQ_P4

0️⃣ 딸깍 프로젝트

🎯프로젝트 프리뷰

<aside> 🟢 딸깍 프로젝트는 기존의 단조롭고 어려웠던 협업 툴과는 다르게, 쉬운 조작감과 점수화 등으로 열정 넘치는 프로젝트 관리를 가능하게 합니다.

• 여러가지의 설정 없이, 필수 설정들만 ‘원클릭’으로 해결할 수 있습니다.
• 팀별로, 개인별로, 날짜별로 내가 해결하고 있는/해결한 티켓들을 찾아볼 수 있습니다.
• 개인의 점수를 쌓아가며 성취감을 느껴보세요. </aside>

주요 기능

<aside> 🟢 메인 기능들은 다음과 같습니다 :

• 프로젝트와 필요한 업무(Task), 팀(Label), 티켓(Ticket)을 생성할 수 있습니다.
• 팀원이 티켓 완수 시 팀장의 리뷰를 받아 티켓을 완료할 수 있습니다.
• Ticket은 Task 기반의 점수를 획득함으로써, 무분별한 티켓 생성을 방지할 수 있습니다. </aside>

1️⃣ 딸깍 기획

딸깍 프로젝트는 다음의 목표로 제작되었습니다.

<aside> 🟢 기획 의도

• "딸깍"은 개인의 평가에 더 집중한 업무 및 성과 관리 시스템
• "딸깍, Ticket 시스템으로 각 팀원의 업무 추적"
• "딸깍, 중요도와 난이도를 고려한 Ticket 점수 시스템"
• "딸깍, 업무 관리에 효율성과 정확성을 더한 솔루션"
• 개인이 처리한 업무를 점수로 계산하여 평가하는 OKR 솔루션 </aside>

2️⃣ 딸깍 기능

<aside> 🟢 JIRA의 Ticket 시스템과 Github의 Commit 로그 시스템을 합친 업무 관리 시스템

• Task : 하나의 Task에서 팀별 카테고리(마케팅팀, FE팀, BE팀, UI/UX팀) 생성이 가능하고, 각 카테고리의 관리자가 Task를 이행하기 위한 Ticket을 생성합니다.
• Ticket 시스템 : 팀원은 원하는 티켓을 가져가 이를 이행합니다. 관리자의 Ticket 리뷰가 끝날 경우, 개인의 티켓로그에 반영됩니다.
• Ticket 점수 시스템 : 중요도, 난이도 등에 따라 점수가 매겨져있고 사용 끝난 티켓로그에 반영됩니다. </aside>

시장조사

3️⃣ 기술 스택

<aside> 🟢 아래의 스택 부분을 클릭하시면, 어떤 곳에서 활용되었는지 확인할 수 있습니다.

</aside>

Common

Communication

• linear
• Slack

FrontEnd

Tech stack

• Typescript
• React Query
• React Router
• ESLint
• Vercel
• Prettier
• React Hook Form
• Styled Component
• React

BackEnd

Tech stack

• Mapstruct
• Spring Framework
• Spring Security
• AWS CodeDeploy
• Amazon EC2
• RDS
• Redis(Remote Dictionary Server)
• Nginx
• Spring Data
• Spring Boot
• Querydsl

4️⃣ 아키텍처 및 설계

전체 아키텍처

ERD

API SPEC(클릭하시면 표를 보실 수 있습니다)

5️⃣ 트러블슈팅

트러블슈팅

트러블슈팅(FE)

트러블슈팅(BE)

기술적 의사결정

기술적 의사결정(FE)

기술적 의사결정(BE)

성능개선

성능개선(FE)

성능개선(BE)

6️⃣ Sites & Notion

Web page

React App

Team Notion

딸깍

Github Organization

DDAL-GGAK

7️⃣ Teammates

<aside> 🟢 김대현 FE

</aside>

개발 전반 의사결정 및 환경 셋팅 기능 개발 고도화 및 리팩터링 재사용성이 높고 변화에 강한 구조 구현

• 상세
  • convention Rule 수립 및 셋팅 : commitConvention(husky), CodeConvention(ESLint + Prettier + Airbnb)
  • 개발 전반적인 의사결정 : 소프트코딩 전략, 형상관리 전략, 폴더 구분 및 개발 방향성 확립
  • 커스텀 Axios 객체 구현
  • HTTP 프로토콜 통신 errorHandler 구현
  • 비인증 유저의 접속을 차단하는 AuthRoute 구현
  • routes 객체의 field값에 따라 optional하게 렌더링되는 Router 및 컴포넌트 구현
  • theme 객체와 layout 상수 값들의 소프트코딩을 적용한 디자인 변화에 유동적인 styled-components 사용 전략
  • 상수 객체 선언에 따른 자동 Type 생성 및
  • BE와의 데이터 싱크로나이징, 로그인, project, task, ticket 전반
  • 1차 완성 컴포넌트 기술 고도화 / 컴포넌트 분리 및 소프트코딩 리팩터링
  • Login / Signup의 react-hook-form에 사용되는 type과 register 및 컴포넌트를 자동 생성 및 등록하는 커스텀 react-hook-input 구현

<aside> 🟢 박지현 FE★

</aside>

login페이지 signUp페이지 setting페이지 myTicket페이지

• 상세
  • 수립된 convention Rule 따라 코드 작성
  • Login / Signup의 react-hook-form을 이용한 Validation 1차 적용 및 기능 구현
  • Setting 에서 Nested Routes 적용
  • Setting/User 에서 profile 및 닉네임 수정기능 구현
  • Setting/ProjectSetting 에서 thumbnail 및 타이틀 수정기능 구현
  • Setting/ProjectMember 에서 project에 참여한 멤버 관리기능 구현
  • MyTicketPage 에서 completedTicket 잔디기능 구현

<aside> 🟢 박성민 BE

</aside>

websecurity 로그인 로그아웃 토큰 재발급 회원 페이지 redis SMTP

• 상세
  • 권한이 없는 토큰으로 접근하면 exceptionHandling을 적용시켜 401, 403에러로 핸들링 했습니다.
  • 로그인, 로그아웃: Redis를 통한 Access Token, Refresh Token을 관리하며 토큰 만료 2분이내 활동이 있으면 자동으로 Access Token을 재발급 시켰습니다.
  • SMTP: 이메일을 사용한 인증로직, 초대코드 발송 로직을 구현했습니다.
  • Redis서버를 구축하고 redis 관련 설정을 했습니다.
  • redis로 token을 관리하여 서버 부화 최소화 했습니다.
  • OAuth2를 적용시켜 google login을 구성했습니다.

<aside> 🟢 박현아 BE★

</aside>

CI/CD를 통한 무중단 배포 서버 구축 로드밸런서 리다이렉트 HTTPS websecurity 로드밸런싱을 이용한 리다이렉트 서버 테스트 nginx로 변경을 통해 2개의 포트로 무중단 배포와 proxy 보안강화 티켓, 댓글, 리뷰 구현 및 개선

• 상세
  • CI/CD 서버 구축 및 관리: GitHub Actions, Amazon S3, AWS CodeDeploy, 및 Nginx를 사용하여 무중단 배포를 가능하게 만들며, 주기적으로 테스트와 상태 점검을 수행
  • 로드벨런싱을 이용한 리다이렉트 HTTPS 연결, 엔진엑스 HTTPS연결
  • Redis 서버 실행 : 비용과 용량적인 문제로 다른분 계정으로 프리티어로 따로 관리하고 있습니다.
  • 아키텍처 설계: CI/CD 전략을 적용하여 시스템 아키텍처를 구성
  • 이슈 트래킹, 댓글, 코드 리뷰, 리뷰 댓글, 실시간 알림 구현: 기본 기능을 완성하였으며, MVP 범위를 이슈 트래킹 및 댓글로 축소하여 상태 변경 및 관리 기능을 구현
  • 서버 부하 최소화를 위해 적절한 트랜잭션 처리를 고려하고, Querydsl을 적용
  • 서버 테스트: 여러 상황을 대비에 api가 돌아가는 시간을 적어 수치화하고, 직접 오류를 내보면서 접근이 가능한지 시도했습니다.
  • Jmeter를 통한 부하 테스트 현재 서버에서 얼마만큼의 쓰레드를 감당할 수 있는지 등을 체크하고 latency를 파악해 2s를 상회하는 요청들은 로직을 재검토 하였습니다.
  • 데이터베이스 관리: 여러 서버 인스턴스를 구축하고, 각 가용 영역에 맞는 Amazon RDS 인스턴스를 연결하며, 주기적으로 데이터베이스 상태를 확인
  • websecurityConfig에 cors를 만들고 관리했습니다.
  • 회의 및 피드백 정리(서기), 노션 관리(서기), 프레젠테이션(영상제작 및 디자인) 자료 작성 및 준비, 서버 비용 관리(총무), 마케팅 예산 관리(총무) 등을 담당

<aside> 🟢 조영준 BE

</aside>

ERD설계, Exception handling 동시성 이슈 제어 Custom validation, Mapping framework을 통한 dto 변환로직 설계 AOP를 이용한 통신 latency 체크 dynamic query를 통한 데이터 제공 Ticket 점수와 관련된 로직 설계 infra 설계

• 상세
  • ERD 설계 Excepiton handling BindingResult를 FieldError와 함께 client에 전송함으로써 어디서 바인딩에러가 발생하였는지에 대해 명시하고, Entity 문제나 custom error에 대한 로직을 작성하였습니다.
  • Custom validation Custom한 validator를 통해 무분별한 DB 출입을 방지하고 유효성 검사를 조금 더 자세하게 만들었습니다.
  • Mapping framework를 통한 dto 변환로직 설계 Mapstuct를 통해 자동 매핑을 구현하여 코드의 가독성과 유지보수성을 증가시켰습니다.
  • dynamic query를 통한 date, status별 티켓 데이터 제공 Querydsl을 이용하여 LocalDateTime 형태로 나누어져 있는 티켓들을 일별로 합산하여 사용자에게 날짜별 완료된 티켓수를 제공하고, 무한스크롤을 이용한 slice 형태의 ticket field를 반환함으로써 원하는 만큼의 데이터를 분할하여 제공하였습니다.
  • Jmeter를 통한 부하 테스트 현재 서버에서 얼마만큼의 쓰레드를 감당할 수 있는지 등을 체크하고 latency를 파악해 2s를 상회하는 요청들은 로직을 재검토 하였습니다.
  • ticket score와 관련된 로직 설계 linear algebra의 선형 가중 조합을 사용하여 티켓의 점수를 계산하여 태스크에서 티켓 다량발부에 대한 어뷰징을 방지하였습니다.
  • infra 설계 slack을 이용한 logback, swagger 기능들을 활성화하여 팀원들과의 응집력을 극대화시켰습니다.

8️⃣ Contact

이름 연락처 github

(2)과 (3)를 보고 진행하시는 분들 중 sudo nano /etc/nginx/sites-available/도메인이름.conf 파일 말고도 생성한 것이 있다면,
명령어로 지워주시고 시작하시는것이 좋습니다!
1개의 파일만 필요하고 나머지를 같이 사용하게 된다면(도메인이름을 같은 걸로 준비했을때), 엔진엑스에서 실행이 되지 않습니다.
그렇기 때문에

cd /etc/nginx/sites-available/

ls

 에 들어가서 몇 개가 있는지 확인한 후 진행하는 것을 추천 드립니다!

없다면 새로 생성!!

sudo nano /etc/nginx/sites-available/도메인 이름

여러개가 존재한다면 삭제!

sudo rm /etc/nginx/sites-available/도메인 이름

전에 만든던걸 활용할 생각입니다 저는~

server {
        listen 80 default_server;
        listen [::]:80 default_server;
                                root /var/www/html;
                                index index.html index.htm index.nginx-debian.html;

        server_name aihtnyc.shop;

        location / {
                # First attempt to serve request as file, then 
                # as directory, then fall back to displaying a 404.
                proxy_pass <http://43.200.22.192:8080>;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                try_files $uri $uri/ =404;
        }

리다이렉트를 하지 않아서 필요합니다!

server {
    listen       80;
    server_name  # 원하는 도메인으로 변경하세요.
    root /var/www/html;
    location / {
        return 301 https://도메인이름$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name 도메인이름;
    # SSL 관련 설정
    ssl_certificate /etc/letsencrypt/live/도메인이름fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/도메인이름/privkey.pem;
    ssl_prefer_server_ciphers on;

        include /etc/nginx/conf.d/service-url.inc;

    location / {

        proxy_pass $service_url;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }
}

삭제 후 새로 만드는게 더 편하긴 하더라구여..
기존에 있던 파일에서 시작하면 하나하나 내려가면서 수정해야합니다.

이렇게 입력한 후 저장!

ctrl + ^ + X 
ctrl + Y

SSL 관련 설정은 지난번에 ssl을 발급받아 저장해둔 걸로 이용합니다!
발급받지 않으셧다면 발급받으세요~
https://aihtnyc-h.tistory.com/entry/%EC%9A%B0%EB%B6%84%ED%88%AC-nginx-3-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-ssl-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0

사용하는 인스턴스 주소를 입력해줘야합니다!
(자동화를 위해!!)

sudo nano /etc/nginx/conf.d/service-url.inc

들어가서 본인의 인스턴스 주소로 넣어줍니다!

$service_url <http://127.0.0.0:8080>;

재시작은 필수!!

sudo systemctl reload nginx

상태확인!

sudo systemctl status nginx.service