ASAC 웹 풀스택

✅웹 성능 개선을 위한 HTTP Cache웹 성능: 요청을 보냈을 때 응답을 가능한 빠르게 받는것 = 웹 페이지 로드 시간 단축웹 서버로부터 웹 페이지 로드 성능 개선: SEO를 위한 Performance Metrics웹 브라우저에서 웹 페이지 로드 성능 개선: HTP Cache✅웹 서버 부하 완화 및 웹 페이지 로드 성능 개선웹의 본질 = 요청을 보내고 응답을 받는것 🔷웹 브라우저웹 브라우저: 매번 웹 서버에게 요청해서 응답 받기결과 "반환" 비용(시간, 네트워크)를 줄이자서버로부터 받은 응답이 매번 같다면, 웹 브라우저는 매번 웹 서버에게 응답을 받아올 필요 X -> 이전에 받았던 응답을 저장후 요청시 저장해 놓은 응답 재사용 (HTTP Cache 중 Private)만약에 매번 같은 100MB 짜리..

한 개의 웹 서버를 통해 우리 웹 어플리케이션 서비스를 제공하는 경우 아래 두 문제 발생대량의 트래픽이 한개의 웹 서버에 집중되는 경우한 개의 웹 서버가 트래픽을 감당하지 못해 터져버린다. -> 수직적 확장 혹은 수평적 확장이 필요새 버전의 웹 어플리케이션을 배포시새로운 웹 서버에 배포하는 경우 IP가 변경기존의 웹 서버에 배포를 하더라도 기존 버전을 정지하고 새 버전을 구동하는 동안 유저는 사용하지 못함.✅트래픽 분산로드 밸런서를 웹 서버의 앞단에 두고, IP를 부여한 뒤 웹 클라이언트가 해당 로드밸런서를 호출하게 하면로드 밸런서는 앞단의 모든 웹 클라이언트의 요청을 받아, 뒷단의 모든 웹 서버에게 요청을 분산🔷로드 밸런서를 이용하여 해결 가능한 이슈배포이슈 해결: 클라이언트는 고정된 IP의 로드 밸..

✅물리 서버와 가상 서버웹 어플리케이션을 구동시키려면 서버가 필요하다.그 서버를 어떻게 구축 / 구성해야할까? 선택지는 1.물리서버와 2. 가상 서버(클라우드서버) 가 있다.🔷물리 서버(데이터센터, On-Premise)기업의 요구사항에 맞춰 직접 중소형 데이터센터를 구축 및 유지보수 비용 발생고정 비용(서버 구축) + 직접 운영과 관리물리서버 호스팅 업체: 카페24AWS가 없던 시절 카페 24에서 물리 서버를 대여해주었다따라서 서버에 뭔가를 배포하려고하면 카페24 호스팅이 필요. [물리서버 단점]건물 유지 비용, 서버 구매 비용, 유지보수 등다수 서버(컴퓨팅 시스템을 위한 하드웨어: 데스크탑 조립해서 GPU없이 사용)네트워크 장비(다수 서버를 권역별, 용도별로 나누어 네트워크 IP 할당, Private..

※ 응용 프로그램 = 어플리케이션 = 프로그램 모두 다 같은 의미이다.✅하드웨어프로그램(어플리케이션, 소프트웨어로 부름)이 동작되는 머신내부 자원: CPU + Memory메모리에 가까울수록 빨라야한다 (속도: 캐시 > 메모리 > 하드디스크, 용량은 반대)외부 자원(입출력): 네트워크 IO, 저장장치 IO, 마우스 / 키보드 ✅소프트웨어시스템 소프트웨어(OS) + 응용 소프트웨어(통칭 어플리케이션)시스템소프트웨어 = OS(a.k.a. 커널) 운영체제: 하드웨어를 사용하기 위한 API를 제공HW 자원 관리(자원 할당/회수)cpu연산 순서 결정응용 소프트웨어 = 어플리케이션= 프로그램shellOS가 제공하는 API를 한번 더 감싼 API를 제공 -> os가 제공하는 api는 사용자가 사용하기 어려워서 한번 더..

✅백엔드 웹 개발 : API = 클라이언트가 필요하는 데이터 반환(웹) 클라이언트가 원하는 다양한 (웹) 데이터 (혹은 웹 페이지)를 1. 어떻게 2. 잘 반환할까?어떻게 = 방법론(요청-응답을 처리하는 방법): Rest API, GraphQL, Queue, WebSocket, SSE등잘 = 속도 + 가용성(요청-응답의 속도 및 대량 트래픽 커버데이터 조회를 위한 데이터베이스 내 쿼리 수행 시 쿼리 효율에 따른 소요시간 축소대량 트래픽에 기인한 데이터베이스 조회 시, 부담 축소 및 속도 향상을 위한 로컬 / 글로벌 캐시 도입대량 트래픽에 따른 다중 데이터베이스 접속 시 동시성 처리트랜잭션 도입: 직렬화가 가장 높은 수준 but 느림동시성과 격리성은 trad off 관계MSA도 가용성을 높일 수 있음✅백엔..

✅ Static Websties정적 페이지를 반환하는 웹 서버(Nginx, Apache, S3) 활용가장 초기의 웹 페이지 형태: 초창기 홈페이지는 한번 만들면 거의 변경될 일이 없었다. 이미 만들어진 웹 페이지인 정적 웹 페이지를 요청에 따라 반환하므로 렌더링 절차가 없었다.그림에서 JS가 페이지를 Render하는 것은 이미 만들어진 페이지를 띄워주기 위함..💡CDN( Content Delivery Network )지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠(예: 라이브 비디오 피드)의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 합니다.ref: https://www.ibm.com/kr-ko/topics/content-deliv..

✅라이브러리 VS. 프레임워크🔹라이브러리: 단일 목적을 위한 단일 파일🔹프레임워크: 다수 목적을 위한 라이브러리 집합 오만가자 자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 오만개의 자바스크립트 파일을 갖는다. 한 자바스크립트 프레임워크 내 워낙 다양한 기능을 제공하는 자바스크립트들이 있다보니 정말 많은 파일이 존재.유저가 웹 브라우저에서 웹 페이지를 보기위해 오만개의 자바스크립트 파일을 다운로드하면, 컴퓨터가 터진다.✅번들러: 다수의 JS를 하나의 JS파일로 압축그래서 하나의 웹 페이지를 보여줄 때 다양한/다수의 JS라이브러리 파일을 하나의 JS파일로 압축해야한다.-> 번들러를 통해 다양한/다수의 JS파일을 하나의 JS 파일로 묶는다. 하지만 다수의 JS파일을 하나로 번들링을 하면 파일 용..

✅Javascript FrameworkJS는 웹 개발의 공식 프레임워크 같은 것이 아니라 단순히 프로그래밍언어이기에 정말 미친듯이 다양한 라이브러리와 프레임워크들이 등장하게 됐다.🔷프론트엔드 Javascript Framework    🔹React.js (다른것들과 달리 리액트는 라이브러리지만 프론트엔드 프레임워크로 분류된다)    🔹Angular    🔹Vue.js🔷백엔드 Javascript Framework    🔹Express.js    🔹Nest.js  🔷그래픽 Javascript Framework    🔹Three.js 등 프론트엔드, 백엔드 자바스크립트 프레임워크를 나열했는데, 이처럼 웹 브라우저나 웹 서버에서도 쓰인다.✅ 자바스크립트 런타임 = JS엔진 + API 및 기타 라이..

✅웹 개발은 무엇인가?웹 페이지 그 자체 + 웹 페이지 내 표기할 데이터🔷웹 페이지(FE)HTML = 문서구조(구조)CSS = 문서 꾸미기(형태)JS = 유저 인터렉션(유저 이벤트 처리 및 DOM 조작) 🔷데이터(BE)웹 페이지에 동적으로 표기할 데이터 및 데이터 조작의 모든것✅프론트엔드 웹 개발: Rendering = 웹 페이지의 화면 변경어떻게 유저의 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까? 버튼을 누르거나 페이지 이동 시 웹 페이지 화면을 어떻게 바꾸어줄까? -> DOM 조작🔷웹 페이지의 화면 변경: JS통한 HTML(DOM) 직접 조작결제하기 버튼을 누르면 결제하기 페이지로 이동하거나, 누르면 안되는 버튼을 누르면 경고창을 띄우거나1. JS를 통해 HTML(DOM)..