소트프웨어 공학 : "소프트웨어 공학은 소프트웨어의 개발, 운영, 유지보수에 필요한 체계적인 접근 방법을 적용하는 엔지니어링 분야이다."
즉, 소프트웨어 공학은 소프트웨어 개발의 전 과정에서 체계적이고 효율적인 방법론을 적용하여 품질 높은 소프트웨어를 생산하는 것을 목표로 합니다.
Router와 렌더링 방식
1. CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)
- 동작 원리: 서버에서 최소한의 HTML과 JavaScript 파일을 전달하고, 나머지 페이지 렌더링은 클라이언트(브라우저)에서 수행합니다.
- 특징:
- 초기 로딩 속도는 느리지만, 이후 페이지 전환은 빠릅니다.
- 자바스크립트를 통해 동적으로 페이지를 생성하므로, 사용자 경험이 더 자연스럽습니다.
- SEO(검색 엔진 최적화)에 취약할 수 있습니다. 브라우저에서 실행되기 전까지 페이지 내용을 검색 엔진이 읽지 못하기 때문입니다.
- 사용 사례: React, Vue와 같은 SPA(Single Page Application) 프레임워크.
2. SSR (Server-Side Rendering, 서버 사이드 렌더링)
- 동작 원리: 서버에서 완전한 HTML 페이지를 생성하여 클라이언트에 전달합니다.
- 특징:
- 초기 로딩 속도가 빠르고, SEO에 유리합니다.
- 사용자 요청마다 서버가 페이지를 생성하므로 서버 부하가 커질 수 있습니다.
- 사용 사례: Next.js, Nuxt.js 등.
3. Hybrid Rendering
- CSR과 SSR의 조합으로, 초기 페이지는 서버에서 렌더링(SSR)하고 이후 클라이언트에서 동적으로 페이지를 관리(CSR)합니다.
- 사용 사례: Next.js의 getServerSideProps와 getStaticProps
- Static Site Generation (SSG):
- 정적인 HTML 파일을 사전에 생성하여, CDN(Content Delivery Network)을 통해 빠르게 제공.
- SEO와 성능 모두를 고려한 최적화 방식.
Load, Fetch, Buffer, Cache
1. Load
- 데이터를 실행 가능한 상태로 만드는 작업.
- 과정:
- 데이터를 물리적 저장소(HDD, SSD)에서 메모리(RAM)로 가져옵니다.
- CPU는 메모리에 올라온 데이터를 처리합니다.
- 예:
- OS가 프로그램을 실행할 때 데이터를 로드하여 실행 준비를 완료합니다.
- 관련 개념: Load는 데이터의 실행 상태와 밀접한 연관이 있으며, fetch와 함께 사용될 수 있습니다.
2. Fetch
- 특정 위치(서버, 데이터베이스 등)에서 데이터를 가져오는 작업.
- 특징:
- 데이터를 가져올 뿐, 실행 여부는 결정하지 않습니다.
- 클라이언트가 서버에서 데이터를 요청하거나, API 호출을 통해 데이터를 가져오는 과정이 fetch입니다.
- 예:
- REST API를 호출하여 JSON 데이터를 가져오는 작업.
- Fetch와 Load의 차이:
- Load는 실행 가능한 상태로 만드는 작업을 포함하지만, Fetch는 데이터를 단순히 가져오는 것에 초점.
3. Buffer
- 데이터를 임시 저장하는 메모리 공간.
- 용도:
- 데이터의 속도 차이를 맞추기 위해 사용됩니다.
- 예: 비디오 스트리밍에서 데이터가 끊기지 않도록 버퍼를 사용해 데이터를 미리 받아둡니다.
- 특징: 데이터가 순차적으로 처리되는 경우 주로 사용됩니다.
4. Cache
- 자주 사용하는 데이터를 저장해 빠르게 재사용할 수 있도록 하는 메모리 저장소.
- 용도:
- 원본 데이터를 매번 호출하지 않고 캐시에서 직접 데이터를 불러옵니다.
- 성능을 크게 향상시키며, 서버 부하를 줄입니다.
- 예:
- 웹 브라우저 캐시: 방문한 페이지의 정적 리소스를 저장해 재방문 시 빠르게 로드.
소프트웨어 설계 패턴: MVC와 MVVM
소프트웨어 설계 패턴은 코드를 체계적으로 구성하고 유지보수를 쉽게 만듭니다.
1. MVC 패턴
- 구성 요소:
- Model:
- 데이터 처리 및 비즈니스 로직 담당.
- 예: 데이터베이스와 상호작용하거나 계산 작업 수행.
- View:
- 사용자에게 데이터를 보여주는 역할.
- 예: HTML, CSS로 구성된 UI.
- Controller:
- Model과 View를 연결하는 중간 다리 역할.
- 예: 사용자의 요청을 받아 Model을 처리하고 View에 데이터를 전달.
- Model:
2. MVVM 패턴
- 구성 요소:
- Model: MVC와 동일.
- View: UI 담당.
- ViewModel:
- View에 최적화된 형태로 데이터를 관리.
- 데이터 변경 시 View가 자동으로 업데이트됩니다.
- 특징:
- Angular와 같은 프레임워크에서 사용되며, React는 MVVM을 지원하지 않습니다.
프론트엔드 라이브러리의 역사
1. jQuery
- 2000년대 DOM 조작을 단순화하여 웹 개발을 혁신.
- 단점: 유지보수 어려움, 코드 복잡성 증가.
2. Backbone.js
- MVC 기반의 첫 번째 프레임워크.
- 데이터와 UI를 구조적으로 관리할 수 있게 도입.
3. AngularJS
- MVVM 패턴을 기반으로 개발.
- 양방향 데이터 바인딩(Two-way binding)을 지원하여, 데이터 변경 시 UI가 자동으로 갱신.
4. React
- 단방향 데이터 흐름(One-way binding)을 채택.
- 컴포넌트 기반 설계로 재사용성과 유지보수성 증가.
Functional Programming (FP)
함수형 프로그래밍(FP)은 선언적이고 상태를 변경하지 않는 코딩 방식입니다.
특징
- 상태 변경을 최소화하여 예측 가능한 코드를 작성합니다.
- Redux, MobX와 같은 상태 관리 라이브러리에서 FP의 영향을 많이 받았습니다.
CPU와 성능 향상
CPU의 발전
- 초기에는 클럭 주파수로 성능을 향상시켰으나, 물리적 한계로 인해 멀티코어 설계로 전환.
- 예:
- Intel i5, i7, i9은 각각 더 많은 코어를 제공하여 병렬 처리를 강화.
➕ 프로세스
소프트웨어를 효율적으로 개발하기 위해 체계적인 개발 과정(프로세스)을 정의합니다.
- 폭포수 모델(Waterfall):
- 단계별로 순차적으로 진행하는 전통적인 개발 방법론.
- 요구사항 → 설계 → 구현 → 테스트 → 유지보수.
- 장점: 간단하고 명확한 구조.
- 단점: 변경에 유연하지 않음.
- 애자일(Agile):
- 빠르게 개발하고 지속적으로 개선하는 유연한 개발 방법론.
- 장점: 변화하는 요구사항에 빠르게 대응.
- 단점: 계획이 부족하면 프로젝트 혼란 가능.
- 스크럼(Scrum):
- 애자일의 한 종류로, 짧은 주기(Sprint)로 개발.
- 팀 협력을 강조하며, 지속적으로 피드백을 반영.
