[스나이퍼팩토리] 한컴AI아카데미(26.04.14)

장바구니(리뷰)

---

 

m1.html

0.00MB

 

 

 

오늘의 할일(리뷰)

---

 

m2.html

0.00MB

 

 

 

배열

---

 

- new Array():  새로운 배열 객체를 생성하는 생성자 함수

 

*주의: 인자가 숫자 하나일 때

숫자 하나만 넣으면 그 숫자만큼의 '길이(length)'를 가진 빈 배열을 만듭니다. 요소는 채워져 있지 않은 '비어 있는' 상태입니다.

const arr = new Array(5);
console.log(arr.length); // 5
console.log(arr); // [empty × 5] (비어 있음)

 

 

- Array.from(): 이름 그대로 **"~로부터 배열을 만든다"**는 뜻

 

기본 구조

Array.from(대상, [맵핑함수])

 

주요 사용 사례

•  유사 배열(NodeList)을 배열로 바꾸기

document.querySelectorAll()로 가져온 요소들은 'NodeList'라는 유사 배열이라 push나 pop 같은 배열 메서드를 못 써요. 이때 Array.from이 구세주가 됩니다.

const buttons = document.querySelectorAll('button'); // NodeList (유사 배열)
const buttonArray = Array.from(buttons); // 진짜 배열로 변신!

buttonArray.forEach(btn => console.log(btn)); // 이제 마음껏 배열 메서드 사용 가능

• 문자열을 배열로 쪼개기
• 특정 길이를 가진 배열을 만들고 값 채우기

new Array(5)와 조합해서 1부터 5까지 들어있는 배열을 아주 쉽게 만들 수 있습니다.

// 5칸짜리 빈 배열을 만들면서, 인덱스(i)를 이용해 값을 채움
const numbers = Array.from({ length: 5 }, (v, i) => i + 1);
console.log(numbers); // [1, 2, 3, 4, 5]

 

 

- 2차원 배열(매트릭스): 데이터를 행(Row)과 열(Column)로 이루어진 격자(Grid) 형태로 관리하는 방식

• 2차원 배열 구조

const matrix = [
  [1, 2, 3], // 0행
  [4, 5, 6], // 1행
  [7, 8, 9]  // 2행
];

• 데이터에 접근하는 방법 (인덱스)
  • matrix[0][0] → 1
  • matrix[1][2] → 6 (1행의 2번 인덱스)
  • matrix[2][1] → 8 (2행의 1번 인덱스)

 

- 3차원 배열(텐서): 2차원 배열(면)을 여러 개 쌓아 올린 것

• 3차원 배열 구조

const cube = [
  // 0번째 레이어 (첫 번째 면)
  [
    [1, 2], [3, 4]
  ],
  // 1번째 레이어 (두 번째 면)
  [
    [5, 6], [7, 8]
  ]
];

console.log(cube[0][0][0]); // 1
console.log(cube[1][0][1]); // 6 (1번째 면의 0행 1열)

 

 

- .map():  배열의 각 요소를 하나하나 꺼내서 내가 원하는 방식대로 가공한 뒤, 새로운 배열을 만들어주는 메서드

• 기본 구조

const 새배열 = 원본배열.map((요소, 인덱스) => {
  return 가공할내용;
});

• 사용 예시

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (원본은 그대로!)

• .forEach()와 .map() 차이점
  • .forEach(): 그냥 배열을 한 바퀴 돌면서 "이것 좀 실행해줘"라고 명령할 뿐, 남는 게 없습니다. (출력하거나 변수를 직접 수정할 때 사용)
  • .map(): 배열을 돌면서 "이렇게 바꾼 새로운 리스트를 나한테 돌려줘"라고 할 때 사용

- .filter(): 조건에 맞는 요소만 골라내서 새로운 배열을 만들어주는 메서드

• 기본 구조

const 결과배열 = 원본배열.filter((요소, 인덱스) => {
  return 조건식; // 이 조건이 true인 요소만 결과배열에 포함됨
});

• 사용 예시

const todoList = [
    { doit: "청소", isDone: true },
    { doit: "설거지", isDone: false },
    { doit: "공부", isDone: false }
];

const remainingTasks = todoList.filter(item => item.isDone === false);
// 결과: [{ doit: "설거지", isDone: false }, { doit: "공부", isDone: false }]

• .filter() vs .find()

구분	find()	filter()
결과값	조건에 맞는 첫번째 요소(값 자체)	조건에 맞는 모든 요소를 담은 배열
찾는 항목이 없으면?	undefied 반환	빈 배열 반환
특징	하나만 찾으면 즉시 종료 (효율적)	끝까지 다 돌면서 조건에 맞는 걸 다 찾음

 

- .reverse(): 배열의 순서를 거꾸로 뒤집어버리는 메서드(인덱스 기준 정렬)

• 기본 사용법

const fruits = ['사과', '바나나', '포도'];
fruits.reverse();

console.log(fruits); // ['포도', '바나나', '사과']

 

*주의: reverse()는 새로운 배열을 만드는 게 아니라, 기존 배열 자체를 직접 수정

• .toReversed(): 원본은 보존하고 새로운 배열 순서를 뒤집어버리는 메서드

const original = ['A', 'B', 'C'];

// toReversed() 사용
const result = original.toReversed();

console.log(original); // ['A', 'B', 'C'] (원본 그대로!)
console.log(result);   // ['C', 'B', 'A'] (새로운 배열 탄생)

 

** 이와 같이 알고 있으면 좋은 메서드

 

• toSorted(): 원본은 놔두고 정렬된 복사본 반환 (기존 sort() 대응)
• toSpliced(): 원본은 놔두고 특정 부분을 자르거나 이어붙인 복사본 반환 (기존 splice() 대응)
• with(index, value): 원본은 놔두고 특정 인덱스의 값만 바꾼 복사본 반환

- .sort(): 배열의 요소를 정렬할 때 사용하는 메서드

• 기본 동작: "문자열"로 취급(값 기준 정렬)

const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange'] (알파벳순 - 정상)

const numbers = [1, 10, 2, 21];
numbers.sort();
console.log(numbers); // [1, 10, 2, 21] (응? 1, 2, 10, 21이 아니네?)

위 코드를 보면 숫자정렬은 틀린 것 알 수 있다.

이유: 숫자를 문자열로 보기 때문에 "10"이 "2"보다 앞에 온다.

• 숫자 정렬하는 법

const numbers = [1, 10, 2, 21];

// 오름차순 (작은 수 -> 큰 수)
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 10, 21]

// 내림차순 (큰 수 -> 작은 수)
numbers.sort((a, b) => b - a);
console.log(numbers); // [21, 10, 2, 1]

 

 

• a - b가 음수면: a를 b보다 앞에 둡니다.
• a - b가 양수면: b를 a보다 앞에 둡니다.

- .includes(): 배열이나 문자열 안에 특정한 값이 들어있는지 확인하고, 그 결과를 true 또는 **false**로만 알려주는 메서드

• 기본 구조

const fruits = ['사과', '바나나', '포도'];

console.log(fruits.includes('사과'));   // true
console.log(fruits.includes('망고'));   // false

 

• .includes() vs .indexOf()

메서드	결과값	용도
.includes(값)	true / false	단순히 있는지/없는지 궁금할 때
.indexOf(값)	숫자(위치값) / -1	위치가 어디인지(인덱스) 알아야할 때

 

- .slice(): 원본은 그대로 있고, 잘라낸 값만 가져오는 메서드

• 기본 구조

const fruits = ['사과', '바나나', '포도', '오렌지'];

// 인덱스 1번부터 3번 '전'까지 추출
const sliced = fruits.slice(1, 3);

console.log(sliced); // ['바나나', '포도']
console.log(fruits); // ['사과', '바나나', '포도', '오렌지'] (원본 그대로!)

• .slice() vs .splice()

구분	slice()	splice()
의도	배열의 특정 부분 복사	배열의 특정 부분 수정/삭제
원본 배열	보존됨 (변화 없음)	변함 (직접 수정됨)
반환값	추출한 요소들을 담은 새 배열	삭제된 요소들을 담은 배열
매개변수	(시작, 끝)	(시작, 개수, 추가할내용...)

 

- concat(): 두 개 이상의 배열을 하나로 합칠 때 사용하는 메서드(원본 보존)

• 기본 구조

const array1 = ['사과', '바나나'];
const array2 = ['포도', '딸기'];

// 두 배열 합치기
const combined = array1.concat(array2);

console.log(combined); // ['사과', '바나나', '포도', '딸기']
console.log(array1);   // ['사과', '바나나'] (원본은 그대로!)

 

- pop(): 배열의 맨 뒤에 있는 요소를 쏙 빼내는 메서드

• 기본 구조

const snacks = ['치킨', '피자', '햄버거'];

const popped = snacks.pop(); // 맨 뒤의 '햄버거'를 꺼냄

console.log(popped); // '햄버거' (꺼낸 값을 확인할 수 있어요)
console.log(snacks); // ['치킨', '피자'] (원본 배열이 줄어들었어요!)

 

배열 메서드 정리

---

 

1. 요소를 추가하거나 삭제할 때 (수정)

메서드	위치	원본 변경 여부	특징
push()	맨 뒤 추가	변경 (O)	추가 후 새로운 배열의 길이를 반환
pop()	맨 뒤 삭제	변경 (O)	삭제된 요소를 반환
unshift()	맨 앞 추가	변경 (O)	나머지 요소들을 뒤로 한 칸씩 밀어냄
shift()	맨 앞 삭제	변경 (O)	첫 번째 요소를 빼고 나머지를 당김
splice()	중간 어디든	변경 (O)	삭제, 교체, 추가를 한꺼번에 수행
concat()	연결	유지 (X)	두 배열을 합쳐서 새 배열 반환
스프레드구문(... array)	중간 어디든	유지 (X)	복제 및 병합

 

2. 특정 요소를 찾거나 확인할 때 (탐색)

메서드	목적	반환값	특징
indexOf()	인덱스 찾기	숫자 (위치)	찾으면 인덱스, 없으면 -1
includes()	존재 여부 확인	true / false	단순 유무 확인용
find()	조건 맞는 요소 1개	요소 값 자체	첫 번째로 일치하는 것만 반환
findIndex()	조건 맞는 인덱스	숫자 (위치)	find의 인덱스 버전
some()	하나라도 조건 만족?	true / false	만족하는 게 나오면 즉시 중단
every()	모두 조건 만족?	true / false	하나라도 틀리면 바로 false

 

3. 배열을 가공하거나 뽑아낼 때 (변형)

메서드	목적	원본 변경 여부	특징
map()	전체 요소 가공	유지 (X)	원본과 길이가 같은 새 배열 반환
filter()	조건 맞는 것만 추출	유지 (X)	조건에 맞는 애들만 모아 새 배열 반환
slice()	특정 구간 복사	유지 (X)	빵 썰듯이 일부분만 가져옴
flat()	중첩 배열 평탄화	유지 (X)	[1, [2]]를 [1, 2]처럼 만듦
join()	문자열로 합치기	유지 (X)	['A', 'B'] → "A,B"

 

4. 순서를 바꾸거나 정렬할 때 (정렬)

메서드	방식	원본 변경 여부	추천하는 대안 (원본 보존)
sort()	기준 맞춰 정렬	변경 (O)	toSorted()
reverse()	앞뒤 뒤집기	변경 (O)	toReversed()

 

배열메서드.html

0.00MB

 

 

 

문자열 메서드 정리

---

 

1. 위치 찾기 및 포함 여부 (탐색)

메서드	용도	결과값	특징
indexOf()	특정 문자의 위치 찾기	숫자 (인덱스)	없으면 -1 반환
lastIndexOf()	뒤에서부터 위치 찾기	숫자 (인덱스)	중복된 문자 중 마지막 위치 찾을 때
includes()	특정 문자 포함 여부	true / false	조건문에서 가장 많이 쓰임
startsWith()	특정 문자로 시작하는지	true / false	주소(http)나 파일명 체크에 유용
endsWith()	특정 문자로 끝나는지	true / false	확장자(.png, .pdf) 체크에 유용

2. 문자열 쪼개기 및 추출 (절삭)

메서드	용도	반환값	특징
split()	구분자로 쪼개기	배열 []	문자열을 배열로 바꿀 때 필수!
slice(a, b)	a부터 b 전까지 추출	문자열	음수 인덱스 사용 가능 (뒤에서부터)
substring(a, b)	a부터 b 전까지 추출	문자열	slice와 비슷하지만 음수 사용 불가
at(index)	특정 위치 문자 반환	문자열 (한 글자)	최신 문법, 뒤에서 첫 번째는 .at(-1)

3. 문자열 변형 및 정돈 (가공)

메서드	용도	결과 예시	특징
replace()	문자 교체 (첫 번째만)	"A" → "B"	가장 처음 만난 것만 바꿈
replaceAll()	모든 해당 문자 교체	"A" → "B"	일치하는 모든 문자를 바꿈
trim()	양쪽 공백 제거	" Hi " → "Hi"	로그인 아이디 입력 등에서 필수
toLowerCase()	소문자로 변환	"HELLO" → "hello"	대소문자 구분 없이 비교할 때 유용
toUpperCase()	대문자로 변환	"hello" → "HELLO"	강조하고 싶을 때 사용
repeat(n)	n번 반복	"★".repeat(3)	"★★★" 처럼 반복 출력

4. 길이 맞추기 (패딩)

메서드	용도	결과 예시	특징
padStart()	앞에 문자 채우기	"5" → "005"	날짜, 시간, 순번 자릿수 맞추기
padEnd()	뒤에 문자 채우기	"5" → "500"	고정 길이 데이터 만들 때

 

문자열메서드.html

0.00MB

 

 

 

 

느낀점

---

 

오늘은 배열과 문자열에서 자주 쓰이는 메서드에 대해 알아보았다. 수많은 메서드를 우리가 다 외울 수는 없기 때문에 이 메서드들이 어떻게 쓰이는 지 알아보는 시간이였던 것 같다. 나중에 코드를 짤 때 LLM을 통해 코드를 짜도 LLM에서 짜주는 코드를 이해하기 위해 메서드들을 익히고 사용방법을 알아야하기 때문에 잘 익혀야한다는 생각이 들었다. 어제한 crud 사용법을 다시 익히고 이번주 과제로 crud에 관한 과제가 있어 과제를 하며 crud에 대해 익히며 반복학습을 해야겠다고 느꼈다. 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.