WEB-APP 관련 필수 지식
WEB-APP 관련 필수 지식
# 웹
World Wide Web 의 약자
인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간
# HTML
HyperText Markup Language
웹에서 정보를 전달하기 위해 만들어진 언어
# 웹브라우저
웹을 통해 전달되는 정보를 보여주는 수단
전달받은 HTML 을 화면에 보여주는 기능
종류별로 다른 특성을 지님 하지만 W3C의 공통 규격을 따름
ex) 익스플로러, 엣지, 크롬, 파이어폭스, 사파리
# 웹브라우저의 역할
1. 사용자의 요청을 받아주는 일
2. 받은 요청을 서버로 전달하고, 서버로부터 결과물을 전달 받는 일
3. 서버로부터 받은 정보를 해석하고, 그려주고, 동작시켜 주는 일
# HTML vs HTML5
HTML의 버전업 -> HTML5
HTML5가 되면서 추가된 기능
1. 멀티미디어 실행 기능 강화
2. 다양한 그래픽 요소의 강화
3. 모바일 웹 기능성 강화
4. Client Side Technology 기술 중심 진화
# 세션 vs 쿠키
상태 유지의 역할 -> 웹 화면이 이동해도 유지되어야 하는 정보
기본적으로 HTML은 화면이 바뀌면 기존의 정보를 초기화함
때문에 필요한 정보들을 유지하기 위해서는 별도의 기술들이 필요 그것이 바로 쿠키와 세션임
- 쿠키 : 작업 정보, 상태 정보
내 로컬 PC에 실제 파일로 저장 -> 내 PC 공간 자원 분산 하지만 리스크 존재 -> 치명적이지 않은 유저 정보를 저장
- 이름, 값, 만료일(저장 기간 설정), 경로 정보 등 세팅 가능함
- 클라이언트에 총 300개의 쿠키 저장 가능
- 하나의 도메인 당 20개의 쿠키 가능
- 하나의 쿠키는 4KB 까지 저장 가능
- 세션 : 로그인 정보, 개인정보 등
서버 메모리 혹은 외부 저장소에 저장 -> 서버의 자원 소모는 증가하지만 안전함 -> 치명적인 중요한 유저 정보 저장
# GET 방식 vs POST 방식
HTTP의 요청 전달 방식
HTTP 패킷 -> header + body
GET 방식 -> header에 전달 정보를 담아서 보냄
ex ) www.test.com?id=11&pass=1234
- body는 비우는 방식
- 일반적으로 전달하는 정보가 적을 때
- 조회 조건 전달 시 사용
POST 방식 -> header는 접속 정보, body에는 전달할 데이터를 담아서 보냄
ex ) "id" : "11",
"pass" : "1234"
- 일반적으로 전달하는 정보가 많을 때
- 삽입 조건 전달 시 사용
# SSR vs CSR
SSR
- 서버에서 다 랜더링된 HTML 정보가 이동
- 이후로도 계속 서버에서 전부 받음
- 화면 리로딩 기반의 불편함, 속도가 느림
CSR
- 정보를 서버에서 받아서 로컬 PC에서 랜더링
- 이후 필요한 데이터만 전달
- SEO 문제 존재 -> 해결 중
SPA란?
- Single Page Application
- 클라이언트 사이드에서 화면 랜더링 및 동적 정보 교환이 되도록 한 프로그램
- 랜더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지 갱신
- Angular, React, Vue
SPA의 장점
1. 필요한 부분만 랜더링 하기 때문에 전체적인 트래픽 감소 및 렌더링 효율 증가
2. 빠른 화면 이동 가능
3. 자연스러운 사용자 경험(UX)를 제공
4. 모듈화 또는 컴포넌트별 개발 용이
5. 백엔드와 프론트엔드가 비교적 명확하게 구분
SPA의 단점
1. 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드하기 때문에 초기 구동 속도 느림
2. 데이터 처리를 클라이언트에서 하는 경우가 많은데, Javascript로 구현되므로 코드가 외부에 노출되는 보안 문제 발생
3. 검색엔진 최적화 SEO 가 어려움