폼에서 주소를 직접 입력받으면 표기가 제각각이라 관리가 번거롭다.그래서 이번에는 다음 주소검색(카카오 우편번호 서비스) 을 붙여서 사용자가 주소를 검색 후 선택하도록 구성했다.먼저 다음 주소검색 스크립트를 불러와야 한다.이 스크립트를 불러오면 window.daum.Po

Next.js 프로젝트를 진행하면서 데이터베이스를 코드로 다루기 위해 Prisma를 사용했다.Prisma는 Node.js 와 TypeScript 환경에서 사용할 수 있는 ORM이며, 타입 안전한 데이터 접근, 스키마 기반 모델링, 마이그레이션 관리, GUI 기반 데이터

현재 프로젝트에서 기존 예약 관리 화면은 탭과 검색, 그리고 예약 카드 리스트 중심으로 구성되어 있었다.탭별로 요청, 진행 중, 완료, 취소/거절 상태를 나눠 조회할 수 있었지만, 사용자는 예약을 시간 흐름으로 파악하기 어려웠다.특히 다음과 같은 불편함이 있었다.특정

현재 진행하려는 프로젝트에 대해 조금 고민이 있었다. 일단, 새로운걸 접해보고 싶었다.음악 전공에서 디자인 업무, 그리고 그 시작점에서 개발 공부까지 1년째.개발과는 너무나도 머나먼 여정을 걸어온 나에게 빡센 공부였지만, 계속 사용하던 프레임워크만 사용할 수는 없었다.

검색 화면을 만들다 보면 생각보다 상태가 단순하지 않다.처음에는 useState 로 검색어와 필터만 관리하면 될 것처럼 보이지만, 조건이 늘어날수록 문제가 생긴다.예를들어 이런 것들이다.사용자가 필터를 바꾸는 중인데 아직 검색은 실행하지 않은 상태검색 결과에 실제 반영

qs란, 객체(object)를 query string으로 변환하거나, query string 을 다시 객체로 파싱(parse)하는 라이브러리다. 쉽게 말하면 프론트에서 이렇게 관리하는 데이터를 이런 URL 쿼리 형태로 바꿔주는 역할을 한다. React에서 검색

QueryDSL을 적용하려고 했지만, 가장 먼저 막힌 부분은 QUser 같은 Q클래스가 보이지 않는 문제였다.예를 들어 RepositoryImpl 에서 해당 코드를 쓰고 싶은데IDE에서는 QUser 자체를 찾지 못했다.처음에는 QueryDSL 문법 문제라고 생각했지만,

QueryDSL은 JPA에서 문자열 기반 JPQL을 길게 작성하는 대신,Q타입을 이용해 자바 코드로 쿼리를 구성할 수 있도록 도와주는 라이브러리다.즉, 쿼리를 문자열로 직접 조립하는 대신 코드로 안전하게 조건식을 만들고 조합할 수 있다.기존 JPQL은 레퍼지토리에 이런

검색 기능을 만들면서 검색 조건이 점점 많아졌다.처음에는 각각 @RequestParam 으로 받을 수도 있었지만, 조건이 늘어날수록 컨트롤러 메서드 시그니처가 복잡해지고 가독성이 떨어질 수 있었다.예를 들면 이런 식이다.검색 조건이 더 추가될 가능성까지 생각하면, 이

Emotion 은 CSS를 JS/TS로 '모듈화' 해서 재사용하고, props/state 기반으로 조건부 스타일을 안전하게 걸 수 있도록 도와준다.@emotion/react : Emotion css 사용시 필수@emotion/styled : styled 사용 시 imp

버튼은 UX/UI 일 뿐, RTMP 이벤트는 실제로 일어나야한다. 라이브 스트리밍에서 중요하게 여겨야 할 점 중 하나는 "지금 진짜 방송 중인가?" 를 시청자가 믿을 근거다. 그래서 방송 상탤를 단순히 버튼 클릭으로 바꾸지 않고, RTMP 송출 이벤트로 LIVE/END

목표 Safari: 브라우저 네이티브 HLS로 재생(``) Chrome/Edge/Firefox: hls.js(MSE) 로 재생 외부 m3u8 테스트 시 CORS 문제를 피하기 위해 Vite dev proxy로 우회 1) Safari가 아닌 상태에서 Safari n

Hls.js란, HLS(HTTP Live Streaming) 애플이 2009년 공개한 HTTP 기반 적응형 비트레이트(ABR) 스트리밍 방식이다. 특별한 전용 프로토콜이 아니라 그냥 HTTP로 파일을받아 재생하는 구조라서 웹/모바일/미디어서버에서 널리 지원되고 지금도가

docker run은 Docker 엔진이 켜져있어야 동작Redis 서버를 도커 컨테이너로 띄움\--name going-redis : 컨테이너 이름 지정\-p 6379:6379 : 내 PC(host) 6379 → 컨테이너 6379 포트 연결redis:7 : Redis 7

리스트 점 제거 링크 밑줄 제거 버튼/인풋 기본 테두리 제거 포커스 테두리(아웃라인) 제거 배경 제거 이미지/요소 드래그 방지(브라우저 드래그) 스크롤바 숨기기(브라우저별) 커서 숨기기

사용자는 항상 내가 원하는 대로 동작하지 않는다. 내가 "로그인 버튼을 눌러서 로그인 하고 마이페이지는 드롭다운 내의 메뉴로 접근하세요" 라는 흐름을 만들어 놨어도 사용자가 주소창에 경로를 직접 입력해서 특정 페이지(ex.마이페이지)로 들어올 수 있다.UI상에서는 숨겨

N+1은 리스트 쿼리 1번(+1) 실행 후,리스트 안의 각 엔티티에서 LAZY 연관 필드를 접근할 때마다 N번의 추가 쿼리가 나가는 현상이다."부모 리스트 조회" 1번"자식/연관 엔티티 로딩" N번→ 총 1 + N(또는 1 + 2N, 1 + 3N ...) 쿼리가 발생한

React Query(TanstackQuery)는 단순히 "API 호출을 편하게 해주는 라이브러리" 가 아니라 서버 상태(server state)를 캐시로 관리하는 도구다.그래서 React Query 를 조금 더 알고 쓰려면 useQuery 문법보다 먼저 이해해야하는게

개인 프로젝트를 진행하다가 DTO에 관해 조금 더 확실하게 정리를 하고 가면 좋을것같다는 생각이 들었다. 웹개발 수업으로 처음 스프링 프레임워크를 접했을 때, 수업은 JSP / MyBatis 위주로 진행되었다. DTO도 자연스럽게 class로 만들게 되었는데, 프레

엔티티마다 생성일/수정일 컬럼을 매번 넣기 귀찮을 때, 공통 베이스 클래스를 만들어두면 편하다.@MappedSuperclass + @CreatedDate / @LastModifiedDate를 쓰면 저장/수정 시점에 시간이 자동으로 채워진다.엔티티에서 상속만 하면, 해당