오늘 배운 것 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주만 늦는게 어디야 하면서 긍정적으로 생각하기로 함.
오늘 배운 것 1. Express.js - Middleware, RESTful API 2. POSTMAN 쓰는 법 3. React 생애주기
1. 미들웨어(Middleware)란?
HTTP 요청과 응답 사이에서 단계별로 어떤 동작을 실행한다. 말그대로 중간에 작동하는 녀석!!
HTTP 요청이 들어오면 시작 > HTTP 응답이 마무리 될 때까지
(req, res, next)를 가진다.
req : request = HTTP 요청을 처리하는 객체
res : response = HTTP 응답을 처리하는 객체
next : 다음 미들웨어 실행
주의 : next()함수를 호출하지 않으면 미들웨어 사이클이 끝난다. 반드시 next를 통해 다음 미들웨어로 넘겨줘야 한다
> 이론시간에 배운 어플리케이션 미들웨어, 라우터 미들웨어, 오류처리 미들웨어 등이 있지만 아직 설명가능할 정도로 완벽하게 숙지하지 못함
> 다만 오류처리 미들웨어는 err 인자를 추가적으로 전달받는다!!
> 만약 다른 미들웨어 중에 next 안에 뭐가 있다? > 바로 오류처리 미들웨어로 점프
2. REST API란?
REST 아키텍처를 준수하는 웹 API = RESTful API
REST는 뭐고 API는 뭔데?
우선 API는 Application Programming Interface로 응용프로그램이 다른 프로그램이나 서비스와 상호작용하는 인터페이스이다.
인터페이스는 Inter+Face로 서로 다른 두 무언가의 중간자이다. 예를 들어 우리는 키보드를 통해 글자를 입력하고, 마우스를 통해 클릭한다. 우리와 컴퓨터 사이를 중개하는 "키보드"와 "마우스"는 인터페이스가 된다.
흔한 비유로는 식당 종업원과 손님을 들 수 있다. 우리가 식당에 가서 음식을 주문하면 종업원은 주문을 듣고 요리하는 사람에게 주문을 전달한다. 그러면 요리사는 만든 요리를 종업원을 통해 우리에게 전달한다. 이때 종업원이 손님과 요리사를 중개하는 API라고 할 수 있다.
우리가 요리를 하기 귀찮을 때 식당을 방문하듯, 만약 우리가 번역을 하는 기능을 구현하고 싶지만, 직접 구현하기는 귀찮거나 어렵다고 한다면 구글 번역기에서 제공하는 기능을 그대로 쓸 수 있다. 이때 구글 번역기의 API를 통해 구글 번역기에 번역을 요청하고 데이터를 받는다. 이것이 API라 할 수 있다.
그럼 REST가 무엇인지 알아보자
REpresentational State Transfer의 약자인데, 내용이 너무 어려워서 ChatGPT에게 물어보았다.
REST API에 대해 쉽게 설명해줘
REST(Representational State Transfer) API란 웹 어플리케이션 간의 통신을 위한 인터페이스 중 하나로, HTTP 프로토콜을 이용하여 데이터를 주고 받습니다.
REST API는 클라이언트와 서버 간의 통신에 있어서 자원(resource)과 행위(verb)를 기반으로 하며, 주요한 특징으로는 다음과 같습니다.
자원(리소스) 기반: 모든 자원은 고유한 ID를 가지며, 이를 통해 자원을 구분합니다. 예를 들어, 사용자 정보를 요청할 때는 해당 사용자의 ID를 기반으로 요청을 보냅니다.
메시지로 표현: HTTP 메서드(GET, POST, PUT, DELETE 등)를 이용하여 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하며, 요청과 응답은 일반적으로 JSON, XML 등의 형식으로 표현합니다.
자기 서술적(Self-descriptiveness) 메시지: 요청에 필요한 정보는 요청 메시지 자체에 포함되어 있어야 하며, 서버는 이를 이용하여 요청을 처리합니다. 이를 통해 REST API는 자기 서술적 메시지를 제공하며, 이로 인해 API를 이해하고 사용하기 쉬워집니다.
애플리케이션의 상태(state)는 클라이언트에 저장: REST API는 서버의 상태를 저장하지 않습니다. 대신, 클라이언트는 모든 상태 정보를 저장하며, 이를 통해 서버와의 통신을 유지합니다.
REST API는 이러한 특징들로 인해 웹 어플리케이션 간의 통신에 있어서 효율적이고 유연한 인터페이스를 제공합니다.
잘 모르겠어. 중학생도 이해할 수 있게 다시 설명해줘
REST API는 웹 어플리케이션에서 서로 다른 컴퓨터끼리 데이터를 주고 받을 때 사용하는 방법 중 하나입니다.
REST API는 자원이라는 것을 기반으로 하며, 각 자원은 고유한 ID를 가지고 있습니다. 예를 들어, 사용자 정보를 요청할 때는 해당 사용자의 ID를 기반으로 요청을 보냅니다.
또한, REST API에서는 요청에 필요한 정보를 요청 메시지에 포함시키며, 이를 이용하여 서버에서 요청을 처리합니다. 이를 통해 REST API를 이해하고 사용하기 쉬워집니다.
마지막으로, REST API는 서버의 상태를 저장하지 않습니다. 대신, 클라이언트가 서버와의 통신을 유지하기 위해 모든 상태 정보를 저장합니다.
이러한 특징들로 인해 REST API는 웹 어플리케이션 간의 효율적이고 유연한 통신을 가능하게 합니다.
예시를 통해 설명해볼래?
물건을 사는 과정을 예시로 들어볼까요?
REST API를 이용한 물건 구매 과정은 다음과 같습니다.
사용자는 구매하려는 물건의 ID와 함께 구매 요청을 서버에 보냅니다.
예를 들어, "물건 ID가 123인 물건을 구매하고 싶습니다"라는 요청을 보냅니다. 서버는 해당 물건의 ID를 확인하고, 구매 가능한 상태인지 확인합니다.
예를 들어, 물건이 품절되었거나 구매 제한이 걸려있을 수 있습니다. 서버는 확인 결과를 응답 메시지에 담아 사용자에게 보냅니다.
예를 들어, "물건 ID가 123인 물건을 구매할 수 있습니다"라는 응답 메시지를 보냅니다. 사용자는 구매 확인 요청을 서버에 보냅니다.
예를 들어, "물건 ID가 123인 물건을 구매합니다"라는 요청을 보냅니다. 서버는 해당 물건을 구매 처리하고, 결과를 응답 메시지에 담아 사용자에게 보냅니다.
예를 들어, "물건 ID가 123인 물건을 구매 완료했습니다"라는 응답 메시지를 보냅니다. 이러한 과정을 통해 REST API를 이용하여 물건을 구매할 수 있습니다.
이제 살짝 알 것 같다.
앞선 식당 종업원 예시를 활용해보자. 우리가 주문을 할 때 아무렇게나 주문을 하는 것이 아니라, 명확히 주문을 해야한다. 그냥 국밥 주세요 하는 게 아니라 내가 원하는 게 돼지국밥인지 순대국밥인지 정확히 말해야하는 것이다. 설상 내가 단골손님이라 종업원은 뭘 원하는지 알고 있다 하더라도 옆 손님이 봤을때는 내가 돼지국밥을 시키는지 순대국밥을 시키는지 도통 알 수가 없을 것이다. 내가 짠 코드를 다른 개발자가 사용할 일도 있는 만큼 요청을 보낼 때도 명확해야하는 것이 좋을 것이다. 그래서 API를 쓸 때 요청을 보았을 때 그 요청이 무엇을 요청하는지 알 수 있어야 한다는 것이 REST한 API이다.
3. React의 생애주기와 Hooks
탄생 : 화면에 나타나는 것 = Mount > ex) 초기화 작업 변화 : 업데이트(리렌더) = Update > ex) 예외처리작업 죽음 : 화면에서 사라짐 = Unmount > ex) 메모리정리작업
파워포인트의 애니메이션을 생각해보면, 처음 나타날 때 애니메이션이 있고, 중간에 강조를 하는 애니메이션이 있고, 사라질 때 애니메이션 이렇게 3개로 나뉜다.
이처럼 React도 3가지로 나뉘는 것이다. 이를 React의 생애주기라고 한다.
그리고 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 이런 메서드를 사용할 수 없다. 이 이외에도 state를 사용할 수 없다.
그래서 함수형 컴포넌트에서도 이러한 기능을 쓰고 싶었는데, 클래스형 컴포넌트에서만 사용할 수 있던 기능을 Hook 낚아와서 사용하는 것이 바로 React Hooks이다.
useState, useEffect, useRef 등이 있다.
그렇다면 왜 클래스형 컴포넌트가 아니라 함수형 컴포넌트를 사용할까?
기존 클래스형 컴포넌트는 중복코드 많이 써야하고 가독성이 나쁘다는 단점이 있었다.
그래서 최근에는 클래스형을 배제하고 함수형을 쓰는 추세이기 때문에 함수형 컴포넌트에서도 이러한 기능을 사용할 수 있게 구현하는 방향으로 바뀐 것이다.
오늘도 인프런에서 React 강의를 듣고 실습을 했다. 오늘부터 Hook에 대해 조금조금씩 배웠다. 조만간 라우터도 할텐데 아직 이해가 부족한 부분이라 학습을 통해 개념을 재점검할 수 있을 것 같아 기대가 된다.
프로그래밍을 하기 위해서는 자료구조와 알고리즘을 배워야한다는 이야기를 많이 들었는데, 도서관에서 보니 대부분의 책이 막 어렵고 두껍게 되어 있어서 입문 단계에 좋은 책이 없을까하고 고민하는 찰나 발견한 책이 있다. 누구나 자료구조와 알고리즘이라는 책인데 개정1판은 얇아서 금방 읽을 수 있었고, 중간중간 루비나 파이썬으로 적힌 코드들이 있지만 코드가 중심이라기보다는 그 설계가 중점이기 때문에 쉽게 이해할 수 있었다. 다만 이해는 하지만 내것으로 만들지는 못한 느낌이 있어서 조만간 따로 포스팅으로 정리해야겠다. 특히 빅오표기법은 생각지도 못한 표기방법이라 신기했다.
Git에 점점 잔디가 채워지고 있다. 인프런 강의가 끝나면 어떤 프로젝트로 Git을 채울지 생각해봐야겠다.
