[엘리스 AI07] 7주차 - 백엔드 (2023.04.14)

오늘 배운 것
1. MongoDB
2. 네트워크 OSI 7계층
3. React useMemo
4. HTML form 태그

1. MongoDB

MongoDB에서 Mongo는 엄청 크다는 뜻인 humongous에서 mongo를 따온 거다. 그리고 DB는 말그대로 데이터베이스.

NoSQL이라는 종류가 있는데 말 그대로 SQL이 아니라는 것. 그런데 MongoDB는 NoSQL에 해당한다.

SQL은 Structured Query Language로 관계형 데이터베이스(RDB)에서 데이터를 조작할 때 쓰는 언어다.

관계형 데이터베이스는 행과 열로 구분된 표를 이용해서 자료들을 연결하여 그 관계를 토대로 데이터를 다룬다.

하지만 NoSQL은 이러한 구조화를 사용하지 않아 유연하게 데이터를 저장할 수 있다.

 

스키마가 무엇인지, 실제로 MongoDB를 어떻게 쓰는지, Mongoose는 무엇인지는 좀 더 공부해봐야겠다

 

2. 네트워크 OSI 7계층

물리 > 데이터링크 > 네트워크 > 전송 > 세션 > 표현 > 응용

컴퓨터는 0과 1로 데이터를 다룬다. 그렇기에

• 물리 계층에서 전기적 신호를 받는다. 이를 랜카드는 0과 1이라는 비트로 변환한다.
• 데이터링크 계층에서는 비트의 모음으로 목적지/출발지/유형(이더넷인지 와이파이인지)/네트워크 계층 데이터/트레일러로 비트를 분류한다. 이러한 목적지 출발지 주소는 MAC이라고 불리는 랜카드의 ID이다. 이 주소를 기반으로 통신이 이루어지는데 상대방의 MAC을 바로 알 수 없다. 그래서 스위치를 거치게 된다. 데이터 단위는 프레임이다.
• 네트워크 계층에서는 IP(기계(MAC)들이 여러개 모인 하나의 네트워크 주소)를 통해 데이터를 전송한다. 목적지 IP/출발지 IP/전송 계층 데이터이다. 라우터에서는 목적지 IP를 옆 라우터를 통해통해 전달된다.
• 전송 계층에서는 포트를 사용한다. 

강의를 듣고 정리를 해본 건데... 뭔가 막연하다. 1강짜리 간단한 강의라 그런지 각 내용에 대해 정확한 순서가 담기지는 않았다. 더 공부해서 틀린 내용은 없는지, 찾아볼 필요가 있겠다.

 

3. React useMemo와 React.memo

메모이제이션 : 이미 계산해본 연산결과를 기억해두었다가 동일한 계산을 시키면 다시 연산하지 않고 기억해둔 데이터 반환하는 것이다. 어려운 계산은 말 그대로 메모장에 저장해두고, 똑같은 계산을 할 때 다시 계산하지 않고 그냥 메모장 펼쳐서 저장된 값을 쓰는 거다.

 

React.memo는 특정 조건이 아니면 컴포넌트의 리렌더링을 방지하는 기능이다.

 

자식 컴포넌트에 업데이트 조건
<CountView/> : count가 변경될 때만 렌더링
<TextView/> : text가 변경될 때만 렌더링

이런 식으로 렌더링을 하고 싶다. text를 변경했는데 count가 count 컴포넌트가 리렌더링될 필요가 없다. count 컴포넌트는 count가 바뀔 때만 리렌더링하고 싶다. 이럴 때 사용하는 것이 바로 React.memo

고차 컴포넌트 :  컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

가죽을 주면 구두를 만들어 준다

똑같은 prop을 받으면 다시 컴포넌트를 계산하지 않는다 = 리렌더링하지 않는다
자기 자신의 state가 바뀌면 리렌더링 된다

객체를 비교하는 방법

let a = {count:1};
let b = {count:2};

if(a === b) {
console.log("EQUAL");
} else {
console.log("NOT EQUAL");
}

NOT EQUAL로 판별
객체의 주소에 의한 비교 = 얕은 비교 (비원시형 타입)

참조형!
고유한 메모리 주소 < 같은 주소에 있느냐를 비교
값이 같더라도 다르다고 판단

홍길동와 아무개

나이와 키 체중이 다 같다고 해서 둘이 같은 사람이 아니다

BUT

let a = {count:1};
let b = a;
if(a===n){
console.log("EQUAL");
} else {
console.log("NOT EQUAL");
}

EQUL< 같은 객체를 가르킨다

 

마지막으로 생활코딩에서 React를 듣다가 form 태그에 대한 설명이 나와서 그쪽을 학습했다.

form태그는 input 태그를 감싸는 걸로 submit을 하게 되면 form의 액션으로 서버에 전송한다.

나중에 자세한 건 HTML 포스팅에 추가해야겠다.

 

---

오늘은 엘리스 같은 스터디원이 알려준 네트워크 강좌가 곧 만료라고 해서 후다닥 들었다. 네트워크 쪽에 부족함을 많이 느껴서 네트워트가 어떻게 이루어지는지 약간이나마 알게 된 것 같다.

다음으로 엘리서 MongoDB 수업을 들었는데 이론 때도 모르겠던게 지금 들어도 영 모르겠다. 일단 MongoDB깔긴 했는데 강의에 나온 거랑은 버전이 달라서 그런지 실습에서 DB로 하는 게 적용이 안된다... 도대체 MongoDB가 뭐야... 백엔드 스터디에 MongoDB 좀 더 긴 강의가 있는데 그거로 좀 더 공부해야겠다.

오늘 인프런에서 useMemo를 들었다. useMemo 이후부터 이해에 큰 구멍이 뚫려있었는데 왜 쓰는지를 알고 나니까 시원하다. 애초에 이름에 답이 있었다. 그동안 몰랐던 React Hook들이랑 라우터까지 숙지할 생각하니까 신난다.

항상 진도를 1주 늦게 따라가는 감이 있다. 그래도 1주만 늦는게 어디야 하면서 긍정적으로 생각하기로 함.

지금 하는 Node.js랑 MongoDB도 다음주면 어찌어찌 이해하겠지.

---