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

오늘 이론 시간에 배운 것
1. CSR과 SSR
2. Express
3. REST API
4. MongoDB
5. CRUD

 

1. CSR과 SSR

웹 브라우저에서 자바스크립트를 분석해서 HTML을 만든다

 

렌더링 : 데이터와 코드에서 출력을 생성하는 과정

 

CSR = Client Side Rendering

브라우저에서 렌더링을 진행

SSR = Server Side Rendering

서버에서 렌더딩을 진행

 

클라이언트 서버와 백엔드 서버 둘 다 서버다!

클라이언트 서버는 보이는 거다.

 

CSR	SSR
다양한 상호작용	빠른 초기화면 서버에서 바로 JavaScript와 CSS 파일을 구문분석해서 전달하니까 사용자가 빠르게 초기 화면을 볼 수 있다
적은 서버 부하 JavaScript와 CSS 파일을 전달만 하고 브라우저에서 구문 분석을 하니까!	검색 엔진 최적화 웹 개발에서 중요한 SEO (구글 검색에 뜨냐 마냐) < 검색엔진 원리는 웹페이지를 들어가본다 근데 CSR은 JavaScript 코드만 있으니까 어떤 웹페이지인지 검색엔진이 잘 몰라
쉬운 개발 난이도 많은 프레임워크들이 CSR에 초점 프레임워크를 사용하면 쉽게 개발이 가능하다	클라이언트 성능 향상 무거운 사이트 들어가면 버벅거리는 건 CSR 렌더링 연산 처리를 서버에서 어느정도 하면 클라이언트가 부하 없이 돌아간다

CSR과 SSR의 장단점은 서로 반대다

페이지마다 목적에 따라 구현 가능

렌딩 페이지는 SSR

나머지는 CSR

> 많은 회사들이 이런 식으로 둘 다 사용하고 있다

 

즉

SSR : 야 브라우저 너가 알아서 읽어 = 한국인한테 번역안된 원서를 던져주고 번역해서 읽으라는 거

CSR : 내가 읽어서 알려줄게 = 번역된 번역서를 던져주는 거

 

2. Express.js

Node.js 프레임워크로 자바스크립트 어플리케이션 개발이 더 쉬워진다

 

주요 기능

Routing

URL을 서버의 특정 기능에 꽂아주는 것 (매핑)

=식당 주문서

 

중첩 라우팅

모듈화 : 코드가 더 깔끔해지고 보수도 더 쉬워진다

동적 라우팅 : "/:" 는 뒤에 뭐가 오더라도 OK

파일 라우팅

 

pug파일  태그 없이 그냥 작성, 변수 입력 가능

 

미들웨어

HTTP 요청과 응답 사이에 실행되는 기능

=고속도로 휴게소 같은 거

 

애플리케이션 레벨 미들웨어 : 전역에서

라이터 레벨 미들웨어 : 특정 URL에서

오류 처리 미들웨어 : 에러를 모두 받는 빗물받이 역할

외부 라이브러리 미들웨어

내장 미들웨어

 

Nodemon은 Node를 재시작해주는 라이브러리다.

Node index.js

nodemon index.js

 

Package.json에 스크립트에 추가

"start" : nodemon ./index.js

 

3. REST API

Representational State Tranfer

보여지는 상태를 잘 맞추기 위한

사용 유지 관리 및 확장이 쉬운 웹서비스를 구축하기 위한 일련의 지침

 

HTTP를 어떻게 하면 사용하고 유지 관리하고 확장이 쉽게 관리할 수 있을까?

HHTP를 보내고 받을 때 어느정도 양식을 만들어놓는다

이력서도 양식이 있는 곳이 더 편하다

 

API란?

프로그램 간에 정해진 기능을 실행할 수 있게 하는 약속

배달앱을 생각해보자

음식 눌러 주문하기 > 집으로 배달 온다 (그 과정은 모른다. 식당과 기사의 일)

우리는 요청하면 응답이 온다

HTTP만 아니라 다른 거도 가능

 

HTTPMthod 를 명사형으

/createPost > Post /post/:id

 

4. MongoDB

RDBMS 관계형 데이터베이스

NoSQL

 

Database

Collection

document < 데이터 한줄

 

MongoDB를 직접 다루지 않고 Mongoose를 통해

 

자바스크립트는 Object

MongoDB는 document

둘이 비슷하지만 더 끈끈하게 연결을 원한다

그걸 도와주는 역할이 Mongoose

 

빠른 비정형

형식 없이 그냥

> 데이터 관리 곤란

그래서 Mongoose는 스키마를 통해 데이터 관리

붕어빵 틀 > 속에 무엇을 넣든 붕어빵이라는 범주 안에 있기에 붕어빵이다

스키마도 틀이 있다

 

5. CRUD

Creat

Read

Update

Delete

 

 

---

 

오늘 학습한 것
1. 인프런 React 강의에서 수정하기 버튼 구현하는 법을 배우고 Git에 업로드
2. 모던 자바스크립트 입문을 한 번 설렁설렁 읽어봄 (심볼에 대해 처음으로 배웠다)
3. HTTP 통신에 대해 ChatGPT에 물어보며 학습
4. 생활코딩에서 웹과 Node.js 11강까지 학습
5. 블로그에 HTML과 CSS 수정을 통해 채팅 기능과 브라우저 창 크기에 따른 상단 이미지 조정 기능을 구현
6. Visual Studio Code에서 같은 항목을 한꺼번에 수정하는 단축키 : Ctrl + Shift + L

 

 

아래는 ChatGPT에게 HTTP에 대해 물어본 것

 

HTTP가 아닌 다른 통신규약도 있니?

네, HTTP(하이퍼텍스트 전송 프로토콜) 외에도 여러 가지 다른 통신 규약이 있습니다. 일부 예는 다음과 같습니다.

FTP(File Transfer Protocol): FTP는 파일을 전송하는 데 사용되는 표준 프로토콜입니다. 일반적으로 서버와 클라이언트 간에 파일을 업로드하고 다운로드하는 데 사용됩니다.
SMTP(Simple Mail Transfer Protocol): SMTP는 전자 메일을 전송하는 데 사용되는 표준 프로토콜입니다. 이 프로토콜은 메일 서버 간에 이메일 메시지를 전송하는 데 사용됩니다.
DNS(Domain Name System): DNS는 인터넷 상의 도메인 이름을 IP 주소로 변환하는 데 사용됩니다. 이를 통해 사용자는 도메인 이름으로 웹 사이트에 액세스할 수 있습니다.
SSH(Secure Shell): SSH는 안전하게 원격 컴퓨터에 로그인하고 명령을 실행하는 데 사용되는 프로토콜입니다.
IRC(Internet Relay Chat): IRC는 인터넷 상의 실시간 채팅을 위한 프로토콜입니다.

이 외에도 Telnet, SNMP, RTP, SIP 등 다양한 프로토콜이 있습니다.

웹브라우저에서 HTTP말고 다른 통신도 가능해?

네, 웹 브라우저에서는 HTTP 말고도 다른 통신 규약을 사용할 수 있습니다. 일부 예는 다음과 같습니다.

HTTPS(Hypertext Transfer Protocol Secure): HTTPS는 HTTP의 보안 버전으로, SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화합니다. 이를 통해 사용자의 개인 정보와 민감한 정보를 보호할 수 있습니다.
FTP(File Transfer Protocol): FTP는 파일을 전송하는 데 사용되는 프로토콜로, 일부 브라우저는 FTP 클라이언트를 내장하고 있습니다.
WebSocket: WebSocket은 서버와 클라이언트 간의 실시간 양방향 통신을 지원하는 프로토콜입니다. 이를 통해 더 빠르고 효율적인 양방향 통신이 가능합니다.
SPDY: SPDY는 HTTP의 대체 프로토콜로, 더 빠른 데이터 전송을 제공합니다. 구글에서 개발한 프로토콜로, HTTP/2로 표준화되었습니다.
WebRTC(Web Real-Time Communications): WebRTC는 웹 브라우저에서 음성 통화, 영상 통화, 파일 공유 등의 실시간 통신을 가능하게 하는 API입니다. 이를 통해 브라우저 간의 P2P 통신이 가능해집니다.

따라서, 웹 브라우저에서는 HTTP 외에도 다양한 통신 규약을 사용할 수 있습니다.

 

그렇다면 URL에서 HTTP대신 다른 규약 이름을 넣으면 쓸 수 있는거야?

아니요, URL에서는 프로토콜을 명시하는 부분에 HTTP 대신 다른 규약 이름을 사용할 수 있습니다. 예를 들어, HTTPS를 사용하려면 "https://"을 URL의 시작 부분에 추가하면 됩니다.

하지만, 모든 웹 서버가 다른 프로토콜을 지원하지는 않습니다. 예를 들어, 일부 웹 서버는 FTP 프로토콜을 지원하지만, 대부분의 경우 웹 브라우저에서 FTP URL을 직접 입력하면 작동하지 않을 수 있습니다. 이러한 경우에는 FTP 클라이언트 소프트웨어를 사용하여 FTP 서버에 연결하고 파일을 전송해야 합니다.

따라서, 다른 통신 규약을 사용하려면 해당 프로토콜을 지원하는 서버가 필요하며, 웹 브라우저에서 해당 프로토콜을 지원하는 기능을 제공해야 합니다. 일부 브라우저는 내장 FTP 클라이언트나 WebSocket, WebRTC 등의 프로토콜을 지원하고 있습니다.

---

수업을 듣는데 초반은 빡 집중해서 어찌어찌알겠는데... 점차 코드가 후다닥 지나가면서 어어... 하면서 놓치게 됨

꼭 이럴 때일수록 Nodemon이 실행이 안됨

그래도 다행인 건 React 2주차나 자바스크립트 3주차 마냥 코드가 이게 머여 하는 정도는 아니라는 거...

예를 들면 미들웨어는 알지만 여기서 추가되는 각종 응용 미들웨어에 대해서는 부족한 느낌

생활코딩 웹 시간에 좋은 말을 들었다. 중요한 것일수록 쉽다. 기본은 쉽고, 혁신은 어렵다. 우선 기본이 흔들리지 않게 잘 공부해야겠다.

생활코딩에서는 어째 코딩보다도 세상을 바라보는 가치관을 더 배워가는 느낌이 있다. 물론 코딩도 엄청 배워간다. 참 고마운 분

 

오늘 React에서 수정하기 버튼 구현을 실습했다. 이해가 되나 로직이 너무 대단해서 감히 내가 처음부터 구현할 수 있을까 하는 생각이 크다. 강의 다 끝나면 한 번 혼자서 끙끙대며 재현해봐야겠다.

 

항상 강의를 다 듣고 나중에 느낀 점만 올리고 배운 내용은 따로 정리해왔는데, 오늘 갑자기 강의에 집중하려면 메모를 해야겠다는 생각이 들어서 옆에 블로그 켜고 저장해가면서 들었다.

 

오늘 강의노트는 진짜 들으면서 실시간으로 적은거라 정리된 것이 아니다. 나중에 정리해서 따로 카테고리 파서 올려야겠다.

---

학습자료

 

 

생활코딩에서 배운 대로 HTML에 코드로 넣어봤다. 배운 걸 써먹고 이게 실제로 작동하니 정말 신기하다.