2025-07-17 학습 노트

📚 도커, 파이썬, 리액트 핵심 요약

🐳 Docker

다른 환경으로 프로그램을 쉽게 이식할 수 있게 해주는 컨테이너 기술

• 설치와 실행을 간편하게 만들어줌
• “내 컴퓨터에서는 잘 되는데…” 문제 해결
• 가상머신보다 가볍고 빠름 (OS 커널 공유)

Docker Compose 활용 전략

• 개발 단계: Docker Compose 사용 (docker compose up -d, docker compose down만으로 간편 관리)
• 배포 단계: Compose 없이 개별 컨테이너로 배포 (프로덕션 환경 호환성 문제)
• 개발 시 매번 컨테이너에 들어가는 불편함을 Compose가 해결

🔗 API Endpoints

API에서 데이터를 주고받는 접점 URL

• 클라이언트와 서버 간의 통신 지점
• RESTful API의 핵심 구성요소
• HTTP 메서드(GET, POST, PUT, DELETE)와 함께 사용

⏰ APScheduler

파이썬에서 주기적 작업을 실행하는 라이브러리

• 크론잡 같은 스케줄링 작업을 파이썬으로
• 백그라운드 작업 자동화에 유용
• 인터벌, 크론, 날짜 기반 스케줄링 지원

🎨 코드 품질 도구들

Ruff (추천)

• Black + Flake8 + isort를 대체하는 올인원 툴
• Rust로 작성되어 매우 빠른 성능
• 포매팅과 린팅을 한 번에 처리
• 설정 파일 하나로 모든 규칙 관리
• isort: 파이썬 import 문을 자동으로 정렬하는 툴

Black

• 파이썬 코드 포매터
• 코드 스타일을 자동으로 통일
• “타협 없는” 포매팅으로 유명

Flake8

• 파이썬 린터(Linter)
• 문법 오류, 스타일 문제, 코드 스멜 탐지
• PEP 8 준수 확인

🌐 SPA (Single Page Application)

페이지 새로고침 없이 JavaScript가 화면을 동적으로 렌더링하는 웹앱 구조

SPA의 장단점

장점:

• 사용자 경험 향상 (빠른 페이지 전환)
• 앱 같은 부드러운 인터랙션
• 서버 부하 감소 (초기 로딩 후 데이터만 주고받음)

단점:

• 초기 로딩 시간 길어질 수 있음
• SEO(검색 엔진 최적화) 어려움 - JavaScript 실행 전엔 빈 페이지

SPA SEO 문제 해결법

• SSR (Server-Side Rendering): 서버에서 HTML을 미리 생성해서 전송
• SSG (Static Site Generation): 빌드 시점에 정적 HTML 파일들을 미리 생성
• React, Vue, Angular 등 주요 프레임워크 모두 SSR/SSG 지원

🔄 HTTP 클라이언트 비교

Python: httpx vs aiohttp

상황	추천 라이브러리	이유
FastAPI + 비동기 API 클라이언트	httpx	requests와 유사한 API, 동기/비동기 모두 지원
저수준 퍼포먼스 극한 최적화	aiohttp	세밀한 제어 가능, 서버/클라이언트 모두 지원

JavaScript: Axios vs Fetch (실전 관점)

상황	추천	이유
Next.js 프로젝트	Fetch	Next.js 내장 캐싱 지원, 공식 권장
완전 생 JS + 구형 브라우저	Axios	IE11 등 네이티브 지원 (폴리필 불필요)
React/Vue + 구형 브라우저	Fetch	빌드 도구가 자동으로 폴리필 추가
복잡한 요청/응답 처리	Axios	인터셉터, 자동 JSON 변환, 타임아웃 등
빠른 프로토타이핑	Axios	설정 간편, 에러 처리 자동화

폴리필 (Polyfill)

구형 브라우저에서 최신 기능을 사용할 수 있게 해주는 코드

• 브라우저가 지원하지 않는 기능을 JavaScript로 구현
• 예: IE에서 fetch API 사용하려면 fetch 폴리필 필요

🔧 TypeScript

개발 단계에서만 타입 체크를 제공하는 녀석

• 실제 실행은 JavaScript로 변환(트랜스파일) 후 진행
• 컴파일 타임에 타입 오류를 미리 발견

⚛️ React 튜토리얼

틱택토 게임 구현을 통해 학습한 React 기초

• 참고: React 공식 튜토리얼

불변성 (Immutability)

• 원본 state를 직접 변형하지 않고 복사본 생성
• squares.slice()로 배열 복사 후 수정
• 불필요한 자식 컴포넌트 리렌더링 방지로 성능 최적화
• 시간 여행 디버깅과 상태 추적에도 도움

Key Props

• React가 각 컴포넌트를 구별하기 위한 고유 식별자
• 동적 리스트 렌더링 시 필수 (공식 권장)

📝 Markdown 작성 팁

표(Table) 작성 규칙

표 바로 위아래에 텍스트가 있으면 표가 인식되지 않을 수 있음

❌ 잘못된 예:
이 텍스트 바로 아래에 표가 있습니다.
| 컬럼1 | 컬럼2 |
|-------|-------|
| 값1   | 값2   |
이 텍스트 바로 위에 표가 있습니다.

✅ 올바른 예:
이 텍스트 아래에 빈 줄을 넣고 표가 있습니다.

| 컬럼1 | 컬럼2 |
|-------|-------|
| 값1   | 값2   |

이 텍스트 위에 빈 줄이 있고 그 위에 표가 있습니다.