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 가 어려움