• label 태그 입력하는 거 아주 중요(html)
• CSS는 캐스캐이딩 스타일
  • 프로그래밍 언어는 아니지만 시각적으로 표현하기 위해 사용
  • Cascading은 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리

L 후손선택자 R 자식선택자

• 자식, 자손 선택자

1. 후손선택자 = 자손선택자 = 하위선택자

• 자식을 포함하는 의미 = 계층구조에서 하위에 오는 모든 자손선택

• 선택자 : 공백(스페이스바 한번)

→ 사진이 의미하는 것 : #container ul

1. 자식선택자

• 앞 요소의 자식인 뒷요소를 선택 = 직계 자식만을 선택

• 선택자 : >

→ 사진이 의미하는 것 : #container > ul

1. 동위선택자 = 형제선택자

• 같은 부모를 가진 요소들 = 계층구조에서 요소 바로 다음에 오는 요소선택

• 선택자 : +, ~

• 인접형제선택자(+) : 앞의 요소 바로 뒤에 있는 요소만선택

→ 사진이 의미하는 것 : p + ul

• 일반형제선택자(~) : 앞요소 뒤에 있는 모든 요소를 선택

→ 사진이 의미하는 것 : p ~ ul

• 참조 : https://chpofo.tistory.com/26

  • https://developer.mozilla.org/ko/docs/Web/CSS/Child_combinator
• 인접 선택자 (‘+’) 사용
• 직계자손 선택자 (‘>’) 사용

속성 선택자

- input[type="password"]

이런식으로 쓰임 password에 대한 부분만 잡고 사용 속성 선택자에선 = 를 대신 쓰기도 한다.

유사 클래스

가상 클래스는 선택자 끝에 붙여 상태를 특정하는 키워드

이것으로 체크박스나 선택요소등 선택. 그중 5번째나 10번쨰나 이런식으로만 특정해서 가져오기도 가능.

• https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

• https://www.w3schools.com/css/css_pseudo_classes.asp

인라인 스타일

• id, class 보다 더 명시적임

• 이걸 쓰거나 추천하는 사람은 거의 없으나 알아두긴 하자

• !important같은게 있는데 이런걸 최대한 안 쓰는게 좋다. 있긴 하지만 안 쓰는걸 최대한 지향

CSS 상속

• CSS 속성 뒤에 :inherit을 붙임

패딩과 마진의 차이

• 패딩 : 콘텐츠와 테두리간의 간격
• 마진 : 한 요소와 다른 요소의 각 테두리 간 간격

디스플레이 속성

• 인라인
• 블록
• 인라인 블록

inline vs block vs inline-block 속성을 비교해보자. display: inline ? 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

width/height 적용불가 margin/padding-top/bottom 적용불가 line-height를 원하는대로 사용할 수 없다. display: block ? block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다.

display: inline-block ? inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

width/height 적용 가능 margin/padding-top/bottom 적용 가능 line-height 적용 가능 ** 고려사항

inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다. inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.

인라인 블록은 여백, 패딩, 가로, 세로와 함꼐 가능

• 참고 : https://ruden91.github.io/blog/inline-vs-block-vs-inline-block/

px em rem 차이

• em : px과 달리 글꼴 크기에 따라 자동으로 크기 바뀜
  • em의 단점: 단계별로 누적이 된다

em vs. rem 차이 : 변환되는 기준이 다름 em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.

em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.

div { font-size: 10px; } div { font-size : 1em; /1em 대략 10px/ }

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. 대개는 HTML tag에서 지정된 font-size가 기준이 됩니다. 만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받습니다.

html { font-size : 10px; /설정 안했을 때는 브라우저 기본 값으로 _/ } div { margin: 1.5em; /_대략 15px/ }

=> rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면, em은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.

참고 : https://monkeydeveloper.tistory.com/entry/CSS-px-em-rem-%EC%B0%A8%EC%9D%B4%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

img {
    width: 30%;
    /* margin: 1.6666666%; */ /* 백분율로 이미지 크기 변환*/
    margin: calc(10%/6);
        /* 10%가 남았다는 뜻 */
}

nav {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
    border-bottom: 2px solid #f1f1f1;
    width: 30%;
    margin-left: calc(10%/6);
    padding: 1.2em 0;
}

/* 30 + 30 + 30

10% */

미디어 쿼리

• 미디어가 웹에서 많이 쓰임에 따라 등장한 csss 개념

참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

Javascript

js

Null과 undefined의 차이

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.

즉, undefined는 자료형이 없는 상태이다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다.

undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.

Truthy and Falsy

자바스크립트의 모든 값은 다음 경우 제외하고는 다 Truthy다

• false
• 0
• ”“(빈 문자열)
• null
• undefined
• NAN

push, pop, shift, unshift

• push: 스택 배열 맨 뒤 넣는거
• pop : 스택 큐 맨 앞부터 뺴는거
• shift : 배열 스택 큐 맨앞부터 제거
• unshift : 배열 스택 큐 맨 뒤부터 제거

유용한 메서드들

concat - 어레이 합치기(문자열도) includes - 값이 있는지 확인. indexof와 비슷한데 이건 불리언값(true,false로 반환) indexOf - 문자열 안에 해당 값이 있는지 확있 있으면 그 인덱스를 리턴 없으면 -1 리턴 join - 배열 안 중 문자열을 합친다. reverse - 배열 역순 출력 slice - 배열 중 해당 부분만 잘라서 가져옴 splice - 해당 요소 부분 해서 제거함

colors.splice(5,1) :그럼 5번쨰 인덱스부터 1개가 제거

colors.splice(5,1, orange): 5번쨰 인덱스 하나를 orange로 바꾸기도 가능

• slice는 원본 배열을 수정하지 않고 새로운 배열을 만드는 것과 다르게 splice는 원본 배열 자체를 수정

sort - 배열 정렬

근데 sort가 약간 이상함

-12, 70 100 2500 34 이렇게 있으면

-12 100 2500 34 로 정렬(맨 앞자리 기준) 쓸만한 정렬방식은 아님

sort 쓸떄 이런걸 주의해야 함

오름차순이나 내림차순 정렬이나 특정 부분만 해서 정렬도 가능

자바스크립트에서

[1,2,3] == [1,2,3] 은 true지만 [1,2,3] === [1,2,3] 은 false. 참조하는 메모리가 다르기 떄문

자바스크립트 객체에서 {} 를(중괄호) 쓰는 건 객체를 선언할 떄 뿐(만들 때 뿐)

해당 데이터 접근하려면 대괄호 써야[]

person= {firstName:"Mick",lastName : "jagger"}

person["lastName"]
-> "jagger"

const years = {1999:’good’} years[‘1999’] -> ‘good’ 출력 years[1999] -> ‘good’ 출력

person[‘first’+’name’] -> ‘mick’ 출력 이런식으로도 가능

for of = for문의 업그레이드 버전 for in = 객체를 for문 돌리기 가능. 그러나 for of에 비해 잘 쓰이지 않는다.

for (let score of Object.values(testScores)){
  console.log(score);
}

let input = prompt('what would you like to do?');
const todos = ['Collect Chicken Eggs', 'Clean Litter Box'];
while (input !== 'quit' && input !== 'q') {
    if (input === 'list') {
        console.log('*****************')
        for (let i = 0; i < todos.length; i++) {//객체 내장된 애들도 이런식을 사용가능
            console.log(`${i}: ${todos[i]}`);
        }
        console.log('*****************')
    } else if (input === 'new') {
        const newTodo = prompt('Ok, what is the new todo?');
        todos.push(newTodo);
        console.log(`${newTodo} added to the list!`)
    } else if (input === 'delete') {
        const index = parseInt(prompt('Ok, enter an index to delete:'));
        if (!Number.isNaN(index)) { //인덱스가 NAN의 결과 얻게되면 유효하다는 뜻이므로 할일에서 삭제함
            const deleted = todos.splice(index, 1);     //index에서 1글자 잘라옴
            //사용자가 유효한 입력 할거라 전제함(숫자가 아닌 값 입력시 오류날수 있음)
            //인덱스로부터 한개 없앤걸 deleted에 저장
//            주어진 값이 NaN이면 true, 필요하지 않으면 false.
//NaN값은 산술 연산이 정의되지 않은 결과 또는 범위 없는 결과를 바로 하면 생성
            console.log(`Ok, deleted ${deleted[0]}`);
        } else {
            console.log('Unknown index')
        }
    }
    input = prompt('what would you like to do?')
}
console.log('OK QUIT THE APP!')

Nan에 관해 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN

https://codechacha.com/ko/javascript-check-if-number-is-nan/

렉시컬 범위

• 함수 스코프 얘기 말하는 거

화살표 함수

• 함수를 만들 떄 사용. 변수에 저장도 가능하다

const add = (x,y)=>{ return x+y; }

some, every 메서드

리턴이 참, 거짓으로 온다. 리턴값을 받기 위해 쓰는 함수도 콜백 함수로 써야한다.

Reduce 메서드

const total = prices.reduce((total, price)=> total * price);

const minPrice = prices.reduce((min,price)=> { if(price>min){ return price; } return min; })

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

const evens = [2,4,6,8] evens.reduce((sum,num)=> sum+num, 100)

화살표 함수와 this

this 키워드는 화살표 함수일 떄와 일반 function 키워드로 쓰일 떄 다르게 사용된다.

실행 컨텍스트가 다르기 떄문

화살표 함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드값과 같다.

즉, this 키워드가 함수 안 this 키워드와 같다는 의미.

this 키워드가 화살표 함수에서 다르게 동작해야한다. 가끔 우리가 원하는 대로 사용할 수 있어야 한다.

JavaScript 함수의 this 바인딩

JS의 this는 상황에 따라 다르게 바인딩됩니다. 대표적으로 this에 바인딩되는 값들은 이렇습니다.

전역 공간의 this : 전역 객체 메소드 호출 시 메소드 내부의 this : 해당 메소드를 호출한 객체 함수 호출 시 함수 내부의 this : 지정되지 않음(❓❗️ )

• 참조 : https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

. 함수를 호출했을 때 그 함수 내부의 this는 지정되지 않습니다. 그리고 this가 지정되지 않은 경우, this는 자동으로 전역 객체를 바라보기 때문에 함수를 호출하면 함수 내부에서의 this는 전역 객체가 된다고 정리할 수 있습니다. 음… 킹받지만 아쉽게도 자바스크립트 개발자 중 한 명인 더글라스 크락포드조차 이 점은 설계상의 오류라고 지적했습니다.🥲

그러니까, 그냥 함수를 호출한다면 다음과 같은 상황이 연출됩니다.

그러니까, 그냥 함수를 호출한다면 다음과 같은 상황이 연출됩니다.

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1(); // undefined cat.foo1() 메소드 호출 시 내부 함수 foo2가 실행됨 함수가 호출됐으므로 foo2 내부의 this는 지정되지 않아서 곧 전역 객체를 가리킴 전역 객체에 name이란 속성은 존재하지 않으므로 undefined가 뜸

const cat = { name: ‘meow’, foo1: function() { const foo2 = () => { console.log(this.name); } foo2(); } };

cat.foo1(); // meow 위 코드와 달라진 점은 cat 객체의 내부함수 foo2가 화살표 함수로 선언됐다는 점 뿐입니다. 그런데 이번엔 우리가 의도한대로 meow가 잘 찍혔습니다. 어떻게 가능한걸까요

화살표 함수의 this 바인딩 이게 가능한 이유는 화살표 함수에는 ⭐️this가 아예 없기 때문⭐️입니다. 즉, function으로 선언한 함수를 실행할 땐 this가 존재하긴 하지만 값을 지정하지 않는데, 화살표 함수로 선언한 함수에는 this가 없습니다. 아~ 있었는데? 아니 그냥 없어요.

JavaScript에서는 어떤 식별자(변수)를 찾을 때 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색합니다. 그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 되는 것이죠. 화살표 함수에서의 this 바인딩 방식도 이와 유사합니다. 화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.

더 정확히는, function으로 선언한 함수가 메소드로 호출되냐 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩됩니다.

조금 어렵고 헷갈리실 수 있습니다. 그냥 편하게 화살표 함수를 쓰면 내가 의도한 바로 그 this가 바인딩되는구나! 하고 생각하셔도 개발하는 데에는 별 지장 없을 것 같습니다

이럴 땐 화살표 함수를 쓰면 안돼요 이렇게 JavaScript의 함수 this 바인딩 문제를 깔끔하게 해결해 준 화살표 함수도 사용해선 안되는 때가 있습니다. 상위 환경의 this를 참조한다는 점이 문제가 될 수도 있거든요. 바로 다음과 같은 경우입니다.

1. 메소드 const cat = { name: ‘meow’; callName: () => console.log(this.name); }

cat.callName(); // undefined

위에서 undefined 뜨던거도 같은 레벨에서 this가 아닌 상위객체의 this를 가리켰기 때문에 undefined난거

이 같은 경우, callName 메소드의 this는 자신을 호출한 객체 cat이 아니라 함수 선언 시점의 상위 스코프인 전역객체를 가리키게 됩니다. 어차피 일반 함수를 사용해도 메소드로 호출하면 자신을 호출한 객체를 가리키기 때문에 메소드에서 화살표 함수를 쓸 필요는 없겠죠?😉

1. 생성자 함수 const Foo = () => {}; const foo = new Foo() // TypeError: Foo is not a constructor 화살표 함수를 생성자함수로 사용하면 에러가 납니다. 생성자 함수로는 사용할 수 없게 만들어졌어요!

2. addEventListener()의 콜백함수 const button = document.getElementById(‘myButton’);

button.addEventListener(‘click’, () => { console.log(this); // Window this.innerHTML = ‘clicked’; });

button.addEventListener(‘click’, function() { console.log(this); // button 엘리먼트 this.innerHTML = ‘clicked’; }); 원래 addEventListener의 콜백함수에서는 this에 해당 이벤트 리스너가 호출된 엘리먼트가 바인딩되도록 정의되어 있습니다. 이처럼 이미 this의 값이 정해져있는 콜백함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프(이 경우엔 전역 객체)가 바인딩되기 때문에 의도했던대로 동작하지 않을 수 있습니다. 물론 상위 스코프의 속성들을 쓰려고 의도한 경우라면 사용할 수 있습니다.

마무리 이렇게 화살표 함수를 쓰는 이유는 자바스크립트의 요상한 this 때문이었습니다. 역시 까면 깔수록 매력이 있는 언어네요~😠 틀린 점 지적은 언제나 환영입니다 💓

Reference 화살표 함수 - poiemaweb 화살표 함수 - MDN

• 참고 : https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

배열분해

const scores = [929321, 899341, 888336, 772739, 543671, 243567, 111934];

// const highScore = scores[0];
// const secondHighScore = scores[1];

const [gold, silver, bronze, ...everyoneElse] = scores;

각 배열 처음부터(인덱스 0) 3번쨰까지는 브론즈까지 저장되고 나머지가 everyoneElse에 저장되었다.

객체 분해

객체 email의 값 갖는 변수들을 email이라고 칭하는 것.

DOM 이란

• 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

getElementbyId 사용법

태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수

해당 id가 없는 경우 null 에러가 발생합니다. ID가 없는 요소에 접근하려면 document.querySelector() (opens new window)를 사용

• 참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

최근에는 이 대신 querySelector라는 더 나은 기법을 쓴다.

innerHtml

querySelector로 잡은 요소를 innerHTML로 수정 가능

속성

document.querySelectorAll(‘input’)[1]

document.querySelectorAll(‘input[type=”text”]’)

자바스크립트를 css마냥 해두는 것

ClassList

• 요소의 클래스를 제어하고 클래스를 검색하며, 조작도 하기 위해 호출하는 객체

ClassList를 사용해야 하는 이유

https://hyunjungchoi.tistory.com/70

innerText와 innerHTML의 차이점

https://hianna.tistory.com/480

이벤트 버블링

<body>
    <section onclick="alert('section clicked')">
        <p onclick="alert('paragraph clicked')">
            I am a paragraph:
            <button onclick="alert('button clicked')">Click</button>
        </p>
    </section>

여기서 만약 버튼이 있고 버튼 클릭했는데 단락(div)에 있는 요소까지 실행되면? 그게 이벤트 버블링 발생한 것

bulma는 부트스트랩과 비슷한 css프레임워크 jquery대신 쓸수도 있다. pooper.js를 쓰기 떄문

call Stack

자바스크립트가 뒤에서 사용하는 메커니즘 또는 기능

콜 스택(Call Stack)이란? 콜 스택이란, 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조라 정의 할 수 있습니다.

1. 함수를 호출하면 실행 컨텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 수행하기 시작합니다.
2. 함수에 의해 호출되는 모든 함수(내부 함수들)는 콜 스택에 추가되고 해당 위치에서 실행합니다.
3. 함수의 실행이 종료되면 해당 실행 컨텍스트를 콜 스택에서 제거한 후 중단 된 시점부터 다시 시작합니다.
4. 만약 스택이 할당 된 공간보다 많은 공간을 차지하면 ‘stack overflow’에러가 발생합니다.

function foo() { console.log(“foo”); }

function bar() { console.log(“bar”); }

function baz() { foo(); console.log(“baz”); bar(); }

baz(); 위 예제 코드는 다음과 같이 실행 될 것입니다.

1. baz 함수를 호출할 때까지 모든 함수를 무시합니다.
2. baz 함수를 호출합니다.
3. baz 함수를 호출하여 생성 된 실행 컨텍스트를 콜 스택에 추가합니다.
4. baz 함수 내의 모든 코드를 읽기 시작합니다.
5. foo 함수를 호출합니다.
6. foo 함수를 호출하여 생성 된 실행 컨텍스트를 콜 스택에 추가합니다.
7. foo 함수 내의 모든 코드를 읽기 시작합니다.
8. foo 함수 내의 모든 코드를 읽었다면 해당 실행 컨텍스트를 제거합니다.
9. foo 함수가 호출 된 라인으로 돌아와 나머지를 계속 실행합니다.
10. bar 함수도 5~9과 마찬가지로 실행됩니다.
11. baz 함수 내의 모든 코드를 모두 읽었으므로 baz함수가 콜 스택에서 제거됩니다. 결과는 foo, baz, bar 순서대로 출력 될 것입니다.

이처럼 자바스크립트는 한 순간 하나의 작업만을 처리하며 동작하게 됩니다. 만약, 어떠한 함수의 실행이 오래걸린다면 어떨까요? 실행이 되는동안 브라우저가 멈춘 상태로 있을겁니다. 멈춘동안 사용자가 이것 저것 트리거를 발생시킨다면, 오래 걸리던 함수가 종료되는 순간 콜 스택에 주르륵 쌓이고 처리하게 될 것입니다. 혹은 아래 이미지와 같은 창이 떠버릴 수도 있습니다.

노드가 단일스레드인거마냥 자바스크립트도 단일 스레드

앞서 알아본 콜 스택외에 생소한 것들이 보입니다. 하나씩 알아볼까요?

Heap 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다. 이전에 알아본 자바스크립트의 Reference Type 즉, 객체는 모두 Heap안에 할당됩니다.

Web API 브라우저에서 제공하는 별도의 API 입니다. 프론트엔드 개발을 하며 주로 사용하는 DOM, SVG, Fetch, Canvas, setTimeOut등은 모두 자바스크립트가 아닌 브라우저에서 제공하는 API입니다.

Callback Queue(Messege Queue) 비동기 함수가 실행 된 후 콜백 함수가 대기하는 자료구조 입니다.

Microtask Queue(Job Queue) ES6에서 도입 된 새로운 컨셉으로, Callback Queue와 동일 계층에 존재하며 Promise를 통한 비동기 요청 시의 콜백 함수는 Microtask Queue에 대기하게 됩니다.

Animation Frames requestAnimationFrame에 의해 등록되는 자료구조로 requestAnimationFrame의 콜백 함수가 대기하는 자료구조 입니다.

Event loop(이벤트 루프) 이벤트 루프는 Call Stack과 각 Queue를 감시하고 있다가 Call Stack이 비었을 경우 정해진 우선순위에 따라 queue에서 하나씩 꺼내 Call Stack에 추가해주는 역할을 합니다.

1. 호출 스택의 작업을 모두 처리합니다.
2. 호출스택이 비었을 경우, Microtask Queue를 확인하고 처리해야 할 작업이 있다면 Call Stack에 넣고 처리합니다.
3. 만약 MicroTask Queue가 비었을 경우에는 Animation Frames를 확인하고 마찬가지로 처리해야 할 작업이 있다면 Call Stack에 넣고 처리합니다.
4. 1~3과정을 거치고 난 후 마지막으로 Callback Queue를 확인하고 마찬가지로 Call Stack에 넣고 처리합니다.

Microtask Queue ➡️ Animation Frames ➡️ Callback Queue의 순서로 비동기 함수의 콜백 함수를 처리하게 됩니다.

console.log(“start”);

setTimeout(function () { console.log(“Timeout”); }, 0);

Promise.resolve().then(function () { console.log(“Promise”); });

requestAnimationFrame(function () { console.log(“rAF”); });

console.log(“end”); 위 예제 실행시 로그 출력결과는 start → end → Promise → rAF → Timeout 순으로 실행되는 것을 확인 할 수 있습니다. 일부 브라우저에서는 Animation Frames와 Callback Queue를 함께 처리할 수 있습니다. 따라서 브라우저마다 반드시 실행 순서가 보장된 것은 아닙니다. 위 순서는 크롬 브라우저(V8)기준으로 작성되었습니다!

Zero Delay 개발하며 setTimeout을 종종 사용하게 되는데요, 위에서 알아본 것처럼 setTimeout의 두번째 인수로 0을 넘겨주더라도, 0ms 후에 콜백이 시작된다는 의미는 아니라는 것을 알 수 있습니다.

setTimeout 콜백 함수의 실행은 큐에 대기중인 작업 수에 따라 차이가 날 수 있습니다! 따라서 지연시간(delay)는 함수가 해당 딜레이 이후 실행이 보장되는 시간이 아니라 실행하기 위한 최소의 시간입니다.

왜냐하면 setTimeout은 대기중인 모든 작업이 완료된 이후 실행 될테니까요 :)

여기까지 자바스크립트의 아주 중요한 개념중 하나인 이벤트루프에 대해 알아보았습니다.

조금은 어려울 수 있는 주제였지만, 이를 통해 자바스크립트와 더욱 친해질 수 있길 바랍니다 :)

참조 : https://frontj.com/entry/8-Javascript%EC%9D%98-%EC%BD%9C-%EC%8A%A4%ED%83%9D%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

AJAX

XML

• 확장성이 있는 마크업 언어

데이터를 저장하고 전달할 목적으로만 만들어진 마크업 언어로, HTML과 비슷하게 생겼지만 자신이 직접 태그를 지정할 수 있다. 장점 : 문법오류가 나도 괜찮다. 주석이 가능하다. 스키마를 통해 검증을 할 수 있다. 단점 : 문법 오류에 취약함 활용도 : 안정성이 요구되는 작업에 활용된다. (ex : 웹 서비스의 설정 파일, 모바일앱의 UI 작성할 때 (안드로이드 레이아웃 파일이 XML임!))

JSON

JavaScript Object Notation의 약자로, Javascript의 객체(Object) 문법으로 구조화된 데이터를 표현하기 위한 텍스트 기반의 표준 포맷(형식)이다. 장점 : 가볍고, 간단하다. 단점 : 문법 오류에 취약함 활용도 : 서버와 데이터를 주고 받을 때

AJAX

정의 Asynchronous Javascript And XML의 약자로, 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 의미한다. AJAX가 가진 장점은 페이지 전체를 새로고침 하지 않아도 된다는 “비동기성”에 있다. 기존에는 화면이 전환될 때 마다, 서버로부터 매번 새로운 HTML을 받아오고 렌더링했었는데, AJAX를 통해 웹 페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터를 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식으로 발전했다.

사용법

1. XMLHttpRequest

XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open() , send() 등의 메소드를 이용한다.

XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

1. fetch

IE를 지원하지 않는다는 점을 제외하면 XMLHttpReqeust 보다 훨씬 직관적이다. ES6(ES2015) 에서 표준이 되었고, Promise를 리턴한다.

응답객체는 json() , blob() 과 같은 내장 메서드로 body를 추출해내면 되고 이는 다시 Promise를 리턴함에 유의하자.

1. axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

장점 페이지를 새로고침하지 않아도, 빠르게 화면 일부분을 업데이트 할 수 있다. 수신하는 데이터 양을 줄일 수 있고 클라이언트에게 처리를 맡길 수 있다. 서버 처리를 기다리지 않고 비동기 요청이 가능하다. 단점 지원하지 않는 브라우저가 있다. 페이지 전환없이 서버와 통신을 하기 때문에 보안상에 문제가 있을 수 있다. 무분별하게 사용하면 역으로 서버의 부하가 늘어날 수 있다. 동일 출처 정책 문제가 발생할 수 있다.

Fetch API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.

기본 개념과 사용 방법 Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. 이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.

또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.

Fetch API로 리소스를 취득하기 위해서 GlobalFetch.fetch (en-US) 메소드를 불러들여야 합니다. 이 메소드는 Window나 WorkerGlobalScope (en-US)와 같은 인터페이스로부터 구현되었습니다.

fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤, fetch()는 Promise객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response (en-US)객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 Request)를 참고해주시기 바랍니다.

Response (en-US)를 가져온 후에, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다. 자세한 사항은 Body를 참고해주시기 바랍니다.

Request()와 Response() (en-US)를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은 FetchEvent.respondWith와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.

AXIOS는 타사 라이브러리인거 그걸 우리가 쓰는거다

통신 실행한 거도 보기 가능

API 작성시 쿼리에 문자열 너무 넣으면 부하 걸릴 수도 있다. 약간으 ㅣ지연이 있어도 좋다

Terminal

터미널 쓰는 이유

1. 속도
2. 액세스 권한

• 액세스 권한이 더 많기 때문에 변경 하거나 하는 권한들이 더 많다. 물론 그 만큼 중대한 내용을 바꾸거나 할 수도 있다.

1. 노드같은 도구 이외에도 많은 툴에서 터미널을 써야하기 때문

터미널, 쉘, 커맨드라인, 콘솔 , 배쉬

터미널

• 윈도우나 다른 플랫폼 및 운영체제에서 쓰이는 가상 소프트웨어 터미널

쉘

• 터미널에서 실행되는 소프트웨어가 있는 프로그램
• 원래 터미널이 하드웨어고 쉘이 소프트웨어

터미널은 ATM이라면, 쉘은 ATM에서 실행되는 소프트웨어

what is the difference between Terminal, Console, Shell and Command Line? 터미널(Terminal) : 텍스트 입출력 환경 => CLI, 그냥 CLI 이거다. 명령을 처리하고 결과를 출력할 수 없다. 그냥 인터페이스이다. 콘솔(Console) : 물리적 터미널 => 일종의 터미널이다. 쉘(Shell) : 명령줄 인터프리터(해석기) => CLI 명령을 처리하고 결과를 출력하는 프로그램이다.

❗️터미널(Terminal) 터미널은 텍스트 입력 및 출력 환경이다. (그냥 환경이다. 컴퓨터와 상호작용하는, 명령을 처리하고 출력을 뱉는 것은 쉘이 하는 것이다.) 터미널은 데이터를 입력하거나 처리 결과를 출력하는 장치인 단말기이다. 터미널은 쉘을 실행하고 명령을 입력할 수 있게 해주는 포장(Wapper) 프로그램이다. 터미널의 형태로는 하드웨어와 소프트웨가 있다. 터미널은 그래픽 인터페이스를 표시하고 쉘과 상호 작용할 수 있는 프로그램이다. 터미널은 명령줄에 액세스 할 수 있도록 하는 인터페이스이다. 터미널이란 용어는 일반적으로 키보드와 디스플레이를 통해 사용자가 컴퓨터와 상호 작용할 수 있도록 하는 장치를 나타낼 수도 있다. 👉 일부 유형의 터미널 에뮬레이터에 다음이 포함된다. Command Prompt guake gnome – terninal terminater 👉 터미널 텍스트 기반 GUI와 상호작용할 수도 있다. Vim Nano Tmux Minicom 👉 프롬프트(Prompt) 터미널에서 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간을 프롬포트(Prompt)라고 한다. ❗️콘솔(Console) 물리적 터미널을 콘솔이라고 한다. (하드웨어 형태의 터미널) 콘솔이 물리적인 장치라면 터미널은 원격제어 환경까지 포함하는 더 넓은 의미라고 할 수 있다. 콘솔은 일종의 터미널이다. 텍스트 모드 프로그램이 활성화된 창이다. 콘솔은 운영 체제와의 저수준 직접 통신을 위해 컴퓨터의 전용 직렬 콘솔 포트에 연결된 단일 키보드와 모니터로 구성되었다. 콘솔은 시스템에 직접 연결된 기본 터미널인 물리적 터미널이다. 콘솔은 운영 체제에서 (커널 구현) 터미널로 인식된다. 👉 콘솔의 몇 가지 예 famicom Xbox PlayStation Nintendo Switch Will Will U ❗️쉘(Shell=셸) 쉘은 커널(kernel: 알맹이)의 반댓말로 조개 껍데기를 의미한다. 쉘은 CLI 명령을 해석하는 소프트웨어이다. 쉘은 명령줄 인터프리터(해석기)이다. (command-line interpreter) 쉘은 실제로 명령을 처리하고 결과를 출력하는 프로그램이다. 쉘은 운영 체제의 서비스에 액세스하기 위한 사용자 인터페이스이다. 쉘의 기본 기능은 다른 프로그램을 실행하는 것이다. 터미널이랑 연관지어지는 이유는 터미널이라는 인터페이스(명령을 입력할 수 있는 환경, 입출력 환경)를 통해 쉘이라는 프로그램을 이용해서 명령을 입력하고 명령이 처리되고 결과가 출력되는 것을 볼 수 있기 때문이다. 그런데 쉘은 터미널이 필요하지 않은 백그라운드 프로세스에서 실행할 수 있다. 👉 쉘의 몇 가지 예 bash, fishk, zsh, ksh, sh, tsch Power Shell, pwsh cmd, yori, 4dos, command.com ❗️명령줄(Command line) 명령 프롬프트라고도 하는 명령줄은 일종의 인터페이스이다. 명령줄 인터페이스는 (텍스트) 명령을 입력하는 데 사용되는 모든 유형의 인터페이스이다. 그 중 하나가 터미널이지만 일부 프로그램에는 자체 명령줄 인터페이스가 있다. CLI(명령줄 인터페이스)는 텍스트 줄 형태로 명령을 처리하는 컴퓨터 프로그램이다. 사용자는 일반적으로 CLI(명령줄 인터페이스)를 통해 쉘과 상호 작용한다. 명령줄은 사용자가 명령(일련의 문자로 표현됨 – 일반적으로 명령 이름 뒤에 일부 매개변수가 옴)을 입력한 다음 Return 키를 눌러 해당 명령을 실행할 수 있는 인터페이스이다. 👉 명령줄 인터페이스의 몇 가지 예 Microsoft Windows DOS Shell Mouse Systems Power Panel

❗️터미널 vs 쉘 터미널을 사용하여 쉘과 상호작용할 수 있다. 터미널에서 쉘을 사용한다. 쉘을 터미널에서 실행할 수 있다. 쉘은 터미널 없이 실행할 수 있다. 터미널은 쉘이 있는 창을 말한다. 쉘은 명령줄 인터프리터이다. 터미널 = TV 화면 쉘 = TV 화면에서 실행 중인 프로그램 터미널 = 귀와 입은 소리의 터미널 쉘 = 두뇌는 특정한 껍질(처리)를 사용하여 소리를 해석한다. 터미널에 입력된 명령은 쉘로 전송되어 입력을 해석하고 즉시 실행한다. 터미널은 쉘에 대한 그래픽 인터페이스일 뿐이다. (말하자면 그렇다.) 쉘은 실제로 명령 등을 처리하는 것이다. 쉘은 터미널이 필요하지 않은 백그라운드 프로세스에서 실행할 수 있다. 터미널은 쉘이 프로그램었을 때, 프로그램에 대한 프론트엔드 래퍼이다. 터미널은 요즘은 일반적으로 GUI 창이나 GUI 대신 나타날 수 있는 명령줄(셸)이 있는 창을 나타낸다.

참고: https://hanamon.kr/%ED%84%B0%EB%AF%B8%EB%84%90-%EC%BD%98%EC%86%94-%EC%89%98-%EB%AA%85%EB%A0%B9%EC%A4%84terminal-console-shell-command-line%EC%9D%98-%EC%B0%A8%EC%9D%B4-2/

일반적으로 노드에서 소스 공유시 node_module은 공유하지 않음. 이 안에는 디펜던시가 별로 없다.

근데 Express는 다름.

이 디펜던시들은 package.json에 다 위치 그래서 여기서 npm install ejs, socket.io 등을 실행하면 된다.

이개 두세개면 몰라도 디펜던시가 엄청 많으면 수동으로 받기 쉽지 않다

그땐 package.json에서 npm i 나 npm install 하면 된다.

그 명령이 package.json 바라보고 dependecy를 받아오게 된다.

그후 node index.js실행하면 잘 실행 됨.

Express는 HTTP요청 들어오면 그걸 클라이언트가 원하는 URL과 쿼리가 뭔지를 파악하고 처리(자바스크립트 객체가 아니므로)

데이터 베이스와 비교하기도 함. 다양한 일 함.

http 요청이 텍스트 정보인데 이걸 파싱하는 것도 Exprss가 하는 일 상태코드 설정하고 돌려주기도 함

라이브러리와 프레임워크의 차이

둘 다 다른 사람이 작성 NPM 같은 거로 다운로드 단일 스크립트이거나 Axios를 쓰면 HTTP 요청 라이브러리다.

프레임워크는 다른사람이 작성한 코드지만 목적에는 차이가 있다

그게 제어의 역전

라이브러리는 언제든지 코드에 결합 가능 어떤식으로 제공할지 메소드와 기능 제공

우리가 제어권을 가짐.

프레임워크는 구조를 제어하는 곳이나 애플리케이션에서 제어의 흐름을 역전시키므로 우리는 거의 제어에 관여하지 않는다.

라이브러리는 그보다 작은 HTTP요청이나 terminal같은 간단한 거만 제공

프레임워크는 다양한 기능 얻는 데신 코드 작성에 유연성을 잃게 됨.

구버전에서 NPM 에서 패키지를 package.json에 저장하려면 –save사용

ejs란?

ejs는 Embedded JavaScript의 약자로, 쉽게 말하면 자바스크립트가 내장되어 있는 html 파일입니다.

node.js 진영에서 많이 사용하는 템플릿엔진입니다. 문법이 단순합니다. ejs는 html 안에서 <% %>를 이용해서 서버의 데이터를 사용하거나 코드를 실행할 수 있습니다.

ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있습니다. 매우 큰 강점인데, 이것을 이용해 페이지를 동적으로 짜는 것이 수월합니다. 일반 html 파일은 무조건 “script” 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 합니다. 또한 서버에서 보낸 변수를 가져와 사용할 수 있습니다.

get vs post 차이

• 데이터의 넘김 유무(쿼리스트링에 데이터 포함되나 안되나)

Rest란

• Rest: 개념, 가이드라인 표준, 원칙
• Restful : 위의 Rest 규칙에 따르는 시스템

Rest API 리소스

UUID

UUID란? UUID(Universally Unique IDentifier)는 네트워크상에서 고유성을 보장하는 ID를 만들기 위한 표준 규약이다. UUID는 다음과 같이 32개의 16진수로 구성되며 5개의 그룹으로 표시되고 각 그룹은 붙임표(-)로 구분한다.

put patch 차이

put은 전체 내용 업데이트 하는 용도 댓글에 put써서 요청시 페이로드 있는 건 뭐든 요청에 포함

patch는 부분적으로 수정가능

const methodOverride = require('method-override')

로 메서드 오버라이드 사용

<body>
    <h1>Edit</h1>
    <form method="POST" action="/comments/<%=comment.id%>?_method=PATCH"> <!--메서드 오버라이드-->
        <textarea name="comment" id="" cols="30" rows="10"><%= comment.comment %></textarea>
        <button>Save</button>
    </form>

</body>

• edit.js

브라우저에서 HTML 폼을 이용해 patch나 delete 요청을 보낼수는 없음(post로 해야함). 이거 중요

axios나 js, fetch 등으로 요청을 보낼 수는 있지만, 폼 요소로는 보낼 수 없음. 중요한건 그것, 기능의 차이는 없음

Mongo DB를 쓰는 이유

• 일단 js문법으로 사용 가능
• RDBMS만 쓸 가능성은 낮음
• 기본키 외래키 이런거 따질 필요 없음
• 설치가 젤 어렵다.

MongoDB 설치

• 6부터는 shell을 따로 msi나 zip형태로 받아야 함
• MongoDb는 데이터 저장 폴더를 따로 만들어야함. New-Item -ItemType directory -Path C:\data\db

mongod로 실행해보면 cmd창에 해당 위치에 data\db폴더가 없다고 알려줌

참조: https://zarkom.net/blogs/how-to-install-mongodb-for-development-in-windows-3328

Mongoose

Mongoose는 Node.js 환경에서 MongoDB를 조작하는 데 사용되는 객체 모델링 도구입니다. Mongoose를 사용하면 MongoDB 데이터를 보다 쉽게 관리할 수 있으며, 스키마를 정의하고 데이터 유효성 검사, 쿼리 작성, 미들웨어 등의 기능을 제공합니다. Mongoose는 MongoDB의 문서 지향 데이터 모델을 활용하면서도 관계형 데이터베이스의 개념을 포함할 수 있도록 해주는 유용한 도구 중 하나입니다.

const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/movieApp', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => {
        console.log("CONNECTION OPEN!!!")
    })
    .catch(err => {
        console.log("OH NO ERROR!!!!")
        console.log(err)
    })

const movieSchema = new mongoose.Schema({
    title: String,
    year: Number,
    score: Number,
    rating: String
});

const Movie = mongoose.model('Movie', movieSchema);
const amadeus = new Movie({ title: 'Amadeus', year: 1986, score: 9.2, rating: 'R' });


Movie.insertMany([
    { title: 'Amelie', year: 2001, score: 8.3, rating: 'R' },
    { title: 'Alien', year: 1979, score: 8.1, rating: 'R' },
    { title: 'The Iron Giant', year: 1999, score: 7.5, rating: 'PG' },
    { title: 'Stand By Me', year: 1986, score: 8.6, rating: 'R' },
    { title: 'Moonrise Kingdom', year: 2012, score: 7.3, rating: 'PG-13' }
])
    .then(data => {
        console.log("IT WORKED!")
        console.log(data);
    })

위 코드는 몽구스랑 노드 연결해서 쓰는 간단한 코드 그 외에 movieApp이라는 데이터베이스에 샘플 값 집어 넣은거 까지 구현

.load index.js 로 노드 실행해서 가져옴

mongodb 툴 robo 3T 대신 Studio 3T 사용

인스턴스 메서드란

인스턴스 메서드(Instance Method)는 객체(Object)에 속한 함수를 말합니다. 즉, 클래스(Class)의 인스턴스(Instance)에 대해 호출되는 함수입니다.

인스턴스 메서드는 객체의 상태를 변경하거나, 객체의 속성을 조작하는 작업을 수행할 수 있습니다. 또한 객체의 상태를 조회하거나, 객체의 속성을 반환하는 작업도 가능합니다.

예를 들어, 다음과 같은 Person 클래스가 있다고 가정해봅시다.

python

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def say_hello(self):
        print(f"안녕하세요, 저는 {self.name}입니다. {self.age}살입니다.")

위 클래스에서 init() 메서드는 객체를 생성할 때 호출되는 생성자(Constructor)이며, say_hello() 메서드는 인스턴스 메서드입니다.

say_hello() 메서드는 인자를 받지 않고, 해당 객체의 name과 age 속성을 사용하여 자기소개를 출력합니다. 이 메서드를 호출하려면, 먼저 Person 클래스의 인스턴스를 생성해야 합니다.

person = Person("홍길동", 30)
person.say_hello()   # 출력: 안녕하세요, 저는 홍길동입니다. 30살입니다.

위 코드에서 person.say_hello()는 person 객체의 say_hello() 메서드를 호출하는 것입니다. say_hello() 메서드 내부에서는 self.name과 self.age 속성에 접근하여, 해당 객체의 이름과 나이를 출력합니다.

정적 메서드(Static method)는 클래스의 인스턴스에 의존하지 않고, 클래스 자체에 바인딩되어 있는 메서드를 말합니다. 즉, 인스턴스를 생성하지 않고 클래스명으로 직접 접근하여 호출할 수 있습니다.

정적 메서드는 클래스 변수와 마찬가지로, 모든 인스턴스에서 공유되며, 인스턴스마다 값이 다른 변수를 사용하지 않습니다. 따라서, 정적 메서드는 주로 객체의 생성과 관련 없는 유틸리티 함수나 상수를 정의하는 데 사용됩니다.

파이썬에서는 @staticmethod 데코레이터를 사용하여 메서드를 정적 메서드로 정의할 수 있습니다. 이를 사용하면 인스턴스 메서드와 구문이 비슷하게 유지되면서도 클래스 자체에 바인딩되는 메서드를 구현할 수 있습니다.

가상 몽구스

가상 몽구스(virtual mongoose)는 실제 데이터베이스에 저장되지는 않지만, 몽구스 스키마(schema)의 필드들을 기반으로 동적으로 계산된 가상 필드(virtual field)를 만들어내는 것을 말합니다. 이는 몽고DB의 집계 연산(aggregation pipeline)과 유사한 개념입니다.

가상 필드는 기존 필드의 값을 가지고 연산된 값을 반환합니다. 이를 통해 복잡한 로직을 가지는 필드를 만들 수 있으며, 데이터베이스에 직접 저장할 필요 없이 애플리케이션에서 가상 필드를 사용할 수 있습니다. 예를 들어, 날짜 데이터를 저장하는 필드와 함께 해당 날짜가 얼마나 지났는지 계산하는 가상 필드를 생성할 수 있습니다.

const methodOverride = require('method-override');

methodOverride 미들웨어는 HTTP 클라이언트에서 지원하지 않는 PUT, DELETE와 같은 HTTP 동사를 사용할 수 있도록 지원하는 미들웨어입니다.

HTTP 프로토콜은 GET과 POST 방식을 제공하지만, PUT, DELETE 방식은 제공하지 않습니다. 따라서 PUT, DELETE 방식을 사용하기 위해서는 HTTP 프로토콜에서 제공하는 POST 방식으로 오버라이딩(대체)해야 합니다.

methodOverride 미들웨어를 사용하면, POST 요청에 _method 필드에 PUT 또는 DELETE 값을 지정하면 해당 HTTP 메소드를 사용할 수 있습니다. 위 코드는 _method 필드에 값을 넣어 HTTP 메소드를 오버라이딩하도록 설정하는 코드입니다. 예를 들어, _method 필드에 PUT을 넣으면 app.put() 라우터가 실행됩니다.

MiddleWare

미들웨어(Middleware)는 소프트웨어 시스템에서 서로 다른 소프트웨어 컴포넌트 간의 통신과 상호작용을 돕는 소프트웨어 계층입니다.

일반적으로 미들웨어는 클라이언트와 서버 사이에서 작동하며, 데이터를 전달하거나 작업을 수행하는 데 필요한 기능을 제공합니다. 이를 통해 다양한 소프트웨어 컴포넌트들이 서로 통신하며 작동할 수 있습니다.

미들웨어는 예를 들어 웹 애플리케이션에서 사용될 수 있습니다. 웹 애플리케이션에서 미들웨어는 HTTP 요청을 처리하고, 데이터베이스 연결을 관리하고, 로깅 및 오류 처리와 같은 공통 기능을 처리합니다. 이렇게 함으로써 웹 애플리케이션 개발자들은 이러한 기능들을 더 쉽게 구현할 수 있습니다.

미들웨어는 일반적으로 시스템의 유연성과 확장성을 높이고, 코드의 재사용성을 증가시키며, 코드의 중복을 방지하고, 보안성을 강화하는 등의 장점이 있습니다

인증과 권한

인증은 사용자의 신원 확인 권한은 사용자가 할 수 있는 행동을 확인하는 것

해시솔트

해시 솔트(hash salt)는 비밀번호와 같은 민감한 데이터의 보안을 강화하기 위해 사용되는 기술입니다. 해시 솔트는 해시 함수에 랜덤한 문자열(솔트)을 추가하여 비밀번호를 보호합니다.

해시 함수는 임의의 길이의 데이터를 고정된 길이의 데이터로 변환하는 함수입니다. 일반적으로 비밀번호를 저장할 때에는 해시 함수를 사용하여 비밀번호를 해시값으로 변환한 다음에 이를 저장합니다. 그러면 로그인 시에도 입력된 비밀번호를 해시값으로 변환한 후, 저장된 해시값과 비교하여 일치 여부를 확인합니다. 이렇게 함으로써 원본 비밀번호를 저장하지 않고도 비밀번호 검증이 가능합니다.

하지만 해시 함수만 사용하면 동일한 비밀번호가 항상 동일한 해시값을 가지게 됩니다. 이는 공격자가 무차별 대입 공격(brute-force attack)이나 레인보우 테이블(rainbow table)과 같은 기법을 사용하여 해시값을 예측할 수 있다는 의미입니다. 해시 솔트는 이러한 공격을 어렵게 만들기 위해 사용됩니다.

해시 솔트는 해시 함수에 솔트라고 불리는 랜덤한 문자열을 추가하여 해시값을 생성합니다. 이 솔트는 개별 사용자마다 다르게 생성되며, 각각의 사용자는 고유한 솔트를 가지게 됩니다. 이렇게 함으로써 동일한 비밀번호라도 솔트가 다르기 때문에 해시값도 다르게 생성되며, 공격자는 각각의 사용자마다 개별적으로 공격해야 합니다. 해시 솔트는 일반적으로 사용자 정보와 함께 저장되며, 비밀번호 검증 시에는 입력된 비밀번호에 솔트를 추가하여 해시값을 생성한 후, 저장된 해시값과 비교합니다.

해시 솔트를 사용함으로써 비밀번호 보안을 강화할 수 있습니다. 공격자가 해시값을 얻더라도 솔트가 없으면 원본 비밀번호를 예측하기 어려워지기 때문입니다.

• 결국 암호의 시작이나 끝에 무작위 값을 넣는 작업을 솔트라 한다.

Sha-256

SHA-256은 암호학적 해시 함수 중 하나로, Secure Hash Algorithm (SHA) 패밀리의 한 종류입니다. SHA-256은 원래 미국 국립표준기술원(NIST)에 의해 개발되었으며, 256비트(32바이트) 길이의 해시 값을 생성합니다.

해시 함수는 임의의 길이를 가진 데이터를 입력으로 받아 고정된 길이의 해시 값으로 변환하는 함수입니다. SHA-256은 입력으로 들어오는 데이터에 대해 고정된 256비트의 해시 값을 생성합니다. 이 해시 값은 원본 데이터와 조금만 달라져도 완전히 다른 값으로 변환되기 때문에 데이터의 무결성 검증이나 무작위성 확인 등에 사용됩니다.

SHA-256은 암호학적으로 안전한 해시 함수로 알려져 있습니다. 이는 다음과 같은 특징을 가지기 때문입니다:

1. 저항성(Resistance) : SHA-256은 충돌 저항성(collision resistance)이 높습니다. 즉, 서로 다른 두 입력에 대해 동일한 해시 값이 생성되는 충돌이 발생할 확률이 매우 낮습니다.

2. 일방향성(One-wayness) : SHA-256은 일방향 함수입니다. 해시 값으로부터 원래 데이터를 복구하는 것은 매우 어렵거나 현실적으로 불가능합니다.

3. 무결성(Integrity) : 원본 데이터가 조금이라도 변경되면 SHA-256의 해시 값도 완전히 다른 값으로 변화합니다. 이를 통해 데이터의 무결성을 검증할 수 있습니다.

SHA-256은 암호화폐(Bitcoin 등)에서 블록체인의 무결성을 검증하는 데 사용되기도 하며, 데이터의 보안 검증이나 비밀번호 저장 등 다양한 보안 관련 용도로 활용됩니다.