💡WEB
웹(WEB)이란?
- World Wide Web, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
웹의 특징
- 정보를 하이퍼텍스트 형식으로 표현하며, 하이퍼텍스트를 따라 이동하며 다양한 정보/문서를 연결, 제공
웹 페이지 vs 웹 사이트
- 웹 페이지 - 웹의 페이지 한장
- 웹 사이트 - 페이지가 모인 책같은 역할
웹 브라우저
- 웹 페이지 웹 상의 데이터를 찾거나 읽을 때 사용하는 것
클라이언트와 서버
- 클라이언트
- 서비스를 요청하는 컴퓨터
- 서버
- 서비스를 제공하는 컴퓨터
프로토콜
- 클라이언트와 서버간의 약속
- 이를 지켜 통신해야함
웹 구조
- 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP를 사용하여 데이터를 주고 받음
💡프론트엔드
- 웹 서비스에서 사용자 측명의 그래픽 사용자 인터페이스로 사용자가 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당
HTML
- 웹 페이지 구성 요소들의 구조를 명시
CSS
- 웹 페이지 구성 요소들을 꾸밈
JavaScript
- 웹 페이지 구성 요소들에게 기능 연결
HTML 문법
- <> 태그
- 웹 페이지의 구성 요소 하나하나로 역할
CSS란?
- Cascading Style Sheets의 약자로 HTML을 꾸며주는 언어
HTML에 CSS를 적용하는 방법 3가지
- 인라인 : HTML 태그 안에 같이 작성
<h1 style ="color:red">Hello</h1>
- 내부 스타일 시트 : HTML 문서 안에 같이 작성
- 태그 안에
- 외부 스타일 시트 : HTML 문서 밖에 작성하고 연결
-
외부에 css 파일 작성 후 html 파일에서 import
<link rel="style sheet" href="login.css">
-
CSS
- 기본 태그 h1{ }
- class → .class_name{ }
- id → #id_name{ }
Javascript
- 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어
- 스크립트언어 : 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 “프로그램을 제어하는 스크립트 역할을 하는 언어”
💡백엔드
- 웹 서비스에서 사용자의 눈에 보이지 않는 서버 측에서 프론트엔드에서 전달받은 데이터와 연산을 활용하여 처리하고 프론트엔드 결과를 전달
백엔드의 구조
웹 서버의 역할
- 정적 페이지에 대해 대응
- 동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달
- 정적 페이지: 화면의 내용/데이터 등의 변동이 없는 페이지
- 동적 페이지: 데이터 처리/연산을 통해 화면 내용, 데이터가 변하는 페이지
웹 어플리케이션 서버
- 동적 페이지 처리
- 필요한 데이터 연산을 위해 DB와 연결되어 있으며 데이터 수정, 삭제, 조회에 대한 처리를 요청
- 데이터베이스: 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체
HTTP 프로토콜 템플릿
- head
- 통신 상태
- ex) 200, 404, 500 → HTTP code
- 응답 형태
- ex) HTML
server.js 모듈화
- server.js에서 만든 서버를 index.js(다른 js 파일)에서 사용 가능
let server = require('./server');URL 읽어내기
(Uniform Resource Locator)
- 인터넷 상에서 웹 페이지가 어디있는지 위치를 알려주는 주소
Server와 Router의 역할
- server : request를 받음
- router : requestdml URL에 따라 루트를 정해줌 (어디로 갈지 길만 알려줌)
💡데이터베이스란?
- 데이터를 통합하여 효율적으로 관리하기 위한 데이터의 집합체
- 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산 가능
SQL
- 데이터베이스에 연산을 요청하기 위해 사용되는 언어로 데이터를 생성, 조회, 수정, 삭제 등과 같은 기능 수행
CREATE
- (방 확인)SHOW DATABASES;
- (방 만들기)CREATE DATABASE Tennis;
- (방 들어가기)USE Tennis;
- (방 안 저장소 만들기) CREATE TABLE member ( id INT, name VARCHAR(30), pwd VARCHAR(30) )
SELECT/INSERT
- 테이블 데이터 조회
- SELECT 컬럼명 FROM 테이블명;
- 테이블 데이터 삽입
- INSERT 컬럼명1, 컬럼명2, … INTO 테이블명 VALUE (컬럼1 데이터, 컬럼2 데이터,…);
- INSERT 컬럼명1, 컬럼명2, … INTO 테이블명 VALUE (컬럼1 데이터, 컬럼2 데이터,…);
- 특정 데이터 조회
- SELECT 컬럼명 FROM 테이블명 WHERE 조건;
UPDATE/DELETE
- 테이블 데이터 수정
- UPDATE memeber SET pwd=’zzzz’ WHERE id = ‘tennisking’;
- UPDATE memeber SET pwd=’zzzz’ WHERE id = ‘tennisking’;
- 테이블 데이터 삭제
- DELETE FROM member WHERE name = “kim”
