23일차. IT 개념 정리

---

🧱 스택(Stack)

1️⃣ 개념

스택은 "나중에 들어온 데이터가 먼저 나가는" 구조로,
LIFO (Last In, First Out) — “후입선출” 구조라고 부릅니다.

예를 들어, 접시를 쌓는 것을 생각해 보세요.
맨 위에 쌓은 접시를 가장 먼저 꺼낼 수 있죠.
→ 나중에 넣은 것이 먼저 나오는 구조입니다.

2️⃣ 주요 연산

연산설명

push(item)	데이터를 스택의 맨 위에 넣기
pop()	맨 위의 데이터를 꺼내기
peek()	맨 위의 데이터를 꺼내지 않고 확인
isEmpty()	스택이 비어있는지 확인

3️⃣ 사용 예시

• 뒤로 가기 기능 (웹 브라우저)
• 재귀 함수 호출 관리 (함수 호출 스택)
• 괄호 짝 검사, 문자열 뒤집기

---

🚃 큐(Queue)

1️⃣ 개념

큐는 "먼저 들어온 데이터가 먼저 나가는" 구조로,
FIFO (First In, First Out) — “선입선출” 구조라고 부릅니다.

버스 정류장에서 줄 서서 탑승하는 것과 같습니다.
먼저 온 사람이 먼저 타고, 나중에 온 사람은 나중에 탑니다.

2️⃣ 주요 연산

연산설명

enqueue(item)	데이터를 큐의 뒤쪽(rear)에 추가
dequeue()	큐의 앞쪽(front)에서 데이터 제거
peek()	맨 앞의 데이터를 확인
isEmpty()	큐가 비어있는지 확인

3️⃣ 사용 예시

• 프린터 대기열 (먼저 요청된 문서가 먼저 출력)
• 운영체제의 프로세스 관리
• 네트워크 데이터 패킷 처리

---

🔁 스택 vs 큐 비교

구분	스택(Stack)	큐(Queue)
구조	LIFO (후입선출)	FIFO (선입선출)
삽입 위치	맨 위(top)	뒤(rear)
삭제 위치	맨 위(top)	앞(front)
예시	웹 브라우저 뒤로 가기	프린터 대기열

---

💡비유로 정리

상황해당 구조

접시 쌓기	스택
줄 서기	큐

---

데이터베이스나 GraphQL 같은 시스템을 공부하다 보면 **스키마(Schema)**와 **스칼라(Scalar)**라는 단어를 자주 만나게 됩니다.
이 두 개념은 데이터의 “형태”와 “기본 단위”를 정의할 때 매우 중요합니다.
아래에서 쉽게 풀어서 설명드릴게요 👇

---

🧩 스키마(Schema)

1️⃣ 개념

**스키마(Schema)**란 **데이터의 구조(Structure)나 설계도(blueprint)**를 말합니다.
즉, 데이터가 어떤 형태로 저장되고 연결되는지를 정의한 것입니다.

2️⃣ 예시 (데이터베이스 기준)

예를 들어, 학생(Student) 테이블이 있다고 해볼게요.

필드명데이터 타입설명

id	INTEGER	학생 고유 번호
name	VARCHAR	학생 이름
age	INTEGER	나이
major	VARCHAR	전공

이 표 자체가 바로 스키마입니다.
즉, “데이터가 어떤 칼럼(속성)을 가지고 어떤 타입인지”를 정의하는 것입니다.

💡 쉽게 말하면: ‘데이터를 담는 틀’이 스키마입니다.

---

3️⃣ GraphQL 기준에서의 스키마

GraphQL에서는 스키마가 API의 구조와 규칙을 정의합니다.

예를 들어,

 

type Student { id: ID! name: String! age: Int major: String }

이 정의 자체가 GraphQL의 스키마입니다.
여기서 각 필드의 타입이 바로 “스칼라(Scalar)” 타입이에요 👇

---

⚙️ 스칼라(Scalar)

1️⃣ 개념

**스칼라(Scalar)**는 가장 기본적인 데이터 타입을 의미합니다.
즉, 더 이상 나눌 수 없는 단일 값이에요.

예를 들어, “문자열(String)”이나 “숫자(Int)”처럼 한 가지 값만 가지는 타입입니다.

---

2️⃣ GraphQL에서의 기본 스칼라 타입

타입명설명예시

Int	정수	123
Float	실수	3.14
String	문자열	"홍길동"
Boolean	참/거짓	true
ID	고유 식별자 (문자열처럼 다룸)	"stu_001"

💡 “스키마”는 전체 구조를 정의하고,
“스칼라”는 그 안에서 사용되는 기초 타입이에요.

---

🧠 비유로 이해하기

개념비유설명

스키마	아파트 설계도	건물이 어떻게 생겼는지 정의
스칼라	벽돌, 유리, 철근	설계도를 구성하는 기본 재료

---

요약

• 스키마(Schema): 데이터의 구조, 설계도
• 스칼라(Scalar): 데이터를 구성하는 기본 단위 (숫자, 문자열 등)

---

예전에 JQUERY 쓸 때는 npm을 사용했는데 이제 리액트로 기능이 향상된 시점에서 yarn 과 pnpm중 하나만 사용하고 싶어 어느것을 추천해?

 

React 환경에서 패키지 매니저를 선택할 때 npm, yarn, pnpm 중 하나만 써도 충분하지만,
요즘은 개발 트렌드상 pnpm을 선택하는 경우가 빠르게 늘어나고 있습니다.
아래에서 두 도구를 성능, 호환성, 팀 협업성, 개발 경험 기준으로 비교해드릴게요 👇

---

⚙️ Yarn vs PNPM 비교 요약

항목YarnPNPM

속도	빠름	🚀 매우 빠름 (Yarn보다 최대 2~3배)
디스크 사용량	많음	공유 캐시 구조로 매우 절약적
Node Modules 구조	평면적 설치 (hoisting)	심볼릭 링크 기반 (isolation 구조)
호환성	높음 (npm과 거의 동일)	대부분 호환됨 (단, 일부 오래된 패키지 주의)
Monorepo 지원	Yarn Berry(3.x)부터 개선	기본 내장 (workspace 기능 강력)
설정 난이도	비교적 쉬움	약간 복잡하지만 문서화가 잘 되어 있음
커뮤니티/지원	안정적, 널리 사용됨	🔥 빠르게 성장 중 (Vite, Next.js 공식 추천 경향)

---

🧠 정리하면

✅ Yarn을 선택하면 좋은 경우

• 팀 전체가 기존 Yarn 기반 환경을 이미 사용 중일 때
• 별도의 설정 없이 npm보다 조금 더 빠르고 안정적인 패키지 관리가 필요할 때
• 기존 CRA(Create React App) 프로젝트를 유지보수할 때

🚀 pnpm을 선택하면 좋은 경우

• React + Vite / Next.js / Monorepo 환경에서 개발할 때
• 속도와 디스크 효율성을 중시할 때 (패키지가 많을수록 체감 큼)
• 팀 내에서 최신 개발 환경과 도구를 적극적으로 도입할 때

---

💡 실제 체감 예시

• Yarn 설치 시간: 30초
• pnpm 설치 시간: 10~15초
• 디스크 용량: Yarn 2GB → pnpm 300MB 수준

대규모 프로젝트일수록 pnpm의 속도 + 용량 절약 효과가 확실히 느껴집니다.

---

🔧 개인 추천

👉 새로 React 프로젝트를 시작한다면 pnpm을 추천드립니다.

이유:

• Vite, Next.js, Turborepo 등 최신 프레임워크와 기본적으로 호환
• 캐시, 링크 구조 덕분에 빌드와 설치 속도 극대화
• 관리 효율이 높고, 장기적으로 유지보수가 용이함

설치도 간단합니다 👇

 

# 전역 설치 npm install -g pnpm # 프로젝트 생성 pnpm create vite my-app --template react

---

🏗️ 객체 모델(Object Model)이란?

1️⃣ 개념

**객체 모델(Object Model)**은

“프로그램 내의 객체들이 어떤 구조로 존재하고, 서로 어떻게 상호작용하는지 나타낸 개념적 모델”

입니다.

즉, 단순히 객체 하나하나가 아니라,
객체들 간의 관계, 계층, 상속, 속성 공유 구조까지 정의한 “전체 틀”이에요.

---

2️⃣ 예시로 이해하기

🎨 비유:

객체가 ‘사람 한 명’이라면,
객체 모델은 ‘인간 사회의 구조(가족, 조직, 역할)’를 정의한 것과 같아요.

 

 

 

---

 

“객체 모델(Object Model)”과 “DOM(Document Object Model)”은 이름이 비슷해서 헷갈리기 쉬운데요,
둘은 적용 범위와 역할이 완전히 다릅니다.

하나씩 비교하면서 쉽게 정리해드릴게요 👇

---

🧱 1️⃣ 객체 모델(Object Model)

✅ 개념

**객체 모델(Object Model)**은

“객체들이 어떤 구조로 존재하고 서로 어떤 관계를 맺는지를 표현한 설계 개념”입니다.

즉, 프로그램 전반의 객체 관계를 설명하는 이론적 개념이에요.

---

📘 예시 (자바스크립트 OOP 기준)

 

class Car { constructor(color) { this.color = color; } drive() { console.log(`${this.color} 자동차가 달립니다.`); } } const redCar = new Car("빨강"); redCar.drive(); // 빨강 자동차가 달립니다.

여기서

• Car 클래스, redCar 인스턴스, drive() 메서드
  이런 구성 관계 전체가 **객체 모델(Object Model)**이에요.

즉,

객체 모델 = 객체의 설계 구조 + 관계 규칙

---

🌐 2️⃣ DOM(Document Object Model)

✅ 개념

DOM은 웹 브라우저가 HTML, XML 문서를 객체 형태로 표현한 구조입니다.

즉, **웹 문서를 프로그래밍 언어로 다룰 수 있게 만든 구체적인 “객체 모델의 한 구현체”**예요.

---

📄 예시 (HTML + JavaScript)  

 

<body> <h1 id="title">안녕하세요!</h1> <button onclick="changeText()">클릭</button> <script> function changeText() { document.getElementById("title").innerText = "반가워요!"; } </script> </body>

위 코드에서
document → HTML 전체 문서 객체
getElementById("title") → DOM 트리에서 <h1> 요소 객체를 가져오는 것

즉, HTML 요소가 객체로 변환되어 JS로 제어 가능한 구조,
이게 바로 **DOM(Document Object Model)**입니다.

---

⚙️ 3️⃣ 객체 모델 vs DOM 비교표

구분객체 모델(Object Model)DOM(Document Object Model)

 

정의	객체 간 관계를 표현하는 개념적 모델	HTML/XML 문서를 객체로 표현한 모델
범위	프로그래밍 언어 전반 (Java, JS, Python 등)	웹 문서(HTML, XML) 전용
형태	추상적 설계 (클래스, 상속, 메서드 등)	구체적 구조 (Node, Element, Text 등)
예시	class User {} / extends / instance	document.getElementById(), innerHTML
결과물	프로그램의 객체 구조를 정의	웹 페이지의 구조를 객체로 제어 가능하게 함
종류	여러 분야에 존재 (DB, SW 설계 등)	브라우저 전용 모델 (W3C 표준)

💡 한 문장으로 정리

**객체 모델(Object Model)**은 “객체의 개념과 구조”를 설명하는 이론적 틀,
**DOM(Document Object Model)은 “HTML 문서를 객체로 표현한 구체적인 구현체입니다.

즉, DOM은 객체 모델의 특정한 한 사례라고 보면 정확합니다.

---

🔍 비유로 이해하기

비유객체 모델DOM

개념	“모든 생물의 분류 체계”	“특정 식물의 계통도”
의미	이론적 설계 원리	특정 구현 구조
예시	사람, 동물, 자동차 등 관계 정의	HTML 문서의 실제 구조 표현

---

---

프로그래밍에서 **“함수(Function)”**는 기본이지만,
이름이 있느냐 없느냐에 따라 역할과 사용 방식이 달라집니다.

특히 **자바스크립트(React 포함)**에서는 이 구분이 중요해요.
아래에서 이름 유무에 따른 함수의 종류를 체계적으로 정리해드릴게요 👇

 

⚙️ 함수의 이름 존재 여부에 따른 분류

구분설명예시

1️⃣ 선언형 함수 (Named Function / Function Declaration)	함수에 이름이 있는 형태	function sayHello() { ... }
2️⃣ 익명 함수 (Anonymous Function / Function Expression)	이름 없이 변수에 저장되는 함수	const greet = function() { ... }
3️⃣ 화살표 함수 (Arrow Function)	익명 함수의 간결한 표현식	const add = () => { ... }

---

🧩 1️⃣ 선언형 함수 (Named Function)

✅ 개념

• 함수에 이름이 붙어 있는 형태입니다.
• function 키워드로 직접 선언합니다.
• **호이스팅(hoisting)**이 적용되어, 선언 전에 호출 가능!

📘 예시

 

function sayHello() { console.log("안녕하세요!"); } sayHello(); // ✅ 정상 실행

💡 특징

항목설명

이름 존재	있음
선언 위치	어디든 가능
호출 시점	선언 이전에도 호출 가능 (호이스팅)
장점	디버깅 시 스택 트레이스에서 이름 표시
단점	유연성이 떨어짐 (코드 재사용 시 함수 이름 고정)

---

🧠 2️⃣ 익명 함수 (Anonymous Function)

✅ 개념

• 이름이 없는 함수로,
  변수나 인자로 전달되어 사용됩니다.
• 주로 함수 표현식(Function Expression) 형태로 씁니다.

📘 예시

 

const greet = function() { console.log("Hello, World!"); }; greet(); // ✅ 정상 실행

💡 특징

항목설명

이름 존재	❌ 없음
선언 위치	변수나 인자 안
호출 시점	선언 이후에만 가능
장점	동적으로 함수 정의 가능
단점	디버깅 시 이름이 없으면 추적 어려움

---

⚡ 3️⃣ 화살표 함수 (Arrow Function)

✅ 개념

• 익명 함수의 축약 문법으로,
  ES6(ECMAScript 2015) 이후 추가되었습니다.
• function 대신 => 사용
• 내부적으로 this 바인딩이 다르게 동작 (렉시컬 스코프)

📘 예시

 

const add = (a, b) => a + b; console.log(add(3, 5)); // 8

💡 특징

항목설명

이름 존재	❌ 기본적으로 없음 (변수명으로 식별)
선언 위치	표현식 내부
호출 시점	선언 이후
장점	코드가 간결, 콜백 함수에 적합
단점	this, arguments를 사용할 수 없음

---

🔍 3가지 방식 비교 요약표

구분선언 방식이름 유무호출 시점대표 사용 예

선언형 함수	function name() {}	✅ 있음	선언 전 호출 가능	전역 유틸 함수
익명 함수	const f = function() {}	❌ 없음	선언 후 호출만 가능	콜백, 변수에 저장
화살표 함수	const f = () => {}	❌ 없음	선언 후 호출만 가능	이벤트 핸들러, 간단한 로직

---

🧠 요약

• 이름이 있으면 → 선언형 함수 (디버깅·호이스팅에 유리)
• 이름이 없으면 → 익명 함수 or 화살표 함수 (간결하고 유연)

 

 

 

 

---

🔍 3️⃣ SPA vs MPA 비교 요약

구분	SPA	MPA
페이지 구조	하나의 HTML 파일	페이지마다 HTML 파일 존재
페이지 전환	JS로 화면 일부 갱신	서버가 새 페이지 전송
속도	초기 느림, 이후 빠름	초기 빠름, 이후 느림
SEO	불리 (SSR 필요)	유리
대표 기술	React, Vue, Angular	JSP, PHP, Django 등
사용자 경험	앱처럼 부드러움	전통적인 페이지 이동 느낌

---

💡 결론 요약

SPA = 앱처럼 부드러운 UX, 프론트 중심
MPA = 검색엔진 친화적, 서버 중심

요즘은 둘의 장점을 결합한 SSR(Server-Side Rendering) 방식
👉 예: Next.js (React 기반 프레임워크)가 많이 사용됩니다.