JGP Space

토이 프로젝트 시작 - 매일일독

JGP — Mon, 17 Feb 2025 09:25:16 +0900

필자는 올해 성경일독을 실천 중이다.

교회에서 성경통독표를 만들어 나누어주었는데, 여기에 성경개론과 읽기 해설, 오디오 QR코드를 함께 제공하고 있다.
한 번 서비스로 만들어서 친구들이나 우리 공동체, 크게는 우리 교회나 많은 크리스천들이 사용할 수 있게하면 재밌겠다는 생각을 하게 되었다.

그래서 지난 주에 정말 틈틈이 서비스 기획을 하고 얼추 마무리가 되어 이번 주 부터는 본격적인 개발에 착수하려고 한다.

메인 기능으로는 교회에서 배부한 진도표와 현재 나의 진도표를 비교해서 자극이 되도록 하는 대시보드,
저작권 문제가 있어서 고민중이긴 하지만 오늘 성경통독할 부분의 본문을 확인(서드파티 앱이나 서비스로 우회 고려중),
당연하게도 성경통독 기록과 개론, 해설, 오디오 확인,
친구들끼리, 소그룹, 공동체 단위로 랭킹도 만들어볼 생각이다.

그리고 이번에는 잘 사용하지 않던 Figma도 잘 활용해보고, 한 번도 실전에 사용해보지 못한 Vue.js를 전면으로 사용해보려고 한다.
사실 상 Vue.js 실습을 위한 자기 계발용 토이 프로젝트로 보는 것이 맞다.

위에 사진처럼 간단히 로고도 만들었는데 생각보다 맘에 들게 나와서 일할 맛이 난다.

간단히 구상 중인 기술스택을 명세해보자면..

BE: django
FE: Vue.js (Nuxt.js)
DB: MariaDB
CI/CD: GitHub Actions, Docker Compose
Notification: Firebase

정도로 고려중이다.
복잡한 로드맵을 구성해두었지만 GPT에게 간단한 요약을 부탁해보았을 때의 결과는 아래와 같다.

1차 목표
- Django 백엔드 및 MariaDB 모델링 구축
- Vue(Nuxt.js) 기반 프론트엔드 초기 화면 개발
- OAuth 로그인 (카카오, 구글) 구현
- 성경통독표 및 진행률 저장 기능 개발

2차 목표
- 소그룹 생성 및 참여 기능 개발
- 소그룹별 스코어보드 UI 구현
- 유튜브 영상 등록 및 관리 기능 추가

3차 목표
- PWA 설정 및 웹 푸시 알림 기능 구현
- Docker Compose 기반 배포 환경 구축
- 성능 최적화 및 테스트 진행

전체 개발 기간은 1주~2주 정도를 생각하고 있으나,
Figma와 Vue.js 사용이 아직은 익숙하지 않아서 더 걸릴 수도 있을 것 같다.

GPT 같은 에이전트들의 성능이 너무 좋아져서 좋은 기회가 많이 오는 것 같다.

django-allauth 카카오 로그인 제공자(Provider)문제 해결

JGP — Tue, 7 May 2024 13:30:34 +0900

이유는 모르겠지만, django-allauth를 통해 카카오 로그인을 진행하는 과정에서 django admin 페이지에 접속하여 REST API 키를 입력하는 단계에서 상단 Provider(제공자)에 'Kakao'가 선택지에 나오지 않는 문제가 있었다.

간단하게, 패키지의 버전을 0.61.1 버전으로 다시 설치하니 문제 없이 연동이 가능했다. (문제가 있는 버전은 0.62.0 및 0.62.1)

Flutter(1) Dart - 변수 선언의 두 가지 방법

JGP — Mon, 22 Apr 2024 15:21:58 +0900

이번 시간에는 Dart에서 변수를 선언하는 방법에 대해 알아보자.

Dart에서는 변수를 만드는 두 가지 방법이 있다.

| var 키워드로 변수 만들기

void main(){
	var lang = "Dart"
}

이렇게 하면, Dart는 "lang"이라는 변수의 항목을 자동으로 String으로 인식한다.

| 명시적 타입으로 변수 만들기

void main(){
	String lang = "Dart"
}

위 내용처럼, String 이라는 명시적 타입으로 변수를 만들 수도있다.

| 두 가지 방법의 관습적인 사용법

보통, 아래와 같은 관습을 따른다.

함수나 메소드 내부에 지역변수를 지정할 때는 var를 사용한다.
class에서 변수나 property를 선언할 때는 명시적 타입을 사용한다.

| 참고

var를 사용하는게 Dart 스타일 가이드의 권장 방식이

Flutter(1) Dart - main 함수와 세미콜론

JGP — Mon, 22 Apr 2024 15:08:21 +0900

이번 시간에는 Flutter로 가기 위한 초석으로서, Dart 언어로 "Hello world!"를 출력해보자.

개인적으로 Hello world! 출력이 필자에게는 새 컴퓨터 언어를 배울 때 언제나 가장 설레이는 순간 중 하나이다.
Hello world! 출력이 무언가 개발을 해본 사람이라면 대부분의 시작점이 되기 때문이다!
(시작이 반이라는 말이 있다.)

| DartPad 소개

개발환경을 세팅하기 귀찮고, 우선 Dart 언어에 대해 파악하고 싶은 사람은 아래 사이트에서 테스트해보자.

https://dartpad.dev

DartPad

dartpad.dev

| Dart의 main 함수

독일어 언어유희임

Dart에서 main 함수는, Entry Point이다.
그래서 main 함수가 없으면 실행이 되지 않고 오류가 나는 모습을 발견할 수 있다.

| Dart와 세미콜론

세미콜론을 잘 찍지 않으면, 오류가 난다.

Dart 언어에서는 반드시 세미콜론(;)을 잘 해주어야 한다.
javascript 등에서는 항상 세미콜론을 찍어야하므로, 포맷터 등을 사용한다면 그렇게 중요하게 찍어주지 않아도 되었으나..

Dart에서는 세미콜론을 찍지 않아도 되는 경우도 있기 때문에 신경써서 찍어줘야 한다!

| Hello world 출력해보기

재탕

void main() {
  print('Hello world!');
}

위 코드를 실행하면 Hello world!가 콘솔에 출력될 것이다.

Flutter(1) Dart - 설치

JGP — Mon, 22 Apr 2024 14:36:53 +0900

이번 시간에는, Flutter 개발환경 세팅을 위한 기초로서, Dart를 설치해보자.

필자는 만년 macOS 유저로서, Windows 머신도 사용은 하고 있기 때문에 Chocolately로 설치는 할테지만..
macOS가 주 사용환경이라는 점을 참고해주시면 좋겠다.

| Homebrew 설치 (macOS)

이미 설치된 사람은 패스!

혹시, Homebrew가 본인의 mac에 설치가 되어있지 않다면, 아래 사이트에 접속해서 Homebrew를 설치하도록 하자.

https://brew.sh/

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

| Homebrew로 Dart 설치 (macOS)

brew update

brew tap dart-lang/dart

brew install dart

위 명령어로 간단히 Dart를 설치할 수 있다.

| Chocolately 설치 (Windows)

이미 설치된 사람은 패스!

Chocolately가 본인의 PC에 설치가 되어있지 않다면, 아래 사이트에 접속해서 설치하도록 하자.

https://chocolatey.org/

Chocolatey - The package manager for Windows

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

| Chocolately로 Dart 설치 (Windows)

먼저, git bash를 관리자 권한으로 실행해주자.

choco install dart-sdk

위 명령어로 간단히 Dart를 설치할 수 있다.

Flutter를 공부해야겠다

JGP — Mon, 22 Apr 2024 14:23:21 +0900

필자는 최근 Django로 만들던 웹 앱의 한계를 느끼고, 내가 만드는 UI와 UX를 좀 더 유려하게 개선하고 싶은 욕구,
또 웹에서 더 나아가 앱 환경까지 견문을 넓히고 싶은 욕구가 있어, 자기 계발 차원에서 새로운 라이브러리를 공부해보기로 결정했다.

그렇게 고민해본결과 React와 Flutter를 많이 고민했지만,
한국 개발자 생태계의 생리 상 React가 국내 시장에 취업을 하기엔 좀 더 좋기야 하겠지만(개발자의 관성의 관점에서..)

React는 JavaScript 기반이므로 접근하기 좀 더 쉬움~~(지금 안하고 싶음)~~
최근 Airbnb가 React를 떠나보낸 사건
(국내는 더 특히!) Flutter가 개발자의 수가 적음
Dart라는 빠르고 유려한 개발언어까지 덤으로 공부할 수 있음
- 물론! Google에서 만들었으므로 프로젝트 자체를 드랍해버릴 수도 있는 리스크가 있기는 하지만!

그래도 Flutter가 조금 더 비전이 보여서 Flutter를 공부해보기로 했다.

우선 무료 튜토리얼이나 강의가 많이 나와있기 때문에, Dart라는 생소한 언어와 Flutter의 개념을 잡는데 집중하고 있다.

나중에, Flutter를 어느 정도 다룰 수 있게 되면, React도 한 번 공부해보고, Kotlin도 공부해보아야겠다.
언제나 그렇듯이, 조급한 마음을 내려놓고 천천히..

세월호 10주기 추모 이미지

JGP — Mon, 15 Apr 2024 22:05:53 +0900

잊지 않겠습니다

| 제작자의 말

안녕하세요. 매년 나름의 추모로서 세월호 추모 이미지를 만들어 공유하고 있습니다.

5주기 때부터 계속 해오던 일인데, 벌써 10주기라니 참 시간이 빠른 것 같습니다.

유용하게 사용하셨다면 댓글 하나 남겨주세요.
혹은 블로그 광고 한 번 눌러주시면 큰 힘이 됩니다. 감사합니다.

| 다운로드

다운로드 안내
크게 2가지의 버전으로 제공됩니다.
1. SNS 게시물 업로드 용(1:1)
2. SNS 스토리 업로드 용(9:16)

이번 이미지에는 10주기를 맞아, 리본 뒤에 흐릿한 '10'이라는 타이포를 포함하였습니다.
10이 있는 버전과 없는 버전으로 각각 제공합니다.

모든 이미지가 모여있는 압축파일 :

세월호 10주기.zip

0.35MB

| SNS 게시물 업로드 용(1:1)

| SNS 스토리 업로드 용(9:16)

| iPhone에서 이미지 저장하는 방법

| 저작권 안내

이 저작물은 Creative Commons 라이선스를 채택한 저작물입니다.

세월호 10주기 이미지 / JGP / CC-BY ND
- 저작자 표시 및 수정금지 조건 하에 상업적/비상업적 이용 가능

지훈과얼굴들: 기획 회의 이후(개발자 관점)

JGP — Wed, 3 Apr 2024 15:24:31 +0900

*이 글은 참고로 프로젝트가 종료된 후 작성되고 있다.

| 이전 포스팅

https://jgpark.kr/844

새 프로젝트 시작: '지훈과 얼굴들'

필자는 작년(2023)년 12월 말 부터 데이터 분석 공부를 하고 있다. '멀티캠퍼스'라는 훈련기관에서 운영하는 국비지원 과정에 참여하고 있는데, 그 동안 작은 미니 프로젝트들(Kaggle 대회, 자체 과

jgpark.kr

| 들어가며

지난 포스팅의 시점 이후 숱한 회의를 거듭하여 아래와 같은 프로젝트 진행 방향에 대해 결정하게 되었다.

입지 분석에 대한 머신러닝을 진행하여 최적의 입지를 선정
입지를 그냥 문서로만 표현하면 전달력이 떨어질 것 같음!
본인이 Django 개발 경험이 있으니 >> 웹 앱 형태로 구현해보자!
실시간 전기차 충전소 정보도 보여주고, 제대로 된 분석도구를 최대한 만들어보자!

| 구상

회의 후 어떻게 운영을 해볼까, 고민을 해보았다.
개발 환경을 어떻게 할지부터.. 운영은 어떻게 할지, 고려해야 할 것들이 뭐가 있는지..

한정된 시간 속에서 최고의 결과물이 나와야 했기 때문에 고민이 많았다.

개발 환경

본인은 파이썬이 가장 익숙하고, Django 개발 경험이 많다. 그래서 Django로 결정.
- 새로운 프레임워크에 도전하기 보다는 익숙한 것으로 하기로 결정했다.
IDE는 역시 가장 익숙한 PyCharm과 VSCode를 쓸거다.
node.js 서버를 하나 띄워서 github webhook을 이용한 배포 자동화를 시도해볼 생각인데, 배포가 잦진 않을 것 같아 고민중.

운영 계획

AWS 프리티어 등을 활용해볼까도 했다.
그러나 개인 NAS가 항상 자원이 남아서 이쪽에서 운영을 해보기로 했다.
- Proxmox로 NAS를 운영 중이고, Docker용도로 굴리는 Ubuntu VM이 있어서 그쪽에서 운영할 계획을 세웠다.
이미 Django 기반의 고객사 업무 지원도구(전산)를 호스팅하고 있기 때문에 역시 익숙하다는 이유가 주된 결정 이유이다.
DB는 무난한 mariaDB를 쓰기로 했다.
웹 서버는 역시 Nginx로 할 계획이다.

관리 환경

Docker-Compose로 Stack을 만들어 운영해볼 구상을 하게 되었다.
- Docker-Compose가 궁금한 분들은 여기로..
phpMyAdmin을 Docker로 하나 띄워서 DB 관리를 좀 편리하게 해볼 생각이다.
Docker를 UI로 편리하게 관리할 수 있게 해주는 Portainer는 이미 Ubuntu VM에서 운영 중이라 자동으로 따라온다.

이 포스팅을 프로젝트 종료 후 쓰고 있으니, 과거 시점으로 쓰기가 참 어렵다.
프로젝트가 진행될 때에 초안이라도 써놓을걸, 싶기는 하지만 그땐 여유가 없을 정도로 열심히 했다는 반증이기도 하다.

결론적으로는 위 구상대로 거의 진행되었다.

이후 포스팅에서 어떻게 세세하게 셋업을 하고, 무슨 시행착오를 겪었는지 남겨보도록 하겠다.

Docker는 무엇이고, Docker Compose는 무엇인가?

JGP — Wed, 3 Apr 2024 14:41:22 +0900

| 들어가며

최근 몇 년 동안, 컨테이너 기술이 애플리케이션 배포와 관리에 있어서 혁신하고 있다.
그 중에서도 Docker는 특히 주목받는데, 그 이유는 개발자와 시스템 관리자 모두에게 애플리케이션을 패키징하고 실행하는 데 있어서 쉽고 효율적인 방법을 제공하기 때문이다.

이번 포스팅에서는 Docker와 그 도구인 Docker Compose에 대해 소개하고, 이들이 개발과 배포의 효율성을 어떻게 높이고 있는지 살펴보자.

| 그래서 Docker가 뭔데?

Docker는 컨테이너화된 애플리케이션을 만들고 실행하는 플랫폼으로, 애플리케이션을 환경과 분리하여 일관된 배포와 실행이 가능하게 해준다.

| Docker의 핵심 개념 정리

이미지(Image): Docker 컨테이너를 만들기 위한 파일 시스템과 실행할 애플리케이션 설정 등이 포함된 일종의 템플릿이다.
- 이미지는 Docker Hub에서 가져올 수도 있고, 직접 빌드하여 만들 수도 있다.
컨테이너(Container): 이미지의 실행 가능한 인스턴스로, 격리된 환경에서 애플리케이션이 실행된다.
- Host OS(Windows, macOS, Linux 등..) 상에서 Docker Host가 운영되고, Docker Host 상에서 컨테이너가 구동된다.
레지스트리(Registry): Docker 이미지를 저장하고 배포하는 곳으로, Docker Hub가 가장 널리 사용되는 레지스트리 중 하나이다.

| 그럼 Docker Compose는 또 뭔데?

Docker Compose는 여러 개의 Docker 컨테이너를 정의하고 실행하는 도구이다.
복잡한 다중 컨테이너 애플리케이션을 간단히 정의하고 관리할 수 있다.

주로 개발 환경에서 사용되며, Docker Compose 파일을 통해 애플리케이션의 구성과 서비스 간의 의존성을 정의할 수 있다.

| Docker Compose의 주요 기능

단순한 정의: YAML 파일을 사용하여 애플리케이션의 서비스, 네트워크, 볼륨 등을 정의할 수 있다.
다중 컨테이너 관리: 여러 개의 컨테이너를 동시에 관리하고, 서로 간의 의존성을 설정할 수 있다.
편리한 환경 구성: 개발자가 로컬 환경에서 애플리케이션을 실행하고 테스트하기 위해 필요한 모든 설정을 포함할 수 있다.

| 예시

예를 들어, 웹 애플리케이션을 Docker와 Docker Compose를 사용하여 개발 및 배포할 때 다음과 같은 절차를 거칠 수 있다.

Dockerfile 작성: 각 애플리케이션 서비스에 대한 Dockerfile을 작성하여 이미지를 빌드한다.
docker-compose.yml 작성: 여러 서비스와 이들 간의 의존성을 정의하는 Docker Compose 파일을 작성한다.
서비스 실행: docker-compose up 명령어를 사용하여 정의한 서비스를 실행한다.
테스트 및 디버깅: 개발자는 로컬 환경에서 애플리케이션을 테스트하고 디버깅할 수 있다.
배포: 개발이 완료되면 Docker Compose를 사용하여 애플리케이션을 서버에 배포할 수 있다.

실제 사용사례는 아래와 같다.

Django 웹 앱의 경우
- 웹 서버 : Nginx
- 웹 프레임워크 : Django
- DB : MariaDB
- 관리도구 : phpMyAdmin

위 각 서비스들(Nginx, Django, MariaDb, phpMyAdmin)을 각각의 컨테이너로 만들고, 각 컨테이너의 설정은 Dockerfile로 관리하며, 각 컨테이너 간의 환경(네트워크 설정, 저장소 설정 등..)은 docker-compose로 관리하는 것이며, 개발 중에는 내용의 변경이 있을 때마다 docker-compose를 재시작하면 변경 내용이 자동으로 다시 빌드되므로 개발환경의 효율성을 제고할 수 있는 것이다.

마치며

Docker와 Docker Compose는 애플리케이션 개발과 배포를 효율적으로 관리할 수 있는 강력한 도구이다.
컨테이너화 기술의 발전으로 더 많은 개발자와 조직이 이러한 도구를 채택하고 있으며, 이는 개발 생산성과 시스템 관리의 효율성을 크게 향상시키고 있다.

이제 Docker와 Docker Compose를 활용하여 보다 효율적으로 애플리케이션을 개발하고 배포해보자.

참고 자료

Docker 공식 문서: https://docs.docker.com/
Docker Compose 공식 문서: https://docs.docker.com/compose/

p.s 지훈과얼굴들 프로젝트 포스팅하다가 Docker 정리하는 포스팅이 필요해서 썼다(...)

새 프로젝트 시작: '지훈과 얼굴들'

JGP — Fri, 22 Mar 2024 15:34:39 +0900

필자는 작년(2023)년 12월 말 부터 데이터 분석 공부를 하고 있다.

'멀티캠퍼스'라는 훈련기관에서 운영하는 국비지원 과정에 참여하고 있는데,
그 동안 작은 미니 프로젝트들(Kaggle 대회, 자체 과제 등등..)만 진행하다가 이번에 드디어 중규모의 세미 프로젝트를 진행하게 되었다.

| 지훈과 얼굴들

좋은 팀원들을 만났음에도 주제 선정에 꽤나 큰 난항을 겪었다.

대 주제를 거의 2번 정도 엎었고, 세부적인 내용들을 하나부터 열까지, 변수를 어떻게 해야할지, 지역을 어떻게 설정해야할지..

기획안부터 실제 분석과 개발까지,
정말 어려운 과정들의 연속이지만, 이를 버텨내고 이겨내면서 성장하는 나와 우리 팀원들을 발견 하곤 한다.

사족은 이 정도로 하고, 그래서 우리 팀은 '지훈과 얼굴들'이라는 팀 이름을 갖게 되었다.

우리 조에 지훈님이 있으시고, 강사님의 성함도 지훈을 쓰시기 때문에 살짝 많이 노린 감이 있다.
~~(강사님이 보고 계신다면, 그것은 기분탓임을 다시 한번 강조 ~~ ^__^)~~

| 주제 선정

분석을 하려는데 주제가 없으면 그냥 즐거운 사교모임 정도에 그치고 말 것이 아닌가!
프로젝트 기간은 길지 않다. 정말 우여곡절 끝에, '전기차'라는 대주제를 정했다.

그래서 우리 조의 최종 목표는 아래와 같다.

교통 흐름과 도시 내 이동 패턴 데이터를 분석하여 전기차 충전소의 최적 위치를 예측

이렇게 장황하게 이 블로그에서 이 프로젝트를 열어본다.

사실 이 글이 업로드 되는 시점은 프로젝트 마무리가 1주일 쯤 남은 시점이긴 하지만..
부지런히 포스팅도 하고, 분석도 하고, 개발도 하고! 발표 자료도 만들어야한다.