도쿄타워
printf("\"Tokyo Tower\" este un blog din dragoste pentru călătorii și cafea")
[엘리스 AI07] 7주차 - 백엔드 (2023.04.14)
728x90

오늘 배운 것
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도 다음주면 어찌어찌 이해하겠지.


 

728x90
[엘리스 AI07] 7주차 - 백엔드 (2023.04.13)
728x90

오늘 배운 것
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을 채울지 생각해봐야겠다.

 


학습자료

 

 

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

오늘 이론 시간에 배운 것
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에 코드로 넣어봤다. 배운 걸 써먹고 이게 실제로 작동하니 정말 신기하다.

728x90
[엘리스 AI07] 7주차 - 백엔드 (2023.04.11)
728x90

새벽까지 자바스크립트 복습을 하다가 그만 늦잠을 자버렸다

Node.js 화요일 수업을 어찌어찌 듣고, 점심을 먹었는데, 도서관 알람으로 예약한 책이 도착했다고 연락이 왔다

모던 자바스크립트 Deep Dive인데 엄청 두껍다... 도서관 수직생이 이정도면 흉기아니냐고 할 정도...

책을 딱 펼쳤는데... 하... 막막하다

일단 다른 자바스크립트 책이랑 하루종일 씨름했다.

안다고 생각했는데 모르는 것도 많았고, 완전 처음 보는 것도 많았다.

특히 Promise는 몇주째 알겠다!와 완전 모르겠다!의 반복...

그나마 수확이라면 그동안 멍한 상태로 이해하지 못한 채 넘어갔던 fetch를 이해하게 되었다는 점

조금만 성과라도 하나둘 모아서 급증하는 스트레스 수치를 어찌어찌 낮춰봐야겠다.

중간에 리엑트 인프런 강좌대로 실습하고 git에 push도 했다. 3일 콤보로 git을 쓰니 뿌듯하다

리엑트 인프런 강의는 이해가 되서 다행이지만, 아직 혼자서 무언가를 만들어보기는 벅찬 느낌이다.

 

저녁 이후에는 그동안 손도 못댄 채 넘겨온 실습 문제들을 어찌어찌 풀어봤다. 아직 전부 풀지는 못했지만 몇몇 개는 코치님 코드 도움받아가며, 몇몇 개는 혼자서 풀어보는 식으로 해결했다... 근데 아무리 생각해도 지시문이 너무 불친절하거나 설명을 어렵게 해서 정답 코드를 봐도 갸우뚱거릴 때가 많다.

특히 배우지도 않은 내용을 갑자기 해라고 던지는 경우도 많아서... 살짝 빡칠 때도... 한참을 풀어도 input 가져오는 게 안되어서 왜인가 했더니 정답코드에 전부 readline으로 적혀있었다. readline 배운 적도 없는데... 심지어 지시문에 쓰라는 말도 없다.

 

밤에는 ChatGPT 도움 받아가면서 자바스크립트 통신 부분이랑 Promise 문답식으로 공부했다. 진짜 ChatGPT랑 이야기하면서 공부하니까 버틸 수 있는 느낌이다. 은근 재미있다 ㅋㅋ

다만 자꾸 끊기는 일이 많아서 힘들다... 훈련비 받으면 바로 ChatGPT 유료 가입해야겠다

728x90
[엘리스 AI07] 7주차 - 백엔드 (2023.04.10)
728x90

 

오늘부터 매일 포스팅하기로 했다

솔직히 진도 따라가느라 바빠서 포스팅에 소홀했고, 나중에 기억을 되짚으면서 적었던 것도 사실이다

이제는 차분히 당일 배운 걸 정리하려고 한다

 

다시 새로운 마음으로 백엔드를 듣기로 했다

React처럼 되지 않기 위해 이번에는 마음을 굳게 먹고 듣기로 했다

주말에 MongoDB를 살짝 팠고, Node.js 화요일 온라인 수업도 조금 예습했다.

 

이론 오전 수업은 매우 수월했다

ES6문법은 계속 반복해서 익숙했다

다만 아차 싶었던 것은 모듈을 가져오는 방식이 CommonJs와 ES가 다르다는 것\

 

그리고 npm 명령어와 그로 인해 생기는 변화 그리고 각 파일들이 의미하는 바를 천천히 학습했다

 

실습 코치님이 이론 코치님과 같아서 신기했다

다만 아직 각 코드가 무엇을 의미하는지 모르겠다 이 부분은 스스로 학습해야겠다

 

강의가 끝나고 Node.js 화요일 수업을 들었다. 강의에서 이해가 안되었던 부분이 살짝 해결되었지만 정작 중요한 각 코드의 의미는 알지 못했다. 도서관에서 리액트 교과서랑 Node.js 교과서 빌려와서 찬찬히 읽어보려고 한다

 

그리고 주말에 인프런에서 React 강좌를 끊어서 그거 2강 정도 마저 들었다.

어제 처음으로 Git을 써봤는데 오늘은 명령어가 손에 익어서 커밋이 수월했다

 

다시 새로운 마음으로 해보자.

그리고 저번 진도들 빠진 부분들 천천히 채워넣어야 겠다.

728x90
[엘리스 AI07] 6주차 - 프론트엔드 (2023.04.03~04.07)
728x90

2023.04.03

이고잉 코치님께서 좋은 말씀을 해주셨다. ChatCPT가 다 해주니까 오히려 시작만 하면 진짜로 반 이상은 가는 세상이라고 말씀하셨다. 조금 충격적인 발상의 전환!

마음 먹으면 이제 뭐든 할 수 있다...! 아자아자

오늘 해본 거는 API를 불러오는 것

통신 쪽 많이 부족해서 사실 완벽하게 이해하지는 못하였다... 좀더 공부를 해야지

글고 Next.js도 살짝 알려주셨는데 신기했다. 복잡한 이동이 간편하게 Link로 딱딱 가능한게 신세계

점차 공부해야할 게 늘어나지만 힘내자

근데 실습 시간이 문제다... 갑자기 엄청 긴 코드가 나오더니... 이게 무슨 소리야의 연속...

결국 다 이해를 못하고 나중에 천천히 분석해서 풀기로 했다

이론은 룰루랄라였는데 갑자기 실습에서 급발진을 하니 조금 당황스럽다... 커리큘럼이 어케 된거야 ㅠ

 

2023.04.04

온라인 수업을 듣는데 와... CSS 모듈은 쉽게 이해했다

근데 SPA와 라우팅 하는데 정말 이론 수업을 들으면서 이해가 안가는 거는 처음이다

막 용어들이 마구마구 던저지는데 해당 부분 개념이 약해서 아얏아얏하면서 맞으며 울고 있는 느낌

예전에 객기로 수능특강 물리 들었을 때가 생각난다 f=mc^2에서 f가 먼지 m이 먼지 한 번 알려주고 다음 강의부터는 다들 f가 먼지 알죠~하고 넘어가는 느낌... 심지어 영어 한자 줄임말이 많아서 IT용어는 직관적으로 알기가 어렵다...

라우팅, 랜더링 이런 거도 용어를 찬찬히 살피면 알겠는데, 문맥 속에 막 나오면 순간 이해가 멈춘다...

 

2023.04.05

오늘은 통신의 연속... promise도 막 나와서 아직 promise 개념만 이해하고 응용은 벅찬 나에겐 살짝 힘들었다

강의 반복해서 들으면서 promise도 자유자재로 쓸 수 있게 연습해야겠다.

이번주 내내 진도율이 최악이다... 저번주는 괜찮았는데 라우터 들어오면서 머리가 박살나기 시작

근데 저번 자바스크립트 3주차도 비슷한 느낌이었어서 언젠가 되돌아보면 이걸 왜 몰랐지 하지 않을까 생각

 

2023.04.06

오늘은 SQL의 날로 정하고 밀린 SQL부터 데이터베이스까지 후루룩 들었다. 윈도우 함수에서 살짝 당황하긴 했지만 수월하게 클리어 SQL 너무 재미있다 이해가 쏙쏙되고 문제도 술술 풀려서 신나 ㅎㅎㅎ

 

 

728x90
[엘리스 AI07] 5주차 - 프론트엔드 (2023.03.27~03.31)
728x90

2023.03.27

오늘 이고잉 코치님께서 실강해주셨다! 사실 저번주 자바스크립트에 치여서 내가 이해력이 떨어지는 사람인가 심각하게 고민을 했는데, 오늘 리엑트 강의는 정말 귀에 쏙쏙 들어오고 설명 하시는 거 하나하나 전부 이해했다

첨에 환경설정하는데 안되는 부분이 있어서 검색해보니까 cd명령어를 안하고 그냥 create-react-app을 해서 오류가 난 거였다.

주말에 예습을 미리 팍팍 해두어서 안심이라 더 잘 따라갈 수 있었던 걸지도 모르겠다

JSX랑 컴포넌트 개념만 잘 정리하면 React는 어찌어찌 될 거 같다

좀만 더 힘내자 홧팅홧팅

 

2023.03.28

예습으로 오늘 할당된 수업은 이미 들어서 약한 서버와 통신 부분을 보완하고자 KOCW에서 네트워크 강의를 찾아서 들었다. 컴퓨터공학과 수업인데다 고학년 수업이라 살짝 쫄았지만, 1강 들어보니 설명을 명쾌하게 해서 재미있었다. 모르는 걸 알아가는 재미를 오랜만에 느꼈다. 살짝 이론파인가 나는?

미리 목욜과 금욜 수업도 쪼금쪼금 들었다. JavaScript가 비명을 지르고 있지만 그렇다고 진도를 안나갈 수는 없으니 ㅎㅎ

 

http://www.kocw.net/home/cview.do?cid=6166c077e545b736 

 

컴퓨터네트워크

인터넷을 동작시키는 컴퓨터네트워크 프로토폴을 학습한다.

www.kocw.net

 

2023.03.29

오늘도 즐거웠던 이론 시간

정말 설명을 잘하신다!! 이해가 안되는 부분도 귀신같이 아시고 설명해주심

다만 Hook을 배웠는데 useState 이거는 알겠다. 근데 useEffect가 살짝 불안하다. 알듯말듯한 느낌?

이거도 공부를 계속하다 보면 나중에 왜 이걸 헷갈렸지 싶겠지?

실습에서도 Hook을 했는데 먼가 신기했다. 마법을 부리는 거 같은 느낌이랄까? 누르면 바뀌고 그런 게 아직 신기할 나이다 ㅎㅎㅎㅎ

 

2023.03.30

그동안 JavaScript에 치여서 공부하지 못한 SQL을 살짝 공부했다. JavaScript하다가 SQL하니까 천사같아

코치님이 푸시기 전에 딱 풀고 토끼 버튼이 나왔을 때 그 쾌감!!! React랑 JavaScript에서도 같은 쾌감을 느낄 수 있게 틈날 때마다 공부해서 복습해야겠다

 

2023.03.31

이상한 Hook들이 막 나오는데... 아직 버겁다...

useMemo니 useCallback이니 배웠는데 시간나면 이것들 후루룩 정리해서 보기 좋게 해야겠다

아직까지는 useState 정도까지만 이해한 느낌

728x90
[엘리스 AI07] 4주차 - JavaScript (2023.03.20~03.24)
728x90

2023.03.20

충격적인 promise와 async await시간...

resolve랑 reject 그리고 .then이랑 .catch가 뭐가 다른 건지 모르겠구...

무엇보다 콜백 개념이 흐물흐물한 상태에서 콜백지옥 > promise > async await로 이어지는 흐름이 버거웠다

저번주까지는 어찌어찌 이론 시간에 이해도는 채웠는데 오늘은 거의 정신이 아득히 날아가는 시간이었다

실습 문제도 갑자기 막 대책없이 길어지기 시작...하아

그래도 오늘 좋은 사이트를 찾아서 자바스크립트 기초부터 차근차근 읽었다

특히 코드 보면서 어 저기는 왜 저렇게 하지? 싶은 내용들이 친절히 적혀있어서 마음에 들었당

중간가면 어려워지기는 하지만 그래도 공식문서 MDN보다는 설명이 쉬워서 좋다

MDN은 솔직히 어렵게 설명해서 영영사전 찾듯 용어를 몰라서 또 찾고 또 찾는 연속이다

 

https://ko.javascript.info/

 

모던 JavaScript 튜토리얼

 

ko.javascript.info

 

2023.03.21

큰일났다... 3개 중에서 어찌어찌 2까지는 어거지로 진도 끌어 올렸는데 3번 자바스크립트 문제집은 힘들어서 끝까지 못풀었다. 좀더 비동기에 대해 공부하고 풀어야겠다. fetch랑 API도 나오던데... 갑자기 난이도가 확 올랐다

이 고비를 어떻게든 넘겨야지... 안그래도 저번 이론 수업들 복습하고 있는데 뭔가 100퍼센트 이해하고 다음으로 넘어가는게 아니라 모호한 상태로 일단 다음으로 넘기는 느낌? 신기한게 갈수록 어려우니까 이제는 클로저 화살표함수는 다시보니 천사 느낌

 

2023.03.22

오늘은 저번 promise와 async await 다시 공부하고 RESTul API도 공부했다

JSON이니 HTTP 막 서버 통신 관련된 거 나오는데... 갑자기 초면인 녀석들이 등장해서 숨이 턱 막힌다

무엇보다 용어들이 너무 어려워

일단 알려주시는 거 억지로 머릿속에 우겨넣는 중

같이 스터디하는 분이 드림코딩이랑 코딩애플 추천해주셔서 유튜브에서 봤는데 신세계!! 어쩜 그렇게 설명을 딱딱 잘해주시는지... 덕분에 이해도가 확 올라갔다

 

2023.03.23

오늘은 엘리스랩에서 행사가 있어서 다녀왔다

엘리스랩 예약하려고 했는데 당일 예약이 안보여서 그냥 집에서 공부하고 가기로 했다

공부하느라 계속 머리가 아팠는데 잠시 쉬고 재충전해야겠다 싶었다

근데 다들 어색어색해서 죽는 줄...ㅎㅎㅎ

옷 컨셉 봄 옷이길래 억지로 집에 있는 밝아보이는 옷 껴입고 왔는데 옷 컨셉 설명하겠다고 나선 사람이 딱 2명이라 자동으로 상품 받게 되었다ㅎㅎ 봄스러운 옷 입고 온 사람은 그래도 꽤 있었는데...

 

2023.03.24

행맨게임을 만들어본다는 수업이었다.

어찌어찌 코드를 쳐봤는데 이해는 솔직히 잘 모르겠다...

글고 주차테스트 20점 나왔다...하아 괜찮은 거 맞을까

 

 

728x90
[엘리스 AI07] 3주차 - JavaScript (2023.03.13~03.17)
728x90

2023.03.13

저번에 충격을 받은 동료들이 많았는지 오전 이론 수업은 질문을 받고 복습하는 시간을 가졌다

주말에 틈틈히 클로저에 대해 파고들었더니 어찌어찌 알아들을 수 있었다

근데 클래스랑 프로토타입은 아직 부족한 부분이 많다...

오후에 DOM을 배웠는데 도무지 DOM이란 녀석이 뭔지 감을 못잡겠다. 구조라고는 하는데 그럼 실체가 있는건가??

이벤트 부분에서는 실습도 그렇고 어찌어찌 코드를 따라 치는 걸로 그쳤다

그래두 온라인 시간에 또 복습할테니...일단 오케이

우선 너무 조급해하지 말고 DOM 전까지라도 복습 철저히 해야겠다

 

2023.03.14

DOM을 집중적으로 파고들었던 수업

어찌어찌 알겠다. HTML을 조정하는 그런 느낌인 모양이다.

근데 이벤트는 좀 헷갈리는 부분이 있다 이벤트 핸들러 <이름부터가 조금 확 와닿지 않는 느낌

 

2023.03.15

오늘도 역시 클로저에 대해 설명하고 또 설명하는 시간을 가졌다

알 거 같다 싶어도 돌아서면 맞나 싶고 또 들으면 아니었네 이거였다 싶은 그 무한 반복

언제가 되면 클로저가 머릿속에 막 들어와서 명확해질까...

오늘은 자바스크립트 동작원리와 비동기를 배웠다.

글고 마지막은 살짝 진로나 개발 관련해서 질문을 던지는 시간을 가졌다. 살짝 숨통 트였다.

내내 나무만 보다가 숲을 보니까 살거 같아

 

2023.03.16

이번에는 심화 문법(ES6)과 자바스크립트 구동원리 그리고 배열 메서드들을 공부했다.

한 번에 많은 걸 하니까 버겁지만, 알려주는 대로 치다보면 어느새 익숙해진다

마지막에 form은 너무 어려워서 못풀고 넘어갔다...ㅎㅎㅎ 나중에 시간 나면 다시 도전해야지

 

2023.03.17

자바스크립트 내장 객체를 본격적으로 다룬 날

마지막에 메서드들이 무슨 기차놀이 하듯 이어지고 이어지는데 막 머리가 아파서 죽는 줄 알았다...

메서드도 한 두개가 아니라서... 지친다... 결국 마지막 몇 문제는 다음에 풀기로 했다

 

 

 

 

 

 

728x90
[엘리스 AI07] 2주차 - JavaScript (2023.03.06~03.10)
728x90

2023.03.06

오늘은 자바스크립트에 대해 배웠다!! 프리트랙에서 파이썬이랑 자바스크립트를 했는데, 문제 풀 때 자바스크립트가 술술 풀려서 나름 호감을 가지고 있었는데 ㅎㅎ

하... 근데 그때 배운 자바스크립트는 정말 빙산의 일각이었다. 클로저니 일급객체니 하는데 설명 들을 때는 아! 싶었는데 돌아서니 모르겠음

처음보는 용어가 너무 많아서 용어집을 따로 만들어서 정리해야겠다. 이것도 포스팅에 추가해야지

 

2023.03.07

오늘은 첨으로 성수에 있는 엘리스랩에 가서 수업을 들었다. 맥 첨 써봐서 당황스러웠는데 커멘드는 윈도우 컨트롤이랑 같은 기능이다. 새로운 이벤트가 있으면 꼭 얼리어답터마냥 먼저 써보는 편인데, 그래야 나중에 쓸 때 익숙해서 당황안하기 때문이다. 가길 잘 한듯 ㅎㅎ 근데 다른 기수 분들도 많아서 동기 찾기도 어렵고 말 걸기도 뻘쭘했다 ㅎㅎ 혼자 10시까지 공부하다 귀가

어제는 자바스크립트 후반부 내용이 머리아팠는데 실습 문제들은 앞부분 내용이라 수월하게 풀었다. 아직 포기하긴 일러!!

설명 듣기 전에 혼자 함 풀어봤는데 정답 뜰 때 그 기쁨 ㅎㅎㅎ 잘하고 있어

 

2023.03.08

메소드들이 점점 늘어나니 살짝 헷갈린다.

화살표 함수는 설명 들으면 알겠는데, 화살표 함수로 적힌 걸 보면 당황스럽다. 막 안읽히고 그래...

this 부분도 많이 어려워서 다른 블로그도 읽으면서 공부해봐야지

 

2023.03.09

실시간 수업과 다르게 기본적인 자바스크립트 문법을 하는 시간이었다. 휴 살 거 같아...ㅎㅎㅎ if문 조건문 같은 것들! 프리스택에서도 했구 C언어 같은 다른 언어에서도 배웠던 거라 비슷비슷해서 수월했다

그동안 잊고 있던 1차 스터디 마감이 다가왔다 까먹고 있다가 확인해보니 어느새 몇몇 스터디는 인원이 마감되었다.

팀장해보고자 했는데 아는 바가 없으니 스터디 개요를 짤 수가 없다...

다 프론트엔드이던데 백엔드 스터디 구하는 분이 있어서 슬쩍 탑승했다

백엔드가 먼지는 모르지만 이걸 계기로 배워서 다가올 백엔드 시간을 미리 준비해야겠다

저녁에 스터디 회의 나눠서 어찌어찌 방향성을 정했다

 

2023.03.10

오늘 내용은 자기소개서 만들어보기!

예시 따라서 쪼물딱쪼물딱 만들어보는데, 아직 CSS 적용이 버겁다.

우선 HTML 구조라도 완벽히 짜고, 차차 CSS도 꾸며봐야지

저녁에 친구랑 약속이 있어서 내용은 나중에 정리해서 업로드해야겠다

 

 

 

 

728x90