[멀티캠퍼스] 풀스택 개발자 아카데미 (3) - JavaScript(2)

1. 배열(Array)

배열은 여러 개의 데이터를 하나의 변수에 순서대로 저장하는 자료구조이다.

• 각 데이터는 인덱스(index) 로 구분하며, 인덱스는 0부터 시작한다.

// 1. 빈 배열 생성
let arr1 = new Array(); [cite: 1164]
let arr2 = []; // 리터럴 방식 (권장)

// 2. 크기를 지정하여 생성
let arr3 = new Array(5); // 크기가 5인 배열 [cite: 1167]

// 3. 값을 지정하여 생성 (초기화)
let fruits = new Array("사과", "배", "포도"); [cite: 1170]
let colors = ["빨강", "노랑", "파랑"]; // 리터럴 방식 (권장) [cite: 1174]

1.1. 배열의 복사

자바스크립트에서 데이터를 다룰 때, 변수를 복사하는 방식은 생각보다 중요하다. 특히, 객체(Object)와 같은 참조 타입 데이터를 다룰 때는 '복사'의 의미를 정확히 이해해야 예상치 못한 버그를 막을 수 있다.

이러한 배열의 복사에는 참조 복사와 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy) 가 있다.

1.1.1. 참조 복사 (Reference Copy)

참조 복사는 원본 데이터의 값이 아닌, 데이터가 저장된 메모리 주소를 복사하는 방식으로, 이는 주로 객체나 배열과 같은 참조 타입(Reference Type) 데이터를 다룰 때 발생한다.

let original = { a: 1, b: { c: 2 } };
let copy = original; // 참조 복사

copy.a = 100;
copy.b.c = 200;

console.log(original.a);
console.log(original.b.c);
console.log(original === copy);

1.1.2. 얕은 복사 (Shallow Copy)

얕은 복사는 객체를 복사할 때, 최상위 레벨의 속성들만 새로운 메모리 공간에 복사하는 방식이다. 만약 속성 값이 또 다른 객체(중첩 객체)라면, 그 객체의 주소값만 복사된다.

자바스크립트에서 얕은 복사를 하는 대표적인 방법은 전개 연산자(...) 나 Object.assign()을 사용하는 것이다.

let original = { a: 1, b: { c: 2 } };

// 전개 연산자를 이용한 얕은 복사
let shallowCopy = { ...original };

shallowCopy.a = 100; // 최상위 속성 변경
shallowCopy.b.c = 200; // 중첩 객체의 속성 변경

console.log(original.a);
console.log(original.b.c);
console.log(original === shallowCopy);
console.log(original.b === shallowCopy.b);

즉, 껍데기는 새로 만들지만, 속성 값이 객체라면 그 내부는 공유하는 것이다.

1.1.3. 깊은 복사 (Deep Copy)

깊은 복사는 원본 객체의 모든 속성, 그리고 중첩된 객체까지 모두 재귀적으로 복사하여 완전히 새로운 객체를 만드는 방식이다. 원본과의 참조가 완벽히 끊어지므로, 사본을 어떻게 수정해도 원본에 아무런 영향을 주지 않습니다.

가장 간단한 깊은 복사 방법은 JSON.stringify()와 JSON.parse()를 활용하는 것이다. 하지만 이 방법은 함수, undefined, Symbol 등 일부 데이터를 유실할 수 있다는 단점이 있기 때문에, 보다 안정적인 방법인 Lodash 라이브러리의 cloneDeep() 함수를 사용하는 것이 좋다.

// JSON을 이용한 간단한 깊은 복사
let original = {
  a: 1,
  b: { c: 2 },
  d: function () {
    console.log("hello");
  },
};

let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.a = 100;
deepCopy.b.c = 200;

console.log(original.a);
console.log(original.b.c);
console.log(deepCopy.d);
console.log(original === deepCopy);
console.log(original.b === deepCopy.b);

구분복사 대상원본 변경 여부사용법참조 복사메모리 주소변경됨let copy = origin얕은 복사1단계 깊이의 객체중첩 객체는 변경됨..., Object.assign()깊은 복사객체 (모든 깊이)변경되지 않음JSON.parse(JSON.stringify()), lodash.cloneDeep()

2. 함수 (Function)

함수는 특정 작업을 수행하는 코드의 묶음으로, 한 번 만들어두면 필요할 때마다 호출하여 재사용할 수 있다.

2.1. 함수 선언 방식

• 선언적 함수 (Named Function): function 키워드와 함수 이름으로 선언한다. 함수 호이스팅이 가능하다.

show(); // 호출이 선언보다 먼저 와도 동작함
function show() {
  console.log("선언적 함수!");
}

• 익명 함수 (Anonymous Function): 이름이 없는 함수를 변수에 할당하는 방식이다. 변수는 호이스팅되지만 함수 할당은 호이스팅되지 않아, 선언 전에 호출하면 에러가 발생한다.

// showError(); // TypeError: showError is not a function
const showError = function () {
  console.log("익명 함수!");
};

• 화살표 함수 (Arrow Function): ES6에서 도입된 방식으로, 더 간결하게 함수를 표현할 수 있다.

const showArrow = () => {
  console.log("화살표 함수!");
};

3. 객체(Object)

자바스크립트는 객체 기반의 언어로, 대부분의 요소가 객체로 이루어져 있다. 객체는 크게 내장 객체, 브라우저 객체, 문서 객체로 나눌 수 있다.

3.1. 내장 객체 (Built-in Objects)

자바스크립트가 기본적으로 제공하는 객체

• Date: 날짜와 시간을 다루는 객체

  • new Date()로 현재 시간을 가진 객체를 생성할 수 있다.
  • getFullYear(), getMonth() (0부터 시작), getDate() 등의 메소드를 가진다.

• Math: 수학적인 상수와 함수를 제공하는 객체: 별도의 객체 생성 없이 바로 사용할 수 있다.

  • Math.PI(원주율)
  • Math.random()(0과 1 사이의 난수 생성)
  • Math.round()(반올림)
  • Math.floor()(내림)

• String: 문자열을 다루는 객체

  • length(길이)
  • split()(분리)
  • substring()(추출)
  • indexOf()(위치 검색)

3.2. 브라우저 객체 모델 (BOM, Browser Object Model)

웹 브라우저의 창이나 프레임을 객체처럼 다룰 수 있게 해주는 모델이다.

• window: BOM의 최상위 객체로, 브라우저 창 자체를 나타냄

  • alert(), prompt() 등은 원래 window.alert(), window.prompt()이며, window는 생략 가능
  • open(): 새 창을 열어 띄움.
  • setTimeout(함수, 시간): 지정된 시간(ms) 후에 함수를 한 번 실행함
  • setInterval(함수, 시간): 지정된 시간 간격으로 함수를 반복 실행함

3.3. 문서 객체 모델 (DOM, Document Object Model)

HTML 문서를 객체의 계층 구조로 표현한 것이다. 자바스크립트는 DOM을 통해 HTML 요소(element)에 접근하고 내용을 변경하거나 스타일을 수정할 수 있다.

• DOM 요소 선택:

  • document.getElementById('id이름'): 특정 id를 가진 요소를 선택
  • document.getElementsByTagName('태그이름'): 특정 태그를 가진 모든 요소를 배열 형태로 선택
  • document.querySelector('선택자'): CSS 선택자와 동일한 문법으로 요소를 하나 선택 (가장 많이 사용)
  • document.querySelectorAll('선택자'): CSS 선택자와 동일한 문법으로 해당하는 모든 요소를 선택

4. 이벤트(Event)

이벤트는 사용자가 웹 페이지에서 행하는 모든 행동(클릭, 마우스 이동, 키보드 입력 등)을 의미한다. 이벤트 핸들러(리스너)를 등록하여 특정 이벤트가 발생했을 때 원하는 동작을 실행시킬 수 있다.

• 이벤트 처리 방식

  • 인라인 방식: <button onclick="alert('클릭!')">클릭</button>
  • 프로퍼티 리스너 방식 (고전 방식): button.onclick = function() { ... }; 이 방식은 하나의 이벤트에 하나의 함수만 연결할 수 있다는 단점이 있다.
  • addEventListener 방식 (최신/권장 방식): button.addEventListener('click', function() { ... }); 하나의 이벤트에 여러 개의 함수를 연결할 수 있어 유연성이 높다.

<button id="myButton">클릭하세요</button>
<script>
  const btn = document.getElementById("myButton");

  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }

  function logClick() {
    console.log("클릭 이벤트 발생");
  }

  // 하나의 'click' 이벤트에 두 개의 함수를 모두 연결
  btn.addEventListener("click", handleClick);
  btn.addEventListener("click", logClick);
</script>

5. Form과 유효성 검사

지금까지 배운 DOM 제어와 이벤트를 활용한 회원가입 폼의 유효성을 검사하는 예제 사용자가 입력한 값이 올바른지 확인하고, 그렇지 않다면 경고 메시지를 띄움

github

JAVA 풀스택 아카데미 과정 6회차

상당히 진도가 빠르게 나갔다는 점을 제외 한다면, 크게 아쉬운 점은 없었던 것 같다. 하지만, 이전 포스트에서 언급했던 var의 사용이 등이 다소 아쉬웠던 것 같고, 해당 예제를 리뷰(풀이) 할 때, 각 HTML 요소 별로 값을 검증했는데, 지금까지 학습한 내용의 복습 차원에서, for(forEach)를 적극적으로 사용하는 건 어땠을까? 라는 생각이 들었다.