Yuho Jeong

작년에 이어 작성하는 2024년 회고글. 아직 작성중이며, 올해가 가기 전에는 내용을 모두 업로드 하는 것을 목표로 하고 있습니다. 작년에 이어 작성하는 2024년 회고글. 아직 작성중이며, 올해가 가기 전에는 내용을 모두 업로드 하는 것을 목표로 하고 있습니다.

최근 몇 년 간의 Deep Generative Model의 발전 과정을 빠르게 훑고, 이 중 중요했던 diffusion과 flow matching 기반의 논문들을 리뷰합니다. 최근 몇 년간 중요했던 논문들을 한 줄 요약해보면 다음과 같습니다. 2020.06 / DDPM: 데이터에 점진적으로 노이즈를 추가하는...

2020년에 발표되었던 Denoising Diffusion Probabilistic Models 논문을 정리합니다. DDPM은 2020년 전 까지는 GAN 중심으로 연구되었던 생성형 모델링 분야를 diffusion 기반으로 전환을 이끌어낸 아주 중요한 논문 중 하나입니다.

Python 개발 환경에서 패키지 관리는 필수적입니다. pip, poetry가 제일 유명하지만 최근에는 uv를 사용하는 프로젝트들이 점점 늘어나고 있습니다. 이 글에서는 각 도구들의 주요 특징이나 장단점에 대해 비교해보도록 하겠습니다. pip은 Python 패키지 설치 도구 중 가장 오래되고 널리...

Generative model의 종류, task, metrics, 관련 서비스 등을 정리합니다. Diffusion models 은 노이즈로부터 점진적으로 데이터를 복원하는 과정을 학습하여 새로운 데이터를 생성합니다. DDPM은 데이터에 점진적으로 노이즈를 추가한 후, 이를 역으로 제거하는 과정을 학습합니다.

Dart는 Google에서 개발한 프로그래밍 언어로, Flutter 앱 개발을 위해 사용됩니다. JavaScript와 유사한 문법을 갖고 있으며, 높은 성능과 생산성을 제공합니다. 특히 클라이언트 측 애플리케이션을 만들기 위해 설계되었으며, UI를 직접 조작할 수 있는 장점이 있습니다.

Software Development 관련 공부한 내용을 아래에 기록합니다. SemVer(Semantic Versioning): {major}.{minor}.{patch}로 의미를 부여한 버저닝 시스템. 가장 일반적으로 사용되는 버저닝 방식. HeadVer: {head}.{yearweek}.{build}로 부여한 버저닝 시스템. SemVer는 API를 위한 버저닝 시스템이라는 점을 지적하며, 최종 사용자를 더 염두에 두고 버저닝한 방식.

딥러닝 모델 최적화를 위한 방법들에 대해 정리합니다. 작성중인 게시글이며 계속해서 내용을 추가하고 있습니다. PCA: X가 mean normalization된 행렬이라고 할 때, 공분산 행렬에 eigenvalue decomposition을 수행하여 eigenvalue와 eigenvector를 얻어낸 뒤, eigenvalue 값이 큰 방향(즉, 분산이 큰 방향)을 남겨서 데이터를 표현함

Kubernetes는 컨테이너 오케스트레이션 플랫폼 중 하나로 다수의 컨테이너 어플리케이션을 운영 및 관리하고, 배포하고, 확장할 수 있는 여러 자동화된 기능들을 제공하고 있습니다. 본 포스팅에서는 Kubernetes의 기본 개념과 kubectl, helm 등에 대해 기록합니다.

NeurIPS 2022에서 발표된 Matryoshka Representation Learning 논문을 정리합니다. 이미지나 텍스트의 embedding을 뽑고자 할 때 여러 pre-trained backbone을 활용하는 경우가 많은데, 이 때 필요에 따라 특정 dimension으로 embedding을 맞춰줘야 하는 경우가 꽤나 빈번하게 ...

데이터 엔지니어링 관련 학습한 내용들을 아래에 기록합니다. ChatGPT를 많이 활용하였으며, 빠른 학습 및 시간 절약을 위해 출력 내용을 한국어로 따로 번역하지 않고 필요한 부분만 수정하여 업로드하고 있습니다. Parquet is an open-source columnar storage file format optimized for use with big data processing frameworks ...

AWS Lambda, AWS SQS를 통해 이벤트를 전달 받고, 특정 이벤트에 대한 경고 알림을 slack으로 전송하는 방법에 대해서 기록합니다. Lambda 개발은 vscode의 AWS Toolkit을 활용하였고, slack 알림은 slack webhook bot을 활용하였습니다.

Git workflow 관련 기본 개념과 GitHub Actions을 통해 CI/CD를 하는 방법을 workflow yaml 파일과 함께 기록합니다. 작성중인 게시글이며, 새롭게 알게된 내용이 있을 때 마다 내용을 추가하고 있습니다. 혼자 해보고 싶은 테스트들을 yuhodots/workflows 저장소에서 진행하고 있습니다.

React의 기본요소들부터, redux, hooks 까지, React를 사용하기 위한 기본적인 개념들을 한 곳에 정리합니다. JS는 명령형 방식이지만 React는 선언형 방식. 원하는 상태를 정의하면 적절한 업데이트는 React가 처리. JSX는 JS를 확장한 문법으로 React에서 UI 표현을 위해 사용

CVPR 2024에서 발표된 On Train-Test Class Overlap and Detection for Image Retrieval 논문을 정리합니다. Image retrieval task는 주어진 query 이미지 상에 특정 object를 검출한 뒤에 해당 object와 매칭되는 internal db 상의 다른 이미지를 찾아내는 task입니다.

ICLR 2023에서 Spotlight으로 선정된 Vision Transformer Adapter for Dense Predictions 논문을 정리합니다. ViT가 고안된 이후로 여러 vision task에서도 transformer 구조를 적극적으로 활용하고 있습니다. 하지만 object detection이나 image segmentation...

Meta AI Research의 Segment Anything 논문의 Data Engine 파트와 Appendix F 파트를 정리하며 mask annotation 자동화 과정에서 고려할 점들이 무엇인지 파악합니다. 제일 처음 단계에서는 사람이 직접 mask annotation 만들었음. 모델 도움도 일부 받음. 처음에는 SAM을...

AAAI 2024에서 발표된 MobileInst: Video Instance Segmentation on the Mobile 논문을 정리합니다. Video 데이터에 대한 instance segmentation을 모바일 환경에서 수행하는 것은 중요하지만 아직 어려운 task 중 하나입니다. Instance에 대한 mask 추론을 frame 단위로...

NeurIPS 2022에서 발표된 A Neural Corpus Indexer for Document Retrieval 논문을 정리합니다. Document retrieval과 ranking은 웹 검색 엔진에 있어서 key stage들입니다. 본 논문은 document retrieval을 딥러닝 기반으로 수행하는 end-to-end 방법을 제안합니다.

Airflow DAG를 짤 때 여러 task를 연결시키다 보면 graph view가 많이 복잡해지곤 합니다. 이를 해결하기 위해서 airflow에서는 task들을 hierarchical groups으로 정돈할 수 있도록 돕는 TaskGroup이라는 기능을 제공하고 있습니다.

시기별로 내가 가진 생각이나 느낀 감정들은 일기에 꾸준히 기록하며 종종 꺼내보고 있다. 하지만 그 생각이나 감정들을 밖으로 드러내본 기억이 많지는 않았던 것 같다. 딱히 그렇게 대단한 생각이나 복잡한 감정을 가지고 사는 편이 아니긴 하지만, 괜히 부끄럽기도하고 빈틈이나 허점을 들키게 되는 것이 두려워서 굳이 드러내지도 않았던 것 같다.

가짜연구소 7기 '최신연구동향 쉽고 재미있게 작성하기' 그룹에 참여하여 작성한 글을 이곳에 공유합니다. Weakly-Supervised Instance Segmentation을 주제로 선정하여 최신 연구 동향에 대한 글을 작성하였으며 CV 분야에 대한 이해도가 있는 분들을 독자층으로 하고 있습니다.

데이터 기반의 의사결정을 하거나 AI 알고리즘/rule을 서비스에 추가하기 위해서, 여러 다양한 데이터를 가공하고 DB에 넣고 querying 할 필요가 있습니다. 본 포스팅에서는 이와 관련된 vector DB 사용법 부터 기본적인 SQL query 문, 시각화 방법 등을 기록합니다.

NeurIPS 2023에서 oral paper로 선정된 Visual Instruction Tuning 논문을 정리합니다. 해당 논문은 LLaVA라는 이름으로도 알려져 있으며, multimodal learning 분야에서 image와 text pair를 가지는 intruction tuning dataset으로 모델 학습을 시도한 첫 논문입니다.

NVIDIA Triton Inference Server 사용을 위한 기본 개념들과 샘플 코드를 기록합니다. Triton은 NVIDIA가 직접 만든 AI inference용 서버입니다. Triton 내부에서는 추론 최적화 및 GPU 활용률을 높일 수 있는 여러 기능들을 제공하고 있으며, 모델을 model repository에 저장하면 간단히 inference API를 만들 수 있습니다.

Apache airflow는 에어비앤비에서 만든 워크플로우 관리 시스템입니다. 본 포스팅에서는 기초적인 airflow DAGs 작성 예시와 사용법을 확인합니다. 로컬 가상환경에서 pip를 통해 airflow를 설치하여 사용하거나, airflow docker 이미지를 pull 받아 사용하는 방법이 존재합니다.

Python project packaging과 관련하여 poetry 사용법과 pyproject.toml 작성 방법에 대해 간단히 기록합니다. 과거에는 package 제작시 setuptools를 활용하여 setup.py에 package 정보를 적고 PyPI에 등록하는 절차를 거쳤지만, 최근에는 pypoject.toml 형태로 대부분 바뀌는 중입니다.

ICML 2023 oral paper로 선정된 Test-Time Augmentation in the Presence of Open-World Data Shift 논문을 정리합니다. 일반적으로 TTA 세팅은 covariate shift만을 가정하지만, 본 논문에서는 real-world에서 label shift 또한 대응할 수 있어야 한다고 주장합니다.

'Deformable DETR: Deformable Transformers for End-to-End Object Detection' 논문을 정리합니다. 저자들은 deformable attention module을 통해 convergence 속도를 높이고, multi-scale feature를 활용하여 small object 성능을 높이는 방법을 제안합니다.

Deep learning 기반의 object detection 알고리즘에 대해 리뷰합니다. Two-stage detector와 one-stage detector 알고리즘 중에서 유명한 알고리즘들을 위주로 간단히 정리하였습니다. 오타나 정확하지 않은 내용에 대해서 댓글 달아주시면 감사합니다.

Unlabeled data pool에서 가치있는 데이터를 발굴해내기 위한 방법인 Active Learning에 대해 정리합니다. 원작자인 Lilian weng 님의 허락을 받고 블로그 글의 일부를 번역하였으며, 자세한 내용은 원문 링크를 참고하시면 좋습니다.

ViT 관련 알고리즘들을 모아 정리합니다. 알고리즘은 시간 순으로 나열하였습니다. 포스팅의 제목은 Variants of Vision Transformer이나, 구조적 차이를 갖는 논문 외에도 동일한 구조에서 학습 방법만 차이를 갖는 논문들도 기록하였습니다.

AI 모델 배포를 위한 라이브러리와 프레임워크들에 대해 간단히 기록합니다. ONNX: Open Neural Network Exchange. 서로 다른 프레임워크로 만들어진 AI 모델을 서로 호환 가능하도록 Facebook과 Microsoft가 개발한 신경망 모델 포맷. TensorFlow, PyTorch, ...

IDE keyboard shortcuts 부터, vim, shell, tmux 등 개발자들이 자주 사용하는 툴의 편리한 기능들에 대해 기록합니다. 협업 관련 참고할 수 있는 기능이나 convention도 기록합니다. 잘 설명되어있는 블로그 글이나 자료들은 링크로 공유하였습니다. 새로 알게되는 내용이 생길 때 마다 계속해서 내용을 추가하고 있습니다.

강화학습(Reinforcement Learning)과 관련하여 테이블 기반의 방법론부터 Deep RL까지 중요한 개념을 위주로 간단히 정리합니다. 공부를 위해 교재로는 노승은 님의 '바닥부터 배우는 강화학습'을 읽은 뒤에 Sutton 교수님의 'Reinforcement learning - An introduction.'을 살펴보시는 것을 추천드립니다.

CVPR 2022에서 발표된 Generalized Category Discovery 논문을 정리합니다. 해당 논문에서는 GCD라는 새로운 task를 정의합니다. 기존에 존재하던 NCD의 가정이 real-world와 괴리가 있었기 때문에 NCD 세팅을 더 일반화 시키고자 한 것이 GCD 입니다.

'Formal Algorithms for Transformers'과 'Attention Is All You Need' 논문을 참고하여 Transformer를 정리합니다. Attention은 query vector와 key vector를 기반으로 value vector를 업데이트 시키는 매커니즘입니다. 그리고 Attention을 기반으로 2017년에 Transformer라는 구조가 제안되었습니다.

MLOps를 위한 도구들의 사용법을 명령어 위주로 정리하고 있습니다. 대부분은 공식 문서의 내용을 참고하고 있고, 그 외 내용을 참고하게 되는 경우에는 글 내용에 언급하거나 reference에 추가하고 있습니다. 현재는 Docker, Kubernetes, MLflow, Kubeflow의 내용을 다루고 있으며, 공부 진행 상황에 따라서 내용을 계속해서 추가하고 있습니다.

Mahalanobis distance는 데이터의 분포를 고려하며 거리 계산을 할 수 있는 좋은 툴입니다. 식을 이해하기 위해서는 먼저 공분산과 공분산의 역행렬 term이 의미하는 바를 알아야 하기 때문에, 이번 포스팅에서 간단한 설명 및 시각화를 통해 mahalanobis distance을 이해해보도록 하겠습니다.

Deepmind에서 2021년에 발표한 Normalizer-Free ResNets 논문 두 개를 리뷰합니다. BatchNorm이 몇 가지 문제점이 존재하지만 모델의 성능에 큰 영향을 주기 때문에 계속 사용해 왔던 점을 지적하며, BatchNorm이 없더라도 기존 성능을 유지할 수 있는 방법을 제안합니다.

Ray Tune 도큐먼트를 읽고 자주 사용할 만한 기능들을 기록합니다. 공부를 진행하면서 내용을 계속해서 업데이트하고 있으며, 이 과정에서 직접 사용해본 코드 예시 또한 추가하고 있습니다. Ray에는 크게 Task, Object, Actor라는 세 가지 요소가 존재합니다.

toch.utils.data 공식 문서를 읽고 pytoch dataloder 사용법을 기록합니다. torch.utils.data.DataLoader class constructor arguments는 다음과 같습니다. PyTorch에서 지원하는 dataset의 타입은 두 가지가 있습니다. Map-style datasets과 Iterable-style datasets 입니다.

관심 분야의 논문들을 기록합니다. 최근에 읽은 논문들에 대해서는 핵심 내용을 세 줄 요약으로 적고 있습니다. 체크 표시가 되어있지 않은 논문들은 추후 다시 읽어 볼 필요가 있는 논문을 의미합니다. Few-shot learning, Meta Learning, Incremental & Continual Learning, Self & Semi-supervised Learning, Reinforcement Learning, Natural Language Processing 분야의 논문을 기록하였습니다.

CVPR 2021에서 oral로 발표된 NeRF in the Wild (NeRF-W)에 대해서 포스팅합니다. 해당 논문은 View Synthesis task를 풀기 위한 알고리즘인 NeRF가 in-the-wild 데이터에는 대응하지 못한다는 점을 지적하며 이를 개선하고자 한 advanced 버전의 NeRF 알고리즘입니다.

이번 포스팅에서는 ACL 2020 학회에서 발표된 Li, Xiaoya, et al.의 Dice loss for data-imbalanced NLP tasks 논문에 대해서 정리합니다. 최근에 포스팅을 할 시간이 너무 부족해져 간단하게 핵심 내용 위주로만 글을 작성하였습니다.

분류기의 성능 평가 지표인 confusion matrix, precision(정밀도), recall(재현율), sensitivity(민감도), F1-score, ROC curve, AUC에 대해서 간단하게 기록합니다. Hands-On Machine Learning 2판을 참고하여 작성하였으며 이 외에 참고한 자료를 아래 references에 기록하였습니다.

이번 포스팅 에서는 Parisi, German I의 Continual lifelong learning suvery와 Masana, Marc의 Class incremental learning survey, Liu의 Learning on the job 논문을 참고하여 Continual lifelong learning에 대해서 정리합니다.

Batch normalization의 개념에 대해 소개하고, meta-learning 세팅에서는 어떤 normalization 방법을 사용하는게 적절한지 정리합니다. Batch normalization은 2015년 Sergey Ioffe와 Christian Szegedy의 논문에서 제안된 기법입니다. BatchNorm을 사용하면 대부분 모델의 성능이 향상됩니다.

새롭게 알게 된 지식 중에서 하나의 포스팅으로 만들기에는 부담스러운 내용들을 이곳에 모아둡니다. 매일 공부한 내용을 기록하기보다는 아무때나 비정기적으로 내용을 업데이트 하고 있습니다. 본 포스팅에서는 AI/ML과 관련된 기술스택 내용을 쌓고 있습니다. 최근에 작성한 내용들이 하단에 위치하도록 배열하였습니다.

새롭게 알게 된 지식 중에서 하나의 포스팅으로 만들기에는 부담스러운 내용들을 이곳에 모아둡니다. 매일 공부한 내용을 기록하기보다는 아무때나 비정기적으로 내용을 업데이트 하고 있습니다. 본 포스팅에서는 AI/ML 외의 CSE 기술스택 내용을 쌓고 있습니다. 최근에 작성한 내용들이 하단에 위치하도록 배열하였습니다.

이번 포스팅에서는 2020년 NIPS 학회에 게재된 Deepmind 팀의 Bootstrap your own latent 논문에 대해 리뷰합니다. 인공지능 학습을 위해서는 많은 양의 데이터가 필요합니다. 여기서 데이터라 함은 데이터 그 자체뿐만 아니라 예측이 틀렸는지 맞았는지 확인하기 위한 label을 포함합니다.

이번 포스팅에서는 2019년 ICLR 학회에 게재된 Learning to Propagate Labels: Transductive Propagation Network for Few-shot Learning 논문에 대해 리뷰합니다. 랩 세미나 준비를 위한 스크립트를 제작하다가 겸사겸사 포스팅으로도 올리게 되었습니다 🤣

tf.gradient와 compute_gradient의 TensorFlow 공식 문서 설명을 번역합니다. Stackoverflow를 참고하여 tf.gradient와 compute_gradient의 차이점을 정리합니다. tf.gradient는 xs에 관한 ys의 symbolic derivative를 계산합니다.

실험용 워크스테이션 서버에 GeForce RTX 3090을 장착하여 사용하게 되었습니다. 직접 GPU를 교체하지는 않았고 기사님께서 오셔서 설치를 해주셨는데, GPU 장착 이후에 제가 Ubuntu 18.04 x86_64 운영체제 위에서 실험 환경을 구축했던 과정들을 아래에 공유합니다

랩에서 머신러닝 워크스테이션으로 Ubuntu 18.04 OS를 사용하고 있는데, 서버 관리 및 작업 과정에서 자주 사용되는 커맨드를 아래에 글로 정리하는 중입니다. 새로 알게 되거나 공유하고 싶은 내용이 생길 때 마다 추가해나가고 있습니다.

짧은 글을 통해 지금까지의 블로그 활동을 돌아보고, 앞으로의 방향성을 다시 잡아보려 합니다 🧐. 블로그를 처음 개설한 게 벌써 1년 4개월 전입니다. 당시에는 웹 개발에 흥미가 있었고 이를 진로로 희망하진 않았지만, 최소 1년 정도는 꾸준히 공부하고 싶다는 생각을 했습니다. 그래서 웹 개발 기초 강의를 수강한 뒤 정리하는 목적으로써 블로그를 개설 하였고 초창기 포스팅은 강의 내용을 따라 적거나 정리하는 글이 대부분이었습니다.

위키피디아와 DeepLearning Book 등을 바탕으로, 참고하기 위해 정의와 성질 순서로 간단하게만 정리한 글입니다.사건에 대한 확률 변수와 그 사건이 벌어질 확률을 곱한 것을 전체 사건에 대해 합한 값 - 확률적 사건에 대한 평균의 의미로 생각할 수 있다. 이 경우 '모 평균'으로 다룰 수 있다.

이 챕터는 주로 statistics에 관한 개념들에 대해 다룹니다. 우리가 다음과 같은 statistics 개념에 대해 이해한다면, generalization, underfitting and overfitting에 대해서 분석을 할 때 유용하게 활용할 수 있습니다.

Ian Goodfellow의 Deep Learning 책 내용을 참고하여 번역한 포스팅입니다. 개인적인 이해도에 따라서 추가되거나 빠진 내용이 있는 점 참고하시길 바랍니다. 잘못된 내용에 대해서도 지적해주시면 감사하겠습니다.

2019년 2월에 교내 인액터스 친구들과 시작한 프로젝트를 2020년 6월이 되어서 마무리하게 되었습니다. 막 프로젝트를 마무리하게 된 이 시점에서 1년 반 동안의 기록을 아래에 적어보려고 합니다. 저희 프로젝트의 이름은 '유잇다'입니다. 제가 현재 재학중인 유니스트의 학생들을 저희의 웹 서비스를 통해 연결해보겠다는 의미에서 제작된 이름입니다.

딥러닝을 통해 이미지 데이터를 다루려고 할 때, 이미지 데이터의 file format에 따른 mode에 대해 이해하고 있으면 유용합니다. 이번 포스팅에서는 자주 사용되는 이미지 데이터 파일의 format과 mode에 대해 알아보도록 하겠습니다.

가끔 TensorFlow 2.0이 아닌 버전 1을 사용하게 되는 경우가 있어서, 대략적인 사용 방법을 포스팅 합니다. 제 로컬 컴퓨터에는 TensorFlow 2.0이 설치되어 있지만 버전 1을 사용해야하는 경우는 구글 colab을 통해 사용하고있습니다. (colab의 경우 곧 TensorFlow 버전 1이 버전 2.0로 대체된다고 하네요)

웹 개발의 백엔드 파트는 DB에서 데이터를 가져오거나, 프론트엔드에서 데이터를 받고 다시 데이터를 보내주는 역할을 합니다. 가장 기본적으로는 HTTP의 GET과 POST 메소드를 사용하여 이런 작업을 수행하는데, 이 때 작업의 효율성을 파워풀하게 향상시켜주는 포스트맨이라는 프로그램이 있습니다. 포스트맨을 통해 access token을 받아 로그인을 하는 방법에 대해 알아보도록 하겠습니다.

직접 프로젝트를 만들어보기 전에 다른 사람의 프로젝트 디렉토리 구조를 확인하여 어떤 식으로 디렉토리를 구성해야하는지 감을 잡아보도록 하겠습니다. 저의 경우에는 저보다 먼저 리액트를 공부한 친구의 디렉토리 구조를 참고하였습니다.

이 글은 제가 작년에 수강한 수치해석 과목의 orientation 수업 내용을 바탕으로 정리되었습니다. 일반적으로는 좌측에 디렉토리, 중앙에 스크립트, 우측에 작업공간 (변수와 값), 하단에 명령 창으로 이루어져 있습니다. 맥의 경우에는 ctrl이 아니라 command 버튼을 눌러야 합니다.

리액트의 컴포넌트는 우리가 모니터링하고 조작할수 있는 세 단계의 주요 라이프 사이클을 가지고 있습니다. 이번 포스팅에서는 리액트의 라이프사이클인 Mounting, Updating, Unmounting에 대해 공부해보도록 하겠습니다.들어가기 앞서 기본적으로 알고있어야 하는 DOM에 대해 알아봅시다.

create-react-app 모듈을 글로벌로 설치합니다. create-react-app 명령어로 프로젝트를 생성합니다. 앱을 실행하고 localhost:3000에서 제대로 동작하는지 확인합니다. React에서 가장 기초가 되는 개념은 컴포넌트입니다.

다양한 사용자들이 접속하는 웹 개발을 진행하다보면 게시글 작성 시간, 접속 시간, 댓글 작성 시간 등 시간과 관련해서 처리해야 하는 작업들이 존재합니다. 기본적으로 DB서버에서 제공하는 NOW()같은 기능을 사용해도 되지만, 사용자가 읽기에도 직관적이며 내가 원하는 시간이 출력되도록 돕는 moment.js 모듈에 대해 알아보겠습니다.

React를 사용해야하기 때문에 설치를 해 줍시다. 그리고 React 프로젝트를 원하는 디렉토리에 생성합니다. 프로젝트가 제대로 작동하는지 확인하기 위해서 App.js 파일이 위치한 디렉토리의 터미널에서 npm start를 수행합니다.

일단 자세한 사용법을 익히기 전에 FullCalendar를 화면에 띄워보는것부터 시작합시다. Scrpit 태그를 통해 FullCalendar를 띄우는 방법을 설명하고 있으니, ES6 빌드 시스템으로 띄우고 싶으신 분은 이곳을 참고하시길 바랍니다.

Node.js와 mysql, AWS EC2, S3, Nginx 등을 연동하여 백엔드 작업을 하고있는데 가끔씩 'Error: Connection lost: The server closed the connection.' 이라는 에러 로그가 뜨면서 웹 사이트에 접속이 되지 않을 때가 있습니다. 구글링을 통해 왜 이런 에러가 발생하는지, 어떤 방식으로 해결 할 수 있는지에 대해 알게 된 내용을 아래에 적어봅니다.

node.js express를 사용하는 데에 있어서 가장 기본적인 것은 req객체, res객체, express()함수를 사용하는 것입니다. 하지만 매번 까먹곤 하는 내용이어서 Express 공식 홈페이지를 참고하여 정리 해 보았습니다. req.body는 POST 정보를 가집니다. 요청 정보가 url에 들어있는 것이 아니라 Request의 본문에 들어있기 때문입니다.

프론트엔드 공부를 시작할 때, 처음에 많이 언급되는 ECMAScript, TypeScript, React에 대해 정리합니다. 위키피디아에서는 ECMAScript를 아래와 같이 설명하고 있습니다. ECMA스크립트는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다.

이전 포스팅에서는 SSL 인증을 받고 이를 도메인에 연결한 뒤 node.js 내 app.js에서 http 접속을 강제로 https로 리다이렉션 하는 방법에 대해 알아보았습니다. 이번에는 nginx에서 https 리다이렉션을 구현하는 방법에 대해서 알아보도록 하겠습니다.

한 4일 전 쯤에, AWS에서 ACM 인증서를 발급 받고 웹 사이트에 https 접속을 받을 수 있게 되어서 굉장히 뿌듯해 하고 있었습니다. 그리고 이 뿌듯한 마음을 가지고 백 엔드 작업을 룰루랄라 신나게(?)하고 있었는데 갑자기 웹 사이트가 nginx 502: Bad Gateway 에러를 꽥 뱉으면서 접속이 되지 않았습니다.

블로그를 시작하고 얼마 안 된 것 같은데 벌써 8월이 되었습니다. 블로그를 처음 시작할 때 공부한 내용을 열심히 포스팅 하겠다는 다짐은 했지만서도 두 세달 정도 포스팅을 하다보면 질려서 포스팅 횟수가 현저히 적어지지 않을까 생각을 했었습니다. 근데 아직까지도 자주 게시글을 작성하는 걸 보면 생각보다는 꾸준히 하고 있다는 생각이 스스로 드네요.

https에 붙는 's'는 Secure Socket Layer를 의미하는데 이를 줄여서 SSL이나 TLS(Transport Layer Security)라고 부르며 SSL/TLS인증을 받아야 자신의 웹 사이트를 공격자로 부터 더 안전한 사이트로 만들 수 있습니다.

저번 AWS ACM 포스팅에서는 Route53과 AWS EC2를 사용하고 있는 내 서버에 ACM을 통해 SSL 인증서를 발급받는 방법을 알아보았습니다. 이번 포스팅에서는 발급받은 SSL인증서를 ELB라는 것을 이용해서 비교적 쉽게 서버에 적용하는 방법을 알아보도록 하겠습니다.

로그인을 올바르게 한 사용자만이 글을 작성 할 수 있고, 소유자만이 글을 수정 및 삭제를 할 수 있도록 Node-Express와 MySQL을 활용하여 구현 해 보도록 합시다. 저는 request 객체에 user라는 값이 담겼는지 확인하는 함수와 로그인 유저와 글 생성 저자가 같은지 판단하는 함수를 만들었습니다.

저는 로그인, 회원가입, 인증 기능을 구현하기 위해 express-session, passport.js (local strategy)를 사용하고 있습니다. 이를 위해서는 session store를 만들어야 하고 그래서 mysql을 session store로서 사용하려 합니다. 그렇다면 mysql을 session store로 사용하기 위해서는 어떻게 해야 할까요?

S3는 아마존 웹 서비스에서 제공하는 서비스 중 하나입니다. 풀어서 보면 Simplet Sotrage Service라는 의미를 가지고 있습니다. 즉, 어떠한 정보를 저장하는 서비스라는 말인데 그냥 쉽게 생각하면 파일을 저장하는 서비스라고 말할 수 있습니다.

mysql 데이터베이스를 이용한 글 읽기, 생성, 수정, 삭제가 가능한 게시판을 구현하기 위해서는 사용자가 작성하는 텍스트 정보들이 데이터베이스 서버 내 전달되어야 하고, 그러기 위해서는 데이터베이스에 테이블을 어떤 형태로 만들지 미리 모델링을 해놓아야 합니다.

사용자가 업로드한 파일을 우리 서버컴퓨터의 원하는 디렉토리에 저장하는 기술을 express가 기본적으로 제공하고 있지는 않기 때문에 multer라는 모듈을 설치하여 이를 처리해야 합니다. npm install --save multer 명령어를 통해 우리 프로젝트에 multer모듈을 설치 해 줍시다.

Express-generator로 생성한 웹 애플리케이션 프로젝트의 app.js 파일을 살펴보면 40줄 정도의 코드가 있습니다. 오늘은 이 코드들이 각각 무엇을 의미하는 지에 대해 공부 해 보도록 하겠습니다. 일단 먼저 아래에 app.js 파일의 소스코드를 첨부하였습니다.

자신이 제작하고 있는 웹 애플리케이션을 버전 관리 시스템으로 관리하고 싶다면, 자신이 사용하는 컴퓨터의 원하는 디렉토리 내에서 git clone명령어를 사용하여 github와 연동이 가능합니다.

AWS의 EC2 인스턴스를 서버 컴퓨터로 사용하는 경우에, 혼자 개발을 진행하는 것이 아니라 여럿이 한 가지 프로젝트 개발을 진행하고 있다면 그 인스턴스에 서버를 관리하는 팀원 모두가 접근이 가능해야 합니다.

nginx가 어떻게 동작하는지에 대한 설정은 conf라는 확장자 명을 가진 설정파일 내에 기술되어 있습니다. 컴파일을 통해서 설치한 경우라면 /usr/local/nginx/conf 에, apt-get을 이용해서 우분투에 설치한 경우는 /etc/nginx에 위치한다고 합니다.

웹 애플리케이션을 잘 동작하도록 만드는 것도 중요하지만 그보다 더 중요한 것은 내가 만든 웹 애플리케이션을 이용하는 사용자들의 개인정보가 익명의 공격자에 의해 유출되지 않도록 보호하는 것 입니다. 개인정보를 해킹하는 공격 방법은 무수히 다양하지만 그 중 가장 기본적인 bcrypt에 대해서 알아보도록 하겠습니다.

로그인과 같은 인증 기능을 구현하기 위해서 직접 구현하는 것이 아니라 다른 개발 회사들이 구현한 인증방법을 우리가 빌려 사용 할 수 있습니다. 이 때 필요한 것이 passport.js입니다. 물론 이외에도 더 다양한 미들웨어가 존재하지만 passport가 가장 보편적으로 사용되는 미들웨어입니다.

주제에 상관 없이 유용한 자료와 링크들을 공유하고, 필요한 경우에는 한 줄 분량으로 코멘트를 기록합니다. 2019년도에 처음 만들었던 포스팅이지만 일부 개편 후에 2023년도 부터 다시 기록을 시작합니다.

쿠키가 등장하면서 웹이 이전의 통신 내용을 기억할 수 있게 되었습니다. 덕분에 개인화나 인증에 대한 발판이 만들어 졌지만 쿠키를 이용해서 인증을 이용하는 것은 매우 위험한 일입니다. 그래서 인증 기능을 구현할 때 쿠키가 아닌 다른 방법이 필요하게 되었고 session이 생겨났습니다.

Cookie를 제대로 이해하기 위해서는 먼저 HTTP에 대해서 알고있어야 합니다. HTTP는 Hyper Text Transfer Protocol의 약자로 서버와 클라이언트간에 요청/응답 관계에 대한 통신 규약을 말합니다. HTTP는 크게 request와 response를 위한 메세지로 구분되어 있습니다. HTTP는 눈에 쉽게 보이지 않는 추상적인 개념이기 때문에 쉽게 파악하기 위해서 크롭 개발자 도구를 활용해서 학습해 보도록 하겠습니다.

Express에서 중요한 기능 두 가지를 꼽으라고 하면 하나는 Route이고 하나는 미들웨어 입니다. 다른 사람이 만든 부품을 내 웹 페이지 구현을 위해 사용하는 방법 중 하나가 미들웨어입니다. Express홈페이지에 들어가면 다양한 미들웨어를 확인 할 수 있습니다.

Node.js 를 기반으로 하는 프레임워크는 다양하게 있지만 그 중 가장 보편적으로 사용되는 것이 Express입니다. Express를 기반으로 하여 웹 페이지를 만들어 보도록 하겠습니다. 그러기 위해서는 먼저 npm, node js, pm2 같은 기본적인 프로그램이 설치되어 있어야 합니다.

이전 포스팅에서 소개하였던 Create / Read / Update / Delete에 대해서 알아볼 차례입니다. 그 중에 Create와 Read가 제일 중요하다는 것을 기억해 주시고 MySQL에서는 어떻게 구현하는지 아래에서 살펴보도록 하겠습니다.

스프레드 시트와 데이터베이스는 둘 다 표의 형태로 정보를 출력 할 수 있습니다. 또한 정보에 대해서 ID 순서대로 정렬, 날짜 순 정렬 등 편리한 기능들이 존재합니다. 하지만 스프레드 시트는 버튼을 클릭하는 것을 통해 데이터를 제어하는 반면, DB는 SQL이라는 언어를 이용해서 데이터를 제어합니다.

여러가지 일이 있을 때, 하나를 완료해야 다음 일을 시작하고, 또 다음 일을 완료해야 다음 일을 시작하는 것을 '동기'라고 합니다. 이와는 달리 여러가지 일이 있을 때 오래 걸리는 일을 다른 사람에게 맡겨놓고 끝나면 자신에게 알리도록 한 뒤, 자신은 바로 다음 일을 시작하는 것을 '비동기'라고 합니다.

WEB은 크게 웹 브라우저와 웹서버로 나누어 볼 수 있습니다. 웹 브라우저에 주소를 입력해서 서버에 요청을 하면, 웹 서버는 주소에 따른 요청을 찾아서 응답해주는 관계에 있습니다. Node.js는 기본적으로 웹 서버를 내장하고 있기 때문에 웹 서버의 역할로서 활용할 수도 있습니다.

웹 프로그래밍에서 JavaScript의 중요한 측면은 ‘사용자와 상호작용을 한다는 점'입니다. 웹 브라우저는 한 번 화면에 출력이 되면 자기 자신을 바꿀 수 있는 능력이 없습니다. 하지만 JavaScript를 이용하면 이런 단점을 어느정도 보완할 수 있게 됩니다.