프로그래머스 데브코스 106일차 with. TS 웹 풀스택

📚요약

지난 시간까지는 CS 지식의 기초를 배웠습니다. 이번 시간은 웹서비스 풀사이클에서 나올 수 있는 이론을 배우겠습니다.

 

📖풀사이클 개발 기반의 통합 웹서비스 구축 이론

📄목차

• 소프트웨어 개발 프로세스
• 웹서비스 아키텍처
• 백엔드와 프론트엔드 연동

📄 소프트웨어 개발 프로세스

해당 과정이 통해 `품질 향상, 일정 준수, 의사소통 촉진, 생산성 향상, 고객 만족도 향상`을 얻을 수 있어 중요한 과정입니다.

📑요구사항 수집 및 분석

요구사항 수집 → 요구사항 분류 → 요구사항 분석 → 문서화 → 요구사항 검증 및 확인

 

📑시스템 설계

상위 설계

• 시스템 아키텍처 설계
• 모듈화
• 데이터 설계
• 인터페이스 설계

하위 설계

• 데이터베이스 설계
• 클래스 설계
• 알고리즘 설계
• 에러 처리 방식 및 로깅 방식

🍯tip! 설계를 하기 위한 핵심 원칙은 모듈화, 캡슐화, 재사용성, 확장성, 응집도&결합도, 단순성을 고려해야 한다.

 

소프트웨어 아키텍처

• MVC
• 모놀리틱
• 마이크로서비스

📑구현

• 코딩
• 통합
• 단위 테스트
• 코드 리뷰
• 리팩토링
• 성능 최적화
• 보안 구현
• 문서화
• 버전관리

📑테스트

과정

• 테스트 계획 수립
• 테스트 케이스 및 시나리오 작성
• 테스트 환경 설정
• 테스트 실행
• 결함 관리
• 테스트 결과의 평가 및 보고

종류: 단위 테스트, 통합 테스트, 시스템 테스트, 인수 테스트, 회귀 테스트, 성능 테스트, 보안 테스트

자동화: JUnit, Selenium, Cypress, JMeter

 

📑배포

과정

• 릴리스 준비
• 배포 계획 수립
• 배포 환경 구성
• 소프트웨어 배포
• 테스트 및 검증
• 문서화 및 교육
• 운영 및 모니터링

웹애플리케이션 배포 방식

1. 파일 복사
2. 가상 서버 이미지 생성
3. 컨테이너 이미지 생성

배포 전략

• 롤링 업데이트
• 블루-그린 배포
• 카나리 배포

CI

• 소스코드 변경 → 코드 통합 → 자동화된 빌드 → 테스트 실행 → 결과 보고

CD

• CI 프로세스로 빌드 및 테스트 → 자동 배포 → 성능과 안정성 모니터링 → 문제 시 Rollback
• Jenkins, Circle CI, Teamcity, Github Action

모니터링 및 로깅

• 모니터링 모구: SaaS(New Relic, Datadog), Cloud(AWS Cloudwatch), OSS(Prometheus, Grafana, Zabbix)
• 에러 모니터링: Sentry, Rollbar
• 로깅: Cloud(AWS Cloudwatch Logs), OSS(Loki), Log4j

📑유지 보수

과정

• 버그 수정
• 성능 최적화
• 기능 개선 및 추가
• 기술 부채 관리
• 운영 환경 관리
• 보안 업데이트

📄소프트웨어 개발 방법론

종류

• 폭포수 모델
• 프로토타입 모델
• 나선형 모델
• 단계적 개발 모델
• 애자일 프로세스 모델

📑폭포수 모델

전통적으로 과거에 많이 사용했던 모델로 앞 단계가 끝나야 다음 단계로 진행될 수 있습니다. 해당 특징 때문에 설계가 더 중요한 사업에서 많이 사용되고 현재에는 변형된 프로토타입 모델, 나선형 모델 또는 애자일 모델이 많이 사용됩니다.

 

진행 과정

1. 요구사항 수집 및 분석
2. 시스템 설계
3. 구현
4. 테스팅
5. 배포
6. 유지보수

📑애자일 프로세스 모델

특징

• 반복적이고 점진적인 개발
• 지속적인 고객 참여
• 팀의 자율성과 자기 조직화
• 지속적인 개선과 적응

실행 방법: Scrum, Kanban, XP(Extreme Programming)

 

📄웹서비스 아키텍처

📑클라이언트-서버 모델

클라이언트는 서버에 특정 요청을 보내고, 서버는 요청을 받아서 어떠한 처리를 거쳐 응답을 해줍니다.

 

클라이언트 역할: 서비스 요청, UI 제공, 입력 데이터 처리, 응답 수신 및 처리

서버 역할: 컨텐츠 제공, 데이터 관리 및 저장, 보안, 동시 요청 처리, 확장성 및 안정성 제공

 

장점: 역할 분담, 중앙 집중화, 확장성, 보안성

단점: 단일 장애점, 서버 부하, 관리 복잡성

 

📑프론트엔드

HTML: HTML Semantic Tag

CSS: Style

JS: 이벤트 처리, DOM, 애니메이션, 비동기 통신

 

라이브러리, 프레임워크

• jQuery
• Angular
• React
• Vue.js
• Bootstrap
• Tailwind CSS

반응형 프로그래밍 패러다임 vs 명령형 프로그래밍 패러다임

 

📑백엔드

역할: 데이터 처리 및 관리, 비즈니스 로직 구현, API 제공, 서버 관리, 보안

프레임워크

• Java - Spring
• Python - Django
• Node.js - Express
• Ruby on Rails
• PHP - Laravel

📑데이터베이스

관계형 데이터베이스: 테이블 형태로 저장.

• 도구: MySQL, PostgreSQL, Oracle, SQL Server

비관계형 데이터베이스: 테이블 대신 다양한 형태로 저장.

• 사용자 세션 관리
• 실시간 분석 및 대용량 데이터 처리
• CMS
• 게임 애플리케이션
• 도구: MongoDB, Cassandra, Redis, DynamoDB

📑캐싱

자주 사용되는 데이터를 미리 저장해 동일한 요청에 대해 빠른 응답을 해줍니다.

 

종류

• 객체 캐싱: 사용자 세션, 뉴스 기사, 장바구니
• 페이지 캐싱: 뉴스 메인 페이지, 게시글 페이지
• 브라우저 캐싱

장점: 응답 시간 단축, 서버 및 네트워크 부하 감소

단점: 만료된 데이터, 복잡성 증가

 

만료된 데이터에 대한 문제는 캐시 무효화 전략을 통해 해결할 수 있습니다.

• 명시적 무효화
• 만료시간(TTL) 기반 무효화
• 버전 기반 무효화

📑로깅

목적: 디버깅, 성능 모니터링, 보안, 감사

고려사항

• 로그 레벨: DEBUG, INFO, WARN, ERROR, FATAL
• 로그 포맷
• 로그 로테이션
• 로그 보안
• 로그 관리 도구: ELK 스택, CloudWatch Logs

에러 로깅: Sentry, Rollbar, Raygun

 

📑잡 서버

백그라운드에서 동작시킬 작업들을 잡 큐와 잡 서버를 사용해 비동기로 동작시킵니다. 예를 들어 이메일 발송, 데이터 처리 및 분석, 파일 변환, 외부 API 호출, 주기적인 작업을 처리하는 것이 좋습니다.

 

도구: Sidekiq, Resque, Celery, Bull

 

📑전문 검색 서비스

검색을 하는 경우 가장 관련성이 높은 결과를 보여주는 서비스를 의미합니다.

1. 인덱스 생성 단계: 텍스트 데이터 수집, 토큰화, 불용어 제거 및 어근 추출, 인덱스 구축
2. 검색 쿼리 처리 단계: 쿼리 분석 → 인덱스 검색 → 순위 매기기 → 결과 반환

주요 검색 엔진: ElasticSearch, Apache Solr, FullTextSearch(MySQL, PostgreSQL)

 

📑클라우드 기반 인프라

구성 요소

• 서버 하드웨어
• 네트워크 장비
• 저장 장치
• 운영 체제 및 서버 소프트웨어
• 데이터베이스 시스템
• 보안 시스템
• 백업 및 재해 복구 시스템

인프라 서비스 모델

• IaaS
• PaaS
• SaaS

📑보안

네트워크 보안: 방화벽(Security Group, WAF), 침입 탐지 시스템, SSL

데이터 보안: 데이터 암호화, 데이터베이스 접근 권한 관리, SQL Injection 방어

애플리케이션 보안: 인증(MFA), 권한 관리, CORS, XSS

운영 보안: 로깅, 개인 정보 조회 이력, 보안 패치

물리적 보안: IDC 접근 통제, 감시 시스템, 재난 방지 시스템

 

📑성능 및 확장성

성능 문제 및 해결 방법

• 웹서버 과부하 - 병목 지점 파, 서버 증설
• 데이터베이스 응답 지연 - 데이터베이스 튜닝, 캐싱, 하드웨어 업그레이드
• 웹브라우저의 로딩 지연 - 이미지 압축, 비동기 로딩, 무한 루프
• 해외 접속 지연 - CDN 도입

확장성: 수직적 확장, 수평적 확장

 

데이터베이스 확장: 테이블 분산, 복제, 샤딩(Key, Range, Directory-based)

📄백엔드와 프론트엔드 연동

📑HTTP

특징

• 클라이언트-서버 구조
• 무상태(Stateless)
• 비연결성(Connectionless)

발전: HTTP/1.0 → HTTP/1.1 → HTTP/1.1 → HTTP/2

Method: GET, POST, PUT, PATCH, DELETE 등

Request & Response

Cookies

 

📑API

종류

• REST API
• GraphQL API
• SOAP

📑데이터 교환 포맷

• JSON
• XML

📑AJAX

서버와 비동기적으로 통신을 통해 웹 페이지 전체가 아닌 일부만 업데이트할 수 있게 도와주는 기술입니다.

• XMLHttpRequest
• jQuery
• Fetch
• axios

📑실시간 데이터 처리

• Server Push: WebSocket, SSE
• Client Pulling: AJAX Polling(Short Polling), Long Polling

📑인증(Authentication)

• 세션 쿠키
• JWT

📑CORS

same origin 정책에 의해 같은 origin이 아닌 경우 요청할 때 에러가 발생하는데 이를 관리해 보안을 강화할 수 있습니다. 여기서 말하는 origin이란 protocol(https, http), hostname, port 번호를 포함한 것을 말합니다.

 

다음 시간에 계속...

 

출처 & 참고

이확영 강사님의 강의

https://capistranorb.com/

https://www.ansible.com/

https://www.puppet.com/

웹 서비스 아키텍처, Jonathan Fulton, 2024.09.02