코딩 알고리즘

[Flutter] 자주쓰는 위젯 정리

Psalm 23 — Sat, 12 Jul 2025 10:03:19 +0900

1. UI 골격 및 레이아웃 구성

번호	위젯 이름	설명
1	`Container`	스타일, 여백, 색상, 크기 등 거의 다 되는 만능 박스
2	`Padding`	여백 추가용 래퍼 위젯
3	`Column`	VStack (수직 정렬)
4	`Row`	HStack (수평 정렬)
5	`SizedBox`	고정 크기 or Spacer 용도
6	`Expanded`	남는 공간 채우기용 (`flex`)
7	`Flexible`	`Expanded`보다 유연한 버전
8	`Align` / `Center`	위치 정렬 용도
9	`Stack`	ZStack (위젯 겹치기)
10	`SafeArea`	노치, 상태바 영역 피하기

// 수직 정렬 (VStack)
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Hello'),
    SizedBox(height: 16),
    Text('World'),
  ],
)

// 수평 정렬 (HStack)
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.menu),
    Icon(Icons.search),
  ],
)

// Stack (ZStack)
Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Text('위에 겹쳐지는 요소'),
    ),
  ],
)

// 패딩
Padding(
  padding: const EdgeInsets.all(16.0),
  child: Text('Padding 적용됨'),
)

// 여백 / Spacer
SizedBox(height: 20),

Container(
  padding: const EdgeInsets.all(12),
  margin: const EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    border: Border.all(color: Colors.grey[300]!),
  ),
  child: Text('박스 안에 텍스트'),
)

// 정렬
Align(
  alignment: Alignment.centerRight,
  child: Text('오른쪽 정렬'),
)

// SafeArea: 노치, 상태바 피하기
SafeArea(
  child: Text('안전한 영역'),
)

// MediaQuery: 디바이스 크기 사용
double width = MediaQuery.of(context).size.width;

// LayoutBuilder: 반응형 조건 분기
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Text('모바일 UI');
    } else {
      return Text('태블릿/웹 UI');
    }
  },
)

2. 텍스트, 입력, 버튼 등 UI 구성 요소

번호	위젯 이름	설명
11	`Text`	텍스트 출력의 기본
12	`TextField`	사용자 입력 받기
13	`ElevatedButton`	기본 버튼
14	`TextButton`	플랫한 텍스트 버튼
15	`OutlinedButton`	테두리 있는 버튼
16	`Icon` / `IconButton`	아이콘, 아이콘 버튼
17	`Image.asset` / `Image.network`	이미지 표시
18	`ListView`	스크롤 가능한 리스트
19	`ListTile`	리스트 항목 구성용
20	`Form` / `FormField`	유효성 검사 포함된 폼 필드

TextField(
  controller: myController,
  decoration: InputDecoration(
    hintText: '입력하세요',
    border: OutlineInputBorder(),
  ),
)

ElevatedButton(
  onPressed: () => print('클릭됨'),
  child: Text('버튼'),
)

TextButton(
  onPressed: () {},
  child: Text('텍스트 버튼'),
)

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)

3. 스크롤, 반응형 레이아웃 제어

번호	위젯 이름	설명
21	`SingleChildScrollView`	Column 등 스크롤 가능하게 감싸기
22	`ScrollController`	스크롤 위치 제어
23	`MediaQuery`	디바이스 화면 정보 가져오기
24	`LayoutBuilder`	부모 사이즈에 따른 조건부 UI
25	`Wrap`	자동 줄바꿈 가능한 Row
26	`Visibility` / `Offstage`	조건부 렌더링/숨김 처리
27	`AnimatedContainer`	부드러운 레이아웃 변화
28	`GestureDetector`	클릭/스와이프 등 사용자 제스처 감지
29	`Navigator` / `MaterialPageRoute`	페이지 이동, 라우팅
30	`Scaffold`	앱 기본 구조 (AppBar, body, FAB 등)

// 수직 스크롤 리스트
ListView(
  children: [
    ListTile(title: Text('항목 1')),
    ListTile(title: Text('항목 2')),
  ],
)

// 빌더 방식
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

// SingleChildScrollView
SingleChildScrollView(
  child: Column(
    children: [ ... ],
  ),
)

// Navigator: 페이지 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailPage()),
);

// 상태변경
setState(() {
  count++;
});

Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: Center(child: Text('내용')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

4. 상태/비동기/애니메이션 관련

StatefulWidget / StatelessWidget
FutureBuilder, StreamBuilder
Hero, AnimatedSwitcher
Theme, ThemeData
상태관리: Provider, Riverpod, Bloc, GetX 등

[데이터베이스] MariaDB - JOIN

Psalm 23 — Fri, 4 Jul 2025 13:38:50 +0900

데이터베이스에서 조인은 두 개 이상의 테이블을 컬럼 기준으로 연결하는 방식입니다. 마치 엑셀 시트 두 개를 옆으로 나란히 붙여서 하나의 시트로 만드는 것과 같습니다. 이때 컬럼이 확장되며, 각 테이블의 데이터를 조합해서 더 풍부한 정보를 얻을 수 있습니다.

조인 이란

테이블을 옆으로 나란히 붙이는 것
컬럼이 확장된다.
일반적으로 부모 테이블의 기본 키와 자식 타입의 외래 키를 JOIN 조건으로 사용해서 부모 테이블과 자식 테이블을 옆으로 붙인다.

조인 조건 지정하기

조인을 할 때, 어떤 컬럼 기준으로 합쳐야 하는지 알려줘야 하는데 방법이 두 가지입니다.

USING (컬럼명) : 두 테이블에서 같은 이름의 컬럼으로 조인할 때 간단하게 사용
ON 테이블A.컬럼 = 테이블B.컬럼 : 컬럼 이름이 다르거나, 좀 더 복잡한 조건이 필요할 때 사용

글 수정 삭제 예제

▼ 1. 글 목록 (순서, 갯수)

▼ 2. 글 한개 보기

▼ 3. 글쓰기

▼ 4. 외래키 추가 및 삭제

▼ 5. 수정과 삭제는 작성자 여부를 반드시 권한체크를 해야한다.

▼ 6. 글 수정

▼ 7. 글 삭제

조인 예제

(Inner) Join 순서는 상관없다.
자식 테이블에 부모 테이블을 붙인다.

Left 조인은 왼쪽 테이블이 기준입니다. 자식 테이블이 왼쪽이고, 오른쪽이 부모테이블이라면 그냥 조인과 같습니다.

▼ 1. LEFT 조인

Employees 데이터베이스 예제

▼ 2. 부서목록 (부서번호순)

▼ 3. 전체 사원 목록 (사원번호순, 페이지당 25개씩)

▼ 4. 전체 사원 목록 검색

▼ 5. 부서 상세정보

▼ 6. 부서의 사원근무 이력 (근무시작일, 사번순)

▼ 7. 사원 상세정보

▼ 8. 사원의 부서 근무 이력

▼ 9. 사원의 연봉이력

▼ 10. 3개 테이블 조인

[Docker] 도커 컨테이너 및 이미지 삭제 완벽 가이드

Psalm 23 — Tue, 18 Mar 2025 07:58:39 +0900

Docker를 사용하면서 불필요한 컨테이너와 이미지가 쌓이면 용량 부족 문제가 발생할 수 있습니다. 이 글에서는 Docker의 컨테이너와 이미지를 안전하게 삭제 및 정리하는 방법을 정리했습니다.

1. 컨테이너 삭제하기

▼ 1. 특정 컨테이너 삭제 컨테이너 이름이나 ID를 사용하여 특정 컨테이너를 중지하고 삭제합니다.

▼ 2. 다음은 예시입니다.

▼ 3. 종료된 컨테이너 조회하기 종료된 상태의 컨테이너만 조회할 수 있습니다.

▼ 4. 종료된 컨테이너 일괄 삭제 (안전) 종료된 컨테이너를 안전하게 한 번에 삭제할 수 있습니다.

▼ 5. 확인 없이 즉시 삭제하려면 다음과 같은 명령을 사용합니다.

▼ 6. prune을 사용하지 않고 동일한 작업을 수행하는 명령어는 다음과 같습니다.

모든 컨테이너(실행 중 포함) 삭제하기 모든 컨테이너를 삭제할 때는 반드시 실행 중인 컨테이너를 먼저 중지해야 합니다. 주의: 운영 중인 컨테이너가 있을 경우 서비스가 중단될 수 있으니, 실행 중인 컨테이너 삭제 전 반드시 확인하세요.

2. Docker 이미지 삭제하기

▼ 1. 특정 이미지 삭제 이미지 ID 또는 이름을 사용하여 이미지를 삭제합니다.

▼ 2. 다음은 예시입니다.

▼ 3. 사용되지 않는 모든 이미지 일괄 삭제 (prune) 컨테이너에서 사용되지 않는 이미지(태그가 없거나 컨테이너에 연결되지 않은 이미지)를 모두 삭제합니다. 주의: 사용하지 않는 이미지라 할지라도 중요한 이미지가 삭제될 수 있으므로 반드시 확인 후 실행하세요.

3. 컨테이너 종료 시 자동 삭제하기 (--rm 옵션)

▼ 1. Docker 컨테이너를 실행할 때 --rm 옵션을 주면, 컨테이너가 중지될 때 자동으로 삭제됩니다. 테스트 용도 등 임시 컨테이너에 유용합니다.

▼ 2. 다음은 예시입니다.

[Docker] 몽고 MongoDB 설정

Psalm 23 — Mon, 17 Mar 2025 08:04:50 +0900

Docker를 활용하여 MongoDB, 백엔드, 프론트엔드 환경을 구성하는 방법을 정리했습니다.

MongoDB 설정

▼ 1. MongoDB는 별도로 포트를 열어줄 필요 없이 --network 설정만으로 컨테이너를 실행할 수 있습니다.

MONGO_INITDB_ROOT_USERNAME: MongoDB의 루트 사용자 이름
MONGO_INITDB_ROOT_PASSWORD: MongoDB의 루트 사용자 비밀번호
-v data:/data/db: 데이터 저장을 위한 볼륨 설정

백엔드 설정

▼ 2. MongoDB에 보안 연결을 설정할 때는 다음과 같은 연결 문자열을 사용합니다.

▼ 3. 만약 문제가 발생한다면 MongoDB의 볼륨 연결을 확인하고, 기존 볼륨을 제거한 후 다시 실행합니다.

▼ 4. 백엔드 컨테이너 실행 시 별도의 포트(80:80)를 열어주고, MongoDB와 연결하기 위해 --network 옵션을 추가합니다.

프론트엔드 설정

▼ 5. 프론트엔드는 브라우저에서 실행되기 때문에 --network 설정이 동작하지 않습니다. 대신 3000 포트를 열어 백엔드(80 포트)와 연결합니다. 이 설정을 통해 프론트엔드와 백엔드가 정상적으로 연결될 수 있습니다. MongoDB를 포함한 전체 서비스가 원활하게 실행되는지 확인하려면 Docker 로그를 체크하는 것도 좋은 방법입니다.

▼ 6. 이와 같은 방법으로 Docker 환경에서 MongoDB, 백엔드, 프론트엔드를 손쉽게 구성할 수 있습니다.

[Docker] 맥에 Homebrew 로 도커 설치하기

Psalm 23 — Tue, 11 Mar 2025 23:06:42 +0900

도커 설치

기존에 쓰던 애플실리콘에서는 문제없이 잘되던 도커 설치가 인텔 맥에서는 정상동작하지 않아 다른 방법을 찾던 중 brew 로 설치하는 방법이 있어서 소개합니다. --cask 옵션은 Homebrew Cask를 사용하여 GUI 애플리케이션 및 바이너리 소프트웨어를 설치할 때 사용하는 옵션입니다.

brew install : 터미널에서 실행되는 도구 (git, node, python...)
brew install --cask : GUI 앱이나 바이너리 패키지 (docer, google-chrome, slack...)

▼ 1. brew 명령어로 도커를 설치합니다.

도커 버전 확인

버전 확인

▼ 1. 도커 버전을 확인합니다.

▼ 1.도커 컴포즈 버전도 확인합니다.

테스트 이미지 실행

▼ 1.테스트를 위해 간단한 이미지를 받아서 실행해봅니다.

[Docker] 도커 볼륨 바인드 마운트 생성과 삭제

Psalm 23 — Mon, 10 Mar 2025 21:54:09 +0900

도커 볼륨의 종류

▼ 1. 익명 볼륨(Anonymous Volume)

명시적 이름이 없이 도커가 자체적으로 이름을 만들어서 생성합니다. 컨테이너 삭제시 볼륨도 함께 사라집니다. 컨테이너를 실행할 때만 필요한 임시 데이터라면 익명 볼륨을 사용하는 것이 좋습니다.

▼ 2. 명시적 볼륨 (Managed Volume)

도커 자체적으로 관리하는 볼륨으로 컨테이너가 삭제되더라도 데이터가 유지되는 특징이 있습니다. 때문에 컨테이너끼리 쉽게 공유가 가능합니다. 운영 환경에서 데이터의 영속성을 원한다면 명시적 볼륨을 사용합니다. 또한 익명의 볼륨과 달리 DockerFile 에서 생성이 불가능합니다. -v 옵션으로만 생성이 가능하고 특정 컨테이너와 연결되어 있지 않습니다. 때문에 컨테이너 간의 공유가 가능합니다.

▼ 3. 바인드 마운트(Bind Mount)

호스트의 특정 디렉토리를 컨테이너 내부에 마운트 하기 때문에 컨테이너가 삭제되더라도 호스트의 디렉토리는 그대로 유지가 가능합니다. 개발 환경에서 주로 사용되며 소스를 변경하면서 적용 및 테스트가 수월합니다.

마운트 방식 특징

마운트 방식	경로	데이터 유지	호스트 접근	주요 사용처
명시적 볼륨	/var/lib/docker/volumes/	O (컨테이너 삭제 후에도 유지)	직접 접근 어려움	운영 환경, 데이터 공유
익명 볼륨	/var/lib/docker/volumes/<random-id>/	O (컨테이너 삭제 시 유지, 하지만 관리 어려움)	불가	임시 데이터 저장
바인드 마운트	호스트의 특정 디렉토리 (/host/path)	O (컨테이너 삭제와 무관)	가능	개발 환경, 로컬 테스트

볼륨 생성, 조회, 검사 삭제

▼ 1. 도커 볼륨 관련 명령어

▼ 2. 도커 볼륨 조회 - 볼륨은 도커에 의해 관리됩니다.

▼ 3. 도커 볼륨 생성에 관련된 명령어

▼ 4. 도커 볼륨 생성하기

▼ 5. 도커 볼륨 검사 - 마운트 포인트 (Mountpoint)는 실제 물리적 위치가 아니라 가상 머신 내부에 있는 위치입니다.

▼ 6. 도커 볼륨 삭제 - 사용중인 볼륨은 중지(stop)한 뒤에 제거할 수 있습니다.

▼ 7. 사용하지 않는 모든 볼륨 제거

바인드 마운트 사용시 주의할 점

절대 경로를 사용하는 바인드 마운트는 Dockerfile 을 생성할 때 `COPY . .` 명령을 사용하지 않아도 `/app` 위치의 전체를 마운트 한다면 아무런 문제 없이 동작할 것입니다. 하지만 프로덕션 앱을 배포할 때는 절대 경로를 사용할 것도 아니고 바인드 마운트 하는 이유도 의미가 없기 때문에 `COPY . .` 를 통해 스냅샷을 복하해야 합니다.

[Docker] 도커 이미지 푸시하기

Psalm 23 — Sat, 8 Mar 2025 15:05:12 +0900

도커로 이미지를 푸시하려면 hub.docker.com 에서 할 수 있습니다. Private 레포지토리는 1개로 제한되어 있고 Public 레포지토리는 개수의 제한은 없지만 빌드 자동화가 불가능하며 Pull 에 대한 제한이 있을 수 있습니다.

https://hub.docker.com/

Docker Hub Container Image Library | App Containerization

Increase your reach and adoption on Docker Hub With a Docker Verified Publisher subscription, you'll increase trust, boost discoverability, get exclusive data insights, and much more.

hub.docker.com

레포지토리 생성

▼ 1. 로그인을 한뒤에 Repositories 탭을 누르고 Create a repository 버튼을 눌러 새로운 레포지토리를 생성합니다.

docker hub

▼ 2. 레포지토리 이름을 만들고 create 버튼을 눌러 새로운 레포지토리를 생성합니다.

docker - create repository

소스코드 빌드

▼ 3. docker 를 이용해서 소스코드를 빌드합니다.

▼ 4. 빌드한 Docker 이미지를 새로운 이름으로 태그합니다.

이미지 업로드

▼ 5. Push를 하기 위해서 로그인 합니다.

docker login

docker login -confirm

▼ 6. 로그인이 되었다면 push 명령어로 이미지를 업로드합니다.

업로드된 이미지 테스트

▼ 7. 이미지가 잘 올라갔는지 manifest inspect 명령을 이용해서 확인합니다.

▼ 9. 테스트로 pull 명령어를 이용해서 이미지를 가져옵니다.

[Swift] 터미널에서 스위프트 패키지 라이브러리 만들기

Psalm 23 — Fri, 7 Mar 2025 16:58:07 +0900

터미널에서 Swift 패키지 만드는 방법

▼ 1. 새로운 디렉터리를 만들고 해당 디렉터리로 이동합니다.

▼ 2. Swift 패키지 생성를 생성합니다.

package 생성

옵션

--name <이름> 패키지 이름 지정 swift package init --name MyLibrary

--type <유형> 패키지 유형 지정 swift package init --type library

--platforms <플랫폼> 지원할 플랫폼 지정 swift package init --platforms iOS

--package-path <경로> 패키지를 특정 경로에 생성 swift package init --package-path ./MyLibrary

패키지 열기

▼ 3. open 명령어를 이용해서 Xcode 를 실행해 프로젝트를 열 수 있습니다.

빌드 및 실행

▼ 4. 테스트 명령을 통해 테스트를 실행할 수 있습니다.

swift test

▼ 5. build 명령을 통해서 디버그 및 릴리즈 모드로 빌드가 가능합니다. (옵션이 없으면 디버그 모드) 또한 ./build 폴더에 서 직접 실행도 가능합니다.

▼ 6. run 명령을 통해 직접 실행도 가능합니다. 여러개의 실행 타깃이 있다면 직접 타깃의 이름을 입력해서 실행도 가능합니다. (A, B)

▼ 7. @main 함수를 만들어서 실행 가능한 타깃을 Package.swift 에 명시합니다.

spm

▼ 8. 생성할 때 타입을 executable 로 생성할 수도 있습니다.

[AWS] Amazon EC2 도커 설치 (Docker)

Psalm 23 — Thu, 6 Mar 2025 10:57:08 +0900

도커 설치

WS에서 제공하는 기본 Amazon Linux AMI(Amazon Linux 2, Amazon Linux 2023)는 CentOS/RHEL 기반이며 Amazon Linux AMI에는 Docker가 기본 설치되어 있지 않아서 yum 을 이용해 설치하고 service 를 이용해 실행해야 합니다.

Amazon Web Service - EC2

▼ 1. yum 을 이용해 업데이트를 합니다.

▼ 2. yum 을 이용해 docker 를 설치합니다.

▼ 3. docker 버전을 확인합니다.

docker -v

▼ 4. Docker 서비스를 실행합니다.

SUDU 그룹 추가 및 테스트

▼ 1. EC2 인스턴스에서 Docker를 실행하려면 ec2-user가 docker 그룹에 속해야 합니다. 변경 사항을 적용하려면 로그아웃 후 다시 로그인해야 합니다.

▼ 2. 테스트를 위해 hello-world 이미지를 실행합니다.

Install Docker Engine

https://docs.docker.com/engine/install/

Install

Learn how to choose the best method for you to install Docker Engine. This client-server application is available on Linux, Mac, Windows, and as a static binary.

docs.docker.com

[Tuist] mise 설치 및 버전 관리

Psalm 23 — Wed, 5 Mar 2025 17:17:23 +0900

Mise

mise는 개발 환경 관리를 위한 툴로 여러 프로그래밍 언어와 도구의 버전 관리를 깔끔하게 할 수 있습니다. Tuist 를 설치하려면 homebrew 로 직접 설치가 가능하지만 mise 로 설치하는 것을 권장하고 있습니다. 계속 Tuist 의 버전이 바뀌기도 하고 관리 차원에서 mise 를 사용하면 수월하게 버전 컨트롤이 가능합니다. node 기반의 nvm 과 같은 것도 관리할 수 있으니 편리할 것 같습니다.

mise 로 설치한 Tuist

Tuist 관련 설치

▼ 1. homebrew 를 설치하지 않았다면 우선 terminal 에서 다음 코드를 입력해 homebrew 를 설치합니다.

https://brew.sh/

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

▼ 2. homebrew 를 설치할 수 있다면 homebrew 를 업데이트 한후에 mise 를 설치합니다. mise는 개발환경을 관리하는 도구로 다양한 툴의 버전 관리를 쉽게 할 수 있도록 돕는 매니저입니다. (Rust 기반)

▼ 3. mise 를 통해 tuist 를 설치합니다.

PATH 추가

▼ 1. 설치 목록을 확인하기 위해서 터미널에서 list 명령을 사용합니다. tuist 가 설치되어 있다면 다음과 같이 나옵니다. 현재 저는 4.43.2 버전이 설치되어 있네요.

mise list

▼ 2. 설치 경로 확인을 위해서 다음 명령을 사용합니다.

▼ 3. .zshrc 에 PATH 를 추가합니다.

버전 확인 및 관리

▼ 1. tuist 버전확인

▼ 2. 새로운 버전으로 tuist 설치하거나 추가할 때 사용합니다. 그밖에 uninstall 과 같은 명령을 사용해 제거도 가능합니다.

▼ 3. Tuist 버전 관리를 위해 use 명령을 쓰고 -g 옵션으로 글로벌 설정을 할 수 있습니다.