TIL_21.02.08(월) ~02.12(금)

명절 때문에 이리저리 움직인다고 한동안 못했었는데 다시 시작하자... 프런트와 관려된 개념이므로 가볍게 지나가기

02.08(월)

JS에서 비동기처리

튿정코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음코드를 실행하는 자바스크립트의 특성을 말한다.

비동기 처리 방식은 속도를 빠르게 하지만 순서를 제어할 수 없다는 단점이 있는데, 이를 해결하기 위한 방법으로 콜백함수를 사용할 수 있다.

콜백함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 그러나 비동기 처리 로직을 위해 콜백함수를 중첩해서 사용하면 아래와 같은 코드가 생길 수 있다.

funcA(res,function(id){
  funcB(res,function(result){
    funcC(res,function(data){
      funcD(res,function(json){
        console.log(json);
      });
    });
  });
});

이를 콜백 지옥이라고 하고 가독성이 안좋으며 코드관리의 어려움이 있다. 이를 해결하기 위해서 프로미스(Promise)나 async/await를 사용한다.

promise

캡틴판교 | 자바스크립트 Promise 쉽게 이해하기

기존의 콜백에서 에러를 넘겨주는 함수가 있다면 콜백을 처리할 때마다 에러 처리를 해줘야하지만 promise는 마지막에만 catch를 통해 처리 해주면된다.

async/await

promise인데 보이는 모습이 다르다...
await를 이용해 마치 동기적인 프로그램인 것 처럼 실행할 수 있다.

module

모듈은 어떤기능을 떼서 조립할 수 있는 형태로 만든부분을 의미한다.

node.js 내장모듈과 3rd-party모듈(공식적으로 제공하는 것이 아닌 다른 모든 재 3자의 것)을 사용할 수 있는데, require구문을 이용하여 불러올 수 있다.
추가로 3rd-party모듈을 npm install을 해줘야 한다.

const fs = require('fs')
const dns = require('dns')

// 이제 fs.readFile, fs.writeFile 메소드 등을 사용할 수 있다.

fs모듈 사용하기

node.js 에서는 파일을 읽는 비동기 함수를 제공한다.

fs공식문서 링크

const fs = require('fs');

fs.readFile('test.txt','utf8',(err,data)=>{
    if(err){
        throw err;
    }
    console.log(data);
})

If no encoding is specified, then the raw buffer is returned. -> utf8엔코딩을 통해 버퍼가 아닌 string이 data에 전달되도록 한다.

관련 repo진행

callback과 promise async/await로 fetch API를 이용한 데이터를 불러오는 실습을 진행함

02.09(화)

클라이언트에서 서버에게 요청

클라와 서버의 통신을 이해하기 위해 간단히 클라이언트에서 서버에 데이터 요청하는 것을 실습을 진행

fetch, browser, server, api, http, ajax

fetch, browser, server, api, http, ajax를 통해 복습진행

api는 서버의 리소스를 사용하는 클라이언트가 쉽게 사용할 수 있도록 하는 인터페이스

jQuery다음 등장한 개념인 fetch. 더 간단하다.
여전히 XMLHttpRequest는 많이 쓰이는 기술이고 fetch와 차이점을 확인하고 사용하는 것이좋다.

http

클라이언트와 서버사이에 이루어지는 요청/응답 프로토콜
HTTP로 전달되는 자료는 http: 시작하는 URL(인터넷 주소)로 조회 할 수 있음

구성 = 헤더와 바디
헤더 - 어디서 보냈는지, 컨텐츠 타입은 무엇인지, 어떤 클라이언트를 이용해 보냈는지 등등
바디 - 있을때도 없을 때도 있음

속성
stateless - http의 각 요청은 모두 독립적이다. 매 요청이 독립적이기 때문에 state라는 것이 없다. 문맥이 없다.보완하기 위해서는 인증이라는 것을 요청해야함.
Connectionless - 응답이후에는 연결이 끊기기 떄문에, 더이상 응답할 수 없다.

Method
Get - 서버의 자원을 요청
POST - 서버의 자원을 생성
PUT - 서버의 자원을 수정
DELETE - 서버의 자원을 제거

직접 서버에 데이터를 보내고 받는 실습을 진행하였음

보안이슈

XSS - client가 server를 신뢰해서 발생하는 이슈. 서버에서 받아온 잘못된 데이터(script태그 등등)를 그대로 렌더링했을때 그대로 처리하여 발생. 브라우저에서 기본적인 XSS 공격은 막혀있다.

CSRF - server가 client를 신뢰해서 발생하는 이슈. 서버는 인증정보를 가지고 오면 믿는다. 사용자는 인증 정보를 가진 체로 해커의 링크를 누르면, 해커는 인증정보를 가로채서 서버에 요청을 보내버린다. (예) admin에 CSRF공격을 해서 admin이 접근가능한 유저정보를 탈취한다.

CORS - 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross a origin HTTP요청에 의해 요청된다.
mdn | CORS
프리플라이트에 대한 내용학습

Event loop

공부하면서 블로깅을 진행중

02.10(수)

Event loop블로깅을 진행하였다.

02.11(목)

Node.js

Server->Client블로깅을 통해 진행하였다.
Node.js는 V8엔진으로 작동하는 자바스크립트 런타임.
V8은 자바스크립트를 기계어로 컴파일 해준다.

node.js는 자바스크립트를 컴파일 하여 구동하고 이벤트 기반의 non blocking 모델로 속도가 빠르다.

node와 함께 번들링 되어있는 모듈
require방식으로 사용할 수 있음.
ex) fs, path, http, url

package.json

npm(Node Package Manager)
세계에서 가장 큰 오픈 소스 라이브러리 생태계 중 하나
pakage.json은 npm을 활용하기 위한 정보들이 모여있는 파일일 뿐 아니라 project 전반에 관한 정보가 들어있다.

devdependency는 production과 관계없는 개발만을 위한 dependency.
--dev 옵션을 통해 등록한다.

$ npm install @babel/core --save-dev

dependency
직접 production과 관련있는 dependency. react 버전 정보 등...
npm --save 옵션을 줘야 pakage.json에 등록된다.

$ npm install --save react

npm install은 pakage.json에 있는 dependency를 바탕으로 설치된다.

02.12(금)

HTTP + NetworkTab

DNS server -> ip -> ip접속 -> Http response

URI -> 단순히 파일을 처리하는 것이 아니라 로직을 처리하기 때문에 URL이 아닌 URI

post 할 때는 payload와 같이 보낸다.

HTTP Request 클라이언트 -> 서버

HTTP Response 서버 -> 클라이언트

mini node server

http 모듈 사용
HTTP 트랜잭션 해부

CORS

CORS 리뷰 및 적용
옛날의 서버 클라이언트는 같은 오리진을 가졌기 때문에 의심의 여지 없이 클라이언트가 서버를 믿을 수 있었다. 그러나 최근의 들어 싱글 페이지 어플리케이션이 보편화 되었고 고도화 된 웹 어플리 케이션이 여러 리소스를 활용할 필요가 생겼다.(유튜브 등) 이제는 same origin이 아니라 cross origin 요청을 해야한다.

CORS(Cross Origin Resourse Sharing)은 cross origin에서 리소스를 요청하여 사용한다. 그러나 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin 요청을 제한한다. 그러나 웹 어플리 케이션 고도화를 위해 개선 요청으로 인해 서버가 허용한 범위 내에서 cross origin 요청을 허용하게 되었다.

const defaultCorsHeader = {
  'access-control-allow-origin': '*',
  'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'access-control-allow-headers': 'content-type, accept',
  'access-control-max-age': 10 // Seconds.
}

• 모든 도메인(*)을 허용
• 메소드는 GET POST PUT DELETE OPTIONS만 허용
• 헤더에는 content-type과 accept만 쓸 수 있음
• preflight request는 10초 까지 허용

디버그

HOW to debug Node app????
console.log(req)??????? ㅜㅜ

node --inspect 후 크롬 브라우저 디벨로퍼 콘솔에서 생긴 아이콘을 누른다. -> 내가 작성한 서버가 찍힌다. -> postman등으로 요청
nodemon도 지원한다.

VS코드에서 디버깅하는 법
브레이크 포인트를 잡아서 디버그 탭에 들어가 실행 시킨다. -> postman등으로 요청

구성 추가을 위해 구성 추가 버튼을 누르고 launch.json파일을 수정할 수 있다

CommonJS

• 모든 모듈은 자신만의 독립적인 실행 영역이 있어야한다.
• 모듈 정의는 전역 객체인 experts 객체를 이용한다.
• 모듈 사용은 require 함수를 이용한다.

module.exports vs exports

// --  hello.js
exports.anything = function() {
  console.log('I am anything.');
};
// -- hello-runner.js
const hello = require('./hello');
// let's see what's there in hello variable
console.log(hello); // {anything: Function}
hello.anything(); // I am anything.

// --  hello.js
module.exports.anything = function() {
  console.log('I am anything.');
};
// -- hello-runner.js
const hello = require('./hello');
// let's see what's there in hello variable
console.log(hello); // {anything: Function}
hello.anything(); // I am anything.

exports는 module.exports 사용을 도와주는 helper
exports는 module.exports를 참조할 뿐!
module.exports에 뭔가 이미 붙어있다면,exports는 무시된다. => 섞어쓰면 X

// hello.js file
module.exports = {a: 1}
// hello-runner.js
const hello = require('./hello');
console.log(hello); // {a: 1}

// hello.js file
exports = {a: 1}
// hello-runner.js
const hello = require('./hello');
console.log(hello); // { } 💥💥💥