// 함수 표현식
const printName = function (name) {
    console.log(name);
};

// 화살표 함수 표현식
const printNameArrow = (name) => {
    console.log(name);
};

// 함수 호출
printName("John"); // 함수 표현식 호출
printNameArrow("Jane"); // 화살표 함수 표현식 호출
  1. 함수 표현식:
    • const printName = function (name) { console.log(name); };: printName이라는 변수에 함수를 할당하는 함수 표현식입니다.
    • 이 함수는 name 매개변수를 받아 콘솔에 출력하는 기능을 수행합니다.
  2. 화살표 함수 표현식:
    • const printNameArrow = (name) => { console.log(name); };: 화살표 함수 표현식입니다. 화살표 함수는 간결하게 함수를 표현할 수 있습니다.
    • 역시 name 매개변수를 받아 콘솔에 출력하는 기능을 수행합니다.
  3. 함수 호출:
    • printName("John");: 함수 표현식을 호출하고, "John"이라는 인자를 전달하여 실행합니다.
    • printNameArrow("Jane");: 화살표 함수 표현식을 호출하고, "Jane"이라는 인자를 전달하여 실행합니다.

 


두 정수의 덧셈 결과 출력

// 두 정수의 덧셈 결과 출력

const add = (number1, number2, callback) => {
    if (callback) {
        callback(number1 + number2);
    }
    return number1 + number2;
};

add(1, 4, (result) => {
    console.log(result);
});

 

두 정수의 곱셈을 구한 뒤 결과에 2를 곱해서 출력

// 두 정수의 곱셈을 구한 뒤 결과에 2를 곱해서 출력
const multply = (number1, number2, callback) => {
    if (callback) {
        callback(number1 * number2);
    }
    return number1 * number2;
};

const total = multply(2, 5, (result) => {
    console.log(result * 2);
});

 

성과 이름을 전달받아서 풀네임을 만든 뒤 "000님" 출력

// 성과 이름을 전달받아서 풀네임을 만든 뒤 "000님" 출력
const fullname = (firstname, lastname, callback) => {
    if (callback) {
        callback(firstname + lastname);
    }
    return firstname + lastname;
};

const welcome = fullname("김", "정륜", (named) => {
    console.log(named + "님");
});

 

 

상품 1개 가격과 총 합을 입력받고 개수를 알아낸 뒤
개수가 5개 이하라면 true 아니면 false

// // 상품 1개 가격과 총 합을 입력받고 개수를 알아낸 뒤
// // 개수가 5개 이하라면 true 아니면 false
const product_price = (price, allcost, callback) => {
    if (callback) {
        callback(allcost / price);
    }
    return allcost / price;
};

const boolean = product_price(1000, 10000, (count) => {
    console.log(count < 5);
});

 

결제 상품 가격과 결제 상태를 전달받아서
결제 상태가 true일 때 결제 완료, false일 경우 결제 취소 출력
가상의 결제 정보

// 결제 상품 가격과 결제 상태를 전달받아서
// 결제 상태가 true일 때 결제 완료, false일 경우 결제 취소 출력
// 가상의 결제 정보

const product = (price, pdstatus, callback) => {
    if (callback) {
        callback(pdstatus ? `${price}원 결제완료` : `${price}:원 결제취소`);
    }
};

const cash = product(1000, true, (result) => {
    console.log(result);
});

 

두 수를 받고 몫과 나머지 1)

// 두 수를 받고 몫과 나머지 1)
const calc = (num1, num2) => {
    if (num2 === 0) {
        return console.log("0으로 나눌 수 없습니다.");
    }

    var share = num1 / num2;
    var rest = num1 % num2;

    return `몫:${share}, 나머지: ${rest}`;
};

var num1 = 10;
var num2 = 2;
result = calc(num1, num2);
console.log(result);

 

 

두 수를 받고 몫과 나머지 2)

const quotientAndRemainder = (number1, number2, callback) => {
    const result = {
        quotient: Math.floor(number1 / number2),
        remainder: number1 % number2,
    };

    if (callback) {
        callback(result.quotient, result.remainder);
    }

    return result;
};

const result = quotientAndRemainder(5, 0, (quotient, remainder) => {
    console.log("Quotient:", quotient);
    console.log("Remainder:", remainder);
});

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

fetch  (0) 2024.01.30
object, spread, rest , 비구조화 할당  (0) 2024.01.29
function  (0) 2024.01.29
oper , switch  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29

function

 

 

 

함수는 무조건 값으로 본다.

function add(number1, number2) {
    return number1 + number2;
}

 

 

 

디폴트 파라미터 :  값이 전달되지 않았을 경우, 초기값을 설정할 수 있다.

 

number3 = 0 으로 디폴트 파라미터를 줌

function add(number1, number2, number3 = 0) {
    return number1 + number2 + number3;
}

let result = add(1, 3); // 4
console.log(result);

 

 

아이디, 비밀번호, 닉네임을 전달받는다.
이 때 닉네임의 기본 값은 '없음'으로 설정한다.

function getInfo(id, password, nickname = "없음") {
    console.log(id, password, nickname);
}

getInfo("이해영1234", "1234");

 

 

가변인자 :

함수가 임의의 개수의 인자를 받을 수 있는 기능을 말합니다.

JavaScript에서는 나머지 매개변수(rest parameters)를 사용하여 가변 인자를 처리할 수 있습니다.

 

나머지 매개변수는 함수 정의에서 세 개의 점(...)으로 표시되는 매개변수입니다. 이를 통해 함수는 전달된 모든 인자들을 배열로 수집할 수 있습니다. 가변 인자는 배열로 처리되므로 배열의 다양한 메서드나 반복문을 사용하여 요소에 접근할 수 있습니다.

 

function exampleFunction(...args) {
    // args는 전달된 모든 인자를 배열로 저장
    for (let arg of args) {
        console.log(arg);
    }
}

exampleFunction(1, 2, 3, 4, 5);

 

위의 예제에서 exampleFunction은 가변 인자를 사용하여 어떤 수의 인자도 받을 수 있습니다. 호출할 때 전달된 인자들은 args라는 배열에 저장되고, 이 배열을 반복문을 통해 출력할 수 있습니다.

 

 

// 가변 인자
function add(...args) {
    for (let i in args) {
        console.log(`index: ${i}`);
    }

    for (let i of args) {
        console.log(`value: ${i}`);
    }
}

add(1, 2, 3, 4, 5);
index: 0
index: 1
index: 2
index: 3
index: 4
value: 1
value: 2
value: 3
value: 4
value: 5

 

 

 

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

object, spread, rest , 비구조화 할당  (0) 2024.01.29
callback  (0) 2024.01.29
oper , switch  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29
javascript 메소드 정리  (0) 2024.01.28
let data1 = 1;
let data2 = "1";
console.log(data1 == data2); // true
console.log(data1 === data2); // false

 

1. == (동등 연산자):

  • 두 값이 같으면 true를 반환합니다.
  • 타입이 다르면 JavaScript는 암묵적으로 형 변환을 시도하여 동등성을 확인합니다.
  • 예를 들어, 문자열 "5"와 숫자 5를 ==로 비교하면 JavaScript는 문자열을 숫자로 변환하여 비교합니다.

 

2. === (일치 연산자):

  • 두 값이 정확하게 같아야만 true를 반환합니다.
  • 타입도 비교하며, 타입이 다르면 ===는 false를 반환합니다.
  • 예를 들어, 문자열 "5"와 숫자 5를 ===로 비교하면 false가 반환됩니다.

 

일반적으로 ===를 사용하는 것이 권장되며, 타입 변환으로 인한 예기치 못한 동작을 방지할 수 있습니다. 엄격한 동등성을 검사하므로 코드를 더 명확하게 만들어주고 버그를 줄이는 데 도움이 됩니다.

 


||

 

  • || : 앞에 있는 값이 false 값이라면, 뒤에 있는 값으로 사용된다.
  • false로 취급되는 값 : "", null, 0, undefined
// : 앞에 있는 값이 false 값이라면, 뒤에 있는 값으로 사용된다.
// false로 취급되는 값 : "", null, 0, undefined

let value;
console.log(typeof value); //undefined

let data = value || 10;
console.log(data);

 

 

&&

  • && : 앞의 조건식이 false라면, false이고,  앞의 조건식이 true라면 뒤에 적은 값으로 대체된다.
// && : 앞의 조건식이 false라면, false이고
// 앞의 조건식이 true라면 뒤에 적은 값으로 대체된다.

let check = false;
console.log(check && 10); // false

// 삼항 연산자
let check = 10 > 11;
console.log(check ? 10 : 11); // 11

 


switch

// switch
// 하나의 변수에 여러 개의 값이 담길 수 있다면,
// 매번 ==으로 비교하는 if문 보다 switch문을 사용하면 더 간결해진다.

let choice = 1;

switch (choice) {
    case 1:
        console.log("choice는 1입니다.");
        break;
    case 2:
        console.log("choice는 2입니다.");
        break;
    case 3:
        console.log("choice는 3입니다.");
        break;
    default:
        console.log("다시 시도해주세요");
        break;
}

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

callback  (0) 2024.01.29
function  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29
javascript 메소드 정리  (0) 2024.01.28
queue.js  (0) 2024.01.28

let 

 

let을 사용한 경우: 

  1. let으로 선언된 변수 i는 블록 스코프를 갖기 때문에 for 루프 안에서만 유효합니다.
  2. 루프 외부에서 console.log(i);를 호출하면 "Error: i is not defined"가 발생합니다.
  3. let은 블록 스코프를 갖기 때문에 블록 외부에서는 변수에 접근할 수 없습니다.
// // 지역 변수
for (let i = 0; i < 10; i = i + 1) {
    console.log(i);
}

console.log(i);  // Error: i is not defined 에러 발생

 

 

var

 

var를 사용한 경우:

  1. var로 선언된 변수 i는 함수 스코프를 갖기 때문에 블록 내에서 선언되었더라도 루프 외부에서도 유효합니다.
  2. 따라서 console.log(i);는 루프 외부에서도 동작하며, 결과적으로 마지막으로 할당된 값인 10을 출력합니다.
  3. var는 함수 스코프를 갖기 때문에 블록 스코프를 가지지 않아서 블록 내부에서 선언된 변수도 함수 내에서 유효합니다.
for (var i = 0; i < 10; i = i + 1) {
    console.log(i);
}

console.log(i);
0
1
2
3
4
5
6
7
8
9
10

 

function example() {
    if (true) {
        var x = 10; // 블록 내부에서 선언된 변수
    }
    console.log(x); // 함수 내에서 유효하므로 출력 가능
}

example(); // 10

 

 

  • 위의 코드에서 var x는 if 블록 내에서 선언되었지만, 함수 example 내에서는 어디에서든 접근 가능합니다.
  • 이것은 var가 함수 스코프를 가지기 때문에 발생하는 특징입니다.

 

 

요약

  • let은 블록 스코프를 가지므로 블록 외부에서 변수에 접근할 수 없지만,
  • var는 함수 스코프를 가지므로 블록 외부에서도 변수에 접근할 수 있습니다.

 

 

Node.js에서는 전역변수들을 모두 global 객체에서 관리한다.
브라우저(b_scope.html)에서는 window 객체에서 전역변수를 관리한다.
따라서 어디에서 사용될 지 모를 때에는 globalThis 객체를 사용하면 된다.

// 전역 변수: globalThis 객체를 사용하여 전역 변수 x를 설정
globalThis.x = 10;

// 전역 변수: 외부 블록에서 선언된 전역 변수 y
let y = 10;

function f() {
    // 지역 변수: 함수 내에서만 유효한 지역 변수 x
    let x = 20;
    console.log("globalThis.x:", `${globalThis.x}`, " x :", x);
}

// 함수 f 호출
f();

// 전역 변수 y 출력
console.log("y:", `${y}`);

// 전역 변수 x 출력
console.log("globalThis.x:", `${globalThis.x}`);
globalThis.x: 10  x : 20
y: 10
globalThis.x: 10

 

 

const

  1. const는 상수를 선언할 때 사용되는 키워드로, 한 번 값을 할당하면 재할당이 불가능합니다.
  2. 상수는 프로그램에서 항상 고정된 값을 가지며 변경되지 않아야 하는 경우에 사용됩니다.

 

const ERROR_CODE = 403;
// ERROR_CODE = 404; // Error: Assignment to constant variable.
console.log(ERROR_CODE);
403

 

 

 

  1. const ERROR_CODE = 403;: ERROR_CODE라는 상수를 선언하고, 초기값으로 403을 할당합니다.
  2. 주석 처리된 ERROR_CODE = 404;: const로 선언된 상수는 재할당이 불가능하기 때문에 이 줄의 코드를 주석 처리하지 않으면 에러가 발생합니다. 에러 메시지는 "Assignment to constant variable."로 나타납니다.
  3. console.log(ERROR_CODE);: 상수 ERROR_CODE의 값을 출력합니다. 이 경우에는 403이 됩니다.

 

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

function  (0) 2024.01.29
oper , switch  (0) 2024.01.29
javascript 메소드 정리  (0) 2024.01.28
queue.js  (0) 2024.01.28
자바스크립트  (0) 2024.01.28

push() : 가장 마지막에 값 추가

let datas = [10, 8, 20, 3, 2];

datas.push(100);
console.log(datas);
[10, 8, 20, 3, 2, 100]

 

 

join() :전달한 값으로 구분한 뒤 문자열로 리턴

let datas = [10, 8, 20, 3, 2];

console.log(datas.join(", "));
10, 8, 20, 3, 2

 

 

slice(begin, end): 원하는 부분을 추출하기 위해 시작 인덱스와 마지막 인덱스를 전달한다.
slice(begin): 시작 인덱스부터 마지막까지 추출한다.

let datas = [10, 8, 20, 3, 2];

console.log(datas.slice(1, 3));
console.log(datas.slice(1));
(2) [8, 20]
(4) [8, 20, 3, 2]

 

 

splice(index, count) : 삭제
splice(index, count, ...args) : 교체

let datas = [10, 8, 20, 3, 2];

datas.splice(1, 1);
console.log(datas);

datas.splice(1, 1, 200);
console.log(datas);
(4) [10, 20, 3, 2]
(4) [10, 200, 3, 2]

 

 

pop() : 마지막 요소 삭제

let datas = [10, 8, 20, 3, 2];

const dataRemoved = datas.pop();
console.log(`${dataRemoved} 삭제`);
console.log(datas);
2 삭제
(4) [10, 8, 20, 3]

 

 

shift() : 첫 번째 요소 삭제

let datas = [10, 8, 20, 3, 2];

const dataRemoved = datas.shift();
console.log(`${dataRemoved} 삭제`);
console.log(datas);
10 삭제
(4) [8, 20, 3, 2]

 

 

 

indexOf(value) : value를 해당 Array객체에서 찾은 뒤 인덱스 번호를 리턴한다. 못찾으면 -1을 리턴한다.

 

(1) Array객체에서 해당 value를 찾았을 때

let datas = [10, 8, 20, 3, 2];

const i = datas.indexOf(3);
console.log(i);
3

 

 

(2) Array객체에서 해당 value를 못 찾았을 때

let datas = [10, 8, 20, 3, 2];

const i = datas.indexOf(90);
console.log(i);

 

-1

 

 

spread operation 

 

  • 배열이나 객체를 펼쳐서 각 요소 또는 속성을 개별적으로 처리할 수 있게 해주는 문법
  • 주로 배열이나 객체를 복사하거나, 함수의 인자로 전달할 때 사용
let datas = [10, 8, 20, 3, 2];

const numbers = [...datas];
console.log(numbers);
(5) [10, 8, 20, 3, 2]

 

 

spread operation 예시)

 

배열에서의 사용

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

 

 

객체에서의 사용

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 }

 

 

함수의 인자로 사용

function myFunction(...args) {
  console.log(args);
}

myFunction(1, 2, 3, 4); // [1, 2, 3, 4]

 

 

비구조화 할당

let datas = [10, 8, 20, 3, 2];

const [number1, number2, number3, number4, number5, number6 = 5] = datas;
console.log(number1, number2, number3, number4, number5, number6);
10 8 20 3 2 5

 

 

forEach(callback) 

  • 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 역할
  • 이 메서드는 각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에 전달할 수 있습니다.
let datas = [10, 8, 20, 3, 2];

datas.forEach((data, i, datas) => {
    console.log(data, i);
    datas[i] = i + 1;
});

console.log(datas);
10 0
8 1
20 2
3 3
2 4
(5) [1, 2, 3, 4, 5]

 

 

map(callback)

  • 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고, 각 요소에 대한 변환된 값을 새로운 배열로 반환
  • map은 원본 배열을 변경하지 않고 새로운 배열을 생성
let datas = [10, 8, 20, 3, 2];

const result = datas.map((data) => data * 2);
console.log(result);
[20, 16, 40, 6, 4]

 

 

filter(callback)

  • 주어진 콜백 함수의 조건을 만족하는 요소만을 필터링하여 새로운 배열로 반환합
  • filter 메서드는 원본 배열을 변경하지 않고 새로운 배열을 생성
as = [10, 8, 20, 3, 2];

const result = datas.filter((data) => data % 5 == 0); //5로 나누었을때 나머지가 0인 수만 출력
console.log(result);
 [10, 20]

 

 

reduce(callback)

  • 초기값을 설정하면 data에 0번째부터 들어온다.
  • 초기값을 설정하지 않으면 data에 1번째부터 들어온다. 이 때, 0번째 값이 variable로 들어온다.
let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    console.log(variable);
});
10
(3)undefined

 

 

let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    console.log(variable);
}, 0);
0
(4)undefined

 

 

 

let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    console.log(data, i);
});
8 1
20 2
3 3
2 4

 

 

 

 

let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    console.log(data, i);
}, 0);
10 0
8 1
20 2
3 3
2 4

 

 

let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    variable.push(i + 1);
    return variable;
}, []);

console.log(result);
(5) [1, 2, 3, 4, 5]

 

 

 

let datas = [10, 8, 20, 3, 2];

const result = datas.reduce((variable, data, i) => {
    variable[`${i}`] = data;
    return variable;
}, {});

console.log(result);
{0: 10, 1: 8, 2: 20, 3: 3, 4: 2}

 

 

 


문자열

split() : 문자열을 Array 객체로 사용하고자 한다면, split()을 사용한다.

 

"월화수목금토일".split("").forEach((data) => {
    console.log(data);
});
월
화
수
목
금
토
일

 

 

 

includes(value) : value가 문자열에 포함되었는 지 검사

console.log("ABCD".includes("B"));
true

 

 

 

Array() 

  • JavaScript에서 배열을 생성하는 내장 생성자(constructor) 함수
  • Array() 생성자를 사용하여 배열을 만들 수 있습니다.
const datas = new Array(7).fill(0);
datas.forEach((data) => {
    console.log(data);
});
(7) 0

 

 

 

 

 

 


10~1까지 Array 객체에 담은 후 짝수만 출

// 10~1까지 Array 객체에 담은 후 짝수만 출력
const number = new Array(10).fill(0).map((_, i) => 10 - i);
const evens = number.filter((number) => number % 2 == 0);
console.log(evens);

 

한글을 숫자로

예) 삼사칠구->3479

const changeNumber = (...input) => {
    const hangul = [..."공일이삼사오육칠팔구"];
    return Number(input.map((c) => hangul.indexOf(c)).join(""));
};

const input = "공사칠구";
const result = changeNumber(...input);
console.log(result);

 

 

1~100까지 합 출력

const result = new Array(100)
    .fill(0)
    .reduce((variable, _, i) => variable + i + 1, 0);

console.log(result);

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

function  (0) 2024.01.29
oper , switch  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29
queue.js  (0) 2024.01.28
자바스크립트  (0) 2024.01.28
  • setTimeout 은 0초를 설정해도 1ms 후 실행되도록 설계되어 있다.
setTimeout(() => {
    console.log("timer");
}, 0);

setImmediate(() => {
    console.log("check");
});
const fs = require("fs");
fs.readFile("test.txt", (result) => {
    setTimeout(() => {
        // 1. 타이머 등록
        console.log("timer");
    });

    setImmediate(() => {
        //  2. 체크 등록
        console.log("check"); // 3. 폴에서는 setImmediate 실행이 우선
    });
});
check
timer
 
 
 
 
 
// tick이 모두 작업된 후 다음 절차로 넘어간다.
const setTick = () => {
    process.nextTick(setTick); 
    // setTick이라는 함수 안에서 setTick 호출
}; // nextTick(setTick)에 들어가는 setTick은 콜백함수 => 무한 루프

setTick();

setTimeout(() => {
    // 순서상 타이머가 가장 먼저 처리가 되어 타이머쪽에 setTimetout 설정
    console.log("timer"); 
    // setTick이 setTimeout보다 먼저 실행 되기때문에 timer는 실행될 수 없다.
}); // 실행하면 nextTick으로 계속 무한루프가 돌기 때문에 콘솔에 아무것도 출력되지 않는다.

 

 

 

 

1. 타이머 큐에 등록

2. 검사 큐에 등록

3. 틱 큐에 등록

 

1. 틱 큐 비우기

1-1. 틱 안에 타이머2를 처리하고자 타이머1도 처리

1-2. 1번 틱 안에 검사2를 처리하고자 검사1도 처리된다.

2. 2번 틱 처리

 

setTimeout(() => {
    console.log("timer1");
}, 0);
setImmediate(() => {
    console.log("check1");
});
process.nextTick(() => {                             // 1번째 틱
    setTimeout(() => console.log("timer2"), 0);
    setImmediate(() => {
        process.nextTick(() => console.log("tick2"));    // 2번째 틱
        console.log("check2");
    });
    console.log("tick1");                            // 콜 스택에서 처리하므로 1번째 틱에 들어왔는지 출력
});

 

tick1
timer1
timer2
check1
check2
tick2
 

 

 

( 이벤트 루프 절차 )

 

tick2 가 바로 처리 되지 않은 이유 :

  • tick1이 실행 되어야 tick2가 실행된다.
  • tick1 안에 setTimeout과 setImeediate가 들어가있다.

timer1, timer2가 tick1다음으로 나온 이유 :

  • 등록이 timer1, timer2가 되고 timer큐 작업이 끝나야 다음 절차로 넘어간다.
  • 풀 에서 통신이나 DB 등 처리할 것이 있는지 검사한다.
  • check1,2는 풀에서 작업 되는것이 아니기 때문에 순서상 타이머가 먼저 처리가 된다.
  • (정리) 풀에서 통신이나 DB를 처리할 것이 있는지 검사후 없으므로 check로 오고 등록된 check실행
  • tick1 처리 끝

마지막 tick2 실행 후 종료

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

function  (0) 2024.01.29
oper , switch  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29
javascript 메소드 정리  (0) 2024.01.28
자바스크립트  (0) 2024.01.28

자바스크립트(Javascript)

컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다.
※ 개발이 발전됨에 따라 컴파일 과정이 가능해졌으며, Node.js로 서버환경을 구축한다.

 

 

 

웹 페이지에서 자바스크립트의 역할
웹 페이지는 3가지( HTML, CSS, JS ) 코드가 결합되어 작성된다.
자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등
웹 페이지의 동적 제어에 사용된다.

1. 사용자의 입력 및 연산 ( 반응 )
키, 마우스 등의 입력과 연산은 오직 자바스크립트로만 처리가 가능하다.

2. 웹 페이지 내용 및 모양의 동적 제어
HTML 태그의 속성이나 콘텐츠, CSS 속성 값을 변경해서
웹 페이지의 동적인 변화를 일으키는 데에 활용된다.

3.  브라우저 제어
브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다른 웹 사이트 접속,
브라우저 히스토리 제어 등 브라우저의 작동을 제어하는 데 활용된다.

4.  웹 서버와의 통신
웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용된다.

5.  웹 애플리케이션 작성
자바스크립트 언어로 활용할 수 있는 API를 제공하므로,
웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.

 


Node.js 아키텍처

 

 

Node.js 아키텍처
자바스크립트 코드 실행에 필요한 런타임으로 V8엔진을 사용하고, 
스크립트 런타임에 필요한 이벤트 루프 및 운영체제 시스템API 를 사용하는 데는
 libuv ( 리버브 ) 라이브러리를 사용한다.

 


1. 애플리케이션에서 요청이 발생하면, V8엔진은 자바스크립트 코드를 바이트 코드 혹은 기계어로 변경한다.
2. 자바스크립트로 작성된 Node.js의 API는 C++로 작성된 코드로 사용된다.
3. V8 엔진은 이벤트 루프가 필요하기 때문에 libuv를 사용하고, 전달된 요청을 libuv의 이벤트 큐에 추가한다.
4. 이벤트 큐에 쌓인 요청은 이벤트 루프에 전달되고, 운영체제 커널에 비동기 처리를 요청한다.
    운영체제 내부적으로 비동기 처리가 힘든 경우(DB, 네트워크 통신, 파일 처리 등)는 워커 쓰레드에서 처리한다.
5. 운영체제의 커널 혹은 워커 쓰레드가 완료한 작업은 다시 이벤트 루프로 전달된다.
6. 이벤트 루프에서 콜백으로 전달된 요청에 대해 완료 처리 후 V8로 넘긴다.
7. 완료 처리된 응답은 Node.js App으로 전달된다.

 

 

Node.js문서에서는 이벤트큐는 다른 큐들까지 합쳐서 이벤트큐라고 한다.

태스크큐(=이벤트큐)

 

 

콜 스택 ( 이벤트 큐 안에 있음 ) 
싱글 쓰레드란 콜 스택을 1개를 가지고 있다는 뜻이다.
하지만, 1개의 콜 스택으로는 마지막 작업이 앞에 있는 작업을 모두 기다려야하기 때문에
libuv에 있는 이벤트 루프로 보낸다.

 

V8이라는 콜스택에 작업배치

코드를 1번부터 10번줄까지 작성하면

스택구조로 콜스택에 쌓인다.

콜스택에 쌓일때 비동기로만 처리되어야하는 것들이 있다. 

비동기 처리에서도 두가지로 나뉨

1. OS(운영체제) 비동기로 돌리기

2. 멀티쓰레드로 처리

 

리버브를 두고 멀티쓰레드 환경을 구축해서 비동기로 작업=> 콜스택에 쌓인것이 처리되고 이벤트큐에 쌓인다.

=> 이벤트큐 

 

이벤트큐

세분화

task quue

microtask

macro task 

 

이벤트 큐 안에 있는 task큐는 이벤트큐의 메인이다.

 

 



 

3번 => 이벤트 큐

3번으로 들어갈땐 이벤트 큐

5번 => 태스크 큐

5번에서 돌아올땐 태스크 큐

 

6번 콜스택으로 가서 쌓임

 

태스크 큐를 이벤트큐로 봐도 무방하다.

 

 

이벤트 기반 아키텍처


1. V8의 콜 스택에 쌓인 뒤 I/O 처리가 필요한 코드는 이벤트 루프로 보낸다.
2. 이벤트 루프에서 처리될 작업을 태스크 큐에 담는다.
3. 태스크 큐에 있는 작업을 이벤트 루프로 보내서 루프를 실행하고 운영체에 또는 쓰레드 워커에서 I/O 처리를 진행한다.
4. 쓰레드 워커와 운영체제는 받은 요청에 대한 결과를 이벤트 루프로 다시 돌려준다.
5. 이벤트 루프에서는 결과값에 대한 코드를 콜 스택에 다시 추가한다.

 

 

 

이벤트 루프
운영체제의 비동기 I/O 기능을 사용하거나, 쓰레드 풀을 사용해서 모든 작업을 비동기로 처리한다.
여러 큐를 사용해서 특정 우선순위대로 작업들을 처리해준다.

1. 이벤트 루프의 시작 및 각 반복의 마지막에 루프가 활성화 상태인지 확인한다.

 

2. 타이머 단계에서 타이머 큐를 처리하며, 이 때 setTimeout(), setInterval()을 처리한다.
   타이머가 실행되는 순서는 확실하지 않고, 프로세스 퍼포먼스에 따라 다르다.

 

3. 펜딩(pending) I/O 콜백 단계에서는 다음 반복으로 연기된 콜백을 처리한다.

 

4. 유휴, 준비 단계를 통해 다음 폴 단계의 준비를 내부적으로만 진행한다.

 

5. 풀 단계에서는 새로운 연결 ( 소켓 맺기, 파일 읽기, DB 커넥션 생성하기 등 ) 작업을 진행한다.
   각 작업은 쓰레드 풀을 사용한다.

 

6. 검사 단계에서는 풀 단계의 성공 실패 여부를 판단하고 이를 setImmediate( )로 처리한다.
   I/O 사이클에 스케줄링 되었다면, setTimeout( )보다 setImmediate( ) 가 항상 먼저 실행된다.
먼저 처리해야 하면 setImmediate( ) 를 해야한다.

 

7. 종료 콜백 단계에서는 콜백의 종료 처리 ( 파일 닫기, 커넥션 종료 등) 를 한다.

 

8. 각 단계 사이마다 nextTickQueue와 microTaskQueue에 있는 작업이 먼저 실행된다.
   process.nextTick( )함수를 통해 nextTickQueue에 작업을 추가할 수 있고,
   이벤트 루프가 진행되기 전에 에러를 핸들하며 필요 없는 자원을 해제 및 재요청 처리까지 가능하다.
   microTaskQueue에는 Promise로 만든 콜백 함수가 추가된다.

 

 


microtaskqueue 

fetch 통신

fetch 리턴타입 promise 

promise는 microtaskqueue에 저장된다.

mircotaskqueue는 다른 것들보다 먼저 실행이 되는데, microtaskqueue보다 먼저 실행되는 것이 nextTickqueue이다.

 

프로세스에 nextTickqueue라는 메소드를 사용하면 콜백함수를 전달하는데, 그것이 nextTickqueue에 쌓인다.

코드상에서 타이머에 들어갈 settimeout을 먼저 썼어도, nextTickqueue이 어딘가에 있다면  nextTickqueue먼저 실행된다.

nextTickqueue가 비워지면 microtaskqueue 가 실행이 된다.

 

검사쪽에 쓰이는 check()

setimediate 메소드.

타이머 - setTimeout

검 사 - setimmediate

 

실무에서는 예를들어 통신보다 먼저 실행해야할 코드가 있다면 nextTickqueue에 등록하기


 

I/O싸이클은 운영체제가 처리할 수 없는 것들 => 파일 입출력, 네트워크 통신 등등..

타이머, 검사,(I/O싸이클)폴 에도 각각의 task큐가 있다.

각각의 task큐 목적은 타이머 검사 폴 큐에서 해당 콜백함수가 실행이 되어 완료가 되면 완료처리를 했을때 각각의 task큐에 담아놓는다.

각각의 task큐는 이 다음 V8에 있는 콜스택에 들어가기 위한 준비를 한다.

V8에 도착해야 응답을 할 수 있기 때문에

따라서 각각 이벤트루프에서는 task큐가 존재하고, 각 task큐에서는 작업이 완료가 된 것들이 들어가있다.

그렇게 완료가 되어있는 것들은 멀티 쓰레드이다.

하지만 V8쪽은 단일 쓰레드이기 때문에 멀티가 단일에 들어가려면 우선순위를 정확히 정해야한다.

이 우선순위를 정해주기 위한 역할이 이벤트큐

 

정리

(이벤트큐)

V8콜스택에 처리해야 할 것들을 담아놓고, 이벤트루프가 돌면서 각각의 task큐에 쌓여있던 것들을 단일 쓰레드로 보내기 위해서 우선순위를 정해서 이벤트큐에 저장, 이벤트큐에 우선순위가 저장되고 콜스택에 쌓아서 처리

 


자바스크립트를 작성할 수 있는 위치


1. HTML 태그의 이벤트 리스너 속성에 작성
HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트( 반응 )가 발생할 때,
처리하는 코드를 등록하는 리스너 속성이 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너 속성</title>
</head>
<body>
    <h2>마우스를 올려보세요 </h2>
    <hr>
    <img src = "images/icon1.png" width="200px" 
            onmouseover="this.src='images/icon2.png' " onmouseout="this.src = 'images/icon1.png'">
</body>
</html>


2. <script></script> 태그 안에서 작성
<head></head>, <body></body>, body 태그 밖 등 어디든 들어갈 수 있다.
웹 페이지 내에서 여러 번 작성할 수 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>스크립트 태그</title>
    </head>
    <body>
        <h2>마우스를 올려보세요 😚</h2>
        <hr />
        <img
            src="images/icon3.png"
            width="200px"
            onmouseover="over(this)"
            onmouseout="out(this)"
        />
    </body>
    <script>
        function over(object) {
            object.src = `images/icon4.png`;
        }

        function out(object) {
            object.src = `images/icon3.png`;
        }
    </script>
</html>


3. .js 자바스크립트 파일에 작성
자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장하고,
<script src = ".js경로"></script> 와 같이 가져온다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>자바스크립트 파일에 작성</title>
    </head>
    <body>
        <h2>마우스로 클릭해보세요 😋</h2>
        <hr />
        <img src="images/icon5.png" width="200px" onclick="change(this)" />
    </body>
    <script src="c_script.js"></script>
</html>



4. URL 부분에 작성
<a> 태그의 href 속성에도 자바스크립트 코드를 작성할 수 있다.
하지만 href 속성에서 자바스크립트 코드를 쓸 때에는 "javascript:"라는 키워드를 작성해야 한다.

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>URL에 작성</title>
    </head>
    <body>
        <a href="javascript:alert('진행!')">진행</a>
    </body>
</html>

데이터 타입과 변수


   1. 자바스크립트 식별자(이름)
      식별자(identifier)란 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다.
      식별자를 만들 때 다음 규칙을 준수해야 한다.

      - 첫 번째 문자 : 알파벳, 언더바, $문자만 사용 가능
      - 두 번째이상 문자 : 알파벳, 언더바, 0-9, $사용 가능
      - 대소문자 구분 : data와 dAta는 다른 식별자이다.
      - 키워드(예약어) 사용 불가

   2. 문장 구분
      세미콜론으로 문장과 문장을 구분한다.
      한 줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다.
   
      i = i + 1
      j = j + 1;
      k = k + 1; m = m + 1;
      n = n + 1 p = p + 1 (X)

   3. 주석
      - 한 줄 주석 : //
      - 범위 주석  : /* */


   4. 데이터 타입(typeof())
      - 숫자 타입(number) : 42, 3.14, ...
      - 논리 타입(bool) : true, false
      - 문자열 타입(string) : "안녕", "하세요", "35", 'a', "A", ...
      - 객체 레퍼런스 타입(object) : Object, Array, Math, Date,...
      - undefined : 타입이 정해지지 않은 것을 의미한다.
      - null : 값이 정해지지 않은 것을 의미한다.


   5. 변수
      - var 키워드 : 함수의 영역만 영역으로 판단한다.
      - let 키워드 : 모든 영역을 영역으로 판단한다.


   6. 상수
- const 키워드 : 값을 변경시킬 수 없다.

   7. 지역변수와 전역변수
- 변수의 사용 범위 ( scope )에 따라서 전역변수(global)와 지역변수 ( local )로 나뉜다.
전역변수 : 함수 밖에서 선언된 변수
지역변수 : 영역 안에서 선언된 변수

'컴퓨터 비전 > Javascript' 카테고리의 다른 글

function  (0) 2024.01.29
oper , switch  (0) 2024.01.29
scope ( let , var, const )  (0) 2024.01.29
javascript 메소드 정리  (0) 2024.01.28
queue.js  (0) 2024.01.28

 

버전 관리 시스템  원하는 시점(버전)으로 이동할 수 있으며, 각 버전별로 여러
 개발자가 협업할 수 잇는 최적의 환경을 제공하는 시스템
SVN 작업 내역 커밋 시 변경사항과 히스토리가 즉시 서버로 전송되기 때문에 관리가 용이하다.
또한 간단한 설치와 사용방법으로 별도의 교육 없이도 초보자도 쉽게 사용할 수 있다.
하지만 항상 원격 저장소(SVN 서버)를 필요로 하며, 서버간 버전 관리도 힘들다.

Git(분산형 버전 관리 시스템)
SVN이 가지고 있던 클라이언트와 서버 간의 버전 관리 문제를 많이 보완해준 시스템이다.
서버 뿐만 아니라 로컬에서도 버전 관리가 가능하다.
로컬이 서버가 될 수 있고, 반대로 서버가 로컬이 될 수 있다.
브랜치라는 개념을 사용하여 개발자 마음대로 로컬 환경에서도 커밋과 버전 관리가 가능하다.

 

 

1. git 사용자 설정

사용자 아이디 이름 입력

git config --global user.name "아이디"
git config --global user.email "이메일 "

 

사용자 이름, 이메일 확인

$ git config --global user.name
$ git config --global user.email

 

전체 정보확인

git config --list

▶ 본인 개인 파일 올리기

 

1. 깃 허브 접속


2. new 클릭


3. Repository 이름 설정

 

4. git init:

  • 현재 디렉토리를 Git 저장소로 초기화합니다.
git init

 

 

5. git add:

  • 변경된 파일을 스테이징 영역에 추가합니다.
# 모든 파일 add
git add .

# 지정 파일 add
git add [파일명]

 

6. git commit:

  • 스테이징 영역에 있는 변경 사항을 커밋합니다.
git commit -m "메세지"

 

7. git status:

  • 현재 작업 디렉토리의 상태를 확인합니다.
git status

 

8. git remote:

  • 원격 저장소의 정보를 관리합니다.
# 원격 저장소의 정보 확인
git remote -v

 

git remote add origin

  • 로컬 Git 저장소와 원격 저장소 간의 연결을 설정하는 명령어입니다.
  • 여기서 "origin"은 일반적으로 원격 저장소의 별칭(alias)으로 사용되며, 원격 저장소에 대한 단축 이름으로 자주 사용됩니다.
# 원격 저장소의 정보
git remote add origin [개인 저장소 깃 허브 주소]

 

git push:

  • 로컬 변경 사항을 원격 저장소로 푸시합니다.
git push origin master

 

README 작성


팀과 협업 ( 팀원 )

 

organizations 의 Fork받기

 

1. 나의 organizations 선택

 

2. Fork 선택

 

3. Fork 생성


■ 본인 작업 push 보내야 할 때

 

1. test 브랜치에서 본인 작업 저장

 

2. git add: 

  • 본인 작업한 파일 스테이징 영역에 추가
# 모든 파일 add
git add .

# 지정 파일 add
git add [파일명]

 

3. git commit:

  • 본인 작업 파일을 커밋
git commit -m "별칭"

 

4. git checkout master

  • 개인브랜치에서 master 브랜치로 이동
git checkout master

 

 

5. git merge:

  • 브랜치를 병합합니다.
# master브랜치에서 test와 병합
git merge test

 

6. git push:

  • 로컬 변경 사항을 원격 저장소로 푸시합니다.
git push origin master

 

 

7. gihhub 접속

Pull requests 선택

 

pull requests > New pull request 

 

 > Create pull reauest 클릭

 

>  작업 추가한 메시지 작성

 

 


■ 팀원파일 pull 받을 때

 

(추가 작업이 있을 경우) 

자신의 브랜치 (test) 에서

git add .					
git commit - m " "

 

팀 저장소가 없을경우 생성

git remote add [팀 저장소 ]

 

 

 

 

pull 받는 순서

 

1. master 브랜치 이동

git checkout master  # master브랜치 이동후
git pull team03 master

 

2. master 브랜치에서 파일을 받은 후 test 브랜치로 이동 

git checkout test

 

 

3. test브랜치에서 master 브랜치와 merge (병합)

git merge master

 


 

git 스테이징 취소

 

#  해당 파일을 스테이징에서 제외
git reset <파일명>

# 만약 모든 파일을 스테이징에서 제외
git reset

 

 

git branch:

  • 브랜치 목록을 확인
git branch

 

 

git branch 생성

# 새로운 브랜치 생성:
git branch [ 생성할 브랜치명 ]

# 새로운 브랜치 생성하면서 이동
git checkout -b [ 생성할 브랜치명

 

git checkout:

  • 다른 브랜치로 이동하거나 특정 커밋으로 돌아갑니다. 
git checkout <branch-name>

 

 

git remote remove [ 저장소 ]

  • 만약 team03이라는 이름의 다른 원격 저장소가 이미 등록되어 있다면, 새로운 원격 저장소를 추가하려면 먼저 기존의 team03 원격 저장소를 제거해야 합니다.
  • 다음 명령어를 사용하여 기존의 team03 원격 저장소를 제거할 수 있습니다.
git remote remove team03

 

git remote add team03 [ 팀 url ]

  • 새로운 team03 원격 저장소 추가
# 새로운 team03 원격 저장소 추가
git remote add team03 https://github.com/[ 팀 url ]

1.

> Setting 에 들어가 Add Interpreter에서 

🔶pymysql

🔶 cryptography

🔶 mysqlclient

 

위에 세개 설치하기

 

 

 

2.

> 오른쪽 메뉴에서 Database 선택 후 + 선택

 

 

3.

> Data Source -> MySQL 선택

 

4. 

  > 글쓴이는 Host를 localhost로 지정함 > User 작성 후 password 입력 > SSH/SSL 클릭

    

 

 

 

5.

> 설정 클릭

 

 

6. 

 > SSH 창에서 Host에 나의 aws에서 생성한 인스턴스 IP주소 입력

 > Private Key file에서 푸티에서 받은 pem 파일 넣기

 

 

7. 

연결

def connect():
    conn = pymysql.connect(host='나의 aws IP주소 입력', user='user이름 입력', password='나의 패스워드', db='db이름', charset='utf8', autocommit=False)
    cursor = conn.cursor(pymysql.cursors.DictCursor)
    return conn, cursor

 

'컴퓨터 비전 > DBMS' 카테고리의 다른 글

MySQL  (0) 2024.01.18
데이터베이스와 MongoDB  (0) 2023.12.02

AWS 로그인 후 putty 설치
https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html
putty-64bit-0.80-installer.msi 다운로드
 
1. 오른쪽 상단에 시간대 서울 선택 후 > 왼쪽 위 메뉴 > 컴퓨팅 > EC2 선택

 
 
 
2. 인스턴스 메뉴에서 > 인스턴스 선택
 

 
3. 인스턴스 시작
 

 
4. 인스턴스 이름 및 태그 작성
 

 
5. 스크롤 내려서 ubuntu 선택

 
6. 스크롤 내린 후 키 페어 생성
7. 키 페어 생성 후, pem파일 나의 파일에 넣기

.

 

 
8. 스토리지 구성 

 

 
9. PuTTYgen 열기

 
파일 선택

 
 
10. PuTTY열기

11. ppk파일 넣기

13. 폰트 바꾸기

 

14. 
HostName에 나의 인스턴스 IP넣기
Load선택 후 PuTTygen에서 받은 파일 pem넣기

 

# OPEND 선택 후 입력
# cmd창에서 순서대로 입력
 
> sudo passwd
> 비밀번호
> su root
> 비밀번호
> rm /etc/localtime
> ln -s /usr/share/zoneinfo/Asia/Seoul /etc/localtime
> date
> su ubuntu
> sudo apt update
> sudo apt upgrade
> sudo apt install mysql-server
> sudo ufw allow mysql
> sudo systemctl start mysql
> sudo systemctl enable mysql
> sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf
   i
   # bind-address = 127.0.0.1
   esc
   :wq
> sudo /etc/init.d/mysql restart
> sudo /usr/bin/mysql -u root -p
> 비밀번호
> use mysql;
> create user 'mysql'@'%' identified by '비밀번호';
> grant all privileges on *.* to 'mysql'@'%' with grant option;
> flush privileges;
> exit
> sudo /usr/bin/mysql -u mysql -p
> 비밀번호
> create database test;
> use test;
> exit


13. 인스턴스 목록으로 간 후, 생성한 인스턴스 선택 후 하단에 보안 선택
      보안 세부정보 아래에 있는 보안 그룹 링크 클릭
 

 
 
 
14. 인바이드 규칙 편집 선택