자바스크립트 기본 문법

개발 및 관리/Javascript 2022. 4. 15. 08:49 posted by HighLighter
반응형

1. 변수 유형

\

2. typeof 연산자

 

3. 배열

4. promt 창

5. 연결연산자

6. 등호 3개 비교

7. undefined VS null

7-1. undefined
 자료형이 정해지지는 않은 것
 지정되어야 할 값이 지정되지 않은 것

7-2. null
  confirm이나 prompt에서 취소 버튼 등을 눌러서 값이 입력되지 않은 상태
  유효하지 않은 값이 지정된 것

8. 개발자 도구 명령어

8-1. 방법 하나

 가. 오른쪽 마우스 -> 검사 
 나. [Ctrl] + [Shift] + [J]

8-2. 방법 둘 - 개발자도구 : F12

9. 3의 배수 계산

 

10. 논리 연산자

반응형

자바스크립트 스타일 가이드

개발 및 관리/Javascript 2022. 4. 15. 08:42 posted by HighLighter
반응형

반응형
반응형

1. FUNCTION 컴파일

SELECT 'ALTER FUNCTION '||OWNER||'.'||NAME||' COMPILE;' FROM DBA_SOURCE

WHERE OWNER = 'SCOTT' AND TEXT_LIKE '%TABLE_NAME%'

AND TYPE = 'FUNCTION'

GROUP BY OWNER, NAME, TYPE

ORDER BY TYPE, NAME;

2. PROCEDURE 컴파일

SELECT 'ALTER PROCEDURE '||OWNER||'.'||NAME||' COMPILE;' FROM DBA_SOURCE

WHERE OWNER = 'SCOTT' AND TEXT_LIKE '%TABLE_NAME%'

AND TYPE = 'PROCEDURE'

GROUP BY OWNER, NAME, TYPE

ORDER BY TYPE, NAME;

3. TRIGGER 컴파일

SELECT 'ALTER TRIGGER '||OWNER||'.'||NAME||' COMPILE;' FROM DBA_SOURCE

WHERE OWNER = 'SCOTT' AND TEXT_LIKE '%TABLE_NAME%'

AND TYPE = 'TRIGGER'

GROUP BY OWNER, NAME, TYPE

ORDER BY TYPE, NAME;

 

반응형

'개발 및 관리 > Oracle 9i, 10g, 11g, 12c, 19c' 카테고리의 다른 글

오라클 날짜  (0) 2022.06.10
Oracle nologging tips  (0) 2022.06.10
[sqlplus] shutdown immediate VS [os상] svrctl  (0) 2022.03.12
SQL 우선순위  (0) 2022.03.10
GROUP BY CASE, CASE GROUP BY  (0) 2022.03.03

Angular 와 React 의 차이점

개발 및 관리/Javascript 2022. 4. 14. 22:57 posted by HighLighter
반응형

Angular ReactJS
Ideal For Creative highly active and interactive web application Large web applications with frequenlty variable data
DOM Real Virtual
Dynamic UI
Building
UI binding at plain object or property level Direct linking of states to the UI
Data Binding Two-way One-way
Learning Curve Steep Moderate
Opinionation Considerably less opinionated Flexible Opinionation
Why should you choose? Typescript
Huge commnunity support
Your app really large?
Clean HTML?
Object-oriented-programming(OOP)
Flexibility
Big Ecosystems
If you love javascripts
Small team
Good at choosing among the best options(Packages)
반응형
반응형

Unix Solaris crontab 실행 Log 확인 명령어입니다.

tail -1000f /var/cron/log

반응형
반응형

인수 전달

function showName(name) {
  console.log(name);
}

showName('Mike');
showName('Mike', 'Tom');

showName();

--------------------------------------------------------------------------------

arguments
- 함수로 넘어 온 모든 인수에 접근
- 함수 내에서 이용 가능한 지역변수
- length / index
- Array 형태의 객체
- 배열의 내장 메서드 없음
  (forEach, map)

function showName(name) {
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

showName('Mike', 'Tom');

--------------------------------------------------------------------------------

나머지 매개변수(Rest parameters)

function showName(...names) {
  console.log(names);
}

showName();
showName('Mike');
showName('Mike', 'Tom');

--------------------------------------------------------------------------------

/***************************************************
나머지 매개변수
전달 받은 모든 수를 더해야함
***************************************************/

function add(...numbers) {
  let result = 0;
  numbers.forEach((num) => (result += num));
  console.log(result);
}

add(1, 2, 3);
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

--------------------------------------------------------------------------------

/***************************************************
나머지 매개변수
user 객체를 만들어 주는 생성자 함수를 만든다.
***************************************************/

function User(name, age, ...skills) {
  this.name = name;
  this.age = age;
  this.skills = skills;
}

const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Tom", 20, "JS", "React");
const user3 = new User("Jane", 25, "Korean");

console.log(user1);
console.log(user2);
console.log(user3);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2];

console.log(result);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [0, ...arr1, ...arr2, 7, 8, 9, 10];

console.log(result);

--arr.push() / arr.splice() / arr.concat() ...

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 객체

let user = {name: 'Mike'};
let mike = {...user, age: 30};

console.log(mike);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 복제

let arr = [1, 2, 3];
let arr2 = [...arr];

let user = {name: 'Mike', age: 30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name);
console.log(user2.name);

--------------------------------------------------------------------------------

/***************************************************
전개 구문
arr1 을 [4, 5, 6, 1, 2, 3] 으로
***************************************************/

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr2.forEach((num) => {
  arr1.unshift(num);
});

console.log(arr1);

--------------------------------------------------------------------------------

/***************************************************
전개 구문
arr1 을 [4, 5, 6, 1, 2, 3] 으로
***************************************************/

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// arr2.forEach((num) => {
//   arr1.unshift(num);
// });

arr1 = [...arr2, ...arr1];

console.log(arr1);

--------------------------------------------------------------------------------

let user = { name: "Mike" };
let info = { age: 20};
let fe = ["Javascript", "React"];
let lang = ["Korean", "English"];

user = Object.assign({}, user, info, {
  skills: [],
});

fe.forEach((item) => {
  user.skills.push(item);
});


lang.forEach((item) => {
  user.skills.push(item);
});

console.log(user);

--------------------------------------------------------------------------------

let user = { name: "Mike" };
let info = { age: 20};
let fe = ["Javascript", "React"];
let lang = ["Korean", "English"];

user = {
  ...user,
  ...info,
  skills: [...fe, ...lang],
};

console.log(user);

반응형
반응형

구조 분해 할당(Destructuring assignment)
=> 구조 분해 할당은 배열이나 객체의 속성을 분해해서 
그 값을 변수에 담을 수 있게 하는 표현식

------------------------------------------------------------

배열 구조 분해

let [x, y] = [1, 2];

console.log(x);
console.log(y);

------------------------------------------------------------

배열 구조 분해

let users = ['Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;

console.log(user1);
console.log(user2);
console.log(user3);

------------------------------------------------------------

배열 구조 분해

let str = "Mike-Tom-Jane";

let [user1, user2, user3] = str.split('-');

console.log(user1);
console.log(user2);
console.log(user3);

------------------------------------------------------------

배열 구조 분해 : 기본값

let [a, b, c] = [1, 2];

console.log(a);
console.log(b);
console.log(c);

let [a=3, b=4, c=5] = [1, 2];

console.log(a);
console.log(b);
console.log(c);

반응형
반응형

arr.sort()

배열 재정렬
배열 자체가 변경되니 주의

/*****************************************************************
arr.sort()
배열 재정렬
주의! 배열 자첵 변경됨
인수로 정렬 로직을 담은 함수를 받음
*****************************************************************/

let arr = [1, 5, 4, 2, 3];

arr.sort();

console.log(arr);

------------------------------------------------------------

let arr2 = ["a", "c", "d", "e", "b"];

arr2.sort();

console.log(arr2);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

arr.sort();

console.log(arr);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

function fn(a, b) {
  return a - b;
}

arr.sort(fn);

console.log(arr);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

arr.sort((a, b) => {
  console.log(a, b);
  return a - b;
});

console.log(arr);

------------------------------------------------------------

Lodash

_.sortBy(arr);

https://lodash.com/

------------------------------------------------------------

/*****************************************
arr.reduce();
인수로 함수를 받음
(누적 계산값, 현재 값) => { return 계산값 };
*****************************************/

// 배열의 모든 수 합치기

let arr = [1, 2, 3, 4, 5];

// for, for of, forEach

let result = 0;
arr.forEach((num) => {
  result += num;
});

console.log(result);

------------------------------------------------------------

// 배열의 모든 수 합치기

let arr = [1, 2, 3, 4, 5];

// for, for of, forEach

const result = arr.reduce((prev, cur) => {
  return prev + cur;
}, 100);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  if (cur.age > 19) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  return (prev += cur.age);
}, 0);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  if (cur.name.length === 3) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

반응형
반응형


1. 자바스크립트 - 배열 메소드(Array methods)

push() : 뒤에 삽입
pop() : 뒤에 삭제
unshift() : 앞에 삽입
shift() : 앞에 삭제

------------------------------------------------------------

2. arr.splice(n, m) : 특정 요소 지움

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);

console.log(arr);

arr.splice(n, m, x) : 특정 요소 지우고 추가

let arr = [1, 2, 3, 4, 5];

arr.splice(1, 3, 100, 200);

console.log(arr);

arr.splice(n, m, x)  : 특정 요소 지우고 추가
- m: 두번째 인수의 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소를 추가

let arr = ["나는", "제이슨", "입니다."];

arr.splice(1, 0, "대한민국", "경찰관");

console.log(arr);

------------------------------------------------------------

3. arr.splice() :  삭제된 요소 반환

let arr = [ 1, 2, 3, 4, 5];

let result = arr.splice(1, 2);

console.log(arr);
console.log(result);

------------------------------------------------------------

4. arr.slice(n, m) : n부터 m까지 반환

let arr = [ 1, 2, 3, 4, 5];
arr.slice(1, 4);

let arr2 = arr.slice();
console.log(arr2);

------------------------------------------------------------

5. arr.concat(arr2, arr3, ...) : 합쳐서 새배열 반환

let arr = [1, 2];
arr.concat([3,4]);

arr.concat([3,4],[5,6]);
arr.concat([3,4],5,6);

------------------------------------------------------------

6. arr.forEach(fn) : 배열 반복
- 첫번째는 해당 요소이고 두번째는 인덱스임
  세번째는 해당 배열 자체를 의미

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
//
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(name);
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(`${index+1}. ${name}`);
});

------------------------------------------------------------

7. arr.indexOf / arr.lastIndexOf

let arr = [1, 2, 3, 4, 5, 1, 2, 3];

arr.indexOf(3);
arr.indexOf(3, 3);
arr.lastIndexOf(3);

------------------------------------------------------------

8. arr.includes() : 포함하는지 확인

let arr = [1, 2, 3];

arr.includes(2);
arr.includes(8);

------------------------------------------------------------

9. arr.find(fn) / arr.findIndex(fn)

첫번째 true값만 반환하고 끝. 만약 없으면 undefined를 반환

let arr = [1, 2, 3, 4, 5];

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result);

// find / findIndex

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

const result = userList.find((user) => {
  if (user.age < 18) {
    return true;
  }
  return false;
});

console.log(result);

------------------------------------------------------------

10. arr.filter(fn) : 만족하는 모든 요소를 배열로 반환

const arr = [1, 2, 3, 4, 5, 6];

const result = arr.filter((item) => {
  return item % 2 === 0;
});

console.log(result);

------------------------------------------------------------

11. arr.reverse() : 역순으로 재정렬

let arr = [1, 2, 3, 4, 5];

arr.reverse();

------------------------------------------------------------

12. arr.map(fn)

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    isAdult: user.age > 18,
  });
});

console.log(newUserList);

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index + 1,
    isAdult: user.age > 18,
  });
});

console.log(newUserList);
console.log(userList);

------------------------------------------------------------

// join, split

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join();

console.log(result);

------------------------------------------------------------

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join("   ");

console.log(result);

------------------------------------------------------------

// split

const users = "Mike, Jane, Tom, Tony";

const result = users.split(",");

console.log(result);

------------------------------------------------------------

// split

let str = "Hello, My name is Mike.";
const result = str.split("");

console.log(result);

------------------------------------------------------------

// Array.isArray()

let user = {
  name : "Mike",
  age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);
console.log(typeof userList);

console.log(Array.isArray(user));
console.log(Array.isArray(userList));

 

반응형
반응형

1. toString() : 10 진수 -> 2진수/16진수

let num = 10;

num.toString();
num.toString(2);

let num2 = 100;

num2.toString(16);

------------------------------------------------------------

2. Math.ceil() : 올림

let num1 = 2.1;
let num2 = 2.5;

Math.ceil(num1);
Math.ceil(num2);

------------------------------------------------------------

3. Math.floor() : 내림

let num1 = 2.1;
let num2 = 2.5;

Math.floor(num1);
Math.floor(num2);

------------------------------------------------------------

4. Math.round() : 반올림

let num1 = 2.1;
let num2 = 2.5;

Math.round(num1);
Math.round(num2);

------------------------------------------------------------

5. 소숫점 자릿수
- 요구사항 : 소수점 둘째자리 까지 표현(셋째 자리에서 반올림)

let userRate = 10.12345;

Math.round(userRate * 100) / 100

------------------------------------------------------------

6. 소숫점 자릿수 : toFixed()
- 요구사항 : 소수점 둘째자리 까지 표현(셋째 자리에서 반올림)

let userRate = 10.12345;
userRate.toFixed(2);
userRate.toFixed(0);
userRate.toFixed(6);

let userRate = 10.12345;
userRate.toFixed(2);
Number(userRate.toFixed(2));

------------------------------------------------------------

7. isNaN()

let x = Number('x');

x == NaN;
x === NaN;
NaN == NaN;

isNaN(x);
isNaN(1);

------------------------------------------------------------

8. parseInt()

let margin = '10px';
parseInt(margin);
Number(margin);

let redColor = 'f3';
parseInt(redColor);
parseInt(redColor, 16);
parseInt('10', 2);

------------------------------------------------------------

9. parseFloat()

let padding = "10.5%";
parseInt(padding);
parseFloat(padding);

------------------------------------------------------------

10. Math.random() : 0 ~ 1 사이 무작위 숫자 생성

Math.random();
Math.random();
Math.random();

1 ~ 100 사이 임의의 숫자를 뽑고 싶다면?
Math.floor(Math.random()*100) + 1

------------------------------------------------------------

11. Math.max() / Math.min()

Math.max(1, 4, -2, 5, 11, 9, 6, 2.1);
Math.min(1, 4, -2, 5, 11, 9, 6, 2.1);


------------------------------------------------------------

12. Math.abs() : 절대값

Math.abs(-1)


------------------------------------------------------------

13. Math.pow(n, m) : 제곱

Math.pow(2, 10);


------------------------------------------------------------

14. Math.sqrt() : 제곱근

Math.sqrt(16);

반응형