* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.
* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.
💡 왜 프론트엔드 개발자도 컴퓨터 과학 기초를 공부해야 하는가?
✅ 핵심 개념
프론트엔드 개발자는 단순히 화면을 구현하는 역할을 넘어서,
웹 애플리케이션의 성능, 안정성, 유지보수성을 고려해야 합니다.
이를 위해서는 컴퓨터의 동작 원리와 기초 이론에 대한 이해가 필수적입니다.
1️⃣ 브라우저 동작 방식 이해
🔍 상세 설명
HTML/CSS/JS가 브라우저에서 해석되고 렌더링되는 과정은 내부적으로 컴퓨터 구조와 맞닿아 있습니다.
렌더링 엔진의 처리 순서, DOM 생성, JS 실행 컨텍스트 등은
메모리 구조, 스택/힙, 쓰레드 처리 방식 등을 이해해야 정확히 알 수 있습니다.
🧩 연결 개념
스택(Stack): 함수 호출 시 사용하는 메모리 영역
이벤트 루프(Event Loop): 자바스크립트의 비동기 처리 메커니즘
콜 스택(Call Stack): 실행 컨텍스트가 쌓이는 구조
2️⃣ 성능 최적화의 이론적 기반
🔍 상세 설명
페이지 로딩 속도, 이미지 최적화, 리렌더링 최소화 같은 최적화는
데이터 구조, 알고리즘, 메모리 관리 방식을 이해해야 정확히 수행할 수 있습니다.
예를 들어, React에서 key 속성의 필요성은 내부 diff 알고리즘과 관련 있습니다.
Debounce, Throttle 등도 결국 CPU 연산 부담을 줄이는 기법입니다.
🧩 연결 개념
알고리즘 시간복잡도: O(n), O(1), O(log n) 등
메모리 누수(Memory Leak): 가비지 컬렉터가 해제하지 못하는 메모리
3️⃣ 협업과 문제 해결 능력 향상
🔍 상세 설명
프론트엔드 개발자라도 백엔드, DevOps, QA 등 다양한 팀과 협업해야 합니다.
이때 컴퓨터 과학 기초가 부족하면 시스템 전체 흐름 파악, 버그 원인 분석,
성능 병목 구간 탐지 등에 취약해질 수 있습니다.
🧩 연결 개념
HTTP/REST, TCP/IP: 요청과 응답 흐름 이해
네트워크 지연(latency): 사용자 경험에 직접적 영향
CPU/Memory 병목: 웹 성능 분석의 핵심 요소
4️⃣ CS 지식은 커리어 성장의 기반
🔍 상세 설명
신입 프론트엔드 개발자는 HTML/CSS/JS에 집중하지만,
고급 프론트엔드 개발자는 브라우저 엔진, 가상 DOM, SSR/CSR, 보안 이슈 등
보다 컴퓨터 구조적 지식이 필요한 문제들을 다루게 됩니다.
또한, 기술 면접에서 CS 질문은 빈출 항목입니다.
🧩 연결 개념
CORS, 쿠키/세션, JWT 등은 네트워크/보안 지식과 직결
GC(Garbage Collector): 자바스크립트 메모리 관리
OS 스케줄링: 멀티태스킹의 기반 원리
🎯 정리: 프론트엔드 개발자에게 CS 기초는 '깊이 있는 개발'의 시작점
겉보기에 UI 구현 중심인 프론트엔드지만, 실제로는 브라우저, 네트워크, 성능, 메모리 등
컴퓨터 시스템 전반의 지식을 요구받는 분야입니다.
즉, 컴퓨터 과학 기초를 공부함으로써 더 안정적이고 성능 좋은 앱을 만들고,
문제를 더 빠르고 정확하게 파악할 수 있으며,
장기적으로 기술 커리어를 확장할 수 있습니다.
🧠 CS 기초 정리 (1)
📘 1-1. 디지털 정보의 표현
✅ 핵심 개념
컴퓨터는 모든 데이터를 0과 1인 이진수(Binary)로 표현한다.
디지털 정보는 다양한 형태(문자, 숫자, 이미지 등)를 이진수로 변환해 저장하고 처리한다.
🔍 상세 설명
디지털 시스템은 2진법 기반의 논리 회로로 작동하며, 전기적 신호의 on/off (high/low) 상태를 통해 값을 구분한다.
비트(bit): 디지털 정보의 최소 단위. 0 또는 1의 값만 가질 수 있음.
바이트(byte): 8비트로 구성. 대부분의 시스템에서 기본 단위로 사용됨.
🔁 관련 개념 꼬리물기
아스키(ASCII): 문자를 숫자로 표현하는 방식. 예: 'A' → 65
유니코드(Unicode): 전 세계 모든 문자를 표현하기 위한 표준. UTF-8이 가장 널리 사용됨.
아날로그 vs 디지털: 아날로그는 연속적인 값, 디지털은 이산적인 값(0과 1).
📘 1-2. 이진수로 표현한 정수와 실수 (1)
✅ 핵심 개념
정수는 2진수, 보수법 등을 이용하여 저장된다.
실수는 부동소수점(Floating Point) 방식으로 저장된다.
🔍 상세 설명
정수 표현 방식:
부호와 절댓값(Sign and Magnitude): 가장 왼쪽 비트로 부호 표현.
1의 보수(Ones’ complement): 음수는 모든 비트를 반전시킴.
2의 보수(Two’s complement): 가장 널리 쓰임. 음수 표현 및 덧셈/뺄셈 연산이 간편.
실수 표현 방식:
고정소수점(Fixed Point): 소수점 위치가 고정됨.
부동소수점(Floating Point): 소수점 위치를 가변적으로 지정. IEEE 754 표준 사용.
🔁 관련 개념 꼬리물기
MSB / LSB: Most/Least Significant Bit, 가장 큰/작은 자리 비트.
IEEE 754: 실수를 저장하기 위한 표준화된 부동소수점 표현 규칙.
📘 1-3. 이진수로 표현한 정수와 실수 (2)
✅ 핵심 개념
실수의 정밀도 문제와 오차가 발생하는 원인을 이해한다.
부동소수점 연산 시 주의해야 할 사항이 많다.
🔍 상세 설명
일부 실수는 2진수로 정확히 표현할 수 없다. (예: 0.1)
부동소수점 연산에서는 반올림 오차, 정밀도 손실이 빈번히 발생함.
프로그래밍 언어에서 실수를 비교할 땐 == 대신 epsilon(허용 오차) 비교 사용.
🔁 관련 개념 꼬리물기
정밀도(Precision): 표현할 수 있는 소수점 자리 수.
부동소수점 오류: 소수 연산에서 발생하는 근사값 차이.
📘 1-4. 컴퓨터 연산 하드웨어
✅ 핵심 개념
컴퓨터는 논리 게이트와 연산 회로를 사용해 계산을 수행한다.
🔍 상세 설명
논리 게이트: AND, OR, NOT 등의 기본 연산 수행 장치.
반가산기(Half Adder)와 전가산기(Full Adder)를 통해 2진수 덧셈을 수행.
ALU(산술논리연산장치): 덧셈, 뺄셈, 논리 연산 등을 담당하는 핵심 회로.
🔁 관련 개념 꼬리물기
클럭(Clock): 연산 동기화 역할을 수행하는 신호.
MUX(멀티플렉서): 여러 입력 중 하나를 선택하여 출력하는 장치.
📘 1-5. 튜링 기계와 폰 노이만 컴퓨터
✅ 핵심 개념
모든 계산 가능한 문제는 튜링 기계(Turing Machine)로 해결 가능하다.
현재 컴퓨터 구조의 기반은 폰 노이만 구조(Stored Program Concept)이다.
🔍 상세 설명
튜링 기계: 이론적인 계산 모델. 무한한 테이프와 상태 전이로 구성됨.
폰 노이만 구조: 명령어와 데이터를 동일한 메모리에 저장함.
주요 구성 요소: 입력장치, 출력장치, 기억장치(메모리), 연산장치, 제어장치
🔁 관련 개념 꼬리물기
하버드 구조: 명령어와 데이터를 별도 메모리에 저장하는 방식.
컴퓨터 아키텍처: 컴퓨터 내부 구성 방식. 폰 노이만 구조가 가장 널리 쓰임.
🧠 컴퓨터 과학 기초 정리 (2주차)
🖥️ 컴퓨터 구조와 운영체제
📘 2-1 ~ 2-3. 컴퓨터 구조의 설계와 구현 (1~3)
✅ 핵심 개념
컴퓨터는 입력 → 처리 → 출력의 흐름을 기반으로 동작하며,
이 흐름은 하드웨어 구성요소(메모리, 연산장치, 제어장치 등)의 조합으로 구현된다.
🔍 상세 설명
중앙처리장치(CPU)는 명령어를 가져와서 해석하고 실행한다.
구성: ALU(연산) + CU(제어) + 레지스터
메모리는 데이터를 임시로 저장하며, 프로그램 실행에 필요한 정보를 유지한다.
명령어는 명령어 레지스터(IR)에 의해 저장되고, 프로그램 카운터(PC)가 다음 명령을 가리킨다.
🔁 관련 개념 꼬리물기
버스(Bus): 데이터 전송을 위한 통로
캐시(Cache): 빠른 접근을 위한 메모리 계층
파이프라이닝(Pipelining): CPU의 명령 실행을 병렬로 수행해 성능 향상
📘 2-4. 프로그램의 번역과 실행
✅ 핵심 개념
사람이 작성한 코드(고급 언어)는 컴퓨터가 이해할 수 있도록 번역되어야 실행 가능하다.
🔍 상세 설명
컴파일러: 전체 코드를 한번에 기계어로 번역 후 실행 (C, C++)
인터프리터: 한 줄씩 번역하며 즉시 실행 (Python, JavaScript)
가상머신(JVM): 중간 코드(바이트코드)를 실행하는 환경
🔁 관련 개념 꼬리물기
기계어(Machine Code): CPU가 이해할 수 있는 명령어의 집합
어셈블리어: 기계어에 가까운 저수준 언어
JIT 컴파일: 실행 시점에 코드를 컴파일 (Java, V8 엔진)
📘 2-5. 운영체제의 역할과 구조
✅ 핵심 개념
운영체제(OS)는 사용자와 하드웨어 사이를 중재하며, 자원을 효율적으로 관리한다.
🔍 상세 설명
역할:
프로세스 관리: 실행 중인 프로그램의 실행 제어
메모리 관리: 프로그램에 메모리 할당 및 회수
파일 시스템 관리: 저장 장치 내 파일과 폴더의 구조 유지
입출력 장치 제어: 디바이스와 사용자 간 인터페이스 제공
구조:
커널(Kernel): OS의 핵심, 자원 관리 책임
시스템 콜(System Call): 프로그램이 OS 기능을 요청할 때 사용하는 인터페이스
🔁 관련 개념 꼬리물기
유저 모드 vs 커널 모드: 권한 수준 구분
멀티태스킹: 여러 프로세스가 동시에 실행되는 것처럼 보이는 기능
📘 2-6 ~ 2-7. 프로세스 관리와 스케줄링
✅ 핵심 개념
프로세스(Process)는 실행 중인 프로그램이며, 운영체제가 CPU 자원을 분배한다.
🔍 상세 설명
상태: new → ready → running → waiting → terminated
스케줄링 방식:
FCFS (First Come First Serve): 먼저 들어온 순
SJF (Shortest Job First): 수행 시간이 짧은 것 우선
Round Robin: 정해진 시간(time quantum)마다 교체
🔁 관련 개념 꼬리물기
스레드(Thread): 프로세스 내 실행 단위
컨텍스트 스위칭(Context Switching): 프로세스 전환 시 상태 저장 및 복원
📘 2-8 ~ 2-10. 메모리와 입출력 관리
✅ 핵심 개념
운영체제는 프로그램에 효율적인 메모리 할당과 입출력 장치 제어를 수행한다.
🔍 상세 설명
메모리 관리:
가상 메모리: 실제 메모리보다 큰 메모리 공간을 제공하는 방식
페이지 교체(Page Replacement): 필요한 데이터만 메모리에 유지
입출력 관리:
I/O는 CPU보다 느리므로 버퍼(Buffer)와 인터럽트로 비동기 처리
장치 드라이버: 각 하드웨어에 맞는 제어 코드
🔁 관련 개념 꼬리물기
MMU (Memory Management Unit): 가상 주소를 실제 주소로 변환
DMA (Direct Memory Access): CPU 개입 없이 메모리 ↔ 장치 간 데이터 전송
📘 2-11. 동기화 문제 - 냉장고와 우유
✅ 핵심 개념
동기화 문제란 여러 프로세스/스레드가 자원을 동시에 사용할 때 발생하는 충돌 문제이다.
🔍 상세 설명
"냉장고에 우유가 있는지 확인하고 없으면 산다"라는 두 사람의 상황에서
동시에 확인하고 동시에 사면 중복된다. → 경쟁 조건(Race Condition)
해결: 임계구역(Critical Section) 보호
뮤텍스(Mutex), 세마포어(Semaphore) 사용
🔁 관련 개념 꼬리물기
데드락(Deadlock): 서로 자원을 점유한 채 영원히 대기
교착 상태 회피: 자원 순서 정하기, 타임아웃 설정 등
🧠 컴퓨터 과학 기초 정리 (3주차)
🗃️ 데이터베이스 기초와 활용
📘 3-1 ~ 3-2. 데이터의 구조화와 관계형 데이터베이스
✅ 핵심 개념
데이터는 구조화되어야 검색, 저장, 분석이 가능하며, 관계형 모델이 가장 널리 쓰인다.
🔍 상세 설명
관계형 데이터베이스(Relational DB)는 데이터를 테이블(표)로 저장
각 열: 속성 (column), 각 행: 튜플(row)
테이블 간 관계: 1:1, 1:N, N:M (예: 사용자 - 주문)
SQL(Structured Query Language)로 데이터 조작
SELECT, INSERT, UPDATE, DELETE
🔁 관련 개념 꼬리물기
기본키(Primary Key): 각 행을 고유하게 식별
외래키(Foreign Key): 다른 테이블과의 관계 정의
📘 3-3. ORM과 데이터베이스의 활용
✅ 핵심 개념
ORM(Object-Relational Mapping)은 객체와 데이터베이스를 자동으로 매핑해주는 기술이다.
🔍 상세 설명
SQL을 직접 쓰지 않고, 클래스와 메서드로 DB를 다룸
예: Java의 Hibernate, Python의 SQLAlchemy, JS의 Prisma/Sequelize 등
장점:
코드 가독성 향상
보안성 증가 (SQL Injection 예방)
DB 독립성 증가
🔁 관련 개념 꼬리물기
모델(Model): 테이블 구조를 코드로 표현한 클래스
마이그레이션(Migration): DB 구조 변경 사항을 코드로 관리
📘 3-4 ~ 3-5. 벡터 데이터베이스와 유사도 검색
✅ 핵심 개념
벡터 데이터베이스(Vector DB)는 문서나 이미지 등의 비정형 데이터를 수치화한 벡터로 저장하고,
유사도 기반 검색을 수행한다.
🔍 상세 설명
AI/ML 모델이 생성한 임베딩(Embedding) 벡터를 저장
코사인 유사도(Cosine Similarity) 등으로 검색 대상과 유사도 계산
사용 예시: 챗봇, 검색엔진, 추천시스템
🔁 관련 개념 꼬리물기
FAISS, Weaviate, Qdrant: 대표적인 벡터 DB
KNN (k-최근접 이웃): 유사도 기반 분류 알고리즘
📘 3-6. NoSQL 데이터베이스
✅ 핵심 개념
NoSQL DB는 비정형, 대규모 데이터를 유연하게 저장하는 DB이다.
🔍 상세 설명
테이블이 아닌 문서(Document), 키-값(Key-Value) 구조 등으로 저장
스키마가 유연하고, 수평 확장이 쉬움
예시:
MongoDB: 문서 기반 DB
Redis: 메모리 기반 Key-Value DB
Firebase: 실시간 DB, 프론트엔드와 밀접
🔁 관련 개념 꼬리물기
CAP 이론: Consistency, Availability, Partition tolerance 중 두 가지를 만족
스케일 아웃: 서버 수 증가로 확장하는 방식
