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..

Node.js

[Node.js] Express, TypeScript, MongoDB 회원가입 (1)

💻 코드 https://github.com/jokj624/authCRUD-TS jokj624/authCRUD-TS Node js, Express, MongoDB, TypeScript 회원가입, 로그인 CRUD 구현 연습 - jokj624/authCRUD-TS github.com 🤔 why? 곧 .. 다가올 앱잼을 압두고 서버 말하는 감자인 내가 조금이라도 공부를 해야겠다 하고 로그인/회원가입을 3 Layer Architecture 로 설계해보자 하고 공부를 시작했다. 원래는 api 내에 라우트, 컨트롤러, 서비스 로직을 다 넣어놓는 식으로 구현했는데 제대로 설계해보고 싶다. 많은 블로그와 SOPT 세미나에서 한 내용, github들을 참고해서 해보았다. 아직 코드를 조금 더 리팩토링 해야하지만 간단한 구..

잡다한 개발 일지

[React Native] M1 Mac에서 Android 에뮬레이터 돌리기

🙋🏻‍♀️ 들어가며 학교에서 모바일 소프트웨어 수업을 수강하게 되었다. RN이라는 우리 학교 강의에서 보기 힘든 주제가 강계에 떴길래 수강 신청. 마침 혼자서 네이티브 공부하려고 살짝 만져보긴 해서 (평소 리액트를 다뤘기도 하고) 큰 걱정은 없었다. 그런데 가장 큰 관문은 M1 에서 안드로이드를 돌려야하는 것. 안드로이드 스튜디오가 M1 에서 안정화 되지 않았고 많은 이슈가 발생한다는 사실은 익히 들어 알고있었다. 그래서 iOS 시뮬레이터 먼저 시작한 것도 있음. 하지만 프로젝트 제출 시 안드로이드도 내야한다. 교수님이 주신 자료를 통해 시도하다가 인텔 맥 기반이길래 그냥 구글링해서 안드로이드 에뮬레이터를 돌리는데 성공했다. 가장 많이 참고한 블로그는 아래 참고 자료로 링크 걸어 두었으니 확인해주시면 된..

jobchae
JOBCHAE