한결의 개발로그

[Supabase] 프로젝트 백업 복원 - 90일 비활성 일시정지 복구

hangyeoldora — Mon, 2 Mar 2026 17:49:31 +0900

1. 개요

계기

이 글은 Supabase 무료 티어 90일 비활성으로 일시정지된 프로젝트를 백업 파일로 복원하는 과정을 정리하기 위해 작성했다.

2024년에 회사에서 LLM을 활용한 RAG 테스트 프로젝트를 진행하면서 Supabase를 알게 되었고 Hybrid Search 등을 지원하여 프로젝트에 사용했었다. 한동안 사용 안 하다가 다시 보려고 접속했는데 프로젝트가 일시정지 상태로 나오고 있는 것이었다.

찾아보니 Supabase 무료 티어는 90일 이상 비활성 상태면 자동으로 일시정지된다고 한다... 말이 일시정지인거지 그냥 사용할 수가 없는 상태로 된다.

다행히 백업 파일은 일시정지된 프로젝트의 Dashboard에서 다운받을 수 있었고(.backup.gz, .storage.zip) 새 프로젝트를 만들어서 복원하기로 했다.

환경

운영체제: macOS
Docker Desktop, Supabase CLI, PostgreSQL 클라이언트(psql)
다운로드 받은 백업 파일: db_cluster-*.backup.gz, *.storage.zip

이번에 복원한 범위는 데이터베이스(테이블·함수·트리거·인덱스 전부, 사용자 3명·문서 124개 등), Storage 메타데이터·실제 파일(객체 520개, 48.9MB). 로컬에서 먼저 테스트한 뒤 원격 복원했음.

2. 공식문서 방법 시도 및 실패

먼저 공식문서를 보고 그대로 따라해봤음.

# 1. PostgreSQL 설치
brew install postgresql

설치 확인은 아래처럼 하면 됨.

pg_restore --version
# pg_restore (PostgreSQL) 14.20 (Homebrew)

(1) 첫 번째 시도 - Direct Connection

새 프로젝트를 만들고 Dashboard에서 Connection string을 확인한 뒤 아래처럼 넣어야 함.

postgresql://postgres:[YOUR-PASSWORD]@db.xnevbeeifkumavhbhepk.supabase.co:5432/postgres

비밀번호를 넣어줘야해서 비밀번호 설정하고 복원 시도했음.

export PGPASSWORD="your_password"

psql \
  -h db.xnevbeeifkumavhbhepk.supabase.co \
  -p 5432 \
  -U postgres \
  -d postgres \
  < db_cluster-28-09-2025@15-06-50.backup

근데 아래와 같이 주소 관련해서 알 수 없다는 에러가 발생했다.

psql: error: could not translate host name "db.xnevbeeifkumavhbhepk.supabase.co" to address: nodename nor servname provided, or not known

ping과 nslookup으로 확인해봐도 같은 에러가 나서 났다.

ping db.xnevbeeifkumavhbhepk.supabase.co
# ping: cannot resolve db.xnevbeeifkumavhbhepk.supabase.co: Unknown host

알고보니 Direct connection은 IPv4 유료 플랜이 필요했던 것이다...

(2) 두 번째 시도 - Session Pooler로 변경

Connection 방법을 Direct에서 Session pooler로 바꿧다.

세션 풀러를 선택 하니 IPv4 주소가 제대로 나왔다.

그래서 Session pooler로 재시도 했다.

gunzip -c db_cluster-28-09-2025@15-06-50.backup.gz | \
psql \
  -h aws-1-ap-northeast-1.pooler.supabase.com \
  -p 5432 \
  -U postgres.xnevbeeifkumavhbhepk \
  -d postgres

(3) 세 번째 시도 - Session pooler 에러 폭탄 발생

이번엔 연결은 되는데 복원 과정에서 에러가 폭탄처럼 쏟아졌다.

Role 관련 에러 (수백 개)

ERROR: role "anon" already exists
ERROR: "anon" is a reserved role, only superusers can modify it
ERROR: role "authenticated" already exists
ERROR: role "supabase_admin" already exists
ERROR: permission denied to alter role

Supabase가 자동으로 생성하는 Role들과 충돌한다는 에러...

Schema 충돌

ERROR: schema "auth" already exists
ERROR: schema "storage" already exists
ERROR: permission denied for schema auth

새 프로젝트에 이미 존재하는 스키마를 백업 파일이 재생성하려고 시도..

Permission Denied

ERROR: permission denied for schema auth
ERROR: must be owner of table audit_log_entries
ERROR: permission denied for function get_auth
ERROR: permission denied to change default privileges

Supabase 권한 부족..

등등 에러 메시지가 계속 스크롤되면서 올라갔고 수백 개는 넘는 것 같았다..

에러 원인을 정리하자면 4가지 정도인 것 같다.

백업 파일이 full dump 방식이라 모든 CREATE 명령 포함
새 Supabase 프로젝트는 이미 기본 스키마, Role, 권한이 자동 생성되어 있음
백업 파일이 이미 존재하는 것들을 재생성하려다가 충돌
에러는 무시해도 되는 경고들이지만 핵심 데이터 복원이 제대로 안될 위험이 있음

그래서 다른 방법이 없나 하고 구글 검색이나 레딧을 찾아보니 저렇게 직접 psql로 넣는게 아니라 로컬 supabase에서 작업하고 복원했다는 글이 있어서 그렇게 진행해보기로 했다.

3. 로컬 Supabase로 원격 Supabase 복원 시도

(1) 로컬 환경 준비

필수 도구 설치

postgresql 버전은 dashboard를 참조해서 버전을 세팅했음.

# Supabase CLI 설치 (Homebrew)
brew install supabase/tap/supabase

# PostgreSQL 클라이언트 설치
brew install postgresql@15

# Docker Desktop 실행
open -a Docker

Docker 실행 확인

Docker가 정상적으로 실행 중인지 확인함.

docker ps

(2) 로컬 Supabase 환경 구축

Supabase 프로젝트 초기화

작업 디렉토리를 만들고 Supabase를 초기화함.

# 작업 디렉토리 생성
mkdir supabase-restore && cd supabase-restore

# Supabase 초기화
supabase init

PostgreSQL 버전 설정

중요: 백업 파일과 로컬 환경의 PostgreSQL 버전이 일치해야 한다.

내 백업 파일은 PostgreSQL 15로 생성되었기 때문에 로컬도 15로 맞춰줬다.

supabase/config.toml 파일을 아래처럼 수정했음.

[db]
major_version = 15

추가로 버전 파일도 생성

mkdir -p supabase/.temp
echo "15.6.1.115" > supabase/.temp/postgres-version

로컬 Supabase 시작

supabase start

정상적으로 시작되면 아래와 같은 정보가 나온다.

Started supabase local development setup.

         API URL: http://localhost:54321
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323

이렇게 되면 일단 로컬 Supabase 세팅은 끝이다.

(3) 백업 파일 복원

SQL 덤프 추출

백업 파일을 SQL 텍스트로 변환한다.

pg_restore -f postgres_restore.sql -d postgres db_cluster-*.backup

로컬 데이터베이스에 복원

추출한 SQL 파일을 로컬 PostgreSQL에 적용

psql 'postgresql://postgres:postgres@localhost:54322/postgres' \
  -f postgres_restore.sql 2>&1 | tee restore.log

* 에러사항 무시!

복원하면 아까 Supabase 원격으로 복원하는 것처럼 에러 메시지가 엄청 쏟아지는데 걱정하지말고 대부분 무시해도 된다.

schema already exists: Supabase가 이미 만들어둔 스키마(auth, storage 등)와 충돌
permission denied: Supabase 관리 영역 권한 문제
unrecognized configuration parameter: PostgreSQL 버전 차이

이런 에러들은 대부분 무시해도 되고 실제 데이터(테이블, 함수, 트리거)는 정상적으로 복원된다.

Storage 메타데이터 복원

여기서 또 문제가 발생했다.

문제 상황

storage.objects 테이블 복원 시 다음 에러가 남.

ERROR: column "level" does not exist

원인: 백업 파일에는 level 컬럼이 있는데 새 Supabase에는 없다는 것이다.

해결 방법

그래서 sed로 해당 컬럼을 제거했다.

# storage.objects COPY 문 추출
grep -A 100000 "COPY storage.objects" postgres_restore.sql > storage_objects.sql

# level 컬럼 제거
sed 's/\t[0-9]\+$//' storage_objects.sql > storage_objects_fixed.sql

# 수정된 파일 적용
psql 'postgresql://postgres:postgres@localhost:54322/postgres' \
  -f storage_objects_fixed.sql

복원 확인

테이블이 제대로 복원되었는지 확인 진행

psql 'postgresql://postgres:postgres@localhost:54322/postgres' -c "
SELECT 
  schemaname,
  tablename
FROM pg_tables
WHERE schemaname IN ('public', 'auth', 'storage')
ORDER BY schemaname, tablename;
"

함수도 확인

psql 'postgresql://postgres:postgres@localhost:54322/postgres' -c "
SELECT
  n.nspname as schema,
  p.proname as function_name
FROM pg_proc p
JOIN pg_namespace n ON p.pronamespace = n.oid
WHERE n.nspname = 'public'
ORDER BY function_name;
"

(4) 원격 Supabase 프로젝트로 복원

원격 데이터베이스 연결 정보 확인

로컬 테스트가 끝났으면 이제 원격 프로젝트로 복원하면 끝이다.

Supabase Dashboard > Project Settings > Database > Connection string

아까랑 똑같이 진행하는데 Direct 방식은 유료로 해야하니 Session pooler 나 Transaction pooler를 사용해서 진행하면 된다.

* Connection string 형식

postgresql://postgres.[project-ref]:[password]@aws-1-[region].pooler.supabase.com:5432/postgres

SQL 파일 -> 원격 Supabase 적용

로컬에서 사용한 SQL 파일을 그대로 원격에 적용한다.

# 전체 SQL 적용
psql 'postgresql://postgres.[project-ref]:[password]@aws-1-[region].pooler.supabase.com:5432/postgres' \
  -f postgres_restore.sql 2>&1 | tee remote_restore.log

# Storage 메타데이터 적용
psql 'postgresql://postgres.[project-ref]:[password]@aws-1-[region].pooler.supabase.com:5432/postgres' \
  -f storage_objects_fixed.sql 2>&1 | tee remote_storage.log

로컬과 마찬가지로 에러 메시지 많이 나오는데 무시하면 된다.

대시보드 복원 확인

복원 후 커스텀 함수 및 트리거 등 제대로 생성되었는지 확인한다.

Dashboard에서 확인

Database > Functions에서 함수 목록 확인
SQL Editor에서 직접 쿼리 실행

SQL Editor에서 함수 조회

-- 함수 목록 조회
SELECT 
  n.nspname as schema,
  p.proname as function_name,
  pg_get_function_arguments(p.oid) as arguments
FROM pg_proc p
JOIN pg_namespace n ON p.pronamespace = n.oid
WHERE n.nspname = 'public'
ORDER BY function_name;

특정 함수의 전체 정의를 확인하려면 아래 쿼리를 실행한다.

-- 특정 함수 정의 확인
SELECT pg_get_functiondef(oid)
FROM pg_proc
WHERE proname = 'hybrid_search';

Storage 파일 업로드 (S3 버킷)

주의: 데이터베이스에는 메타데이터(storage.objects 테이블)만 복원되고 실제 파일은 별도로 업로드해야 한다.

복원할 때가 아니라 기존에 supabase에 파일 업로드할 때도 버킷을 사용했기 때문에 똑같이 해주면 된다.

방법 1: Dashboard 사용

Supabase Dashboard > Storage
각 버킷(rag, customer_file 등) 선택
파일 수동 업로드

방법 2: Supabase CLI, Storage API 키 사용 (데이터 많을 때)

(5) 애플리케이션에서 테스트

환경 변수 설정

이제 애플리케이션이 새 프로젝트를 바라보도록 환경 변수를 바꿔준다.

Node.js 프로젝트 기준으로 .env 파일을 아래처럼 수정함.

# .env 파일
MODE=development
SERVER_PORT=3000

# Supabase Configuration
SUPABASE_URL=https://[project-ref].supabase.co
SUPABASE_ANON_KEY=your_anon_key_here
JWT_SECRET=your_jwt_secret_here

# OpenAI API Key
OPENAI_API_KEY=your_openai_api_key

# 기타 API Keys
API_2_PDF=your_api2pdf_key
KYUNGRINARA_API_KEY=your_kyungrinara_key

Supabase 대시보드 API Key 위치

Supabase Dashboard > Settings > API

anon key: 클라이언트에서 사용하는 공개 키
service_role key: 서버 전용, 모든 권한 (클라이언트 노출 절대 금지)
JWT Secret: 토큰 검증용

연결 테스트

// supabase-test.js
const { createClient } = require('@supabase/supabase-js');
require('dotenv').config();

const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
);

async function testConnection() {
  const { data, error } = await supabase
    .from('documents')
    .select('*')
    .limit(1);

  if (error) {
    console.error('연결 실패:', error);
  } else {
    console.log('연결 성공!');
    console.log('데이터:', data);
  }
}

testConnection();

실행

node supabase-test.js

4. 결과

힘든 과정을 거쳐서 2024년도에 RAG 테스트 프로젝트에 사용한 데이터를 전부 복구했다!

복원된 데이터

사용자: 3명 (auth.users)
문서: 124개 (public.documents)
욕설 데이터: 8,037개 (public.profanity_data)
가이드 문서: 409개 (public.combine_guide_documents)
이미지 메타데이터: 248개 (public.image_metadata)
함수: 207개 (hybrid_search 등 커스텀 함수 포함)

Storage 확인

버킷: 2개 (customer_file, rag)
객체 메타데이터: 520개
실제 파일: 48.9MB

5. 정리

Supabase 프리티어 90일 비활성으로 일시정지된 프로젝트를 백업 파일로 복원하는 과정을 정리했다.

다른 무료 호스팅들의 경우 멈춤 상태로 있어도 그냥 활성화하면 작동하는 경우가 많아서 크게 신경 안썼는데 Supabase는 정지시켜버려서 당황했다.. 그리고 다시 복원하는데 조금 애를 먹었다.

2024년도에 사내에서 LLM을 활용한 RAG 프로젝트 진행할 때 한창 Supabase 얘기가 많이 나와서 supabase로 먼저 테스트를 진행했었다. 최근에도 다양한 프로젝트에서 supabase를 많이 활용하는걸로 아는데 90일 비활성화 부분에 대해서는 잘 생각을 해봐야할 것 같다. 주기적으로 사용하지 않으면 잠겨버리니..

앞으로 진행한다면 로컬에 띄워두고 테스트하고 실제 배포 테스트할 때 원격 Supabase를 사용해야겠다.

핵심 포인트

무료 티어는 90일 비활성 시 일시정지
공식문서 방법은 에러로 실패할 수 있음
pg_restore로 SQL 뽑아서 수정 후 복원하면 안정적
백업 파일에 맞게 PostgreSQL 버전 맞춰야 함
로컬 테스트 후 원격 복원
Connection String은 Session pooler 사용 (Direct는 IPv4 유료)
버킷에 업로드한 Storage 파일은 별도 업로드 필요 (메타데이터만 복원)
복원 후에 Custom Functions 동작 확인 필수 (hybrid_search 같은 것들)

* 참고 링크

패스트캠퍼스 환급챌린지: 김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential 강의 최종 후기

hangyeoldora — Tue, 9 Sep 2025 23:36:06 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4kQ0Ahe

강의 최종 후기

1. 환급챌린지에 참여한 이유는 무엇이었는지?

현재 저는 개발자로 일을 하고 있습니다. 일을 하다 보면 새로운 기술을 접하거나 재미있고 관심있는 주제를 마주할 때가 많아 퇴근 후에는 '공부 좀 해야겠다'라는 생각이 자주 들곤 했습니다. 그러나 막상 집에 돌아오면 회사에서 회사업무로 인해 피곤하기도 하고 쉬고 싶어서 공부를 잘 안하게 되기도 하고 공부 의지도 잘 생기지 않았습니다. 특히 야근이라도 있는 날에는 집에 와서 쉬고 싶다는 생각만 들어서 공부는 늘 뒷전으로 밀릴 때가 많았습니다. 그러다가 뭔가 꾸준하게 스스로 학습할 수 있는 환경과 동기가 필요하다고 느꼈습니다.
그렇게 고민하다가 패스트캠퍼스에서 진행하는 환급 챌린지를 알게 되었습니다. 패스트캠퍼스는 이전에 회사 비즈니스 관련 강의를 수강했을 때도 만족도가 높았고, LLM 관련 강의 역시 구매해서 들은 경험이 있어 이미 신뢰하는 플랫폼이었습니다. 제가 원하는 분야의 강의도 많았고 실제 현업에서 일하시는 분들이 강의하는 것도 많아서 실무와 연결되는 콘텐츠가 많다는 점도 마음에 들었습니다. 그래서 강의라고 한다면 패스트캠퍼스에 대한 믿음이 있었는데 환급 챌린지는 새로웠기 때문에 관심이 갔습니다.
환급 챌린지의 방식은 50일 동안 정해진 미션을 수행하고, 학습한 내용을 블로그에 꾸준히 기록하고 제출하는 것이었습니다. 이 구조를 접했을 때 뭔가 꾸준히 공부도 하면서 기록할 수 있겠다는 생각이 바로 들었습니다. 그동안 공부를 하고 싶다는 의지는 있었지만 스스로 기간을 정해 꾸준하게 끌고 나가는 것이 쉽지 않았습니다. 하지만 환급챌린지는 50일이라는 기간 동안 매일 목표를 수행해야 하고 그 과정에서 기록까지 남겨야 하니 자연스럽게 꾸준함을 유지할 수 있도록 짜여있었습니다. 무엇보다 돈! 환급이라는 보상 구조가 큰 동기부여 요소가 되었기 때문에 학습을 꾸준하게 이어가게 해준다고 느꼈습니다. 이렇게 외부적인 압박과 동시에 성취감을 줄 수 있는 프로그램이 꼭 필요했기 때문에 바로 환급챌린지에 참여하게 되었습니다.
챌린지에 참여하면서 일정 기간 동안 하루하루 강제로라도 집중적으로 학습할 수 있었습니다. 그리고 블로그에 기록하기 위해 강의 내용도 정리하면서 자연스럽게 반복 학습도 되었기 때문에 좋았습니다. 그리고 일회성이 아니라 50일이라는 기간동안 반복했기 때문에 하루에 길진않더라도 꾸준히 공부하는 습관도 만들 수 있었습니다.

2. 왜 이 강의를 선택하게 되었는지? (무엇을 얻고 싶었는지, 실제로 얻은 것은 무엇인지)

현재 개발자로 일하면서 자바스크립트를 실무에서 자주 사용하고 있지만 가끔 기본 개념에 대한 이해가 부족하다는 생각과 아쉬움이 크게 다가오곤 했습니다. 빠르게 발전하는 자바스크립트 생태계 속에서 새로운 라이브러리와 프레임워크는 끊임없이 쏟아져 나오고 이를 빠르게 적용하며 프로젝트를 진행하기도 했습니다. 하지만 개발을 진행하면 문법이나 사용법을 넘어 자바스크립트와 타입스크립트에 대한 기반 개념이 부족하다는 생각이 들었고 단순히 활용에 그치는 개발자가 아니라 개념을 제대로 이해하고 응용할 수 있는 개발자가 되고 싶다는 생각을 가지게 되었습니다.
그러다가 환급챌린지 강의목록을 보다가 눈에 들어온 것이 바로 ‘김민태의 프론트엔드 아카데미’ 강의였습니다. 사실 자바스크립트 기초 강의라고 들었을 때는 루즈하지 않을까 걱정도 했습니다. 하지만 강의를 진행하시는 분이 배달의민족 프론트엔드 개발그룹장으로 재직 중이시라고 해서 마음이 크게 끌렸습니다. 이미 업계에서 많은 경험을 하시고 유명한 기업에서 그룹장으로 계신 분께서 직접 강의를 한다는 사실은 신뢰도를 높여주었고, 흔히 듣던 강의가 아니라 새롭고 실무와도 연결된 인사이트와 지식, 노하우를 얻을 수 있을 것 같아 기대가 컸습니다. 그리고 회사에서 패스크캠퍼스 비즈니스 전용 강의를 제공해줘서 듣기도 했고, LLM 관련 강의를 수강한 경험도 있어서 강의의 질이나 플랫폼에 대한 신뢰도도 많이 있었습니다. 그렇기 때문에 이 강의를 선택하게 되었습니다.

3. 이 강의만의 장점 (ex. 강사님의 강의력, 커리큘럼 등)

자바스크립트나 타입스크립트 기초 강의라고 하면 흔히 누구나 알고 있는 기본 문법이나 단순한 개념 정리를 떠올려서 지루하거나 진부하다고 생각할 수 있습니다. 저도 처음에는 완벽하게는 아니지만 그래도 실무에서 사용하고 있는 자바스크립트 그것도 맨 처음 개념 강의를 듣는게 맞는걸까 하는 걱정을 했습니다. 하지만 강의를 듣고 나니 그런 생각이 싹 사라졌습니다! 강사님께서는 단순한 개념뿐만 아니라 세부적인 디테일까지 짚어 주시며 설명해 주셨고, 실제로 개발을 하면서 어떻게 적용하고 활용하는지에 대한 부분도 말씀해주셔서 이해하기가 훨씬 수월했습니다. 그리고 컴퓨터 공학, 소프트웨어적인 관점에서 중요한 배경지식과 이를 연관지어 설명해주셨기 때문에 단순히 사용법만 아는 개발자가 아니라 원리를 이해할 수 있도록 설명해주셨습니다. 이런 강의 설명 덕분에 평소 부족하다고 느꼈던 자바스크립트,타입스크립트의 기초 개념을 보다 명확히 정리할 수 있었고 새로운 시각으로 바라보는 계기도 되었습니다.
또한 강사님은 말씀을 너무 잘하시다 보니 화법이나 설명하는 능력까지 배우고 싶었습니다. 정말 교수님처럼 지식도 술술 말씀하시지만 교양있게? 말씀을 차분하게 해주셔서 너무 좋았습니다.
강의 전반의 커리큘럼도 잘 되어 있어서 처음 학습을 시작하는 사람은 물론이고, 이미 현업에서 일하고 있는 개발자에게도 도움이 될 만한 내용들이 잘 정리되어 있었습니다.

4. 강의를 추천하고 싶은 사람은 누구인지?

자바스크립트를 기반으로 업무를 하고 있는 개발자는 물론이고 프로그래밍을 처음 배우고 싶은 학생들에게도 이 강의를 추천하고 싶습니다. 단순히 문법을 학습하는 수준을 넘어 자바스크립트와 타입스크립트의 개념을 깊이 있게 이해할 수 있도록 구성되어 있기 때문입니다. 강사님의 실무 경험과 컴퓨터 공학적 접근을 바탕으로 설명해주시기 때문에 이해도 잘 되고 체계적인 커리큘럼으로 기초부터 차근차근 쌓아갈 수 있습니다. 그렇기 때문에 이미 개발을 하고 있는 사람은 기초를 다시 다지며 부족한 부분을 보완할 수 있고 새로운 관점을 가질 수도 있고 초보자는 기반을 잘 다져서 나아갈 수 있는 좋은 기회가 될 것입니다!

5. 다음으로 듣고 싶은 강의는 무엇인지?

다음 강의로는 당연히 김민태 강사님의 프론트엔드 아카데미 2강을 가장 먼저 수강해보고 싶습니다. 이번 1강을 들으면서 강사님의 설명 방식과 커리큘럼 구성이 좋았다는 것을 느꼈기 때문에 이어지는 강의까지 모두 듣고 공부하고 싶다는 생각이 들었습니다. 개인적으로 강사님이 진행하시는 강의라면 전체 커리큘럼을 빠짐없이 다 들어보고 싶은 마음이 있습니다. 또한 이전에 LLM 관련 애플리케이션을 개발하면서 파이썬과 Node.js를 주로 다루었는데, 강의 목록 중에 spring 기반으로 LLM과 RAG 시스템을 개발하는 강의도 있어서 한 번 들어보고 싶다고 생각했습니다. Spring AI도 계속해서 발전하고 있기 때문에 꼭 한 번 들어보고 싶습니다. 이 밖에도 빅데이터 및 메시징 처리에 널리 쓰이는 Kafka나 테스트 주도 개발(TDD) 강의에도 많은 관심이 있습니다. 그리고 무엇보다 최근 가장 핫한 주제로 꼽히는 MCP 관련 강의까지 접해보고 싶어 차근차근 하나씩 수강해보고자 합니다.

6. 앞으로의 계획 (ex. 커리어 목표, 이직 목표, 자기계발 목표 등)

우선은 실무에서 자주 사용하는 자바스크립트와 타입스크립트 같은 언어에 대한 지식 기반을 더욱 단단히 다지고 싶습니다. 요즘 AI 기술이 빠르게 발전하고 있지만 기본기를 확실히 다져야 새로운 기술을 접할 때도 빠르게 흡수할 수 있다고 믿기 때문입니다. 여기에 더해 최근 급격히 발전하고 있는 인공지능 분야에도 꾸준히 관심을 두고 학습을 이어갈 계획입니다. 특히 LLM을 포함한 다양한 AI 기술은 하루가 다르게 새로운 시도가 나오고 발전하고 있기 때문에 공부하고 싶은 의욕이 큽니다! 더 나아가 최신 프레임워크와 아키텍처, 클라우드 환경에서의 서비스 운영까지 영역을 확장하여 개발자로서의 경쟁력을 높이는 것이 앞으로의 목표이고 최종적으로는 배운 것들을 바탕으로 실제 서비스와 애플리케이션 개발에 접목시키고 싶습니다.

* 학습 인증샷

학습 통계 기록

학습 - 1

학습 - 2

학습 - 3

마치며

이걸로 50일의 최종 환급챌린지가 끝났습니다.

좋은 경험을 했고 다음에도 기회가 있으면 참여하고 싶습니다.

패스트캠퍼스 환급챌린지 50일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Tue, 19 Aug 2025 23:47:40 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

운영 반영때문에 늦게 마쳤지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

50일차 공부 시작!

오늘 공부 시작 시간 (08.19 23:15)

오늘의 강의 주제는 '개념과 구조 - 이터러블, 이터레이터 프로토콜'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- 개념과 구조 - 이터러블, 이터레이터 프로토콜 -

* 이터러블의 의미

이터러블은 반복 가능한 구조를 가진 객체를 말한다. 자바스크립트에서 배열은 대표적인 이터러블이지만, 배열 말고도 다양한 이터러블이 존재한다. 예를 들어 Map, Set과 같은 자료구조가 있으며 제너레이터 함수를 통해 무한히 값을 생산하는 이터러블 또한 만들 수 있다. 이런 구조들은 모두 공통적으로 이터레이션 프로토콜을 기반으로 동작한다. 따라서 자바스크립트에서 반복 가능성을 제공하는 핵심 원리는 바로 이 프로토콜에 있다.

const myIterable = {};

myIterable[Symbo.iterator] = function* () {
	let i = 1;
	while(i <= 100) {
		yield i++;
	}
};

for (const n of myIterable) {
	console.log(n);
}

* 이터러블 프로토콜

이터러블 프로토콜은 객체가 반복 가능한 형태를 따르도록 규정한 약속이다. 이 프로토콜을 따르는 객체는 Symbol.iterator라는 키를 구현해야 한다. 이 메서드는 이터레이터를 반환하고, 반환된 이터레이터는 for...of 구문과 같은 반복 구조에서 순차적으로 값을 꺼낼 수 있도록 한다. 쉽게 말해 이터러블은 "반복할 수 있는 성질"을 제공하는 약속이며, 자바스크립트 엔진은 이 약속을 기준으로 루프와 같은 기능을 해석한다.

* 이터레이터 프로토콜

이터레이터 프로토콜은 이터러블 객체에서 실제로 값을 하나씩 꺼낼 수 있는 동작을 정의한다. 이터레이터는 next 메서드를 반드시 제공해야 하고, 이 메서드는 두 가지 속성을 가진 객체를 반환한다. 첫째는 value로 현재 반환되는 값이고, 둘째는 done으로 반복이 끝났는지를 나타내는 불리언 값이다. done이 true가 되면 더 이상 반복할 값이 없음을 의미한다. 제너레이터 함수가 반환하는 제너레이터 객체 또한 동일한 구조를 가지고 있으며, 이는 제너레이터가 이터레이터 프로토콜을 충실히 구현한 대표적인 예라고 할 수 있다.

* 제너레이터와 심볼 이터레이터

직접 이터러블을 정의할 때는 Symbol.iterator 키를 객체에 구현하면 된다. 이 값으로 제너레이터 함수를 넣으면 해당 객체를 for...of 문에서 바로 사용할 수 있다. 제너레이터는 내부적으로 이터레이터를 반환하기 때문에 이 방식이 자연스럽게 동작한다. 이는 자바스크립트가 객체에 반복 가능성을 부여하는 방법을 명확히 보여주는 사례다.

자바스크립트는 배열, 문자열, Map, Set을 포함해 기본적으로 다양한 이터러블 구조를 제공한다. 이러한 구조는 언뜻 단순해 보이지만 반복 처리의 기반을 이루는 매우 중요한 규칙이다. 따라서 이터러블과 이터레이터 프로토콜을 이해하면 반복 로직을 유연하게 설계할 수 있고, 사용자 정의 객체에도 반복 가능성을 부여할 수 있다. 결과적으로 자바스크립트의 동작 원리를 깊이 이해하는 데 큰 도움이 된다.

52강 수강 완료

오늘 공부 종료 시간 (08.19 23:32)

52강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 52강 공부 완료!!

이번 강의를 통해 이터러블, 이터레이터에 대한 내용을 배웠다. 이터러블과 이터레이터 프로토콜은 자바스크립트 반복 구조의 핵심 원리다. 이 개념은 자바스크립트를 더 깊이 있고 효율적으로 다루기 위한 기초이기 때문에 리마인드하면서 다시 한 번 공부해야겠다.

패스트캠퍼스 환급챌린지 49일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Mon, 18 Aug 2025 20:45:54 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

피곤한 월요일에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

49일차 공부 시작!

오늘 공부 시작 시간 (08.18 20:30)

오늘의 강의 주제는 '개념과 구조 - 프로토콜'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- 개념과 구조 - 프로토콜 -

* 프로토콜의 기본 의미

프로토콜은 규약을 의미한다. 소프트웨어 분야에서 프로토콜이라고 하면 보통 HTTP 같은 네트워크 통신 규약이 먼저 떠오른다. 예를 들어 웹 환경에서 프론트엔드는 서버와 데이터를 주고받기 위해 HTTP를 사용하고, 그와는 다른 특성을 가진 WebSocket을 활용해 실시간 양방향 통신을 구현하기도 한다. 채팅 서비스나 실시간 알림, 푸시 시스템이 바로 그 대표적인 예시다. 이런 맥락에서 프로토콜은 단순히 데이터 교환의 방식일 뿐 아니라 시스템이 안정적으로 협력하기 위한 최소한의 약속이 된다.

* 프로토콜의 확장된 관점

소프트웨어 방법론적인 관점에서 프로토콜은 훨씬 더 넓게 해석될 수 있다. 클래스 역시 일정한 규격을 가진 일종의 프로토콜로 볼 수 있다. 클래스가 제공하는 속성과 메서드는 개발자가 특정한 방식으로 사용하도록 만들어둔 약속이다. 특히 추상 클래스나 인터페이스는 이러한 성격을 더욱 명확히 보여준다. 구현체가 반드시 특정 메서드를 오버라이드하도록 강제하는 것은 결국 어떤 협약을 지키도록 만드는 과정이다.

* 도구와 프로토콜

현대의 개발 도구와 프레임워크도 프로토콜을 기반으로 확장성을 확보한다. 예를 들어 웹팩은 다양한 기능을 커스터마이징하기 위해 로더와 플러그인 아키텍처를 제공한다. 개발자가 웹팩의 플러그인 규약을 따르면 새로운 기능을 추가해도 기존 생태계와 잘 어우러질 수 있다. 로더 프로토콜 역시 같은 맥락이다. 이를 따르면 누구든 웹팩을 위한 맞춤형 빌드 기능을 제작할 수 있고, 이를 통해 생태계가 거대하게 확산될 수 있다. 마찬가지로 Node.js 기반의 Express 프레임워크 또한 미들웨어라는 확장 포인트를 제공한다. 그 자체가 일종의 프로토콜이며, 덕분에 수많은 라이브러리와 도구가 Express 위에서 협업할 수 있는 것이다.

* 프로토콜과 아키텍처적 시야

앱을 실제로 개발할 때 중요한 것은 단순히 기능을 구현하는 수준을 넘어서는 것이다. 규모가 커지는 프로젝트일수록 단순히 코드의 양을 늘리는 방식은 유지보수성과 협업 측면에서 한계가 분명하다. 오히려 볼륨이 큰 앱일수록 기능의 복잡도를 줄이고 협업을 용이하게 하기 위해 규격화된 아키텍처가 필수적이다. 이때 프로토콜을 기반으로 한 함수, 클래스, 또는 인터페이스의 도입은 복잡성을 제어하고 구조적인 일관성을 유지하는 데 중요한 역할을 한다. 이는 고급 개발자로 성장하기 위한 핵심 역량이기도 하다.

* 프로토콜을 바라보는 관점

프로토콜은 단지 언어나 프레임워크가 제공하는 기법에 머무르지 않는다. 추상화를 잘하는 능력 외에도, 문제 도메인에 맞는 프로토콜을 설계하고 이를 통해 협업이 가능한 시스템을 만드는 능력이 고급 역량으로 요구된다. 따라서 새로운 도구를 학습하거나 낯선 라이브러리를 접할 때는 단순히 사용법을 익히는 것을 넘어서, 그 안에 내장된 프로토콜이 무엇인지에 주목하는 것이 좋다. 어떤 규칙을 지켜야 하고, 개발자가 의도한 확장 포인트는 무엇인지, 그리고 그 안에서 내가 구현할 수 있는 부분은 어디인지를 탐구하는 습관은 구조적 사고를 넓히는 데 큰 도움이 된다.

51강 수강 완료

오늘 공부 종료 시간 (08.18 20:38)

51강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 51강 공부 완료!!

이번 강의에서는 프로토콜에 대한 내용을 다루었다. 흔히 알듯이 통신 규약 정도로 생각하고 있었는데 이를 소프트웨어 방법론적인 관점에서 말씀해주셔서 좋았다. 결국에 프로그램을 개발할 때 프로토콜과 같은 규약, 규칙을 정하고 추상화부터 올바르게 전체를 설계하고 구성하는 것이 중요하다는 것을 배웠다!

혼공학습단 14기 활동 회고 (6주의 시간)

hangyeoldora — Sun, 17 Aug 2025 22:11:37 +0900

혼공학습단 14기 회고록

학생 때 데이터와 머신러닝을 배운 후 관련 공부가 끊겼지만 최근 LLM과 랭체인으로 RAG 시스템을 개발하며 머신러닝과 딥러닝 기초를 다시 공부하고 싶어졌었다. 그런데 회사 업무가 바빴던 것도 있지만 퇴근하더라도 피곤하고 새로운 걸 공부하는게 힘든 경우가 많았다. 그러다가 혼공학습단 14기를 보게 되었고 마침 혼공머신이라는 책이 있어서 신청을 했었다.

여름방학 기간 1주를 포함하여 총 7주 동안 학습단을 진행했는데 중간중간 턱이 붓거나 감기에 걸리는 등 이슈가 있었다.. 하지만 매주 정해진 목표가 있었기 때문에 의욕이 생겨서 공부를 진행할 수 있었다. 그리고 일주일이라는 기간동안 책을 읽고 실습을 할 수 있었기 때문에 시간도 여유로웠던 것 같다. 물론 오랜만에 해서 까먹은 것도 많고 새로운 것도 있어서 어려운 부분이 많았지만 목표와 숙제가 있어서 잘 끝마칠 수 있었다.

최근에는 LLM과 랭체인 기반의 시스템 개발 외 개인적으로 CNN이나 BERT를 이용한 토이 프로젝트 개발을 진행 중이다. 혼공머신 덕분에 지식도 쌓고 더 나아가 토이 프로젝트도 진행할 수 있었다.

한빛미디어의 혼공머신

혼공학습단을 하면서 나름 공부가 잘 진행되었기 때문에 이번에 회사에서 팀 스터디를 진행하기로 했다! 혼공학습단의 스케줄 표를 참고하여 스터디 목표를 정했고 룰은 아무래도 사내 스터디이기 때문에 벌금 등 조금은 엄격한? 룰을 정했다.

여러 책을 다같이 검토했었는데 그중에 오랠리 책이 이전에 좋았던 기억이 있었기 때문에 선정하였다.

첫 번째로는 최근 AI 붐이 심화되고 있는데 이에 대비하고자 LLM에 대한 전반적인 지식이 담긴 핸즈온 LLM을 선택하였다. 지난 주에 1주차로 1장을 진행하였는데 어려운 내용도 있었지만 설명도 잘 되어 있었기 때문에 다들 잘 진행할 수 있었다.

한빛미디어의 핸즈온 LLM

두 번째로는 팀에서 사용하고 있는 언어인 자바스크립트와 리액트에 대해 다같이 좀 더 공부하고자 한빛미디어의 '자바스크립트 + 리액트 디자인 패턴' 책을 선정하였다. 안티 패턴부터 최신문법과 JS 디자인 패턴 등 필요한 내용들이 꽉꽉 차있어서 해당 책으로 정하였다.

한빛미디어의 자바스크립트 + 디자인 패턴

마치며

혼공학습단 덕분에 혼자 하기 어려운 공부를 매주 목표에 맞춰 꾸준히 할 수 있었다. 머신러닝과 딥러닝에 대한 지식을 다시 정리하고 확장할 수 있었으며, 무엇보다 꾸준한 학습 습관을 갖게 되었다. 그 결과, 회사에서도 사내 스터디를 구성하여 혼공학습단과 같은 일정으로 함께 공부하며 지식을 공유하고 있다. 이처럼 좋은 학습 환경과 습관을 만들어주신 혼공학습단과 매주 과제 점검과 격려를 해주신 족장님께 깊이 감사드린다. 앞으로도 이런 기회가 있다면 꼭 다시 참여하고자 한다.

감사합니다!

[혼공머신] 6주차_딥러닝

hangyeoldora — Sun, 17 Aug 2025 21:47:05 +0900

챕터별 상세 내용은 다시 정리 예정..

이번 주 목표와 이슈

이번 주 혼공머신의 공부 목표는 'Chapter 07. 딥러닝' 을 공부하는 것이다.

이번 주에는 회사 운영 반영건때문에 바쁜 것 외에는 몸에 큰 이상이 없어서 좋은 상태로 혼공머신을 공부했다. 드디어 딥러닝에 대한 부분이 나와서 재미있게 공부하고 실습을 했다.

* 혼공단이란?

한빛미디어 에서 운영 혼공학습단은 각자 책을 정해 정해진 기간 동안 읽고, 매주 내용을 정리해 블로그에 올리며, 그 내용을 함께 공유하는 프로젝트

공부 내용

Chapter 07. 딥러닝

07-1 '인공 신경망'

* 패션 MNIST

머신러닝을 처음 접하는 사람들은 주로 붓꽃 데이터셋을 사용해서 학습한다. 딥러닝 분야에서는 MNIST 데이터셋이 자주 활용된다. MNIST는 0부터 9까지 손글씨 숫자 이미지로 구성된 데이터인데, 패션 MNIST는 여기에 패션 아이템 이미지를 넣은 버전이다. 크기와 데이터 개수는 오리지널 MNIST와 동일하나, 숫자 대신 신발, 바지, 셔츠 등 여러 패션 아이템 이미지로 구성되어 있다.
이 데이터셋은 텐서플로 라이브러리를 사용해서 손쉽게 불러올 수 있다.

이미지 데이터를 딥러닝 모델에 그대로 넣게 되면, 특성 값의 범위가 크기 때문에 학습에 어려움이 따른다. 예를 들어, MNIST 이미지의 각 픽셀 값은 0부터 255까지의 정수다. 이 값을 255로 나누어 0과 1 사이 값으로 정규화하면 학습이 훨씬 수월해진다. 이런 정규화는 이미지를 전처리할 때 널리 쓰는 방법이다.

* 인공 신경망(Artificial Neural Network, ANN)

인공 신경망은 입력을 받아 여러 층을 거쳐 출력을 내는 구조로 구성되어 있다. 가장 기본 구조는 입력층, 은닉층, 출력층으로 나뉜다.
신경망의 각 원소는 뉴런 또는 유닛이라고 부르며, 실제 계산은 선형 연산으로 이뤄진다. 입력층은 데이터를 그대로 전달하며, 특별한 계산 과정이 없지만 보통 입력층이라고 칭한다.
신경망의 마지막 값이 나오는 층을 출력층이라고 한다. 신경망은 입력부터 출력까지 일련의 계산을 수행해 최종적으로 클래스를 예측해낸다.
신경망 구조는 1943년 워런 매컬러(McCulloch)와 월터 피츠(Pitts)가 제안한 최초 인공 뉴런 모델까지 거슬러 올라간다. 이 모델은 생물학적 뉴런에서 영감을 받아 설계됐다.

* 딥러닝과 심층 신경망

딥러닝은 인공 신경망과 거의 동의어처럼 사용된다. 여러 층을 가진 인공 신경망을 심층 신경망(Deep Neural Network, DNN)이라고 하며, 여러 은닉층을 두어 복잡한 패턴을 학습할 수 있다.

* 텐서플로와 케라스

텐서플로는 구글에서 2015년 공개한 딥러닝 오픈소스 라이브러리이다. 이와 함께 딥러닝에 대한 관심도 크게 늘었다. 2016년 알파고가 이세돌을 이긴 이후로 더욱 많은 사람들의 관심을 받았다.
텐서플로에는 저수준 API와 함께 고수준 API가 제공되는데, 그 대표가 바로 케라스다. 케라스는 2015년 프랑소와 숄레가 만든 딥러닝 라이브러리로, 텐서플로와 연동되어 점차 통합이 진행됐다.
딥러닝 모델은 GPU 연산을 적극 활용하고, 대규모의 벡터, 행렬 곱셈과 덧셈을 빠르게 처리할 수 있는 특징이 있다. 케라스는 자체적으로 GPU 연산을 수행하지 않고, 텐서플로나 CNTK, 씨아노 등의 라이브러리를 연산 백엔드로 쓴다. 최근에는 멀티-백엔드 케라스가 2.3.1 이후 더 이상 개발되지 않으며, 텐서플로와 케라스가 사실상 같은 의미로 사용된다.

* 케라스의 레이어와 신경망 구현

케라스에는 다양한 신경망 층이 준비되어 있다. 그 중 가장 기본적인 것이 밀집층(Dense Layer)이다. 밀집층이란 입력층의 모든 뉴런과 출력층의 모든 뉴런이 서로 연결되는 구조이며, 이를 완전 연결층(Fully Connected Layer)이라고 부르기도 한다.
각 층의 출력에 적용되는 함수를 활성화 함수(Activation Function)라고 한다. 대표적으로 시그모이드, 소프트맥스 등이 있다. 신경망 훈련에는 fit() 메서드를 활용하며, 입력 데이터와 타깃을 지정하고 학습 반복 횟수(epochs) 등의 매개변수를 설정하면 된다.

* 실습

인공신경망 - 1

인공신경망 - 2

07-2 '심층 신경망'

입력층과 출력층 사이에 위치한 모든 층을 은닉층이라 한다. 이 은닉층에는 시그모이드, 렐루(ReLU) 등 다양한 활성화 함수가 사용된다.
예를 들어 dense1이라는 이름의 은닉층에 100개의 뉴런을 두고, 시그모이드 활성화 함수를 지정할 수 있다. 출력층인 dense2에는 10개의 뉴런과 소프트맥스 활성화 함수를 써서 다중 클래스 분류 문제를 해결한다.

심층 신경망 만들기
여러 층을 Sequential 클래스를 통해 쌓으면 심층 신경망(DNN)을 만들 수 있다.

활성화 함수: 렐루(ReLU)
초기에는 시그모이드 함수가 많이 쓰였으나, 층이 깊어질수록 학습이 어려워지고 성능도 저하되는 문제가 있었다. 이를 개선하고자 렐루 함수가 널리 사용되고 있다. 렐루 함수는 입력이 0보다 크면 그대로 값을 반환하고 0 이하는 0으로 만든다. 이로써 더 깊은 층에서도 효율적으로 학습이 진행된다.

옵티마이저(Optimizer)
신경망에는 다양한 하이퍼파라미터가 있는데, 층의 수, 각 층의 뉴런 수, 활성화 함수 등이 모두 하이퍼파라미터다.
모델을 컴파일할 때 compile() 메서드를 활용하며, 최적화 알고리즘(옵티마이저)을 설정한다. 케라스는 RMSprop, SGD 등 다양한 옵티마이저를 제공한다.
SGD 클래스에는 모멘텀(momentum)이나 네스테로프(Nesterov)와 같은 고급 옵션도 포함되어 있어 하이퍼파라미터를 조절할 수 있다.

* 실습

심층 - 1

심층 -2

07-3 '신경망 모델 훈련'

* 손실 곡선

모델의 훈련 상황을 시각적으로 확인하려면 손실 곡선을 살펴보면 된다.
verbose 매개변수로 훈련 출력물을 제어할 수 있다. 기본값은 1인데, 이를 2로 바꾸면 진행 막대 없이 텍스트만 보여준다. 0으로 두면 훈련 로그를 출력하지 않는다.

* 검증 손실

과대적합이나 과소적합을 판별하려면 훈련 세트와 검증 세트 손실을 모두 확인해야 한다.
딥러닝 모델은 정확도가 아닌 손실 함수(loss function)를 최적화하며, 손실이 줄었다고 해서 정확도가 반드시 비례해서 오르진 않는다. 따라서 모델 성능을 평가할 때는 손실 함수의 값을 함께 고려하는 것이 좋다.

* 드롭아웃(Dropout)

드롭아웃은 신경망의 일부 뉴런을 임의로 꺼서 과대적합 문제를 완화하는 정규화 기법이다. 이는 제프리 힌턴이 제안했다. 드롭아웃은 훈련 중에만 활성화되며, 테스트 시기에는 모든 뉴런을 활용한다.

* 콜백(Callback)과 조기 종료

콜백은 훈련 중 특정 시점에 작업을 자동으로 실행하도록 하는 옵션이다. 케라스는 keras.callbacks 패키지에 여러 콜백 기능을 제공한다. fit() 메서드의 callbacks 파라미터에 리스트로 넣어서 사용할 수 있다.
훈련 과정에서 검증 점수가 상승하면, 그 이후부터는 과대적합이 커질 수 있으므로 미리 훈련을 중단하는 것이 좋다. 이런 기법을 조기 종료(early stopping)라고 하며, 딥러닝에서 자주 활용된다.

이상으로 인공 신경망, 딥러닝 모델의 기초 개념과 케라스, 텐서플로를 활용한 기본 딥러닝 모델 구현 및 하이퍼파라미터 설정, 손실 곡선 시각화, 드롭아웃과 콜백, 조기 종료 등 실제 적용 가능성을 살펴봤다. 앞으로는 예제 구현이나 실전 문제를 통해 이해를 확장할 계획이다.

* 실습

신경망 - 1

신경망 - 2

기본 숙제

문제: '어떤 인공 신경망의 입력 특성이 100개이고 밀집층에 있는 뉴런 개수가 10개일 때 필요한 모델 파라미터의 개수는 몇개인가요?'

인공 신경망에서 밀집층의 파라미터 개수 계산 시에는 가중치에 절편(편향)을 더한다.

가중치는 특성 수인 100과 뉴런 개수인 10개를 곱해서 1000이 되고 이에 뉴런당 1개의 절편을 가지고 있으므로 총 10개해서 전체 1010개의 파라미터 개수가 된다.

마치며

이번 챕터에서는 인공 신경망의 기본 개념부터 심층 신경망 구성, 활성화 함수, 옵티마이저, 그리고 모델 훈련 과정까지 체계적으로 배웠다. 특히 케라스와 텐서플로를 활용한 실전 구현 방법을 익히면서 딥러닝의 전체 흐름을 이해할 수 있었다. 앞으로 다른 실습을 통해서 더 잘 이해할 수 있도록 해야겠다.

패스트캠퍼스 환급챌린지 48일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Sun, 17 Aug 2025 16:17:26 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

일요일에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

48일차 공부 시작!

오늘 공부 시작 시간 (08.17 15:59)

오늘의 강의 주제는 '개념과 구조 - 순회'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- 개념과 구조 - 순회 -

* 순회의 의미

프로그래밍에서 순회라는 개념은 데이터를 반복적으로 접근하면서 특정한 연산을 수행하는 과정을 의미한다. 배열이나 객체와 같은 자료 구조는 여러 개의 값을 담고 있는데, 그 안에서 원하는 방식으로 값 하나하나를 꺼내어 처리하는 동작이 바로 순회다. 순회는 데이터 처리 과정 전반에서 기본이 되는 패턴이며, 단순히 값을 변환하거나 필터링하는 작은 작업부터 더 복잡한 연산에 이르기까지 폭넓게 활용된다.

* 명령형 순회와 함수형 순회

- 실습 코드

// 명령형
cosnt arr = [];
for (const n of [1, 2, 3, 4]) {
	arr.push(n * 2);
}

// 함수형
const arr2 = [1, 2, 3, 4].map(n => n * 2);

const arr3 = [1, 2, 3, 4]
	.map(n => n * 3)
	.filter(n => n % 2 !== 0)
	.map(n => `<li>${n}</li>`)

배열을 순회하는 방법에는 크게 두 가지 방식이 있다. 첫 번째는 명령형 방식으로서, 반복문을 직접 작성하여 실행 흐름을 하나하나 명시하는 방법이다. for of 구문을 이용해 배열을 순회하면서 연산 결과를 새로운 배열에 담는 전형적인 패턴이 이에 해당한다. 이 방식은 실행 과정이 눈에 잘 들어오고 직관적이지만, 로직이 길어지기 쉽고 조건이나 변환 과정을 재활용하기 어렵다는 단점이 있다.

두 번째는 함수형 프로그래밍 스타일로, 배열의 메서드인 map, filter 같은 고차 함수를 활용한다. 이 방식은 조건식과 변환 로직을 함수의 형태로 캡슐화하기 때문에 코드가 훨씬 간결해지고, 작은 단위의 연산을 쉽게 조합할 수 있다는 특징을 가진다. 결과적으로 데이터 흐름을 선언적으로 표현할 수 있어 코드의 구조가 더 명확해진다.

* 연산의 조합과 체이닝

순회가 단순한 변환 하나로 끝나지 않을 때도 많다. 예를 들어 특정 연산으로 값을 변환한 뒤, 조건을 적용해 일부 항목만 남기거나, 다시 다른 형태로 변환하는 식이다. 이런 과정을 함수형 스타일에서는 메서드 체이닝을 통해 직관적으로 표현할 수 있다. map으로 변환하고 filter로 걸러낸 뒤, 다시 map으로 특정한 템플릿을 적용하는 식이다. 각각의 연산이 작은 단위로 분리되어 있기 때문에 재사용이 가능하고, 로직의 구성 또한 분명해진다.

* 순회의 핵심 포인트

중요한 점은 순회의 핵심이 어떤 방식으로 동작하는지 파악하는 데 있다. 명령형 코드에서는 세세한 절차를 일일이 제어하는 대신 직접적인 실행 과정을 쉽게 이해할 수 있으며, 함수형 코드에서는 데이터 흐름을 변환 규칙에 따라 설계하고 이를 조립하듯 결합한다. 어느 방식이든 결국 동일한 연산을 수행할 수 있지만, 문제의 복잡성이 커질수록 함수형 방식이 재활용성과 유지보수 측면에서 더 유리하다.

실제로 개발에서 배열 순회는 매우 빈번하게 등장하는 패턴이므로 함수형 프로그래밍에 익숙해지는 것이 필수적이다. 단순히 문법을 외우는 수준을 넘어 데이터 변환과 조합의 흐름을 이해하고 체이닝을 활용하는 습관을 들이면 반복적인 문제 해결 속도가 빨라지고 코드 품질도 높아진다. 따라서 순회를 단순한 반복이 아닌 작은 연산 단위를 체계적으로 결합하는 아키텍처적 관점에서 이해하는 것이 중요하다.

50강 수강 완료

오늘 공부 종료 시간 (08.17 16:07)

50강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 50강 공부 완료!!

이번 강의에서는 순회에 대해 배웠다. 배열을 순환하는 순회는 워낙 많이 쓰기 때문에 해당 내용에 대해 잘 설명해주셔서 좋았다. 작은 단위의 연산으로 나누고 재활용성을 높이며 각각의 노드로 나눌 수 있는 함수형 프로그래밍을 잘 써야하는 것에 대해 알 수 있었다.

패스트캠퍼스 환급챌린지 47일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Sat, 16 Aug 2025 23:42:09 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

너무 더운 날씨에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

47일차 공부 시작!

오늘 공부 시작 시간 (08.16 23:21)

오늘의 강의 주제는 '개념과 구조 - API'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- API -

Web API는 자바스크립트를 기반으로 웹 애플리케이션을 개발할 때 활용할 수 있는 폭넓은 도구 집합이다. 실제로 브라우저 환경에서 제공되는 API는 방대하고, MDN 문서를 살펴보면 사전처럼 나열된 수많은 기능들을 확인할 수 있다. API는 단순한 유틸리티부터 시스템 자원 접근까지 다양한 범위를 아우르며, 상황에 맞게 선택적으로 활용할 수 있다.

* 스토리지 API

스토리지 API는 브라우저에서 데이터를 클라이언트 측에 저장하기 위해 제공되는 기능이다. 개발자 도구의 애플리케이션 탭을 통해 로컬 스토리지, 세션 스토리지, IndexedDB, Web SQL, 쿠키 등 다양한 저장소를 확인할 수 있다. 이 중 IndexedDB와 Web SQL은 데이터베이스 기능을 제공하지만, 클라이언트 단에서 대규모 데이터를 다루는 경우가 드물기 때문에 일반적인 웹 애플리케이션에서는 잘 쓰이지 않는다. 실제로 가장 많이 활용되는 것은 로컬 스토리지와 세션 스토리지다.

로컬 스토리지는 데이터를 직접 삭제하지 않는 이상 브라우저에 지속적으로 남아 있으며, 세션 스토리지는 브라우저 세션이 유지되는 동안에만 데이터를 저장한다. 따라서 로그인 같은 일시적인 정보는 세션 스토리지가 적합하고, 장기간 유지해야 하는 데이터는 로컬 스토리지가 적합하다. 두 방법 모두 데이터를 문자열 형태로만 저장할 수 있다는 제약이 있으므로, 객체 데이터를 저장할 때는 JSON 문자열로 변환 후 저장하고 다시 파싱하여 사용해야 한다.

* History API

History API는 브라우저의 페이지 탐색 기록을 다루는 기능이다. 특히 Single Page Application 환경에서는 URL 변경 없이 화면 전환을 구현하는 과정에서 핵심적으로 활용된다. 예를 들어, 사용자가 뒤로 가기 버튼을 눌렀을 때 적절한 화면 상태를 복원하려면 히스토리 조작이 필요하다. 직접적으로 API를 빈번히 호출하지 않더라도, 대부분의 라우팅 라이브러리와 프레임워크 내부에서는 이를 기반으로 동작하고 있다. 따라서 SPA를 다루거나 모바일 환경에서 네이티브 앱처럼 동작하는 웹 앱을 만들고자 할 때 반드시 이해해야 하는 개념이다.

* Clipboard API

Clipboard API는 텍스트나 이미지를 클립보드에 복사하거나 불러오기 위해 제공된다. 특히 모바일 환경에서 텍스트를 선택하고 복사하는 과정이 번거로운 상황에서, 원클릭으로 데이터를 복사하는 기능을 구현하기에 적합하다. 보안상의 이유로 브라우저 권한 정책과 함께 동작하기 때문에, 사용자 인터랙션이 있을 때만 동작하도록 제약된다. 단순하지만 사용자 경험을 개선하는 데 매우 효과적인 API다.

* Canvas API

Canvas API는 픽셀 단위의 2D 그래픽을 다룰 수 있도록 제공되는 저수준 API다. HTML과 CSS만으로는 구현하기 어려운 정교한 그래픽이나 애니메이션을 구현할 수 있으며, 그래프, 차트, 이미지 처리, 간단한 게임 제작에까지 활용된다. 또 WebGL과 연계하면 3D 그래픽 처리도 가능하다. 다만 자유도가 높은 만큼 코드 양이 많아지고 성능 최적화가 중요하기 때문에 체계적인 학습이 필요하다.

49강 수강 완료

오늘 공부 종료 시간 (08.16 23:30)

49강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 49강 공부 완료!!

이번 강의에서는 API와 주로 많이 사용하는 web api에 대해 배웠다. Canvas API를 빼면 많이 사용하는 API이기 때문에 잘 알아두면 좋을 것 같고 MDN API 명세를 보고 기존에 알던 것과 새로 나온 것들에 대해 공부를 해야겠다.

패스트캠퍼스 환급챌린지 46일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Fri, 15 Aug 2025 23:32:46 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

광복절 공휴일에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

46일차 공부 시작!

오늘 공부 시작 시간 (08.15 23:14)

오늘의 강의 주제는 '개념과 구조 - DOM'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- DOM -

* DOM의 기본 개념

웹 개발에서 DOM은 브라우저가 HTML 문서를 내부적으로 다루기 위해 사용하는 자료 구조다. HTML 파일을 브라우저가 받아들이면, 단순히 텍스트를 보여주는 것이 아니라 웹 페이지의 각 요소와 속성 정보를 구조화해서 프로그램적으로 접근할 수 있게 한다. 이렇게 변환된 구조가 바로 DOM이다. DOM은 Document Object Model의 줄임말로서, 문서를 객체 형태로 표현해 프로그램에서 다룰 수 있게 만든 규격이다.

* DOM의 진화와 중요성

DOM은 단순한 자료 구조 그 자체를 넘어서 다양한 API와 시스템이 결합된 복합적인 웹 스펙으로 발전해 왔다. 초기에는 HTML과 밀접하게 연결된 듯 보였지만, 시간이 지나면서 XML이나 SVG 같은 다양한 문서를 다루는 핵심 기술로 확장됐다. 브라우저마다 독립적인 DOM 구현체가 있고, 표준화된 규약에 따라 동작한다. 덕분에 DOM을 몰라도 단순한 HTML을 보여주는 것은 어렵지 않지만, 실제로 동적 웹을 제작하려면 DOM의 구조와 작동 원리를 반드시 이해해야 한다.

* 유지보수의 어려움

DOM의 주요 문제점은 규모가 커질수록 유지 관리가 어려워진다는 점이다. DOM은 저수준의 인터페이스 형태로 제공되며, 여러 개의 API를 조합해서 문서 구조를 변경한다. 처음에는 간단한 페이지라면 직접 DOM 요소를 선택하고 속성을 바꿀 수 있지만, 기능이 늘어나고 사용자 인터랙션이 복잡해질수록 코드가 읽기 어렵고 버그도 쉽게 발생한다. 이 때문에 최근에는 직접 DOM을 조작하는 방식을 지양하는 흐름이 주류가 됐다.

* 프레임워크와 DOM의 관계

리액트, 뷰 같은 현대적인 프론트엔드 프레임워크는 DOM을 직접 다루지 않는다. 개발자는 데이터와 UI 상태를 설계하면, 내부적으로 프레임워크가 DOM을 최적화해서 처리해준다. 이러한 방식은 코드 관리와 유지보수에서 큰 이점을 제공한다. jQuery와 같은 라이브러리는 DOM을 좀 더 쉽게 조작할 수 있게 만들어졌지만, 규모가 커질수록 근본적인 어려움은 해결되지 않는다. 그래서 대규모 프로젝트에서는 jQuery마저도 더 이상 권장되지 않는다.

* DOM의 핵심 구조와 학습 포인트

하지만 DOM의 중요성은 변하지 않는다. 대부분 브라우저가 제공하는 HTML 조작은 결국 DOM 인터페이스를 통해 이뤄지기 때문에, 개발자는 DOM의 주요 개념과 데이터 타입, 특히 트리 구조와 관련된 내용을 제대로 이해할 필요가 있다. DOM은 문서 전체를 나무처럼 계층적으로 모델링하는데, 각 요소는 노드로 표현되고 부모-자식-형제 관계가 생긴다. 이러한 트리 구조는 탐색, 추가, 삭제 작업의 기반이 된다.

웹 개발을 하면서 DOM을 완벽히 이해하는 것은 필수다. 직접적으로 DOM을 조작하지 않더라도, 프레임워크 내부에서 어떤 원리로 동작하는지 이해해야 대규모 시스템에서도 효율적으로 문제를 해결할 수 있다. DOM 스펙의 세부적인 인터페이스, 이벤트, 트리 구조, 각 노드 타입과 프로퍼티 등은 반드시 학습해야 할 필수 개념이다. Mozilla 공식 문서 등 참조하며 공부하는 것이 좋다.

48강 수강 완료

오늘 공부 종료 시간 (08.15 23:20)

48강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 48강 공부 완료!!

이번 강의에서는 DOM에 대한 내용을 다루었다. DOM과 가상 DOM 등 프론트엔드에서는 항상 나오는 것으로 이번 강의를 통해 리마인드할 수 있었다. 나중에 한 번 다시 공식문서를 기반으로 정리를 해야겠다.

패스트캠퍼스 환급챌린지 45일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

hangyeoldora — Thu, 14 Aug 2025 23:36:56 +0900

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반 | 패스트캠퍼스

초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!

fastcampus.co.kr

https://fastcampus.info/4n8ztzq

집에 갑자기 물이 안나와서 난리가 났었지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

45일차 공부 시작!

오늘 공부 시작 시간 (08.14 23:16)

오늘의 강의 주제는 '문법-JSON'이다.

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

오늘의 학습 내용

- JSON -

* JSON 개념과 필요성

JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 경량 데이터 포맷이다. 자바스크립트나 타입스크립트 환경에서 객체를 서로 주고받을 때 매우 효율적이다. 객체는 실행 중 메모리에만 존재하므로, 서버와 통신하거나 저장 장치에 기록하기 위해서는 문자열 형태로 변환이 필요하다. 이때 객체 그 자체를 전송하거나 저장할 수 없으므로, 이를 문자열로 직렬화하고 다시 객체로 역직렬화하는 과정이 필요하다. 이 목적을 위해 JSON이 고안되었다.

* JSON의 문법 규칙

JSON 데이터는 항상 키를 쌍따옴표로 감싸야 한다. 값이 문자열이라면 역시 쌍따옴표를 사용한다. 마지막 속성 뒤에는 콤마를 두면 안 되며, 데이터 타입은 문자열, 숫자, 불리언, 배열, 객체만을 지원한다. 함수나 undefined 같은 값은 JSON에 포함될 수 없다. 이러한 문법의 일관성 덕분에 JSON은 언어와 환경에 상관없이 안정적으로 데이터 교환이 가능하다.

* JSON 처리 코드 예제

아래 예시는 JSON 문자열을 자바스크립트 객체로 변환한 후, 다시 JSON 문자열로 직렬화하는 과정을 보여준다. 변환 과정에서 오류가 발생하면 `try-catch` 구문으로 예외를 처리한다.

const jsonString = `
    {
        "name": "dexter",
        "age": 30,
        "bloodType": "B"
    }
`;

try {
    const myJson = JSON.parse(jsonString);
    console.log(JSON.stringify(myJson));
} catch (e) {
	console.log('다시 시도해 주세요.');
}

JSON.parse는 JSON 형식의 문자열을 자바스크립트 객체로 변환하고, JSON.stringify는 객체를 JSON 문자열로 변환한다. 이를 활용하면 서버에서 받은 문자열 데이터를 곧바로 앱의 로직에서 사용할 수 있다.

* 예외 처리의 필요성

JSON 문자열이 문법에 맞지 않으면 JSON.parse 호출 시 오류가 발생한다. 특히 네트워크 통신 과정에서는 데이터가 훼손되거나 잘못된 형식으로 전송될 수 있다. 이때 try-catch 구문을 사용하면 프로그램의 비정상 종료를 막고, 사용자에게 재시도 요청 등 적절한 안내를 제공할 수 있다. 안정적인 UX를 위해 네트워크 기반 데이터 처리 코드에는 항상 예외 처리 로직을 포함하는 것이 좋다.

47강 수강 완료

오늘 공부 종료 시간 (08.14 23:26)

47강 강의 내용 정리 필기

학습 인증샷 - 2

마치며

오늘도 환급 챌린지 47강 공부 완료!!

이번 강의에서는 필수적으로 알아야하고 알 수 밖에 없는 JSON에 대한 내용을 다뤘다. 흔하게 사용하고 있지만 오랜만에 사용하게 된 계기부터 들을 수 있어서 좋았다.