#27 [서버 프로그래밍] (06.13)

sookyoung.k·2023년 6월 13일

nodejs 뉴딜IT

🦢 [뉴딜 IT] NEWDEAL TIL

목록 보기

31/49

🐨 웹서버

📍 웹 서버의 구분

✔️ 하드웨어

일반적으로 우리가 사용하는 컴퓨터를 생각하면 된다
서버를 구동시키는 컴퓨터
컴포넌트 파일: HTML(웹 구조), CSS(웹 디자인), Javascript, Image → 인터넷을 통해 클라이언트에 전달
웹사이트의 컴포넌트 파일을 모아둔 것이 하드웨어

✔️ 소프트웨어

사용자가 어떻게 호스트 파일들에 접근하는지
브라우저가 웹 서버에서 불려진 파일을 필요로 할 때! 브라우저가 HTTP를 통해 파일을 요청한다
HTTP 프로토콜을 사용하여(=통신 방식) 웹 서버(하드웨어)에 요청 → HTTP 서버가 응답

📍 정적/동적 웹페이지

→ Web server = Files + HTTP server

브라우저가 웹 서버에서 불려진 파일을 필요로 할 때, 브라우저는 HTTP 프로토콜을 통해 파일을 요청한다.
웹 서버(하드웨어)에 도달했을 때, HTTP 서버(소프트웨어)는 요청된 문서를 HTTP를 이용하여 보낸다(응답).

$*$ 참고
https://www.mobiinside.co.kr/2022/09/08/http/

✔️ 정적 웹 페이지

'정적이다' = 멈춰있다
미리 멈춰있는 파일을 그대로 보여준다
유저는 고정된 페이지를 보게 된다
요즘엔 거의 찾아보기 어려움 (대부분 동적 웹 페이지로 만든당)

장점

속도가 빠르고 비용이 적게 든다

단점

서비스가 한정적이고 페이지 수정, 추가, 삭제 작업이 모두 수동(관리가 어려움)

✔️ 동적 웹 페이지

움직이는 페이지~
웹 서버의 데이터들을 스크립트에 의해 가공처리 된 후생성되어 전달되는 웹 페이지
유저는 상황, 시간, 요청 등에 따라 달라지는 웹페이지를 보게 된다

장점

서비스가 다양해질 수 있다, 웹 사이트 구조에 따라 추가, 수정, 삭제가 쉬워서 관리가 쉽다

단점

"상대적으로" 느린 속도(솔직히 이젠 단점 아님 웬만하면 다 걍 빠름), 웹 서버 외의 어플리케이션 서버가 필요하기 때문에 추가 비용 발생

🐨 HTML

📍 HTML(HyperText Markup Language)

웹페이지를 기술하기 위한 마크업 언어

➡️ 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어 (태그를 통해 정보를 구조화)
= 그냥 화면을 보여주기 위한 언어라는 거임

$*$ 마크업 언어

특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어
프로그래밍 언어는 아니다!

✔️ <!DOCTYPE html> - HTML 문서임을 선언!
✔️ <html> ~ </html> - 태그 안에 기술
✔️ <head>~</head> = title, 외부 파일 참조, 메타데이터 설정 등 (웹 브라우저에 표시 x)
✔️ <body>~</body> = 실제 웹 브라우저에 표시되는 부분

💻 요소(Element)

HTML 요소는 시작 태그와 종료 태그 사이에 위치한 콘텐츠로 구성
HTML document는 요소들의 집합

💻 속성 (Attribute)

요소의 성질, 특징을 정의하는 명세
요소는 성질을 가질 수 있고, 요소에 추가적 정보를 제공한다.

🌟 💻 주석 (comments)

✔️ 주석을 얼마나 깔끔하게 잘 다는지가 개발자의 중요한 능력이다~! (개발자에게 코드를 설명하기 위해 사용!! 그 개발자가... 2주 뒤의 내가 될 수도 있음 그러니까 잘 써야 함)

➡️ 협업과 내가 짠 코드를 망각하지 않기 위해서... 꼭 달아야 한다... 코드 설명을 잘 합시다!

📍 Tag

`title Tag`

문서의 제목 정의

`style Tag`

HTML 문서의 style 정보 정의

`link Tag`

외부 리소스와의 연계 정보 정의 (주로 CSS파일 연계)

`script Tag`

데이터와 실행 가능한 코드를 문서에 포함할 때 사용 보통 JavaScript 코드와 함께 사용
src 속성을 사용하여 외부의 JavaScript 파일 로드

`Headings Tag` (제목 태그)

h1 ~ h6

`Text Tag` (글자 태그)

<p> 단락을 지정하는 태그 (본문)
<b>, style 속성, <strong>

`<br> Tag`

강제 줄 바꿈 지정
종료 태그 사용 x 연속 사용 가능

Hyperlink

문서 안에서 직접 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리

link(고리)라고 줄여 말하기도 한다
→ 누르면 웹 사이트나 프로그램 등으로 이동하는 것
(하이퍼텍스트는 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트)

`href 속성`

이동하고자 하는 파일의 위치(경로)를 값으로 받음

디렉토리

루트 디렉토리 c:\ - 파일 시스템 계층 최상위
홈 디렉토리 c:\Users\{계정명} - 시스템의 사용자에게 할당된 ㅐ별 디렉토리
작업 디렉토리 ./ - 작업 중인 파일의 위치한 디렉토리
부모 디렉토리 ../ - 작업 디렉토리의 부모 디렉토리

🌟 파일의 경로

✔️ 절대 경로 - 특정 파일의 절대적인 위치 지정
c:\

✔️ 상대 경로 - 현재 작업 디렉토리를 기준으로 특정 파일의 상대적인 위치 지정
./, ../

➡️ 상대경로가 있으면 루트 디렉토리와 상관 없이 파일 찾기가 쉽다~ 절대경로만 있으면 환경이 바뀌었을 때 바꿔주기 개빡쎄니깐,,,

`href` 속성에서 사용 가능한 값

절대 URL, 상대 URL, Fragment identifier (페이지 내의 특정 id 요소에 대한 링크), 메일, script

`Table`

<table> - 표를 감싸는 태그 , <tr> - 행, <th> - 열의 제목, <td> - 열

`form`

유저가 입력한 데이터를 수집하기 위하여 사용 (값을 서버에게 넘겨주기 위한!)
→ input, testarea, button, select, checkbox, radio button, submit button

✔️ 속성
action - 주소! 어디에 보내줄 것인가 (데이터가 전송될 URL 지정)
method - 어떤 방식으로 보내줄 것인가! 데이터를 보내는 형태 (get/post)

GET

전송 url에 입력 데이터를 쿼리스트링 형식으로 보내는 방식

url에 전송 데이터 노출 → 보안 문제 있을 수도,,, 그리고 데이터의 한계 존재 (255자)

전송 url 바로 뒤에 ?를 통하여 데이터의 시작을 알리고 'key=value' 형태의 데이터를 추가

POST

request body에 데이터를 담아 보내는 방식

url에 전송 데이터 노출 x → 보안 굿 (get에 비해서 속도가 느릴 수 있음)

`input type`

$*$ 그냥 링크에서 보자
http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html

`select`

여러 개의 리스트 중 여러 개의 아이템 선택
서버에 전송되는 데이터는 select 요소의 name을 속성의 키 값으로, option 요소의 value를 key 값으로 하여 key = value 형태로 전송된다.

🐨 JavaScript

정적인 HTML을 동적으로 표현하기 위한 프로그래밍 언어를 도입하기로 결정하면서 개발된 언어

초창기에는 화면을 동적으로 꾸며주는데만 사용되었다!(보조적인 역할)
→ 점점 화면 구성에 적절하게 발전 + node.js를 통해서 웹 서버를 구축하는 것도 편해짐

웹 전용 언어 (웹 브라우저에서 동작하는 유일한 프로그래밍 언어)

개발자가 별도의 컴파일을 수행하지 않는 인터프리터 언어
객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
→ 인간이 사고하고 움직이는 방식을 코드로 구현하는 것이 객체 지향이다~ 정도로 이해하기

📍 변수

데이터를 담기 위한 메모리 공간 (데이터를 담는 통에 이름을 붙이는 것!)

$*$ 변수를 왜 만들었을까?!

→ 라벨링을 해두면 데이터를 찾기 더 쉬우니깐!
→ 주소값을 알면 존재하는 데이터를 더 찾기 쉬워용~~ (변수 선언을 안 해도 데이터는 저장되어 있음)
= 공간에 이름을 부여하는 것이 변수를 생성하는 것

✔️ 자바스크립트는 선언과 동시에 값을 할당할 수 있다
✔️ 요즘은 선언 시 const, let 키워드로 생성함 (var 잘 안 씀)
→ const 데이터 할당 시 변경 불가 let 안에 있는 데이터 변경 가능

`number`

JavaScript에서 데이터타입은 모두 10진수로 해석

`string`

'' , " "

`boolean`

true, false
if 같은 조건문에서 자주 사용

`null`

변수 값이 없다

`undefined`

변수 선언 후 값이 할당되지 않았을 경우

📍 연산자

이항 산술 연산자, 단항 산술 연산자, 할당 연산자, 비교 연산자, 대소 관계 비교 연산자, 논리 연산자

📍 조건문

if~else문, switch문

📍 반복문

주어진 조건식의 평가 결과가 참인 경우 코드를 실행하고 그 후 다시 검사하여 조건이 거짓일 때까지 반복
for문 - 조건식이 거짓이 될 떄까지 코드를 반복 실행, while문 - 주어진 조건식의 평가 결과가 참이면 코드 계속, 거짓이 되면 실행 종료, do...while문 - 코드 실행하고 조건식 평가 (무조건 한 번은 실행)

✔️ while과 do~while의 차이점
→ do~while은 최초의 한 번은 무조건 실행됨

📍 REPL (Read Eval Print Loop)

Read: 유저의 값을 입력 받아 JS 데이터 구조로 메모리에 저장
Eval: 데이터 처리(Evaluate)
Print: 반환된 값 출력
Loop: R-E-P 반복

📍 `Package.json` 파일 생성

노드 어플리케이션/모듈의 경로에 위치
패키지의 속성 정의

노드와 NPM에 설치한 후 원하는 위치의 폴더에서 npm init하면 생성

package.json 생성 후에 의존성 모듈을 설치하면 된다
→ 소스 코드에 대한 오픈이 편해졌다

📍 `NPM` (`Node Package Manager`)

주요 기능두 가지
1. node.js의 패키지/모듈 저장소
2. node.js 패키지 설치 및 버전/호환성 관리를 할 수 있는 커맨드라인 유틸리티

npm을 사용하여 모듈 설치!

npm install <모듈이름>

uninstall - 제거, update - 업데이트, search - 검색

📍 Router로 request 처리

브라우저에서 Request가 왔을 때 서버에서 어떤 작업을 할 지 Router를 통해 설정

🐨 mysql

📍 DataBase(DB)

통합하여 관리되는 데이터의 집합체 (데이터를 모아놓는 공간)

$*$ 왜 만들었을까?!

→ 중복된 데이터 없애고, 자료를 구조화하고, 효율적인 처리를 할 수 있도록 관리해주니깐

여러 업무에 여러 사용자가 데이터 베이스를 사용할 수 있다 = DB
별도의 미들웨어에 의해서 관리된다 = DBMS (데이터베이스 관리 시스템)

특징

즉각적인 처리와 응답
생성, 수정, 삭제를 통해 항상 최신 데이터 유지
동시에 공유할 수 있기 때문에 사용
주소가 아닌 내용에 따라 내용을 참조할 수 있다
데이터의 논리적 구조와 응용프로그램은 별개로 동작된다

📍 SQL (Structuered Query Language)

데이터베이스에서 데이터를 정의, 조작, 제어하기 위해 사용하는 언어

⭐ DDL

테이블 생성, 삭제하거나 구조 변경

CREATE, ALTER, DROP

🌟 DML

저장된 데이터를 처리하거나 조회, 검색

INSERT, UPDATE, DELETE, SELECT 등

DCL

저장된 데이터를 관리하기 위하여 데이터의 보안성 및 무결성 등을 제어

GRANT, REVOKE 등

📍 CREATE

새로운 데이터베이스 생성, 새로운 데이터베이스 선택, 테이블 생성

CREATE DATABASE 데이터베이스이름;
USE 데이터베이스 이름;
CREATE 테이블이름 ();

💻 데이터의 필드타입

숫자형 TINYINT[(M)], INT[(M)]
문자형 CHAR(M), VARCHAR(M), TEXT

$*$ 왜 나눠놨을까?!

→ 메모리 낭비를 막기 위해서!
→ 더 많은 데이터를 관리하기 위해서!

💻 제약 조건 (constraint)

데이터의 무결성을 지키기 위해 데이터를 입력받을 때 실행되는 검사 규칙

NOT NULL
→ 빈 값 X
UNIQUE
→ 중복된 데이터 X
PRIMARY KEY
→ NOT NULL + UNIQUE
→ 왜 쓸까?! 데이터를 하나하나씩 선택하기 위해서!
FOREIGN KEY
→ 하나의 테이블을 다른 테이블에 의존
DEFAULT
→ 기본값 설정

💻 `AUTO_INCREMENT`

자동으로 데이터 증가

→ 해당하는 테이블에 PRIMARY KEY가 없을 때 많이 사용합니다
Ex. 게시판의 게시글 번호

📍 ALTER

데이터 베이스 수정, 테이블 수정

ALTER DATABASE 데이터베이스 이름 CHARACTER = 문자집합이름
ALTER TABLE 테이블이름 OPTION

ADD, DROP, MODIFY COLUMN

ALTER TABLE 테이블이름 ADD 필드이름 필드타입;
ALTER TABLE 테이블이름 DROP 필드이름;
ALTER TABLE 테이블이름 MODIFY COLUMN 필드이름 필드타입;

📍 DROP

데이터 베이스나 테이블 삭제

DROP DATABASE 데이터베이스이름, DROP TABLE 테이블 이름

📍 INSERT

테이블에 새로운 값 추가

INSERT INTO 테이블 이름 (필드이름 1, 2, ...) VALUES (데이터값 1, 2, ...)

VALUES → 두 개 이상의 값일 때 VALUE를 쓰면 에러가 난다. 그래서 일반적으로 2개 이상의 값을 넣을 수 있는 VALUES를 사용한다.

📍 UPDATE

테이블 내용 수정

UPDATE 테이블이름 SET 필드이름1 = 데이터값 1, ... WHERE 필드이름 = 데이터값;

$*$ 인서트보다 주의해서 사용해야 한다,,,
✔️ WHERE절의 조건에 맞는 테이블의 값을 수정한다
✔️ WHERE절이 없다면 테이블의 모든 값을 수정한다

📍 DELETE

테이블의 데이터 값 삭제

DELETE FROM 테이블이름 WHERE 필드이름=데이터값;

✔️ 얘도 WHERE 절 없으면 테이블의 모든 데이터 삭제되니 주의

✔️ DROP문은 테이블을 삭제, DELETE는 테이블 내의 데이터만 삭제한다는 차이가 있다

📍 SELECT

테이블의 데이터 선택 (조회)

SELECT 필드이름 FROM 테이블이름 [WHERE 조건식];
SELECT $$*$$ FROM 테이블이름

✔️ * → 모든 필드 값의 데이터 선택

✔️ SQL에도 IF같은 조건문이 존재한다!
WHERE {COLUMN} = {VALUE};

✔️ = 위치에 비교연산자 사용

✔️ WHERE {COLUMN} IN (VALUE_LIST)
➡️IN 연산자 → 해당하는 컬럼의 값들이 LIST 안에 포함되어 있는지

✔️ NOT IN ➡️ 리스트에 없는 값 선택

sookyoung.k

영차영차 😎

이전 포스트

#14 [스마트계약프로그램 솔리디티] (05.22)

다음 포스트

#27 [서버 프로그래밍] (06.13)

🦢 [뉴딜 IT] NEWDEAL TIL

🐨 웹서버

📍 웹 서버의 구분

✔️ 하드웨어

✔️ 소프트웨어

📍 정적/동적 웹페이지

✔️ 정적 웹 페이지

장점

단점

✔️ 동적 웹 페이지

장점

단점

🐨 HTML

📍 HTML(HyperText Markup Language)

💻 요소(Element)

💻 속성 (Attribute)

🌟 💻 주석 (comments)

📍 Tag

title Tag

style Tag

link Tag

script Tag

Headings Tag (제목 태그)

Text Tag (글자 태그)

<br> Tag

Hyperlink

href 속성

디렉토리

🌟 파일의 경로

href 속성에서 사용 가능한 값

Table

form

GET

POST

input type

select

🐨 JavaScript

📍 변수

∗*∗ 변수를 왜 만들었을까?!

number

string

boolean

null

undefined