웹 기초 상식 정리

인터넷과 웹

인터넷은 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망, 즉 컴퓨터 네트워크를 의미하며 TCP/IP 기반의 네트워크가 세계적으로 확대되어 연결된 네트워크들의 네트워크를 의미합니다.

웹은 HTML이라는 문서 형태와 HTTP라는 문서 전송 프로토콜, URL로 문서의 위치를 표시하는 시스템을 말합니다.

즉, 웹보다 인터넷이 더 광범위한 범주이며, 인터넷으로 여러 기능을 할 수 있는데 그 중에서 HTTP 프로토콜을 사용하는 웹이 있는 것입니다.

1세대, 2세대, 3세대 웹의 발전과 각각의 특징

1세대 웹은 HTML을 중심으로 텍스트와 링크의 형태를 기본으로 한 정적인 화면을 구현

 

2세대 웹은 정적인 서비스에서 벗어나 동적인 서비스의 개발이 필요해져 HTML과 JAVASCRIPT를 이용한 2세대 웹서비스 시대로 넘어감

 

3세대 웹 환경에서는 HTML과 JAVASCRIPT의 역할이 바뀌면서 JAVASCRIPT 중심의 웹서비스 환경이 구축되기 시작

과거 사이트 구성을 위해서는 여러 개의 파일을 합치는 작업을 통해 웹 사이트를 구성했으나, 3세대 웹 환경부터는 Single Page Application(SPA), 자바스크립트 내에서 HTML 태그를 생성하여 하나의 파일에서 모든 사이트를 구성하게 됨

이 때부터 웹 서비스의 영역이 명확해지면서 눈에 보이는 부분(UX,UI)를 담당하는 프론트엔드와 데이터의 가공, 관리를 담당하는 백엔드 영역으로 분리가 되기 시작했다.

웹서비스는 수 많은 동시접속자, 어마어마한 데이터의 양을 처리해야할 필요성이 생기면서 프론트엔드와 백엔드로 분업하여 일하게 되었다.

 

 

 

모던 웹 아키텍처의 구성

현대에 들어 클라이언트가 다양해졌고 다양한 데이터를 처리할떄 각기능별로 api를 세분화해서 구성하는 방식으로 발전해왔다.

 

개발자 도구에 있는 다양한 패널의 종류와 기능

개발자 도구는 브라우저에 제공하는 하나의 도구로 브라우저마다 다르다 (Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)

Elements 패널 웹 페이지 구성과 구성 요소들의 스타일을 확인 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있

Console 패널 자바스크립트 코드를 브라우저에서 즉시 실행 하고 디버깅

Network 패널 네트워크 상으로 주고 받는 데이터를 확인하 API 크롤링, 페이지 로딩 성능 테스트

Application 패널 브라우저의 저장소에 담긴 데이터를 확인고 Local storage, Session Storage, Cookie로 나뉜다.

 

 

데이터베이스(Database)의 개념

데이터베이스는 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아 놓은 집합을 의미한다

관계형 데이터베이스 (RDBMS), 왜 사용할까?

데이터베이스 관리시스템 (DBMS, Database Management System) 데이터를 오랜기간 저장 및 보존하기 위해서 데이터 베이스를 사용합니다.데이터를 체계적으로 보존하고 관리하기 위해 사용합니다.

 

테이블(Table)의 관계는 - One to One, One to Many, Many to Many 의 관계가 있다.

Primary Key는 해당정보에 대한 고유 키값으로 데이터와 데이터를 연결할떄사용하고  Foreign Key 연결할 데이터의 PK이다

관계형 데이터베이스와 비관계형 데이터베이스의 차이

관계형 데이터베이스는 각각의 테이블들이 서로 상호관련성 을 가지고 서로 연결

하나의 테이블에 모든 정보를 다 넣으면 동일한 정보들이 불필요하게 중복되어 저장됨

여러 테이블에 나누어서 저장한후 필요한 테이블 끼리 연결 시키면 중복된 데이터를 저장하지 않음으로 디스크를 더 효율적으로 쓰고 또한 서로 같은 데이터이지만 부분적으로만 내용이 다른 데이터가 생기는 문제가 없어짐