전체 글 28개의 글

Archive/TroubleShooting

[Nest.js] DEK 컨텍스트 없이 엔티티를 hydrate하면 왜 터지는가

API로 유저 정보를 조회하면 아무 문제가 없었습니다.그런데 밤에 도는 배치 워커에서 똑같은 엔티티를 읽으면 이런 에러가 났습니다.Error: Unsupported state or unable to authenticate data at Decipheriv.final (node:internal/crypto/cipher) 혹은 더 허무하게 이렇게 났습니다.TypeError: Cannot read properties of undefined (reading 'key') 처음에는 워커 쪽 환경 변수나 DB 커넥션 설정이 잘못됐겠거니 했습니다. 그런데 설정은 멀쩡했고, 워커에서 쓰는 리포지토리도 API에서 쓰는 것과 같은 인스턴스였습니다. 코드가 동일한데 실행 경로에 따라 결과가 달라진다면, 그건 코드가 아니..

2026.08.13
CS

[CS] 결합도(Coupling) 6단계, React 컴포넌트로 이해하기

결합도 보다가 문득 든 생각."자료 결합도... 이거 React에서 props만 받는 순수 UI 컴포넌트 아닌가?"이 관점으로 보니까 결합도 6단계가 전부 React 패턴에 하나씩 대응이 되길래 React로 이해해본다.결합도는 모듈끼리 얼마나 강하게 엮여 있는지를 나타내는 지표고, 낮을수록 좋은 설계다. 좋은 순서대로 간다.자료 1. 자료 결합도 (Data Coupling) — 가장 이상적두 모듈이 서로의 내부 사정은 전혀 모르고, 필요한 데이터(파라미터)만 딱 주고받는 상태.React로 치면 이거다.function UserProfile({ name, age }) { return ( {name} 나이: {age}세 );}이 컴포넌트는 부모가 Redux를 쓰는지, API..

2026.07.15
Archive/TroubleShooting

[ISSUE] 모바일 이미지 PDF 변환 시 방향 문제

웹에서 이미지를 PDF로 변환하는 기능을 만들던 중 PC에서 테스트할 때는 멀쩡한데 모바일로 찍은 세로 사진을 넣으면 PDF에서 이미지가 가로로 누워 나오는 이슈가 있었습니다. “화면에서는 세로인데, PDF에선 왜 눕지?”[문제 상황]스마트폰으로 세로 사진 촬영웹에서 업로드 → 정상적으로 세로로 보임PDF로 변환 → 결과물에서 가로로 눕는다처음엔 ‘pdf-lib에서 회전 옵션을 조절하면 되겠지?’라고 생각했지만, 어떤 사진은 90°, 어떤 건 -90°, 어떤 건 180°… 규칙이 없었습니다. 결국 원본 파일 자체의 방향이 뒤틀려 있었다는 걸 알게 됐습니다. 원인 : 뷰어는 친절하지만 데이터는 그렇지 않다문제의 핵심은 눈에 보이는 것(View)과 실제 이미지 데이터(Raw)가 다르다는 점입니다.✔ 스마트폰..

2025.11.21
CS

[OOP] 책임 주도 설계(Responsibility-Driven Design, RDD)

책임 주도 설계(RDD)? 책임 주도 설계(Responsibility-Driven Design, RDD)는 객체지향 설계의 출발점을 데이터가 아닌 행동(책임, Responsibility) 에 두는 접근법입니다. 많은 프로젝트에서 객체지향을 사용한다고 해도, 실제 구조는 대부분 데이터 중심 설계(Data-Driven Design) 로 흐르는 경우가 많습니다. // 데이터 주도 설계class Order { public List items; public double totalPrice;}class OrderService { public void approve(Order order) { double total = order.items.stream().mapToDouble(l -..

2025.10.24
DEV/WEB

[LIB] ReactTooltip → v5 변경점

react-tooltip 라이브러리가 v5 버전부터 완전히 새롭게 리팩토링되면서,기존의 사용 방식이 완전히 사라지고, 컴포넌트 중심으로 API가 변경되었습니다. Tooltip을 원래 쓰던 방식대로 사용이 하려다가 문제가 생겨 찾아보니 v5에 큰 변경점이 있었네요;; 📌 ReactTooltip → Tooltip: 버전 4 vs 5 비교 v4v5사용 방식 사용 컴포넌트 사용트리거 방식data-tip 속성data-tooltip-id + data-tooltip-content스타일 import자동 or 선택적import 'react-tooltip/dist/react-tooltip.css' 필수위치 설정place="top" 등동일 (place="top", "bottom", "right", "left")여러 ..

2025.06.24
DEV/WEB

[Next.js] Lazy Loading(지연 로딩) - REACT 비교

Lazy Loading?리소스를 처음부터 로드하지 않고, 사용자가 필요할 때 불러오는 웹 성능 최적화 기법초기 로딩 시간을 줄이고, 브라우저의 리소스 사용을 최소화하여 UX와 성능을 개선하는 데 큰 도움을 줌 📌 React에서의 Lazy LoadingReact에서는 React.lazy와 Suspense를 사용하여 컴포넌트를 동적으로 로드할 수 있습니다. ✅ 특징컴포넌트 단위로 지연 로딩을 수동으로 설정해야 합니다.React Router를 사용할 경우, 라우트 기반 Lazy Loading도 직접 구현해야 합니다.Suspense를 통해 로딩 중 UI를 지정해야 합니다.코드 분할도 개발자가 직접 구성해야 합니다.📌 Next.js에서의 Lazy LoadingNext.js는 React 위에서 동작하는 프레임..

2025.06.20
DEV/WEB

[Next.js] 정적 웹사이트 - GitHub Pages 배포하기

이번에 포트폴리오를 React.js에서 Next.js로 변경하면서 Git Pages 배포 방식에 조금 차이가 나서 정리해보았습니다. * 기본적인 GitHub Pages 세팅이나 프로젝트 세팅은 생략했습니다 📌next.config.jsconst isProd = process.env.NODE_ENV === 'production';const nextConfig = { output: 'export', basePath: isProd ? '/[레포이름]' : '', assetPrefix: isProd ? '/[레포이름]/' : '',};module.exports = nextConfig; 📌 동적 라우팅 + generateStaticParams❔ 왜 generateStaticParams를 꼭 써야 할까?..

2025.06.18
DEV/WEB

[Next.js] 동적 라우팅(Dynamic Routing) - Promise 기반 params

라우팅(Routing): URL에 따라 화면을 분기하는 기술정적 라우팅(Static Routing): URL 경로가 고정되어 있는 경우동적 라우팅(Dynamic Routing): URL 경로의 일부가 동적으로 변경되는 경우 → 변하는 부분 : 동적 세그먼트(Dynamic Segment) Next.js에서의 동적 라우팅파일 시스템 기반 라우팅Next.js는 폴더와 파일명으로 라우팅을 자동 생성합니다.동적 세그먼트는 대괄호 [ ]로 정의합니다.app/products/[id]/page.tsx 📌 v15 : Promise 기반 params Next.js v15부터 params와 searchParams가 Promise 타입으로 주어집니다.따라서 항상 await를 사용해야 합니다. 👉 Promise Typ..

2025.06.16
DEV/LANG

[JS/TS] Promise 타입 + Async/Await

Promise(사전) V. 약속하다, …일 것 같다 N.약속, 가능성 비동기 작업의 최종 완료(성공) 또는 실패(에러)와 그 결과 값을 나타내는 객체"미래의 어떤 시점에 값이 있을 것" 이라는 약속을 표현하는 개념 JavaScript 기본적으로 싱글 스레드(single-threaded) 방식으로 동작합니다.만약 네트워크 요청(API 호출), 파일 읽기/쓰기, 데이터베이스 쿼리 등 시간이 오래 걸리는 "비동기 작업"이 발생했을 때,이 작업이 끝날 때까지 다른 모든 코드가 멈춰버린다면 UI가 멈추거나 먹통이 되는 문제가 발생하게 됩니다.Promise는 이러한 비동기 작업이 백그라운드에서 진행되는 동안에도 메인 스레드가 다른 작업을 계속할 수 있도록 하여, 애플리케이션이 멈추지 않고 반응성을 유지할 수 있..

2025.06.16
반응형