문득 나는 개발자라는 분야에 대해 얼마나 알고 있을까? 를 생각했던 적이 있다
그래서 나중에라도 내가 볼 수 있게 정리를 좀 하려고 한다
WEB 1.0, 2.0, 3.0
WEB 1.0은 읽기 전용, 주어진 정보를 받아들이기만 하는 수동적 형태
WEB 2.0은 정보와 상호작용이 가능, 유튜브나 블로그 등이 있음
WEB 3.0은 블록체인을 이용해서 탈중앙화 됨, AI를 이용한 맞춤화 검색이 가능
웹서버 / WAS
사용자(클라이언트)의 요청을 받아들여 그에 맞는 결과를 사용자에게 전달하는 프로그램
동적이냐 정적이냐의 차이!!
웹서버
웹 브라우저에서 http 요청을 받아 html css js 같은 정적인 파일을 제공!
동적인 컨텐츠를 제공하기 위한 요청을 WAS에 전달 -> WAS가 클라에 다시 전달
Apache, Nginx가 있다
WAS
비지니스 로직 처리가 핵심
데이터베이스 조회나 다양한 로직처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 웹
Tomcat, JBoss등이 있음
클라이언트 - 웹서버 - WAS - DB 순으로 연결 되어있긴 함
WAS와 웹서버를 같이 사용하는 이유
업무를 분담해서 서버의 부하를 방지!!
WAS를 여러개 두면 로드밸런싱도 가능
보안 측면 장점 -> 클라이언트에서 was로 바로 가는게 아닌 웹서버를 통해서 가니까 (리버스 프록시)
UI/UX
UI - 사용자와 전자기기가 상호 작용하는 지점을 의미, 스마트폰 화면레이아웃, 글씨체 등
브랜드에 맞게 디자인을 사용하고 이용성 좋을때 고객 만족도가 높아짐
UX - 서비스를 사용하면서 사용자가 얻는 경험
긍정적인 경험을 늘림으로써 서비스 만족도와 브랜드 충성도를 높인다
사용자의 서비스 만족도는 곧 서비스의 성공과 직결되기 때문에 UI/UX를 잘 고려해야함!
디자인 시스템
웹이나 앱 같은 서비스 디자인에 적용되는 디자인 원칙 - UI 가이드 라인 UX가이드라인, 컴포넌트 모아둔 것
ex) 네이버의 맵과 카카오 맵에서 일관성이 보임, 애플 디자인 소스
색상,타이포그래피, 스타일, 일관된 ui ux 요소등을 포함
일관된 디자인(시간 낭비 덜함), 편리한 협업
반응형 웹 디자인
웹 사이트가 사용자의 디바이스 해상도에 반응하여 콘텐츠의 크기 및 배치를 최적화
다양한 크기에 맞게 유동적으로 대응, 비용절감, 검색에 유리, 유지보수에 용이
고려사항
로딩시간증가 - 하나의 css파일 내에 모든 해상도에 대응되는 스타일 정보가 있음. 그래서 css 데이터가 큼!
콘텐츠가 많고 복잡한 웹 페이지에 부적합
요즘에는 반응형 웹디자인을 고려할때 페이지의 구성요소 단위로
반응성과 기능성을 늘리는 추세 각각의 컴포넌트 반응성을 고려
DOM(Document Object Model) / Virtual DOM
DOM - html xml 문서에 접근하기 위해 웹 브라우저에 내장된 API
Document는 html문서, object는 html내 객체를 의미! ⇒ dom은 문서내 모든 요소를 정의하고 각각의 요소에 접근하는 방식을 제공
모든 웹브라우저는 내장된 dom api를 사용해 HTML문서를 읽어서 화면에 보여줌!
html과 js는 다른 언어여서 서로 이해 못함 =>
js가 html을 이해할 수 있게 html을 조작해서 DOM에 접근
DOM은 웹문서의 부모와 자식 요소인 각 노드가 트리구조로 되어있음
그래서 js가 html의 각 노드에 접근이 가능!
Virtual DOM
DOM을 흉내낸 js객체, React.js Vue.js 등이 이걸 사용하는 프레임워크임
메모리 상에서 동작 하므로 DOM 보다 속도가 빠름, 실제 렌더링되는것도 아니어서 연산 시간도 짧음
DOM이 구조가 복잡해지면서 최적화와 유지 보수 어려움
- dom조작 때마다 렌더링 과정 많아지면 브라우저에 과부화, 자원을 많이 소모
dom은 조작때 렌더링 됨 → 내용이 변경될때마다 렌더링 한다 → 기존 내용도 다시 렌더링 됨
변경된 부분만 파악해서 그 부분만 렌더링 → virtual DOM임
기존 브라우저는 DOM변경사항 있으면 dom을 직접 조작 → 기존 내용과 변경된 virtual dom을 비교해서 실제 dom에 반영!
html 전체 코드가 virtual DOM에 렌더링 virtual dom을 비교
바뀐 부분 DOM에 반영!
virtual dom도 최적화 안하면 빠른건 아님!!
정적인 html문서의 각 요소를 js가 dom을 이용하여 사이트가 동적으로 움직이게 만들어 줌
SEO(search engine optimization)
웹사이트가 검색결과에 더 잘 노출 되도록 최적화 하는 과정
검색 엔진의 작동원리는 사용자가 검색창에 키워드를 입력하고 검색했을때 크롤러가 수집한 정보를 바탕으로 최적의 정보를 제공
네이버나 구글은 자체 개발 알고리즘에 의해 크롤러가 매일 인터넷에서 정보를 수집
title 태그에 컨텐츠를 말하는 키워드를 작성 -> 원하는 콘텐츠로 제공
meta name=description 태그도 크롤러가 키워드 비교하는 데이터로 사용됨
크롤링 crawling
웹을 기어다니며 정보를 탐색, 크롤링은 하나의 페이지에서 웹링크를 반복적으로 찾고 가져옴
ex ) 가격비교사이트에서 제품정보를 수집해서 최저가로 판매하는 사이트를 찾아줌
검색엔진이 정보를 수집하고 사용자에게 제공하는 과정
1- 정보 수집: 크롤러를 이용해 다른 웹사이트의 정보들을 수집, robot.txt 규칙을 준수
2- 수집된 정보 색인화: 일정한 순서에 따라 배열
3- 자료 순위 매기기 - 입력한 검색어를 조합하여 자료 순위 매기고 제공
CSR / SSR
웹 페이지의 렌더링 방식
렌더링이란 - html css js등으로 웹페이지는 이루어져 있음
작성된 파일들은 렌더링 엔진을 거쳐 웹페이지 화면으로 그려짐 - 브라우저에 파일을 그려주는 것!
CSR
클라이언트 단에서 렌더링을 수행
html css등의 리소스를 클라이언트에 다운로드 하고
클라이언트 사이드에서 페이지 전환을 처리
서버는 페이지가 처음 그려질때 웹 리소스 파일을 제공하는 역할과 페이지 로딩후 요청한 데이터를 전송
html 빈 파일을 먼저 서버가 보냄 ->
CSR방식에서는 html 다운로드 - js css다운로드 - html 구성
다운받은 데이터를 이용해 클라이언트 단에서 동적으로 HTML을 생성하고 보여줌
사용자의 클릭으로 웹페이지 변경사항 생겨도 서버에 html 파일 요청 안하고 클라에서 웹페이지 렌더링 구성
SSR
서버로 해당 페이지에 대한 요청 - 필요한 html css 등을 이용해 간단하게 렌더링해서 클라에게 반환
서버에서 완전한 html파일을 만들어서 제공
서버에서 웹페이지를 동적으로 제어하기 위해 필요한 js파일을 서버로부터 다운
CSR 장점 단점
쟝졈 - 처음만 서버에서 파일 받고 나머지지는 안받음 ,초기 로딩 제외하고 렌더링 속도 빠름 , 성능면에서 장점 빨리 렌더링 되니까 ux면에서 이득
단점 - 첫 화면 로딩속도 느림, html 파일 자체가 비어있어서 SEO에 어려움
SSR 장점 단점
장점 - 웹페이지 요청하면 서버에서 html완성해서 줌, 첫 로딩 속도 빠름, html 파일에 내용이 들어있으니까 SEO가 가능
정적인 페이지 많고 seo고려한다면 이거!
단점 - 화면 변화때마다 화면 깜빡임 ㅂ문제 발생, 서버 과부하 단점,
