📒솜이노트

2025/11 검색 결과

해당 글 7건

# 이벤트 위임(Event Delegation) 완전 이해하기

DOM에서 요소를 클릭할 때 실행되는 이벤트는 **자식 → 부모로 전파(버블링)**됩니다.이 특성을 이용해서, “여러 자식 요소마다 이벤트를 붙이지 않고 부모 하나에 이벤트를 맡기는 방식”을 **이벤트 위임(Event Delegation)**이라고 합니다.1. 기존 방식: 요소마다 이벤트 직접 등록deleteBtn.addEventListener("click", function(){ newDiv.remove();})✔ 동작 방식카드 1개 생성 → 삭제 버튼 1개 → 이벤트 핸들러 1개카드 100개 생성 → 삭제 버튼 100개 → 이벤트 핸들러 100개즉, 요소 개수만큼 이벤트가 증가한다. 이 방식의 문제점:카드 100개면 이벤트 핸들러도 100개 생김성능 떨어지고 관리가 복잡해짐동적으로 추가된 요소는..

🖥️ 프론트엔드/🟡JS, React 2025. 11. 26. 09:30

# PostgreSQL pg_dump · pg_restore 사용법 및 로컬 DB 복원 정리

DB 사용하다 보면 클라우드나 다른 서버에서 데이터를 백업(덤프)하고,이를 로컬 환경으로 복원해야 할 일이 자주 생깁니다.이 글에서는 pg_dump로 백업을 만들고, pg_restore를 이용해 로컬 DB·특정 스키마에 복원하는 전체 과정을 정리해보겠습니다.1. pg_dump로 DB 백업(dump) 만들기백업(dump) 생성은 PostgreSQL의 pg_dump를 이용합니다.Custom format(-F c)으로 백업하면 나중에 pg_restore로 스키마 단위 복원이 가능합니다. 예시 명령pg_dump -h {host} -U {user} -d {database} -F c -f "경로\파일명.dump" 옵션 설명옵션설명-h접속할 서버 주소. Render 등 외부 서버일 경우 외부 호스트, 로컬은 loca..

🗄️ 백엔드/🗄️DB 2025. 11. 25. 15:35

# 자바스크립트 변수 선언 방식별 함수 스코프(function scope) 차이점 !

자바스크립트의 변수는 선언 방식에 따라 스코프(유효 범위)가 달라집니다. var : 함수 스코프(function scope)let, const : 블록 스코프(block scope)여기서 "스코프"는 그 변수를 사용할 수 있는 코드의 범위를 말합니다. 함수 스코프란?var로 선언된 변수는 함수 전체에서 유효합니다.즉, if, for, { } 같은 블록({}) 내부에 선언해도 블록 밖에서 접근 가능합니다. 블록 스코프란?let이나 const는 해당 블록({}) 안에서만 유효합니다. ECMAScript 2015(ES6)에서 추가된 기능입니다.예제(1) var는 함수 스코프if (true) { var x = 5;}console.log(x); // 5 var x는 if문 블록 {} 안에서 선언됐지만,자바스..

🖥️ 프론트엔드/🟡JS, React 2025. 11. 10. 09:55

# 다국어 지원이 좋은 Noto Sans 웹폰트 적용 방법 (CDN / npm / 직접호스팅 / 주의사항)

안녕하세요 :) 오늘은 많은 분들이 사용하는 Noto Sans KR 폰트 적용 방법을 정리해봤어요.Google Fonts를 통해 간단히 불러올 수도 있고, npm으로 설치하거나 직접 호스팅할 수도 있습니다.프로젝트 성격에 따라 선택해서 적용해보세요! Noto Sans KR구글·어도비 기반의 오픈소스 산세리프 계열 글꼴로 한글·영문·한자 등 다국어 지원이 좋고 화면 가독성이 뛰어납니다.웹용으로 널리 쓰이며 여러 굵기(Weights)를 지원하고 있어요.1. CDN으로 적용하기 (가장 간단한 방법)jsDelivr (추천)위 링크를 안에 넣으면**Thin(100)부터 Black(900)**까지 모든 weight를 한 번에 사용할 수 있습니다.이후 CSS에서 이렇게 지정하면 돼요 👇body { font-fa..

🖥️ 프론트엔드/🎨퍼블리싱 2025. 11. 7. 09:56

# 일본어 기초 동사 20개 (예문까지 완벽정리)

일본어를 공부하다 보면 비슷한 표현들이 많아서 헷갈릴 때가 많죠 😅오늘은 저번 동사 20개를 제외하고 그 외에도 일상에서 정말 자주 쓰이는 일본어 동사 20개를 소개할게요 💡뜻, 발음, 그리고 실제 예문까지 함께 익히면 단어 암기가 훨씬 쉬워질 거예요 🙌일본어 동사 20개 정리표한국어 일본어 발음한국어일본어발음자다寝ます네마스일어나다起きます오키마스기다리다待ちます마치마스보내다送ります오쿠리마스빌리다借ります카리마스돌려주다返します카에시마스알다知ります시리마스모르다知りません시리마센배우다(스스로 익히다)学びます마나비마스쉬다休みます야스미마스일하다働きます하타라키마스쓰다(펜으로 쓰다 외에)使います츠카이마스입다着ます키마스벗다脱ぎます누기마스도와주다手伝います테츠다이마스필요하다要ります이리마스있다(사람/생물)います이마스있다(사..

🌐외국어/일본어 2025. 11. 6. 09:56

# CSS 선택자 정리 : 인접 형제 결합자부터 형제 선택자까지

웹 스타일링을 할 때 '어떤 요소를 기준으로 다른 요소를 선택할까' 하는 문제는 아주 자주 마주합니다. 이번 글에서는 인접 형제 결합자(+), 일반 형제 결합자(~) 를 중심으로, 관련된 선택자들을 예시와 함께 정리해서 티스토리 블로그에 바로 올릴 수 있게 작성했습니다. 코드 예시와 자주 쓰이는 패턴, 실전 팁까지 담았으니 복사해서 바로 사용하세요. 인접 형제(+), 일반 형제(~), 자식(>), 후손(스페이스) 선택자 차이와 예제 정리. 실무에서 자주 쓰이는 패턴과 주의사항까지 한 번에. 1) 개요 — 선택자(Combinators)란?CSS 결합자(combinator)는 두 개 이상의 선택자 사이의 관계를 표현합니다. 예를 들어 ‘어떤 요소의 바로 다음 형제’라거나 ‘어떤 요소의 자식’ 같은 관계를 선..

🖥️ 프론트엔드/🎨퍼블리싱 2025. 11. 4. 09:22

# geoserver 사용가능한 폰트 확인, 라벨 폰트 설정 방법

사용 가능한 폰트 확인 방법sld 파일로 아무리 외부 폰트를 설정해 놓는다고 해도geoserver가 설치된 서버 내에서 폰트가 깔려있지 않으면 제대로 인식이 되지 않습니다. geoserver 웹에 접속한 후 왼쪽 탭에서 서버상태에 들어갑니다.사용하고있는 geoserver ip/geoserver/web 서버상태에서 보시면 사용가능한 폰트에 사용가능한 모든 폰트 보기 링크를 선택합니다. 그러면 JVM에 사용가능한 폰트 목록이 나옵니다. font-weight를 bold로 설정하면 보통 굵게 안나옵니다.bold까지 포함에서 이름을 설정해야 굵게 나옵니다.그런데 만약 내가 설정하고 싶은 폰트가 bold가 없다? 그럼 따로 geoserver에 bold폰트를 설치해 주어야 가능합니다. 서버내에 설치되어있는 폰트만 ..

🖥️ 프론트엔드/🌏GIS 2025. 11. 3. 09:05