Day planner
- CTF || Wargame
- TryHackMe || HTB || 보안 기사 공부 || K-Sheild Jr.
- 보안 뉴스 || 보안 논문 읽기
- Algorithm || Python || JS ✅ 2025-09-13
Daily Log
공부 기록
JS 기본
rest 매개변수
function func(...rest) {
console.log(rest);
}
func(1,2,3,4); // [1,2,3,4]rest 매개변수는 마지막에 작성해야 한다. 먼저 선언한 매개변수에 할다된 인수를 제외하고 나머지를 모두 배열에 저장하는 것이기 때문에 마지막에 선언되어야 한다.
배열 메서드
let arr = [ 'a', 'b', 'c'];
const newLength = arr.push('d');
console.log(arr);
console.log(`${newLength}`);
// ["a", "b", "c", "d"]
// 4push : 배열에 새로운 인수를 추가하고 길이를 반환하는 메서드
pop : 배열의 맨 끝 인수를 제거하고, 제거한 인수를 반환하는 메서드
shift : pop과는 반대로 맨 앞 요소를 제거하고, 제거한 인수를 반환하는 메서드
unshift : push와는 반대로 맨 앞에 요소를 추가하고, 새 배열의 길이를 반환하는 메서드
인수를 추가하는 배열 메서드는 길이를 반환하고(반환할 게 없는 메서드여서 그냥 길이를 반환하라고 만든 것 같고 추가됐는지 확인할 겸 해서)
인수를 제거하는 메서드는 제거가 됐는지, 제거된 인수를 반환하도록 만든 것 같다.
shift, unshift 는 느리다. 배열은 여러 요소를 순서대로 저장하는 자료구조인데, 배열의 맨 앞 요소를 건드리게 되면, 그 뒤의 배열 요소들을 전부 만줘져야 하기 때문에 성능이 push,pop보다 좋지 못하다.
slice : 특정 범위를 잘라 새로운 배열을 반환한다. 기존 배열은 수정되지 않는다.
arr.slice(start, end);- 음수만 인수로 주게 되면, 그 부분부터 잘라서 배열을 반환한다.
concat : 서로 다른 배열을 이어 붙여 새 배열을 반환하는 메서드
배열에다가 파라미터로 객체를 붙이게 되면 하나의 인수로 받아들여서 배열에 포함시키는데, obj.concat(arr) 은 객체에 배열을 붙이게 되는 것이라서 불가능하다.
순회 메서드
for each : 배열의 모든 요소에 순서대로 접근해 특정 동작을 수행하는 메서드
function cb(item, index, array) {
// 요소에 무언가 행동 가능
}
arr.forEach(cb);
// 화살표 함수 식으로 하면
arr.forEach( (item, idx) => {
console.log(`${idx} index -> ${item}`);
});- item : 현재 순회하는 배열 요소
- index : 현재 순회하는 배열 요소의 인덱스
- array : 순회 중인 배열
탐색 메서드 : 배열에서 특정 조건을 만족하는 요소를 찾아내는 메서드
indexOf : 배열에서 찾는 요소의 인덱스를 반환하는 메서드
arr.indexOf(item, fromIndex);
- item : 찾으려는 요소
- fromIndex : 어디서부터 찾을 지 시작하는 인덱스 (default : 0, 음수 지정 가능)
- 찾을 때, === 연산자를 사용 → 자료형까지 체크 : 객체 자료형의 값을 비교할 때는 참조값을 비교하는 거니까.
{name: "chan"}처럼 객체 자료형이 배열 안에 있으면 값이 같아보여도 주소가 다르니까 찾을 수 없다. 이걸 찾으려면findIndex와 같은 메서드를 사용해야 한다.
includes : 배열에 특정 요소가 있는지 판별
arr.includes(item, fromIndex) → true, false 반환
findIndex : 배열에서 찾는 요소의 인덱스 번호 반환
arr.findIndex( callback(item, index, array));
indexOf와 다르게 callback 함수를 인수로 전달하는데, 이 함수를 판별 함수라고 한다.
function determine(item, idx, arr) {
if (item % 2 == 0) {
return true;
} else {
return false;
}
let arr = [ 1,3,5,6,8];
let index = arr.findIndex(determine);
console.log(index); // 3더 간단하게 바꾸면
let arr = [1,3,5,6,7];
let index = arr.findIndex( (item) =>
item % 2 === 0 ? true : false
);
console.log(index); // 3find : findIndex처럼 인수로 판별 함수를 전달하는데, findIndex와는 다르게 요소를 반환한다.
filter : 조건을 만족하는 요소만 모아 새로운 배열로 반환하는 메서드
arr.filter( callback(item, index, array) );
변형 메서드
배열을 변형하거나 요소를 재정렬하는 메서드
map : 배열의 요소에 관해 각각 함수 호출 결과를 모아 새 배열을 만들어 반환하는 메서드
arr.map( callback(item, index, array) );
item을 3배씩 한다거나 객체에 name, hobby 프로퍼티로 저장되어 있었으면 name만 반환하는 형식
sort : 배열의 요소를 정렬(기존의 배열 자체를 정렬, 새로운 배열을 반환하는 메서드가 아니다.)
arr.sort( (compare(a,b));
- compare 함수 생략하면 사전순, 오름차순으로 정렬된다(대문자부터)
- sort 메서드는 요소를 문자열로 취급해서 사전순으로 정렬한다.
- 문자열이 아닌 요소를 정렬하고 싶으면 비교 함수를 이용하면 된다.
join :배열 요소를 모두 연결해서 하나의 문자열로 만든다.
arr.join(separator) : separator default → ~={blue},=~
reduce : 배열 요소를 모두 순회하면서 인수로 제공한 함수를 실행하고 하나의 결괏값만 반환하는 메서드
acc.reduce((acc, item, index, array) => {
(...)
}, initial);reduce는 2개의 인수를 제공하는데, 콜백 함수와 initial(초깃값)
reduce의 콜백 함수를 reducer라고 부른다. reducer는 배열의 각각 요소에 대해서 모두 실행되는데 4개의 매개변수를 받는다.
- acc (accumulator) : 이전 함수의 호출 결과를 저장, 두 번째 인수 initial이 이 acc의 초깃값
- item : 현재 배열 요소
- index : 현재 배열 요소의 인덱스
- array : reduce 메서드를 호출하는 배열
- initial은 선언하지 않을 경우 배열의 첫 번째 요소가 default
~={cyan} Date 객체와 날짜=~
시간을 표현하는 Date 객체, 날짜와 시간을 저장
date는 생성자 문법으로만 생성 가능하다.
let date = new Date(); : 현재의 날짜와 시간이 저장된 Date 객체를 반환한다.
- JS는 전세계 공용 언어이기 때문에, UTC라는 협정 세계시를 기준으로 동작한다.
-1970년 1월 1일 0시 0분 0초를 기준으로UTC+0시라고 표현한다.
원하는 날짜로 Date 객체 생성하기
문자열로 특정 날짜 전달
new Date("2000-10-10/00:00:00");
2000.10.102000/10/102000 10 10
숫자로 특정 날짜 전달
new Date(2000, 10, 10 ,0, 0, 0, 0); → Nov(11월)
new Date(2000,9,10);→ Oct(10월)
월의 인덱스가 0부터 시작해서 1씩 줄여서 전달해야 원하는 결과를 얻을 수 있다.
Time Stamp로 날짜 생성하기
타임 스탬프는 숫자로 표현돼 있어서 문자열이나 객체보다 저장 공간을 적게 사용한다. 따라서 더 빠른 비교 혹은 탐색이 가능하다. → DB에 저장할 때는 Time stamp 형태로 저장한다.
Date 객체에서 날짜 요소 얻기
getFullYear : 네 자리 수 연도 반환
date.getFullYear()
getYear는 최신 JS버전에서는 더 이상 사용하지 않는다.
getMonth : 월 반환 → 인덱스 반환이어서
9 → October
getDate : 일 반환
getDay : 요일 반환 (0은 일요일, 6을 토요일) ; 일월화수목금토
**getHours, getMinutes, getSeconds, getMilliseconds
Date 객체 날짜 요소 수정하기
Date 객체에 저장된 날짜 요소를 개별적으로 수정할 수 있는 메서드
setFullYear : Date 객체의 연도를 수정할 때 사용
date.setFullYear(2021);
setMonth,setDate,setHours,setMinutes,setSeconds
Date 객체 출력하기
현재 객체에 저장된 시간을 다양한 형태의 문자열로 반환하는 메서드
toString
현재 저장된 시간을 문자열로 반환, Date 객체를 출력했을 때와 동일한 형태의 문자열
← JS 엔진이 Date 객체를 출력할 때, 자동으로 해당 객체의 toString 메서드를 호출하는 것이라서 같다
toDateString
시간을 제외하고 현재의 날짜만 출력하는 메서드 → Output : Tue Oct 10 2000
toLocaleString, toLocaleDateString
현지화된 날짜와 시간을 반환
→ toLocaleString은 날짜와 시간을 모두 반환하고
→ toLocaleDateString은 날짜만 반환
Date 객체 응용하기
n월씩 이동하기
캘린더에서 월 단위로 달력 이동하는 기능
function moveMonth(date, moveMonth) {
const curTimeStamp = date.getTime();
const curMonth = date.getMonth();
const resDate = new Date(curTimeStamp);
resDate.setMonth(curMonth + moveMonth);
return resDate;
}
const dateA = new Date("2000-10-10");
console.log("A: ", dateA);
const dateB = moveMonth(dateA, 1);
console.log("B: ",dateB);
const dateC = moveMonth(dateA, -1);
console.log("C: ",dateC);배열에서 이번 달에 해당하는 날짜만 필터링하기
function filterThisMonth(pivotDate, dateArray) {
const year = pivotDate.getFullYear();
const month = pivotDate.getMonth();
const startDay = new Date(year, month, 1);
const endDay = new Date(year, month+1, 0, 23, 59, 59);
const resArr = dateArray.filter(
(it) =>
startDay.getTime() <= it.getTime() &&
it.getTime() <= endDay.getTime()
);
return resArr;
}
const dateArray = [
new Date("2000-10-1"),
new Date("2000-10-31"),
new Date("2000-11-1"),
new Date("2000-9-30"),
new Date("1900-10-11")
];
const today = new Date("2000-10-10/00:00:00");
const filteredArray = filterThisMonth(today, dateArray);
console.log(filteredArray);한 달의 가장 늦은 시간은 다음 달 0일 23시 59분 59초.
~={cyan}비동기 처리=~
오래 걸리는 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하도록 처리하는 것을 말한다.
순차적으로 실행하는 건 동기!
특정 작업을 다른 작업과 관계없이 독립적으로 동작하도록 만드는 걸 비동기!
setTimeOut을 이용하면 작업을 비동기적으로 처리할 수 있다.
setTimeout(function() {
console.log('1');
}, 3000);
console.log('2'); /// 2 13000ms → 3s
function orderCoffee(coffee, time) {
setTimeout( () => {
console.log(`${coffee} complete`);
}, time);
}
orderCoffee("caffe latte", 3000);
orderCoffee("mocha", 4000);
orderCoffee("ice tea", 2000);콜백 함수로 비동기 처리하기
function double(num){
setTimeout( () => {
const doubleNum = num * 2;
console.log(doubleNum);
}, 1000);
}
double(10);프로미스 객체를 이용해 비동기 처리하기
Promise는 비동기 처리를 목적으로 제공되는 JS 내장 객체다.
- Pending state(대기)
- Fulfilled state(성공)
- Rejected state(실패)
const promise = new Promise(실행 함수);
프로미스 객체를 만들 때는 인수로 실행 함수를 전달한다.실행 함수(Executor) : 비동기 작업을 수행하는 함수
생성됨과 동시에 2개의 매개변수를 받는다.- resolve : 비동기 작업의 상태를 성공으로 바꾸는 함수
- reject : 실패로 바꾸는 함수
const promise = new Promise(
function (resolve, reject) {
setTimeout( () => {
console.log('hello');
}, 500);
}
);const promise = new Promise(
function (resolve, reject) {
setTimeout( () => {
resolve("success")
}, 500);
}
); // "success"가 비동기 작업의 결괏값이 된다.
promise.then(function (res) {
console.log(res);
});resolve로 결괏값이 반환되었을 때, 이 값을 다른 곳에 이용하고 싶으면 프로미스 객체의 then 메서드를 이용하면 된다. then은 성공 상태일 때만 인수를 전달하고, 실패 상태일 때의 인수를 전달하고 싶으면 catch 메서드를 사용해야 한다.
~={blue}Node.js=~
자바스크립트는 웹 브라우저에 내장된 자바스크립트 엔진으로 실행된다. 따라서 웹 브라우저를 자바스크립트의 구동 환경이라는 뜻에서 JS runtime이라고도 표현한다.
Node.js는 웹 브라우저가 유일한 구동 환경일 때, 아예 독립적인 자바스크립트 런타임으로 나타나서 JS를 어디서든 쓸 수 있도록 범용성을 넓혔다. 서버 개발 기술이라기보다는 정확하게 자바스크립트 런타임이다.
~={cyan}Node.js 모듈 시스템=~
→ 각각의 파일이 다른 파일을 불러와 사용한다.
모듈과 모듈 시스템
ES 모듈 시스템
ECMAScript 모듈 시스템의 약자로, ESM이라고 줄여서 부른다.
→ 리액트 , Vue
ESM을 사용하려면 package.json에서 defalut 값인 CJS(CommonJS)에 "type": "module"를 추가해줘야 한다.
개별 내보내기
JS에서 모듈은 하나의 파일일 뿐이다. 다른 파일에서 특정 파일의 값이나 함수를 사용하기 위해서는 export라는 공유 설정 작업이 필요하다.
전부 불러오기
ESM에서는 불러올 값이 많다면, import * as A from B 형식으로 모듈이 내보낸 값을 한 번에 불러올 수 있다.
기본값으로 내보내기
export default { property }로 값을 내보내게 되면 다른 파일에서 모듈을 불러올 때, 이름을 새로 지정해도 되고 import { property }로 불러오지 않아도 된다.
Node.js 패키지를 인터넷에 올리거나 공유할 때는 node_modules는 제외하고 공유한다. 공유받은 사람은 npm install 명령어를 통해 package.json의 범위를 기반으로 라이브러리를 설치할 수 있다.
