분류 전체보기 60

수동 Docker 배포, 이젠 STOP — GitHub Actions로 자동화하기

이번에 기존 Express기반 프로젝트를 NestJS로 마이그레이션하면서, Monorepo 구조로 서비스를 재정비하고 있었다. 서비스가 여러 컨테이너로 나뉘어 있다 보니, 매번 수동으로 docker build -> tag -> push 과정을 반복해야 했다. 그러다 이 폴더, 저 폴더 오가며 수동 배포하는 시간이 너무나 비효율적으로 느껴졌다. 사실 이전에 자동화하고 싶기도 했지만 러닝커브가 있을 거란 생각에 망설인 점도 있었다. 그러던 중, Github Actions를 활용해 해당 과정을 자동화한 케이스를 발견했고, 직접 테스트해본 결과 예상보다 훨씬 간단하게 적용할 수 있었다. 결과적으로 이전에 비해 훨씬 편해졌다.. 비슷한 고민을 하고 있는 개발자들에게 도움이 되길 바라는 마음으로 글을 작성하게 되었..

pnpm은 왜 Lifecycle module을 v10에서 차단했을까?

pnpm를 v10으로 업데이트한 뒤 bcrypt 모듈을 찾을 수 없다는 에러가 발생했다. 문제의 원인을 파악하는 과정에서 v10부터 Lifecycle module을 빌드시 포함하지 않는다는 것을 알게 되었다. 나는 앞으로 pnpm v10을 써야만 한다. 따라서 pnpm v10을 안정적으로 사용하기 위해 알아보고자 한다. 1️⃣ 에러가 난 이유의 핵심, v10 변경사항2️⃣ Lifecycle module에 대한 정의3️⃣ 바뀐 이유는?4️⃣ Lifecycle module이 포함되게 하려면 어떻게 해야할까? 해결 방법!pnpm v10 변경사항 [Bug]~new pnpm v10 version has conflicts with bcrypt 5.1.1 · Issue #9042 · pnpm/pnpmVerify la..

Docker Compose V2에서 .env를 못 찾는다면?

작년, 실무에서 docker를 접하고 docker-copmose.yml 파일을 처음 사용해 보았다. 당시엔 당연하듯 docker-compose up 명령어를 통해 컨테이너를 생성했다. 하지만 어느 날엔가부터 docker compose명령어가 바뀌었다는 경고 메시지를 보게 되었다.확인해 보니 Docker 업데이트가 아닌 Docker compose 버전이 V1 ⇒ V2로 업데이트된 사항이었다. 뭐 그리 큰 이슈가 없을 거라 생각하고 새로운 프로젝트도 그렇게 잘 진행하였다. 문제는 추후에 일어나게 되는데… 작년에 마무리한 프로젝트를 고도화해보는 과정에서 docker 이미지 버전도 업데이트하는 과정이 있었다. 그런데 도통 서버가 열리지 않는 것이다. 이상하다 생각하고 디버깅해보니 .env파일을 아예 인식하지 못..

Context API로 Props Drilling 올바르게 해결하기

작년에 React deep dive 스터디를 했었다. 당시 context API를 Props drilling을 해결하기 위한 의존성 주입 도구로 활용할 수 있다는 걸 배웠다. 하지만 실무에서 props drilling이 깊어질수록 복잡해졌고 무작정 전역상태로 넘겨버리는 방식을 택하게 되었다. 그러다 최근 토스 FF 레포지토리에서 논의되는 것들을 보며 다시금 Context API의 본질을 고민하게 되었고 이렇게 글을 쓰게 되었다. Props DrillingReact는 부모 ⇒ 자식 컴포넌트로 이루어진 트리 구조를 가지고 있다.부모가 가진 데이터를 자식에서 사용하려면 props를 통해 전달해야 한다. 위와 같은 구조에서 A ⇒ D 까지 데이터를 전달하려면 중간에 있는 모든 컴포..

JavaScript/React 2025.02.12

한 달간 코드트리로 알고리즘 기초 다져본 후기 💪

개인적으로 스스로 알고리즘에 좀 약하다고 생각이 많이 들고 있던 참이었는데 코드트리를 접하게 되었다.이때까지 써본 건 백준, 프로그래머스에서 레벨 순으로 그냥 찍먹 정도 해본 것 같다.부끄럽지만 제대로 알고리즘 공부를 한 적은 없다. 꾸준히 해야 되는 걸 알고 있기에 루틴 잡기가 어려웠다 코드트리에서 제공하는 테스트가 있는데 기초를 아예 처음부터 다져보고 싶어서 Level 1부터 그냥 냅다~ 시작했다.한 달 동안 이용해 본 코드트리의 장점들을 적어보고, 개선되었으면 좋겠는 방향도 말해보겠다. 기본개념에 대해 알려주고 방향 제시를 해주어 알고리즘 기초를 다지려는 사람에게 확실히 좋을 것 같다. 다른 것보다 문제의 기초를 확실히 잘 다져주는 게 느껴졌다. 타 플랫폼의 경우 이미 알고 있다는 전제하에 시작을 ..

Personal Space/2025 2025.02.02

JWT란? NestJS로 풀어보는 토큰 기반 인증과 인가

2023년 6월 27일 JWT에 대한 글을 쓴 과거 Velog 포스팅을 보았다. 실무 경험도 없고, 이론적으로 이해가 되지도 않았던 때이지만 어떻게든 적어보며 익숙해질 때가 있지 않을까 하며 적은 당시가 생각났다. 다시 JWT에 대해 적어보면 얼마나 달라졌는지 비교할 수 있을 것 같았다. JWT를 접한 사람, 접하지 못한 사람 전부 누구나 이해할 수 있도록 쉽게 적어보려 한다.JWT JSON Web Token웹에서 사용되는 JSON 형식의 토큰 기반 인증 방식이다. 클라이언트와 서버 간 JSON 데이터를 안전하게 공유하기 위한 개방형 표준(RFC 7519). 간결하고 URL에 안전하게 사용할 수 있다는 장점이 있다. Session-Based Authoentication VS Token-Based Auth..

JavaScript/Node.js 2025.01.30

JavaScript로 진정한 객체지향(Object-Oriented Programming)하기

Javascript로 진정한 객체지향이 가능할까? 사실 어느 정도 도발이지만 스스로 이 간극을 탐구해보고 싶었다. 그리고 개인적인 욕심으로는 어렵기보다 쉽게 설명하고 싶다. Javascript와 객체지향 프로그래밍의 간극을 좁혀보고 진정한 객체지향이란 무엇인지 쉽고 편안하게 탐구하고자 한다! 객체지향 프로그래밍(Object-Oriented Programming)이란? 객체지향 프로그래밍은 프로그래밍의 패러다임 중 하나이다. 프로그램을 명령어의 목록으로 보는 시각에서 벗어나, 여러 개의 독립된 단위. 즉, "객체"들의 모임으로 파악하고자 하는 것이다. 이는 Wiki에서 정의한 객체지향 프로그래밍의 개념이다. 여기서 '프로그램을 명령어의 목록으로 보는 시각'은 절차적 프로그래밍(Procedural progr..

JavaScript 2025.01.19

Recap 2024, 어느 것 하나 놓치지 않으려 노력한 한 해

올해도 2025년 1월 1일에 회고를 포스팅해 본다. 이번에 숫자로 나의 2024년을 어느 정도 정리해 보았는데 부단히 무엇 하나 놓치지 않고 잘 살았구나 했다. 앞으로도 이런 식으로 만들어볼까 한다.2024년 Keyword : 여전히 처음인 것이 많다취업 💼작년 1월 1일에는 내가 곧 취업할지 모르고 하반기까지 취업 준비를 할 것이라 생각했다. 1월 초까지 코테와 면접을 진행했는데 1월 17일, 개발자 직무로 첫 출근을 하게 되었다. 인수인계받고 기술 스택과 컨벤션 협의도 하고.. 등등 실무에서 React를 처음 써보게 되었다. 실무에서 사용될 Zustand와 React 관련 라이브러리 등에 초점을 맞춰서 공부했던 것 같다. 입사한 지 7일 만에 스키장으로 워크샵도 다녀왔다! 1년 동안 Fronten..

Personal Space/2025 2025.01.01

데이터 타입 걱정을 덜어주는 Nest.js ValidationPipe의 3가지 옵션 코드로 들여다보기

최근 실무에서 Express ⇒ Nest.js 마이그레이션을 요하는 의견이 있었어서 Nest 강의를 듣고 있다. Nest 강의를 듣다가 클라이언트에서 보낸 데이터의 유효성을 체크하기 위해 class-validation 패키지에서 제공하는 ValidationPipe를 사용해보았다. ValidationPipe에는 다양한 옵션이 있었는데, 그 중 대표적인 3가지 옵션에 집중해보려 한다. 개인적인 공부를 위해 들여다보는 것이지만 Nest를 모른거나, Nest를 써보고 싶은 사람들 혹은 Nest에 막 입문한 분들께도 도움이 되었으면 좋겠다. *Nest의 공식 문서 내용이 포함되어있다.  Nest.js Validation웹 애플리케이션으로 전송되는 모든 데이터의 정확성을 검증하는 것이 좋다. 들어오는 요청의 유효성..

JavaScript/Node.js 2024.12.22

WebSocket, Server-Sent Events(SSE), HTTP Polling

알버트가 웹소켓과 SSE, Polling에 대한 질문을 보내왔다. 전부 제대로 대답하지 못할 뿐더러, 실무에서 실시간으로 이미지와 Json을 받을 때 웹 소켓을 사용해보았는데 고려할 수 있는 다른 방식에 대해선 알아본 적이 없다는 것을 깨달았다. 그가 보내준 질문(5번은 제외)과 함께 공부해보는 시간을 가져볼까 한다. Think mainly:When to pick web socket over the other (sse, polling, etc). Any other options? 웹소켓(WebSocket)을 다른 방식(SSE, Polling 등) 대신 선택해야 할 때는 언제인가? 다른 선택지는 무엇이 있는가?The catch when choosing either? 각각의 방식을 선택했을 때의 장단점은 무..