728x90
반응형

Front 558

[js] capitalizeFirstLetter

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

Front/JS & jQuery 2025.09.04

[js] String.prototype

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

Front/JS & jQuery 2025.09.03

[js] pignoseCalendar 바인딩

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

Front/JS & jQuery 2025.09.01

[js/JAVA] switch 차이

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");..

Front/JS & jQuery 2025.08.27

[js] PDF 파일(blob 데이터)을 새창에서 보여줄 때, URL 수정하기

예를 들어 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..

Front/JS & jQuery 2025.08.26

[js] blob 데이터를 보여주는 방식 (새창열기, 현재페이지에 보여주기)

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

Front/JS & jQuery 2025.08.25

[CSS] flex에서 가로배치와 세로배치

핵심 개념메인축(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;

Front/CSS 2025.08.13

[js][quill] .ql-editor 클래스

.ql-editor { box-sizing: border-box; line-height: 1.42; height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; tab-size: 4; -moz-tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word;}👉 주요 특징:line-height와 padding으로 편집 영역의 기본 레이아웃 지정white-space: pre-wrap → 줄바꿈 유지word-wrap: break-word → 긴 단어 자동 줄바꿈overflow-y: auto → 내용이 길면 스크롤 생김이미지 → 기본적으로는 원본 크기로 들어가..

Front/JS & jQuery 2025.08.12
728x90
반응형