Recent

JS, TS

javascript bundler 넌 뭐니?

들어가며 안녕하세요. 잡채입니다. 요새 사내 스터디로 javascript bundler 를 직접 구현해보는 경험을 하면서 그동안 아무 생각 없이 사용했던 번들러에 대해 알아볼 기회가 생겼습니다. 그냥 javascript 코드 하나로 압축해주는거 아냐? 라고 생각했는데 들여다보니 많은 일을 하고 있는 친구였습니다. 이번에는 bundler 에 대해 알게 된 내용들을 간단하게 정리해보겠습니다. 번들러가 뭔데? 모듈 번들러를 떠올리면 많은 분들이 webpack, rollup 등 을 떠올릴 것 같습니다. 저도 webpack 이 먼저 떠올랐거든요. 모듈 번들러는 한 문장으로 설명하자면 javascript 모듈들을 브라우저에서 실행할 수 있도록 단일 javascript 파일로 만들어주는 도구입니다. 물론 webpac..

Node.js

[Nest.js/Prisma] e2e 테스트 시 docker 로 격리된 MySQL 환경 세팅

들어가며 안녕하세요. 잡채입니다 🙇🏻 얼마 전 사이드 프로젝트 서버 작업을 하며, e2e 테스팅 중 docker 를 사용해 MySQL DB를 완전히 격리해 테스트 할 수 있도록 환경을 세팅해보았습니다. e2e 테스트 시 애플리케이션의 처음과 끝을 흐름에 따라 모두 테스트 하기 때문에 당연히 DB 접근을 해야합니다. 현재 프로젝트의 경우 개발용 MySQL DB 를 RDS에 올려 사용 중인데 아무리 개발용 데이터베이스라 하여도 여러번 진행되는 e2e 테스트 마다 테스트용 데이터들이 쌓이거나 바뀌도록 구성할 수는 없었습니다. 또한, 현재 사용중인 데이터를 잘못하여 update 시키거나 삭제할 수도 있기 때문에 e2e 테스트 중에는 격리된 데이터 베이스를 새로 구성하고 싶었습니다. 여러 자료를 찾아보던 중 pr..

잡다한 개발 일지

사이드 프로젝트를 세상에 내놓는다는 것 - HAVIT

안녕하세요. 오늘은 맨날 써야지 하고 미뤘던 사이드 프로젝트에 대한 글을 시간 내서 써보려 합니다. 사이드 프로젝트를 해오면서 어떤 일을 했고, 이 과정에서 느낀 점들나 어려움들을 글로 담아보려 합니다.해빗의 시작2022년 1월 국내 최대 IT 벤처 창업 동아리 SOPT 의 장기 해커톤 AppJam (앱잼) 에서 시작한 사이드 프로젝트 해빗(HAVIT)을 약 1년 여간의 개발을 마치고 6개월 전 세상에 공개했습니다. HAVIT은 지식과 정보의 홍수 시대에 콘텐츠를 누구보다 쉽고, 똑똑하게 저장하는 콘텐츠 아카이빙 앱입니다. 언제 어디서든, 보고있던 콘텐츠를 기억하고 싶다면 공유 버튼을 통해 원하는 카테고리에 저장할 수 있습니다. 저장한 콘텐츠를 잊지 않도록 원하는 시간에 알림 설정이 가능하며, 읽은 콘텐..

잡다한 개발 일지

Oracle Cloud에 Jenkins를 구축해보자 (feat. nginx)

들어가며 안녕하세요. 오랜만입니다. 회사 생활로 퇴근하면 너무 피로해 글을 많이 올리지 못했는데 그래도 다시 꾸준히 이것저것 올려보려합니다. 얼마 전, Oracle Cloud의 VM 을 사용해 직접 Jenkins 환경을 구축해보았습니다. 사이드 프로젝트 Havit 을 세상에 내놓을 때까지 아직 CI/CD 라고 할 것도 없이 그냥 Github Actions 를 사용해 후딱 배포 환경을 만들어두고 지냈는데요. 백엔드 스프린트 목표 중 하나로 Jenkins 도입을 생각해놔서 대표적인 CI 툴인 Jenkins를 통해 빌드 환경을 제대로 구성해보려고 합니다. Oracle Cloud 늘 컴퓨팅 머신을 써야 한다면, AWS 프리티어를 이용해 EC2 1개씩 받아서 사용했는데요. 여러 클라우드 서비스 제공 업체들 비교를..

injection

[Wargame] cookie, session basic

들어가며 제법 재밌는 문제들을 발견해서 요즘 풀어보고 있다. wargame 이란 모의 해킹 문제를 제공하던 사이트인데 이 곳이 운영 중단되고 현재는 dreamhack 이란 곳에서 문제를 제공중이다. 처음 가입해서 초심자 문제들을 추천해줬는데 사실 1단계는 웹 개발 지식이 있다면 누구나 풀 수 있는 쉬운 문제들 같다. 나는 보안을 전공으로 하거나 일을 하는 사람은 아니지만, 어떤식의 취약점을 가질 수 있는지 알 수 있는 문제들이 많아서 재밌게 풀어보는 중이다. cookie cookie, 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다. (위키백과) dreamhack 에서 제공하는 접속 vm 으로 들어가..

Node.js

PR 좀 봐달라고 독촉 하는 Slack app (Feat. Node.js, AWS Lambda)

들어가며 사이드 프로젝트를 하며 pr 을 올려보지만 팀원들이 안봐준다면 .. 슬프잖아요 그럴땐 빨리 Node.js 와 AWS Lambda 를 사용해 15분만에 pr 독촉 슬랙 앱을 만들어봅시다. Github 슬랙 앱이 이미 있지만,, 이런 깨끗한 메시지로 경각심을 주지 못합니다. https://github.com/jokj624/approve-my-pr GitHub - jokj624/approve-my-pr Contribute to jokj624/approve-my-pr development by creating an account on GitHub. github.com Slack webhook 생성 구글에 slack webhook 을 검색하면 제일 첫번째로 뜨는 링크를 클릭합시다. 들어가면 이렇게 cre..

잡다한 개발 일지

M1 MacOS Ventura ruby build failed error (Feat. XCode 14)

이 글이 도움이 될 만한 경우 해당 경우가 아니면 다른 글을 찾는게 더 빠를지도 모릅니다. 1. 최근 MacOS Ventura 업데이트 후 ruby 가 이상해졌다. (XCode도 14로 업데이트 했다.) 2. 터미널에 gem 이나 ruby 관련 명령어를 입력 시 architecture 문제가 뜬다 (주로 arm64 나 x86_64) 들어가며 2022년에 MacOS ventura 가 릴리즈 되었다. "OS 는 최신이지 ~ " 릴리즈 기능 중 스테이지 매니저가 신선해서 바로 써보려고 OS 업데이트를 진행했다. 띠용 (?) 어느날부터 터미널을 키면 상단에 어마 무시한 에러가 뜨곤 했다. 저렇게 gem pristine 을 하라는 글이 수도없이 떴다. 대충 ruby가 뭔가 꼬였구나 직감했다. 하지만 gem pri..

docker

Nest.js docker 이미지 최적화 대작전 (Feat. no space left on device, multi-stage build)

들어가며 사이드 프로젝트로 리뉴얼 중인 cherish 개발용 테스트 서버를 배포하던 중 삽질을 하던 경험을 풀어보려한다. 배포는 aws 서비스를 사용해 진행했고, 설계한 테스트 서버 전체 구조는 다음 이미지와 같다. 전체적으로 Beanstalk 환경에 ELB를 사용한 오토 스케일링 그룹을 만들고, 내부적으로는 EC2, docker 를 사용해 Nest.js 앱을 배포하는 구조이다. Beanstalk 으로 보내는 과정은 Github Actions 를 통해 자동화해보았다. 이 과정에서 배포에 실패하는 다양한 문제를 겪었는데 그 중 No space left on device 라는 킹받는 이슈를 해결하기까지 과정을 적어보려한다. 아직 docker 나 인프라 관련 지식이 많이 부족해 틀린 부분이 있을 수 있어 발견..

✨ Popular

잡다한 개발 일지

M1 MacOS Ventura ruby build failed error (Feat. XCode 14)

이 글이 도움이 될 만한 경우 해당 경우가 아니면 다른 글을 찾는게 더 빠를지도 모릅니다. 1. 최근 MacOS Ventura 업데이트 후 ruby 가 이상해졌다. (XCode도 14로 업데이트 했다.) 2. 터미널에 gem 이나 ruby 관련 명령어를 입력 시 architecture 문제가 뜬다 (주로 arm64 나 x86_64) 들어가며 2022년에 MacOS ventura 가 릴리즈 되었다. "OS 는 최신이지 ~ " 릴리즈 기능 중 스테이지 매니저가 신선해서 바로 써보려고 OS 업데이트를 진행했다. 띠용 (?) 어느날부터 터미널을 키면 상단에 어마 무시한 에러가 뜨곤 했다. 저렇게 gem pristine 을 하라는 글이 수도없이 떴다. 대충 ruby가 뭔가 꼬였구나 직감했다. 하지만 gem pri..

잡다한 개발 일지

Uncaught SyntaxError: Unexpected token '<' in 자문자답 ^0^ - Node.js

https://antdev.tistory.com/32 [NodeJS] npm으로 express, socket.io 모듈 설치 및 웹 서버 구축, 소켓 연결하기 [express와 socket.io을 이용 2019/02/27 - [NodeJS/NodeJS로 간단한 채팅기능 만들기] - [NodeJS] 채팅방UI 구성, 소켓 연결을 통한 채팅기능 완성하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 2장] 2019/02/22 - [NodeJS] - [Nod.. antdev.tistory.com 현재 하고 있는 것 중에 웹 채팅이 필요해서 위 블로그를 보며 간단히 구현하려 했으나 (이미 css,html,js) 는 구현한 상태였음 https://stackoverflow.com/question..

잡다한 개발 일지

Macbook M1 에서 터미널 세팅 (brew, zsh, iterm, oh-my-zsh)

드디어 제가 macbook pro M1 을 구매했습니다 😍 오늘 따끈하게 배송 왔는데 오자마자 한 일은 터미널 세팅 -_- 기존에 리눅스에서도 oh-my-zsh로 편하게 터미널을 사용했어서 맥북도 바로 적용했습니다. 🖖 iTerm2 설치 https://iterm2.com iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain iterm2.com 링크를 타고 들어가서 다운로드 해줍시다. iterm2는 m1을 지원하니 바로 받아서 사용하면 됩니다. 설치 후 Dock에..

jobchae
JOBCHAE