I'm sw engineer!

grid-column과 grid-row는 CSS Grid Layout에서 아이템이 어느 열(column), 어느 행(row)에 위치할지 제어하는 속성이에요.1. 기본 개념CSS Grid는 행(row)과 열(column)로 나뉜 2차원 레이아웃 시스템.각 셀은 **격자선(Grid line)**으로 구분돼요.grid-column과 grid-row는 아이템이 어느 선부터 어느 선까지 차지할지 지정하는 속성이에요.2. grid-column .item { grid-column: 1 / 3; }➡️ 1번 선부터 3번 선 직전까지 차지 → 즉, 2칸을 가로로 점유.세부 속성grid-column-start: 시작하는 선 번호grid-column-end: 끝나는 선 번호단축형: grid-column: start / en..

capitalizeFirstLetter는 꽤 자주 쓰이는 유틸이에요.🔹 주로 쓰이는 경우UI 표시용 텍스트 가공사용자 이름, 주소, 상품명 등을 표시할 때 첫 글자만 대문자로 보이게 하고 싶을 때console.log("apple".capitalizeFirstLetter()); // "Apple"문장 포맷팅설명, 제목, 메시지 등을 자연스럽게 보이게 하기 위해 첫 글자를 대문자로 변환데이터 표준화DB나 API에서 내려오는 문자열이 전부 소문자/대문자일 때, 화면에는 "보기 좋게" 첫 글자만 대문자로 표기

🔹 String.prototype 이란?JavaScript에서 모든 문자열 객체(String)가 상속받는 프로토타입 객체입니다.즉, "hello" 같은 문자열 리터럴도 내부적으로는 new String("hello") 객체에서 파생되며, 이때 String.prototype에 정의된 메서드들을 사용할 수 있게 되는 것이에요. 🔹 주요 특징모든 문자열이 공유String.prototype에 정의된 속성과 메서드는 모든 문자열 객체에서 상속됩니다.즉, 한 번 확장하면 전역에 적용됩니다.내장 메서드 포함예:charAt()slice()toUpperCase()toLowerCase()trim()includes()등등 모두 String.prototype에 정의되어 있습니다.사용자 정의 메서드 추가 가능String.pr..

👉 pignoseCalendar 기본 동작pignoseCalendar는 단순히 인풋에만 달리는 게 아니라, 그 인풋과 같은 input-group 영역 클릭도 트리거로 인식합니다.공식 문서에서도 input-group과 같이 쓰면 아이콘/버튼 클릭 시에도 focus 이벤트가 인풋에 전달되도록 되어 있습니다.(.input-group-append .input-group-text 클릭 → 내부적으로 input.focus() 발생 → 달력이 뜸)즉, 아이콘을 눌렀을 때도 실제로는 인풋을 focus() 시키기 때문에 pignoseCalendar가 실행되는 거예요.✅ 정리하면:pignoseCalendar는 input의 focus 이벤트를 후킹해서 달력을 띄움.Bootstrap input-group-append는 ..

JavaScript와 Java의 switch는 비슷해 보이지만, 동작 방식과 타입 처리에서 꽤 큰 차이가 있습니다. 1️⃣ 타입 비교 방식특징JavaJavaScript타입 엄격성엄격함 (String, int 등 정확히 맞아야 함)느슨함 (== 대신 === 쓰지 않으면 타입 변환 가능)예시switch(1)에서 case "1":는 매칭 안됨switch(1)에서 case "1":도 동작 가능 (느슨 비교)Java: 타입이 안 맞으면 절대 매칭 안 됨.JS: 타입이 맞지 않아도 느슨 비교에 따라 동작할 수 있음 (== 사용 시).2️⃣ break 문 처리Java:switch(x) { case 1: System.out.println("1"); case 2: System.out.println("2");..

예를 들어 blob:http://localhost:8080/3c1a5b1e-2b0f-4f90-b1a0-0c5f9b7d5a1f 이런식으로 이상한 주소로 생성되는데,임시 가짜 주소가 만들어지니까.그게싫으면, 하나 새로운 페이지 내가 url을 만들어서 페이지를 연다음에 ifame으로 blob데이터를 보여주면 된다. https://imswengineer.tistory.com/1376 { const blobUrl = URL.createObjectURL(blob); window.open(blobUrl, '_blank');}, 동작브라우저에서 새 탭을 열고, blob URL을 그대로 그 탭에서 표시브라우저 기본 PDF 뷰" data-og-host="imswengineer.tistory.com" data-og-sour..

1️⃣ window.open(blobUrl, '_blank') 방식success: (blob) => { const blobUrl = URL.createObjectURL(blob); window.open(blobUrl, '_blank');}, 동작브라우저에서 새 탭을 열고, blob URL을 그대로 그 탭에서 표시브라우저 기본 PDF 뷰어 사용특징페이지 내에는 아무것도 표시하지 않고 새 창/탭만 열림UI/레이아웃 제어 불가브라우저 탭 주소 표시줄에 blob URL 표시 (blob://…)사용 시점단순히 PDF를 새 창/탭에서 보여주고 싶을 때2️⃣ 방식success: (blob) => { const blobUrl = URL.createObjectURL(blob); const $ifr..

// $multiSelect는 멀티 셀렉트의 선택자. $multiSelect.multiselect('disable'); // readonly 처리 $multiSelect.multiselect('enable'); // readonly 해제

기본 동작flex-wrap: nowrap; (기본값)→ 아이템들이 한 줄에만 배치되고, 넘치면 그대로 삐져나옴.flex-wrap: wrap;→ 부모의 가로 공간이 부족하면 다음 줄로 자동 줄바꿈.flex-wrap: wrap-reverse;→ 줄바꿈은 되지만, 새 줄이 위쪽으로 쌓임.

핵심 개념메인축(main axis) → justify-content교차축(cross axis) → align-items보통 flex-direction: row(가로 방향)일 때:justify-content: space-between; → 좌우 끝으로 배치align-items: flex-start / center / flex-end → 세로 기준 정렬 가로배치는 양끝으로,세로배치는 맨 아래로. 좌우 끝으로 배치 → justify-content: space-between;세로 아래로 붙이기 → align-items: flex-end;