WIL 2 알고리즘과 항해톡 그리고 JavaScript

너는 수학을 소중히 여기지 않았지

엉엉 ㅠ0ㅠ
행렬의 덧셈은 진짜 눈물뿐이었는데... 행렬을 몰라서 그랬다기보다 몰라도 문제를 잘 읽으면 이해가 됐을 법도 한데... 혼돈... 카오스... 꼼수학_행렬의 기초연산(덧셈,뺄셈,곱셈) 유튜브 강의를 보면서... 어 이 식 만드는 함수를 만드는 거잖아... 참 답답했던 시간들이었다... [i][j]=[[]] 이것을 이해하는 데에 많은 시간을 써버린 것 같다...

많이 풀어보고 문제를 어떻게 식으로 표현할 지 고민해야겠다. 자바스크립트 메소드도 공부하고, 콜백 함수에 대해서도 공부하고... 공부할 것이 많다.
알고리즘조에서도... 또 CS스터디에서도 블로그를 공유해주셔서 (그저 빛...:amaze:) 도움이 많이 됐다. 자바스크립트 열심히 공부한다!!!!!
유튜브 드림코딩 by 엘리 자바스크립트 기초강의

(3/19) 다행히 테스트에 통과했다. 공부하면서 한 번도 바로 푼 적이 없어서 과락할 줄 알았는데... ㅠ0ㅠ 기쁘다. 알고리즘조에서 계속 스터디를 하기로 했다. 하루에 한 문제씩. 나는 자바스크립트 공부를 목적으로 해나갈 생각이다. 화이팅...

항해톡: HTTPS와 REST API

항해톡에 앞서

`API`
내부의 구현 사항을 잘 숨겨두고 
외부에서 사용하는 사람이 필요한 것만 노출해 둔 부분( = Interface, API)  

`HTTP`
네트워크에서 기기들간에 의사소통 해나가는 규격 사항

`REST`
Web API를 어떻게 디자인해서 만들건지 정의
새로운 데이터를 만들고, 읽고, 업데이트하고, 삭제할 수 있다.
get으로 user에 대한 정보를 요청(request)하면,
서버로부터 user data를 JSON이라는 포맷을 통해서 받아올 수 있다(response).

유튜브 [API란? 개념 정리와 포트폴리오에 유용한 대박 사이트 공유 🙌]
(https://www.youtube.com/watch?v=ogT267HvNuQ)

이번주에 첫 항해톡 시간이 있었다. 발표자가 준비해주신 HTTPS랑 API에 대해 듣는 시간이었는데 한 번 더 공부할 수 있어서 좋았다.

HTTP
서로 다른 프로그램 사이에서 통신을 주고 받는 가장 기초적인 프로토콜

HTTPS
SSL ≒ TSL Secure Socket Layer
인터넷에서의 정보를 암호화해서 송수신하는 프로토콜

SSL 통신과정
공개키/개인키 대칭키
사용자 <-> 인증기관 <-> 사이트

사용자가 인증기관이 발급한, 사이트 공개키로 암호화된, 사용자 대칭키를 사이트에 넘기면, 사이트는 사이트 비밀키로 복호화해서 사용자와 사이트가 동일한 대칭키를 갖게 되므로 통신 가능이라고 이해를 했다.

HTTP 안쓰는 게 좋다! ->
속도 차이도 사용자가 느끼기에는 거의 없는 수준이라고 한다.

REST API
웹 표준 HTTP 프로토콜을 그대로 사용
URI에 대해 파악할 수 있는 자세한 코드들(이해가 정말 잘됐다!).

기술 매니저님이 공유해주신 영상 [그런 REST API로 괜찮은가]

REST API는 단순해보이지만 제약조건이 엄격하게 명시되어있고, REST API가 아닌데 REST API라 불리고 있다. 조건을 지키지 못하는 이유는 표현 방식인 HTML과 JSON의 차이에 있고 기계끼리 인식하는 JSON 파일 작성에서 수정이나 추가를 하는 것으로 차이를 좁힐 수 있다.
이 정도까지만 이해할 수 있었다...
그래서 RESTful이라고 하나... 이건 또 다른 얘긴가... 어렵다...@_@

`REST`를 다시 구체적으로 뜯어보면,

Representational State Transfer
자원을 자원(resource)의 표현(representation) 으로 구분하여 
해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.

자원(Resource): URI
모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI 다.
Client는 URI를 이용해서 자원을 지정하고 
해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.

행위(Verb): HTTP Method
HTTP 프로토콜의 Method를 사용한다.
HTTP 프로토콜은 GET, POST, PUT, DELETE 와 같은 메서드를 제공한다.

표현(Representation of Resource)
Client가 자원의 상태(정보)에 대한 조작을 요청하면 
Server는 이에 적절한 응답(Representation)을 보낸다.
REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 
여러 형태의 Representation으로 나타내어 질 수 있다.
JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.

블로그 [REST (Representational State Transfer)]
(https://velog.io/@soom/REST-Representational-State-Transfer#rest-restful)

URI와 URL의 차이가 궁금해서 찾아보니, 
`URI는 식별하고, URL은 위치를 가르킨다` 였다. 
그거 인덱스야. 그거 인덱스쩜에이치티엠엘 파일이야. 

블로그 [URI랑 URL 차이점이 뭔데?]
(https://www.charlezz.com/?p=44767)

JavaScript의 ES란?, ES5/ES6 문법 차이

ES란?

Netscape에서 만든 JavaScript와 Microsoft에서 만든 Jscript는 같은 목적으로 만들었는데 서로의 모양새가 너무 달라 표준이 필요하게 되었다.
표준을 위해서 Netscape에서 JavaScript를 ECMA라는 기구에 제출하였고, ECMA에서는 ECMA Script라는 이름으로 표준을 정의했다.

ES는 ECMA Script의 약자이고, 표준이다.
ES5 버전의 JavaScript, ES6 버전의 JavaScript라고 이해하면 될 것 같다.

ES5/ES6 문법 차이

• ES6의 const와 let

const는 ES6 문법에서 새로 도입되었다. const는 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드고, let은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드다. const와 let의 scope는 블록 단위다.
ES6 이전에는 값을 담는 데 var 키워드를 사용했는데 var 키워드의 scope는 함수 단위다.

function myFunction() {
 var a = "hello";
 if(true) {
  var a = "bye";
  console.log(a); // bye
 }
 console.log(a); // bye
}
myFunction();

if문 밖에서 a를 조회하면 변경된 값이 나타난다.

function myFunction() {
 let a = 1;
 if(true) {
  let a = "2";
  console.log(a); // 2
 }
 console.log(a); // 1
}
myFunction();

const는 한번 선언하면 재설정할 수 없고,

const b = 1;
b = 2; // Uncaught TypeError: Assignment to constant variable

let은 같은 블록 내부에서 중복 선언이 불가능하다.

let a = 1;
let a = 2; // Uncaught TypeError: Identifier 'a' has already been declared.

정리: ES6 문법에서 var를 사용할 일은 없다. 편하게 생각하면 기본적으로 const를 사용하고, 해당 값을 바꾸어야 할 때는 let을 사용하면 되겠다.

• ES6의 화살표 함수

화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 기존 function을 이용한 함수 선언 방식을 아예 대체하지는 않는다. 사용 용도가 조금 다르다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다.

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

function twice(value) {
 return value * 2;
}

const triple = (value) => value * 3;

이외의 비교 문법은 아래 블로그에 상세히 나와있다.
[JS] Javascript ES5 vs ES6 비교 문법 정리

참고
유튜브 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)
블로그 ECMA SCript?란? (ES란?)
도서 리액트를 다루는 기술, 개정판 김민준(VELOPERT) 지음