[스나이퍼팩토리] 카카오클라우드 - 클라우드 개발자 교육 2주차

8일차-JavaScript 심화

오늘은 클래스 문법, 접근자 프로퍼티, 프로퍼티 어트리뷰트, 스프레드/디스트럭처링, 표준 내장 객체, JSON, 심볼 등 자바스크립트의 심화 문법들을 학습했다.

---

1. 📌 클래스 메서드 정의 규칙

• 클래스 내부에서 메서드를 정의할 때는 function 키워드를 쓰지 않음.
• 문법적으로 methodName() { ... } 형태만 가능.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() { // function 키워드 없음
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

---

2. 🔑 접근자 프로퍼티 (Getter & Setter)

• 접근자 프로퍼티는 객체 속성에 대한 읽기/쓰기 동작을 제어할 수 있음.
• get 키워드 → 속성 값 읽기
  set 키워드 → 속성 값 설정
• 캡슐화: 인스턴스의 내부 값을 직접 수정하지 못하게 하는 객체 지향 원칙.
  • 자바스크립트의 필드는 기본적으로 public
  • # 기호로 private 필드 선언 가능

class User {
  #age; // private 필드
  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }
  get age() {
    return this.#age;
  }
  set age(value) {
    if (value < 0) throw new Error("나이는 음수가 될 수 없음");
    this.#age = value;
  }
}

const user = new User("홍길동", 30);
console.log(user.age); // getter 호출
user.age = 31; // setter 호출

---

3. 🗂️ 프로퍼티 어트리뷰트

자바스크립트의 프로퍼티는 단순 값 외에 메타 정보를 가지며, 크게 데이터 프로퍼티와 접근자 프로퍼티로 나뉨.

종류 설명 주요 속성

데이터 프로퍼티	키-값 구조의 일반 속성	value, writable, enumerable, configurable
접근자 프로퍼티	get/set으로 값 접근 제어	get, set, enumerable, configurable

예시:

const obj = { name: "홍길동" };
Object.defineProperty(obj, "name", {
  writable: false, // 수정 불가
  enumerable: true,
  configurable: true
});

---

4. 📤 스프레드(Spread) 연산자

• ''...''를 사용해 배열/객체를 개별 요소로 분해하거나 복사 가능
• 배열/객체 병합, 함수 인자 전달 등에 활용됨

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

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

---

5. 🎯 디스트럭처링(Destructuring)

• 배열이나 객체의 속성을 쉽게 추출해 변수에 할당하는 문법
• 가독성 향상, 필요한 값만 한 번에 추출 가능

// 배열 디스트럭처링
const [a, b] = [1, 2]; // a=1, b=2

// 객체 디스트럭처링
const { name, age } = { name: "홍길동", age: 30 };

---

6. 🏗️ 표준 내장 객체 & 메서드

기본 자료형도 속성과 메서드를 가질 수 있는 이유

• 기본 자료형 사용 시, JS 엔진이 자동으로 객체로 변환(wrapper object)하여 메서드 호출 가능하게 함.

파괴적 vs 비파괴적 메서드

구분 설명 예시

파괴적	원본 데이터를 직접 변경	push, pop, splice, sort, reverse
비파괴적	원본은 그대로 두고 새로운 값 반환	concat, slice, map

메서드 체이닝은 비파괴적 메서드에서 주로 사용됨.

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2).filter(x => x > 2);

---

7. 📦 JSON

• JavaScript Object Notation
• 경량 데이터 교환 형식, 언어에 독립적
• JS 객체 표기법과 비슷하지만 문자열 포맷임

const obj = { name: "홍길동", age: 30 };
const json = JSON.stringify(obj); // 객체 → JSON 문자열
const parsed = JSON.parse(json);  // JSON 문자열 → 객체

---

8. 🪙 심볼(Symbol)

• 변경 불가능하고 고유한 값을 생성
• 주로 객체의 유일한 프로퍼티 키를 만들 때 사용

const id = Symbol("id");
const user = { [id]: 123 };
console.log(user[id]); // 123

---

 

+ <‼️ 실습시 헷갈렸던 부분>

src	source 약자. 주로 이미지, 스크립트, 미디어 파일 경로 지정 시 사용	<img src="image.jpg">
prompt()	브라우저에서 사용자 입력 받는 기본 내장 함수. 문자열 반환	const name = prompt("이름을 입력하세요");
LocalStorage	브라우저에 데이터 저장 API. setItem으로 값 저장	localStorage.setItem("key", "value");
innerHTML	요소 내부 HTML 코드 읽기/수정	div.innerHTML = "<p>안녕</p>";
textContent	요소 내부 순수 텍스트 읽기/수정	div.textContent = "안녕";

• HTML 구조 변경 → innerHTML
• 순수 텍스트 변경 → textContent
• 보안·성능상 textContent가 더 안전함 (태그 해석 X)

+ <🔎 참고할만한 사이트>

- 무료 웹 출판 가능한 사이트

• 네오사이티스: https://neocities.org/
• 블로그스팟(Blogger): https://www.blogger.com/ 
• 워드프레스(WordPress): https://wordpress.com/

Neocities

 

Blogger.com - 독특하고 멋진 블로그를 간단히 만들어 보세요.

 

마음대로 만들어나가는 WordPress

 

---

 

9일차-JavaScript 심화

오늘은 이터러블/제네레이터, 옵셔널 체이닝, 렉시컬 스코프와 클로저, this, 프로토타입, 비동기 프로그래밍, 리액트까지 학습했다!

---

1. 🔄 이터러블(Iterable)과 제네레이터(Generator)

이터러블	배열, 문자열, Map, Set 등 순차적으로 요소에 접근 가능한 객체	Symbol.iterator 메서드를 가짐
이터레이터	next() 호출 시 { value, done } 반환	value: 현재 값 / done: 완료 여부
제네레이터	function*으로 정의, yield로 값 반환	호출 시 즉시 실행 X, 이터레이터 반환

---

2. 🔍 옵셔널 체이닝 & Null 병합 연산자

?. (옵셔널 체이닝)	null/undefined인 경우 오류 없이 undefined 반환	user?.profile?.name
?? (Null 병합)	null/undefined일 때만 오른쪽 값 반환	value ?? "기본값"

<활용 목적>

• 옵셔널 체이닝: 깊은 객체 구조에서도 안전하게 접근 가능
• Null 병합 연산자: 값이 없을 때만 대체값 지정

---

3. 🗂 렉시컬 스코프 & 클로저

렉시컬 스코프	함수의 스코프는 정의된 위치에 따라 결정(정적), 함수 내에서 변수가 정의되어있지 않으면 전역 스코프에 있는 변수의 값을 참조함	호출 위치와 무관
클로저	함수와 그 함수가 선언될 당시의 렉시컬 환경을 함께 기억 - 함수 안에 함수가 정의된 경우 - 외부 함수가 실행된 후에도 내부 함수가 반환되거나 호출되는 경우	상태 유지, 정보 은닉, 모듈 패턴 구현 가능

---

4. 🎯 this와 바인딩 방식

- this는 자바스크립트에서 함수가 실행되는 컨텍스트(맥락)을 참조하는 키워드. 함수가 어떻게 호출되었는지에 따라 가리키는 값이 달라짐. this는 매우 유연하게 동작하며, 다양한 상황에서 다르게 바인딩 됨.

일반 함수	전역 객체(window) 또는 undefined(엄격 모드)
메서드 호출	해당 메서드를 소유한 객체
생성자 호출	생성된 인스턴스
call / apply / bind	명시적으로 지정한 객체
화살표 함수	정의 당시의 상위 스코프 this (정적 바인딩)

---

5. 🧩 프로토타입 

내가 생각하는 프로토타입
"객체들이 공통적으로 사용하는 속성과 메서드를 저장하고, 이를 상속하기 위한 숨겨진 연결고리."

참조 구조	객체의 내부 슬롯 [[Prototype]]이 다른 객체를 참조
공유 메서드	모든 인스턴스가 같은 메서드를 공유 가능
체인 구조	프로토타입 체인을 따라 상속 관계 형성

📌 자바스크립트는 프로토타입 기반 언어이다. 프로토타입이란 자바스크립트 객체가 가지고 있는 숨겨진 속성으로 다른 객체를 참조하는 링크이다. 이때 참조된 객체는 해당 객체의 프로토타입 객체라 한다. 객체는 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있으며, 이로인해 자바스크립트에서는 프로토타입 체인이라는 개념이 형성되며, 객체 각의 상속구조를 만들 수 있다. .__proto__.보다 Object.getPrototypeof메서드를 사용하는 것을 추천한다.

예시

function Car(model) {
  this.model = model;
}
Car.prototype.drive = function() {
  console.log(`${this.model}이(가) 주행 중입니다.`);
};

const car1 = new Car("Sonata");
car1.drive(); // Sonata이(가) 주행 중입니다.

---

6. 🏗 OOP(객체지향 프로그래밍) 핵심 개념

추상화	불필요한 세부 사항을 숨기고 핵심 기능만 표현
캡슐화	데이터와 메서드를 하나로 묶고, 외부 접근 제한
상속	기존 객체/클래스의 속성과 메서드를 다른 객체가 물려받음
다형성	같은 메서드명이 상황에 따라 다르게 동작

---

7. ⚡ 비동기 프로그래밍

정의	오래 걸리는 작업이 다른 코드 실행을 막지 않도록 하는 방식
필요성	JS는 싱글 스레드이므로 네트워크 요청, 타이머, 파일 I/O 등에 필수
구현 방식	콜백 함수, Promise, async/await

간단 예제

console.log("시작");
setTimeout(() => console.log("3초 후 실행"), 3000);
console.log("끝");
// 출력: 시작 → 끝 → (3초 후) 3초 후 실행

---

8. ⚛ React 기본 개념

정의	UI를 만들기 위한 자바스크립트 라이브러리
특징	컴포넌트 기반, Virtual DOM, 선언형 프로그래밍
장점	변경된 부분만 효율적으로 업데이트, 재사용성 높음

---

📌 Summary

• 이터러블/제네레이터: 반복 가능한 데이터와 흐름 제어
• 옵셔널 체이닝/Null 병합: 안전한 속성 접근과 값 처리
• 렉시컬 스코프/클로저: 상태 유지와 정보 은닉 가능
• this: 호출 방식에 따라 동적/정적 바인딩
• 프로토타입: 상속과 메서드 공유를 위한 객체 연결 구조
• OOP: 추상화·캡슐화·상속·다형성의 원리
• 비동기 프로그래밍: UI 지연 없는 동작 구현
• React: 효율적 UI 업데이트를 위한 라이브러리

---

9일차-REACT

DOM + 리액트 개념 + JSX 문법/동작원리 + AJAX

---

- DOM(Document Object Model): 객체로 문서 구조를 표현하는 방식으로 XML,HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. DOM자체는 빠르지만 웹 브라우저 단에서 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는 과정에서 시간이 허비된다. 이를 위해 Virtual DOM방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM처리 횟수를 최소화하고, 효율적으로 진행한다. 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용함으로써 실제 DOM의 가벼운 사본과 비슷한 형태를 띈다. DOM업데이트 과정은 아래와 같다.

• 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.
• 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
• 바뀐 부분만 실제 DOM에 적용한다.

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

1. ⚛ 리액트(React)란?

정의	사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리(프레임워크 X),오직 뷰만 담당
목적	UI를 효율적으로 구성하고 재사용성·유지보수를 높이기 위함
특징	컴포넌트 기반, 선언형, 가상 DOM 사용

---

2. 🧩 컴포넌트(Component)

• UI를 구성하는 독립적인 코드 단위
• 하나의 페이지를 여러 개의 작은 컴포넌트로 나누어 구성 가능
• 재사용성과 유지보수성 향상
• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함
  (Why? Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져 한다는 규칙이 있기 때문 -> <div> or <Fragment> or <> 사용)

재사용성	동일한 UI 로직을 여러 곳에서 활용 가능
모듈화	코드 구조를 명확히 분리 가능
유지보수성	특정 컴포넌트만 수정 가능

---

3. 📌 리액트 주요 특징

컴포넌트 기반 아키텍처	UI를 작은 재사용 가능한 단위로 구성
선언형	"무엇을" 보여줄지 선언 → 리액트가 상태 변화에 따라 자동 업데이트
명령형(DOM 직접 조작)	"어떻게" 변경할지 명령 → 상태 변화 시 직접 DOM 변경 필요
생태계	React Router, Redux, Next.js, Hooks 등 다양한 라이브러리와 연계 가능

---

4. ⚙ 바벨(Babel)과 CRA(Create React App)

Babel	최신 JS/JSX 문법을 구형 브라우저에서도 실행 가능하도록 변환
CRA	리액트 개발 환경을 자동으로 구성해주는 툴 → 복잡한 설정 없이 바로 개발 시작 가능

---

5. 🆚 HTML vs JSX

문법	순수 마크업 언어	JS 문법과 HTML을 결합
속성명	표준 HTML 속성 사용	camelCase 속성명 사용 (class → className)
닫는 태그	일부 태그 닫지 않아도 됨	모든 태그 반드시 닫아야 함
자바스크립트 사용	불가능	{} 안에 JS 표현식 가능

---

6. 📜 JSX 주요 특징

HTML과 유사	직관적 UI 코드 작성 가능
속성 전달	props를 통해 데이터 전달
자바스크립트 표현식	{} 안에 변수·함수 호출 가능
조건부 렌더링	조건 && JSX 또는 삼항 연산자 활용
자식 요소 포함	컴포넌트 안에 다른 JSX 요소 배치 가능
컴포넌트 명명 규칙	반드시 대문자 시작
보안	XSS 방지 기능 내장
불변성	JSX로 만든 엘리먼트는 수정 불가 → 새로 생성해야 업데이트 가능

---

7. 🔍 JSX 문법 & 동작 원리

• 문법 규칙
  1. 최상위 요소는 하나여야 함 → 필요 시 <></>(Fragment) 사용
  2. 모든 태그는 반드시 닫아야 함
  3. class → className, for → htmlFor로 변경
  4. {} 안에서 JS 표현식 사용 가능
  5. 인라인 스타일은 객체 형태로 작성 (style={{ color: 'red' }}) -> 중괄호 필수!!
  6. JSX내부의 자바스크립트 표현식에서 if문 사용 불가
     -> 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, {}안에 조건부 연산자(삼항 연산자)를 사용하면 된다.
• 동작 원리
  • JSX는 브라우저가 직접 이해하지 못함
  • Babel이 JSX를 React.createElement() 호출로 변환
  • 변환된 객체가 Virtual DOM에 반영
  • ReactDOM이 실제 DOM과 비교 후 변경된 부분만 업데이트(재조정)

---

8. 🖼 엘리먼트(Element)

정의	화면에 표시될 내용을 설명하는 단순 객체
생성 방식	JSX 또는 React.createElement()
불변성	한 번 생성되면 수정 불가, 변경 시 새 엘리먼트 생성

---

9. 📌 기타 개발 팁

• /* eslint-disable */ : 경고 메시지 비활성화
• State(상태): 변수 대신 사용하는 데이터 공간. 변경 시 자동 렌더링
• ReactDOM.render(): JSX를 실제 DOM에 렌더링

---

10. 🌐 AJAX(Asynchronous JavaScript And XML)

정의	페이지 전체 새로고침 없이 서버와 비동기 데이터 통신 가능하게 하는 기술
동작 방식	XMLHttpRequest 또는 Fetch API 사용
장점	빠른 응답, 사용자 경험 향상
사용 예	실시간 검색, 무한 스크롤, 채팅

• 비동기 → 요청을 보내고 응답이 올 때까지 다른 작업 가능
• 데이터 포맷은 XML뿐 아니라 JSON이 일반적으로 사용됨

---

10일차-REACT

1. Props

• 정의: props는 Properties의 줄임말로, 컴포넌트에 전달되는 데이터.
• 특징:
  • 컴포넌트 외부에서 전달되는 값
  • 컴포넌트의 입력값 역할
  • 불변성: 자식 컴포넌트 내부에서 변경 불가능
  • 부모 → 자식 간 데이터 전달에 사용
• 재사용성: 같은 컴포넌트를 다양한 데이터와 함께 재사용 가능
• Default Props:
  • 함수형 컴포넌트에서 defaultProps는 최신 React 환경에서 잘 동작하지 않는 경우가 있음
  • 권장 방식 → 매개변수 기본값 사용
  • const MyComponent = ({ name = '기본 이름' }) => { return <div>안녕하세요, 제 이름은 {name}입니다.</div>; }; export default MyComponent;

데이터 출처	외부(부모 컴포넌트)
변경 가능 여부	변경 불가 (읽기 전용)
역할	컴포넌트 입력값
데이터 흐름	부모 → 자식

---

2. State

• 정의: 컴포넌트의 내부 상태를 관리하는 객체
• 특징:
  • 동적인 데이터를 저장
  • 컴포넌트 내부에서 관리됨
  • 변경 시 리렌더링 발생
  • 초기값은 컴포넌트가 처음 렌더링 될 때 설정
  • 상태 변경은 비동기적으로 처리
  • 상태 변경 시 콜백 함수를 사용할 수 있음
• 업데이트 방법:
  • 직접 수정 ❌ (React 상태는 직접 변경 불가)
  • 반드시 상태 업데이트 함수 사용 (setState 또는 useState의 세터 함수)
• 비동기 업데이트 주의점:
  • 최신 값 반영을 보장하려면 함수형 업데이트 사용
  • setCount(c => c + 1); // 안전 setCount(count + 1); // 여러 번 연속 호출 시 값 꼬일 가능성 있음

데이터 출처	컴포넌트 내부
변경 가능 여부	변경 가능 (세터 함수로만)
역할	동적 데이터 저장
데이터 흐름	컴포넌트 내부에서만 관리

---

3. Props vs State 비교

데이터 소유	부모 컴포넌트	해당 컴포넌트
변경 가능 여부	불가능	가능 (세터 함수 사용)
데이터 흐름	부모 → 자식	컴포넌트 내부
사용 목적	외부 데이터 전달	내부 동적 데이터 관리

---

4. 컴포넌트

• 정의: UI를 구성하는 기본 단위, 코드를 작은 조각으로 나누어 관리
• 종류:
  1. 클래스형 컴포넌트
     • state와 라이프사이클 메서드 사용 가능
     • render() 메서드 필수
     • 임의 메서드 정의 가능
  2. 함수형 컴포넌트
     • 작성이 간단, 메모리 효율 좋음
     • 기본적으로 state와 라이프사이클 사용 불가 → Hooks로 해결
     • React 16.8 이후 함수형 컴포넌트 사용 권장

---

5. 라이프사이클

• 정의: 컴포넌트가 생성 → 업데이트 → 제거되는 전 과정을 말함
• 클래스형 컴포넌트의 라이프사이클 메서드:
  1. 마운트(Mount): 컴포넌트 생성 단계
     • constructor()
     • componentWillMount (deprecated)
     • render()
     • componentDidMount
  2. 업데이트(Update): state/props 변경 시
     • componentWillReceiveProps (deprecated)
     • shouldComponentUpdate
     • componentWillUpdate (deprecated)
     • render()
     • componentDidUpdate
  3. 언마운트(Unmount): 컴포넌트 제거 시
     • componentWillUnmount
  4. 오류 처리 단계(Error Handling):
     • componentDidCatch
     • getDerivedStateFromError

---

6. Hook

• 정의: 함수형 컴포넌트에서 state와 라이프사이클 기능을 사용할 수 있도록 해주는 함수
• 규칙:
  • 컴포넌트 최상위 레벨에서만 호출
  • 반복문, 조건문, 중첩 함수 안에서 호출 ❌
  • 함수형 컴포넌트 전용
• 대표 훅:
  • useState : 상태 관리
  • useEffect : 라이프사이클 효과 처리

---

7. useState

• 문법:
• const [state, setState] = useState(initialValue);
• 동작:
  • state : 현재 상태 값
  • setState : 상태를 변경하는 함수
• 업데이트 주의:
  • setState는 비동기적으로 동작
  • 안전하게 최신 값을 기반으로 업데이트하려면 함수형 업데이트 사용
  • setCount(prev => prev + 1); // 안전

 

 

 

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 2기(B-log) 리뷰로 작성 되었습니다.