까까무까
Team Goal-apa
목차
프로젝트 소개 및 개요
01.
기술 스택 및 구조 설명
02.
협업 방법
03.
주요 기능과 사용법 시연
04.
이슈와 문제 해결 방법
05.
피드백 반영
06.
사용자 평가 및 결과 분석
07.
후기
08.
프로젝트 소개 및 개요
팀원 소개
강수의
박성준
손정인
이주원
이현석
(신고, 블랙 리스트)
(회원, 로그인)
(통계, 요청)
(카테고리, 식품)
(리뷰, 좋아요)
6
전세계 과자 리뷰 사이트
까까무까
cacamuca
리뷰와 사용자 정보 통계
1. 소비 패턴과 소비 트렌드 파악
2. 제품 개발, 마게팅 전략 수립에 도움
1. 브랜드 과자 홍보
2. 제휴 링크 구매를 통한 수수료
사이트 활용
기술 스택 및 구조 설명
CQRS 패턴을 사용하지 않을 때의 문제점
대부분의 서비스의 속도가 느린 가장 큰 이유를 찾자면 모든 사용자들이 똑같은 데이터베이스에서 서로 다른 요청이 들어온다는 점입니다.
예를 들어 서비스의 일반 사용자가 본인 회원정보를 조회하고, 다른 사용자는 회원가입을 하고, 또 다른 사용자는 회원정보를 수정하고 싶을 것 입니다.
하지만 사용자가 필요한 정보는 단순히 조회 하는 것, 데이터를 새롭게 입력하는 것, 수정하는 것 모두 다 조금씩 다를 수 있습니다. 이러한 데이터를 효율적으로 받아오고, 성능을 개선하며 개발자가 데이터베이스에 보내는 쿼리의 복잡성을 낮추는 개선방법 구조적으로 정의한 것이 바로 CQRS 패턴입니다.
CQRS 패턴
CQRS(Command Query Responsibility Segregation) 패턴이란?��- 커멘드(입력, 수정 작업), 쿼리(조회)을 계층별로 분리하여 정의하는 것
CQRS 패턴
하지만 구축은 어렵습니다.
이유는 데이터의 일관성을 유지하기 어렵기 때문입니다.
읽기(조회) 및 쓰기(입력, 수정, 삭제) 데이터베이스를 구분하여 개발했다면 쓰기를 시도할 때, 이미 읽기 데이터는 유효하지 않거나 우리가 원하는 데이터가 아닐수도 있습니다.
CQRS 패턴
그리고 복잡성 때문입니다.
코드는 계층적으로 분리되어 다음과 같이 많은 클래스들을 양산하게 됩니다.
아이러니하게도 구조를 숙지하지 않으면 개발과 유지보수를 힘들게 할 수도 있습니다.�
CQRS 패턴
Why?
비용과 속도 개선
- 읽기(조회), 관련한 데이터만을 묶어 사용자에게 효율적으로 전달할 수 있습니다.
- 쓰기(입력, 수정, 삭제)에 최적화된 데이터베이스를 구축, 사용할 수 있습니다.
- 스케일링 작업의 용이성(각각 사용자가 몰리는 빈도가 다르기 때문에 사용자의 수요에 따라서 데이터베이스의 크기를 조정하는데 탄력적)
유지보수 용이
- 조회에 필요한 복잡한 쿼리와 명령(입력, 수정, 삭제)를 각각 다르게 정의하여 코드를 간소화하여 이해성을 높일 수 있습니다.
CQRS 패턴
개인정보와 보안��2012년 6월 세계 최대 비즈니스 전문 소셜 네트워크 서비스(SNS) LinkedIn은 사용자 데이터 해킹 사고로 650만 명의 아이디와 패스워드 정보가 유출된 후 집단 소송을 당했습니다.�약한 암호화 알고리즘인 SHA-1을 사용했다는 것이 그 이유였습니다. 이제 보안 시스템의 한 부분인 암호화 알고리즘으로 어떤 알고리즘을 선택했는지도 보안의 책임을 다했는지 판단할 때 중요한 요소입니다.
비밀번호 암호화
사용자 비밀번호 암호화��평문으로 저장되는 사용자 비밀번호를 bcrypt함수의 키로 이용한 해시값을 암호화하여 저장
해커의 취약점 공격(레인보우 테이블)을 방지할 수 있음��데이터가 노출되어도 비밀번호를 해석하는데 시간과 비용이 많이 소요될 수 있음
비밀번호 암호화
Jaypt(Java Simplified Encryption) 라이브러리를 이용한 민감 정보 암호화 처리
github에서 여러 명이 협업해야해서 설정 파일을 공유해야함 → 어플리케이션의 환경설정 암호화�- 데이터베이스 계정, 비밀번호 암호화�- 메일 계정, 비밀번호 암호화
Jaypt는 암호화 할 때 이용한 키가 있으면 암호를 해석하는 것이 가능합니다.
그래서 환경변수를 서버에 별도로 저장해놓고, 코드에 노출시키지 않았습니다.
민감 정보 암호화
인증(Authentication)이란?��인증이란 사용자의 신원을 검증하는 프로세스를 뜻합니다. �가장 간단한 예시로는 ID와 PW를 통해 로그인하는 행위를 인증이라 할 수 있습니다.��인증을 처리하는 여러가지 방법 중 세션 방식을 이용하였습니다.
인증(Authentication)
세션 방식의 인증이란?��Session은 로그인 정보를 직접 사용하지 않는다는 점, 서버에서 사용자의 정보를 취급하기 때문에 서버의 보안이 우수하다면 다른 방식보다 좀 더 안전한 방법이기 때문에 세션 방식의 인증을 채택하게 되었습니다. �고객의 로그인 정보를 주고받지 않아 다른 방식보다 보안상 이점이 있지만, 사용자를 식별할 수 있는 값을 생성하고 서버에 저장해두어야 하는 작업이 생기게 됩니다.
인증(Authentication)
인가(Authorization)
인가(Authorization)란?�사용자에게 접근 권한을 부여하여, 사용자의 권한에 맞게 적절한 자원을 사용할 수 있게 해주는 것�
예를 들어 관리자만 확인해야하는 민감한 정보를 모든 사용자가 확인할 수 있다면, 악의적인 의도를 가진 사용자가 관리자 기능이 있는 URL을 탈취하여 입력하여 정보를 확인한다면 문제가 될 것입니다.�그래서 관리자와 일반 사용자 등을 나눠서 각각 고유한 권한을 부여하는 것을 인가라고 합니다.�여려분이 웹사이트에서 종종 보기도 하는 403에러가 바로 권한이 없다는 것을 표시 해주는 것 입니다.
Github actions
지속적 통합(Continous Integration)이 필요한 이유��이전에는 팀의 개발자가 장기간 격리된 상태로 작업하고, 작업이 완료된 후에야 변경 사항을 최상위 브랜치에 합쳐졌습니다. 이로 인해 합쳐진 코드가 어렵고 기존 코드와 맞춰보는데 많은 시간이 소모되는 것으로 변하게 되었고 또한, 수정 없이 오랫동안 버그가 축적되는 결과가 나타났습니다. 이러한 요소 때문에 고객에게 업데이트를 신속하게 제공하기가 더 어려워집니다.
Github actions
Github actions란?
�GitHub Actions는 GitHub에서 제공하는 서비스로, 빌드, 테스트, 배포 파이프라인을 자동화할 수 있는 CI(Continuous Integration, 지속 통합)와 CD(Continuous Deployment, 지속 배포) 플랫폼입니다. GitHub Actions를 사용하면 GitHub 리포지토리에서 손쉽게 CI/CD 결과를 확인하고 관리할 수 있습니다. 또한, YAML 포맷을 사용하여 가독성이 높고, 이미 구현되어 있는 수많은 액션을 활용하여 간단하게 CI/CD 플로우를 작성할 수 있습니다.
Flow는 event가 발생하면 사전에 github actions에 정의한 순서대로 실행됩니다.
Github Actions
Github actions에 명시된 모든 flow를 수행한 결과입니다.��내부적으로 작성된 단위테스트까지 모두 성공적으로 수행했습니다.
Github Actions
Github actions
어떻게?��각자 맡은 기능의 테스트 시나리오를 구상하여 테스트 코드를 구현하였습니다.
MVC 패턴 (Model, View, Controller) �계층별로 처리해야되는 부분을 분리하여 처리해야 하는 기능들을 분리하여 결합도를 낮추고 응집도를 낮추는 디자인 패턴을 MVC 패턴이라고 합니다.�
CRUD(Create, Read, Update, Delete) 과정�Client 의 요청이 들어오면 이미지와 같은 순서로 처리합니다.�DB에서 가져온 값을 처리하여 반환해야 하는 경우 클라이언트에게 그대로 반환합니다.
MVC 패턴 & CRUD
테스트 검증과정이 중요한 이유
개발 과정에서 문제를 미리 발견할 수 있다.
검증이 완료된 기능의 리팩토링을 안심하고 할 수 있다.
빠른 시간 내에 코드의 동작 방식과 결과를 확인할 수 있다.
좋은 테스트 코드를 연습하다 보면 자연스럽게 좋은 코드가 만들어진다.�고객 혹은 서비스 이용자에게 보다 안정성 높은 품질의 결과물을 전달할 수 있습니다.
(고객의 이탈을 최소화 시킬 수 있는 가능성이 높아집니다)
테스트
테스트 과정��테스트 문서를 만들고,테스트 시나리오를 정의, 각각의 테스트 케이스를 분리하여 테스트가 수행되었는지를 확인하였습니다.
테스트
테스트 과정��각각 맡은 기능을 계층별로 단위테스트를 진행, 검증하였고, �입력값을 가정하고, 어떤 조건에서 처리를 수행하고, 어떤 결과값이 와야는지 예측하여�검증 여부를 판단하였습니다.
테스트
협업 방법
Code Review
단순히 "Looks Good To Me" (LGTM)와 같은 승인을
얻는 것보다, 코드에 대한 지식 공유와 개선을 도모
개발 품질 향상과 버그 방지를 위한 핵심적인 역할을 수행
Git 형상관리
Master - 최종 배포
Release - 배포 전 테스트
Develop - 개발이 완료된 코드들
Feature - 기능 개발
Issue
Commit 규칙에 맞추어 주차별로 개발하며 발생한 이슈 작성
레이블, 담당자, 이슈 등의 정보와 함께 등록
Discussion
스크럼 내용, 피드백, 진행사항 등 중요한 정보를 게시해두는 용도로 사용
개방적으로 의견을 제시하고, 새로운 아이디어를 제안
온라인 회의
시연
이슈와 문제 해결 과정
통계 문제
통계 데이터를 모으기 위해
매일 일정한 시간에 데이터 insert 필요!
BUT!!
PROBLEM 1.
‘SPRING SCHEDULER’
SOLUTION 1.
성능 최적화 이슈
Request
N...
PROBLEM 2.
성능 최적화 필요성
클라이언트(사용자)
요청
웹 서버
@Transactional(readOnly = true)
fetchSize = “1000”
Request
테스트 환경
유저 : 4000명
처리 시간 : 1초
요청 : 10번
SOLUTION 2.
@EnableCacheing, @Cacheable
테스트 코드
가독성 문제
• 테스트 동작과 무관한 정보 입력
• 테스트 마다 코드의 중복이 많아짐
• 코드의 길이가 길어지면 가독성 저하
PROBLEM 3.
Object Mother
제시한 테스트 데이터를 생성하는 방법
감소한 코드 : 54줄
SOLUTION 3.
이미지 출력 문제
Request
Not allowed to load local resource
PROBLEM 4.
SOLUTION 14
WebMvcConfigurer
1. 특정 URL(리뷰 목록..)에서 요청을 보내면
2. 지정한 경로(C:/app-file/)를 인식
3. 경로내 존재하는 정적 리소스(이미지)를 반환
SOLUTION 4.
Github actions�환경설정 문제
위와 같이 Jasypt 라이브러리를 이용한 암호화한 코드는 어플리케이션을 구동할 때 사용하기 위해서 복호화를 위한 키값이 필요
키값은 서버의 환경변수로 저장되어 있는 상태
�문제는 github CI를 할때 단위테스트들을 통과하지 못하는 상황이 발생
PROBLEM 5.
Github actions의 secrets와 variables를 이용
환경변수에 값을 담아 저장하고, flow대로 진행 시 변수에 담아서 사용할 수 있게 처리�
SOLUTION 1
SOLUTION 5.
SOLUTION 5.
Master, release 브랜치에 PR이 오면
테스트와 환경변수를 담고, �
gradle의 build 과정을 수행
(build에는 compile과 test 과정이 같이 수행됨)�
피드백 반영
프로토 타입과
구현된 웹 서버 비교
프로토 타입
배포 서버
(메인)
프로토 타입
배포 서버
(로그인&회원가입)
프로토 타입
배포 서버
(회원정보 변경)
프로토 타입
배포 서버
(내 리뷰)
프로토 타입
배포 서버
(리뷰 작성)
프로토 타입
배포 서버
(리뷰 검색)
프로토 타입
배포 서버
(리뷰 신고하기)
프로토 타입
배포 서버
(신고 리스트)
프로토 타입
배포 서버
(통계)
중간 피드백
반영 결과
메인 페이지(+식품 요청)
리뷰 관리(+스팸성 리뷰 신고 추가)
리뷰 관리(+정렬 기능 추가 )
리뷰 작성(+구매 링크 추가)
사용자 평가 및
결과 분석
사용자 피드백
사용자 피드백
<정보 구조 및 컨텐츠>
장점 : 과자 리뷰 사이트라는 희소성, 분야 확장 가능성, 사이트의 목적과
성격이 명확, 사용자들이 쉽게 이용 가능한 카테고리 분류
개선사항 : 추가적인 데이터 제공 필요
<디자인>
장점 : 깔끔하고 통일성 있는 디자인, 광고나 불필요한 요소가 없음,
직관적인 디자인으로 사용자들이 원하는 기능을 쉽게 찾을 수 있음
개선사항 : 식품 관련 컨텐츠에 맞는 컬러감이 필요, 모바일 반응형 웹 구성
<사용 편의성>
장점 : 정확도 높은 검색 결과 제공, 리뷰 및 평가 정보에 접근이 쉽고
사용 편리
개선사항 : 리뷰 남긴 데이터를 기반으로 추천 시스템 제공, 외국어 지원
프로젝트 후기
GitHub actions를 이용한 자동화를 수행하면서 검증 절차가 매우 중요한 과정임을 느끼게 되었습니다. 의존관계를 최대한 줄여나가면서 개발을 진행한 경험은 중요한 경험인 것 같습니다. 앞으로도 이러한 구조를 더 공부하면서 차차 대용량 트래픽을 처리하는데 유용한 구조, 인프라에 대해서 학습해 봐야겠다는 생각이 듭니다. 이번 프로젝트를 통해서 개인 일정속에서도 소통하고 지속하는 것은 앞으로도 중요하다는 생각이 듭니다.
사용자들의 다양한 의견을 반영하여 서비스를 개선하는 과정에서 팀 협업과 사용자 중심의 개발의
중요성에 대해 깨달았습니다. 그리고 서버 부하 테스트를 통해, 높은 트래픽과 동시 접속자들에
대응하는 서버의 성능과 안정성의 중요성을 인지하였습니다.
도메인 주도 개발이나, CQRS와 같이 기존에 모르던 개발 방법을 활용하려고 하다 보니 처음에는 막막하고 힘든 점이 많았지만, 도전하고 결과를 만들어내는 과정이 즐거웠습니다. GitHub를 활용하는 능력이 이전보다 발전한 것 같아 뿌듯했습니다. 하나의 기능을 만들 때도 하나의 제약조건부터 전체 시스템의 대용량 트래픽까지 많은 점을 고려하고 고민해야한다는 것을 배울 수 있었습니다.
강수의
박성준
손정인
이현석
희소 데이터에서 유용한 인사이트를 찾아내는 것이 서비스 개발과 운영에 있어서 얼마나
중요한지를 깨달았습니다. 또한, 데이터와 통계를 기반으로 서비스를 개선하고 사용자들의 요구에
더욱 가까이 다가가는 것은 팀과 서비스의 발전에 매우 중요한 요소임을 알 수 있었습니다.
이주원
기획부터 개발에 이르기까지 사용자 관점에서의 기능 구현을 목표로 진행한 프로젝트로 많은 것들을 경험하고 배울 수 있는 시간이었습니다. 특히, 제품 리뷰 사이트라는 관점에서 가치 있는 정보를 창출하기 위해 필요한 기능들에 대해 고민하고 반영했던 과정들이 흥미로웠습니다. 이번 프로젝트는 개발의 구조적인 부분에서는 의존관계를 줄였지만, 이벤트 스토밍 등 모든 과정에서 팀원들과의 커뮤니케이션과 협업의 필요와 중요성에 대해 더 깊이 체감할 수 있는 시간이었습니다.
Q&A
감사합니다!