개발공부 기록지

URL (Uniform Resource Locator) ?

웹상에서 원하는 자원(웹사이트, 문서, 이미지, 동영상등)을 정확히 찾을 수 있는 고유한 주소

URL의 구조

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2

http - 제일 앞부분인 해당자원을 얻기 위해 어떤 통신규약, 즉 프로토콜

https - 좀 더 보안이 강화된 프로토콜

www.example.com - 호스트 주소,  IP주소(ex 74.125.24.101)를 문자형태로 바꾼것 = DNS

:80 -  포트 번호 (고유한 번호), 이를 통해서 만 자원이 오갈 수 있다.

path/to/myfile.html - 경로(path), 컴퓨터에 있는 파일의 경로와 비슷한 역할

?key1=value1&key2=value2 - 파라미터, 웹 서버에 전달할 문구(요청)

공백이 있으면 안된다.

URL? URI?

URI = Uniform Resource Identifier : 자원을 구분할 수 있는 유일한 식별자
URL = Uniform Resource Locator : 자원의 위치를 구별할 수 있는 고유한 주소

URN = Uniform Resource Name : 자원을 지칭하는 고유한 이름

URL (자원위치) +  URN (자원이름) = URI(자원 식별)

URL을 IP로 변환하는 DNS (Domain Name System)

DNS 는 우리가 입력한 웹사이트(도메인) 주소를 컴퓨가 이해할 수 있는 IP 주소로 변환 해주는 역할

Domain & IP

(ex) 지도 앱에서 장소명 (예술의 전당) 을 치면 위치(장소명이 위치한 주소, GPS 좌표)가 나오는 것

Domain : 장소명  

IP 주소 : 장소명이 위치한 주소 → 컴퓨터가 이해할 수 있는 IP 주소

한 웹 사이트의 IP주소가 (123.456.789.1) 라면  기억을 하기 어렵다

그래서 쉽게 접근할 수 있도록 호스트 이름이 생김. 이것이 도메인(www.example.com).

123.456.789.1 → www.example.com  

도메인의 구조

최상위 도메인이 com, net, org, edu, gov, mil, int 과 같은 일반 도메인인 경우

-2 단계에서 도메인 신청자가 원하는 이름을 사용

최상위 도메인이 국가 도메인인 경우

-  2단계 도메인은 기관을 분류(co, or, ac 등)하기 위해서 미리 정의된 이름을 사용

DNS ?

DNS : 도메인과 IP 주소를 서로 변환해주는 역할을 하는 시스템 , 변환 시스템

DNS 서버 (네임서버) : 변환 시스템을 운영하는 서버

DNS의 통신방법

Local DNS : 우리가 일반적으로 이용하는 인터넷 통신사의 DNS 서버

ROOT DNS : 최상위 도메인( 1차 도메인, .com .kr . org)을 관리하는 서버의 정보를 알려주는 역할

최상위 도메인 DNS : 최상위 도메인을 관리하는 서버 종류에 따라서 다르게 관리하고 있다. 예) com DNS, kr DNS, ..

• DNS 서버(Local DNS)에 해당 도메인에 대한 IP 주소가 없는 경우 설명

주소창에 google.com 이라는 도메인을 입력했을 시

1번 & 8번

1번 :  User  → ( www.google.com ) → Local DNS  

8번: IP 주소를 알고 있으면  Local DNS -> (74.125.24.101 )-> User

2번 & 3번

2번 : Local DNS → (www.google.com IP 주소를 아니?) → Root DNS

3번 : Root DNS → (모르겠는데. 내가 알려주는 com DNS 서버로 가볼래?) -> Local DNS

4번 & 5번

4번 : Local DNS → (www.google.com IP 주소를 아니?) → Com DNS

5번 : Com DNS → (모르겠는데. 내가 알려주는 .google.com DNS 서버로 가볼래?) -> Local DNS

6번 & 7번

6번 : Local DNS → (www.google.com IP 주소를 아니?) → google.com DNS

7번 : google.com DNS → (어 알아! 74.125.24.101 이야) →  Local DNS

8 번

Local DNS -> (74.125.24.101 )-> User

참고 자료

https://gigaline.com/okdomain/info/info-8.html

Network

그물처럼 서로 긴밀하게 연결된 것.

즉,  컴퓨터, 스마트폰, 노트북, IPTV 등 인터넷에 연결되는 다양한 기기들이 서로 연결되어 정보를 주고 받는것

LAN (Local Area Network)

물리적으로 가까운 영역에 있는 기기들이 서로 연결된 소규모 네트워크

WAN (World Area Network)

지역이나 국가등 물리적으로 넓은 영역에 있는 기기들을 서로 연결하는 광역 네트워크

여러 곳에 흩어진 소규모 네트워크가 서로 통신할 수있게 연결한 것 -> LAN 을 서로 연결한 것을 WAN

OSI 7계층

Open Systems Interconnection 7 : 통신이 일어나는 과정을 7단계로 구분시키고, 단계별 표준을 정의한 것

WHY?

많은 사람들이 사용할 때 문제가 생기지 않도록 하기위해서 서로 다른 시스템이 잘 연결(호환)될 수 있게 각 단계를 구별하고 이를 표준화 함.

이점

• 계층 내 장치나 통신 규약이나 프로토콜이 달라져도 통신을 할 수 있게됨.
• 처음보거나 새로 개발된 장치/프로토콜을 빠르게 예측고 이해가능
• 문제 발생시 해당 계층만 고칠수 있게 되어 유지및 관리도 수월해짐

TCP/IP 4 계층

현대 네트워크가 대부분 사용 하는 모델 => TCP/ IP 모델 혹은 인터넷 프로토콜 스위트(internet protocol suite)

두 모델이 계층을 다르게 나눈 이유

OSI 모델은 다른 기종의 컴퓨터끼리도 네트워크를 형성할 수 있게 역할별로 계층을 나누고 표준을 정함

TCP / IP 모델은 실제로 다른 컴퓨터들이 데이터를 주고받을 수 잇는 프로토콜을 만들어 실무에 적용

OSI 모델로 보는 데이터 전송

웹( Web) ?

방대한 양의 문서에 범세계적으로 접근하 수 있게 만들어진 프로그램

하이퍼텍스트 (Hypertext) ?

웹에서  효과적으로 다양한 정보를 주고받기 위한 일련의 규칙 중 하나

지식을 연결해주기 위해 하이퍼링크(Hyperlink)를 포함한 문서를 말한다.

하이퍼텍스트 형태로 작성된 문서 → 웹페이지라 한다.

햄버거를 사는 여정으로 알아보는 웹의 구성요소

인터넷 ≠ 웹 

인터넷 ∋ 웹  :  웹은 인터넷의 다양한 기능 중 하나

쉽게 말해 고속도로에 존재하는 다양한 짐(정보)를 운반하는 자동차(기능)중 하나.

웹 클라이언트 와 웹 서버

레스토랑으로 비유  

√ 주문을 헷갈리지 않게 받고 손님에게 좋은 서비를 제공하는 것이 두 프로그램의 목적

크롬, 사파리, 엣지 등의 웹 브라우저 ☞ 웹 클라이언트 (Web Client)

추가

브라우저 삼대장

Post 는 해당 pk 로 전부 지워지는데 comment는 postId 부분만 지워진다.

>> 지우는 순서의 문제다!!

router.delete('/:id', async (req, res) => {
    const id = req.params.id;
    await sequelize.transaction(async ()=>{
        
        await Post.destroy({where: {id: id}}); // 1
        await Comment.destroy({where: {postId: id}}); // 2
    })
    res.status(204).send();
})

여기서 1 이 지워지면  Comment에 있는 postId가 어디를 참조 하고 있는지 몰라서 NULL로 바뀌고

2 의 코드에서 지워야할 포스트를 찾을 수가 없으므로 코멘트가 지워지지 않는다.

!! 각 모델에서 foreignKey가 어떤 모델과 관계가 있는 지 꼭 확인을 하고 지우는 순서를 고려해야 한다.

router.delete('/:id', async (req, res) => {
    const id = req.params.id;
    await sequelize.transaction(async ()=>{
        await Comment.destroy({where: {postId: id}}); // 1
        await Post.destroy({where: {id: id}}); // 2
        
    })
    res.status(204).send();
})

.../routers/posts.js:65
allPosts.sort(sortDateDescending);
TypeError: allPosts.sort is not a function

이유가 뭐지?? allPosts가 array가 아닌가?? -> console 로 출력 해보자

<시도>

const allPosts = Post.findAll();
console.log(allPosts);
console.log(Array.isArray(allPosts);

<결과>

// console.log(allPosts)의 출력 결과
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 1230,
  [Symbol(trigger_async_id_symbol)]: 1222
}

// console.log(Array.isArray(allPosts))의 출력 결과
false

TypeError: allPosts.sort is not a function

>>  첫번째 출력은 뭔지 모르겠으나, Array 형식이 아니라고 하여 형식을 변환 후 출력

const allPosts = Post.findAll();
const allPostsArray = Array.from(allPosts)

console.log(allPostsArray);  // 출력 : []
console.log(Array.isArray(allPostsArray));// 출력: true

<< 코드는 정상적으로 작동하는데 받아오는 값이 없다>>

1. Sequelize 에서 findAll 조사 : https://sequelize.org/api/v6/class/src/model.js~model#static-method-findAll.

..... 문제는 단순했다...   await 를 쓰지 않은 상태에서  array 형태로 변형 시켜서 allPosts 에 아무런 값이 담기지 않았다.

//const allPosts = Post.findAll(); 
const allPosts = await Post.findAll();