📒솜이노트

분류 전체보기 검색 결과

해당 글 150건

# JS - Array.from()사용, NodeList와 배열의 차이

querySelectorAll() 은 배열처럼 보이지만 “배열이 아니다.”그래서 map(), filter() 같은 배열 전용 메서드를 쓸 수 없다. Array.from() 으로 진짜 배열로 변환하는 과정이 필요하다.1) querySelectorAll()의 반환값은 “NodeList”예를 들어:const checked = document.querySelectorAll(".row-check:checked");checked 는 배열이 아니다.정확한 타입은 NodeList 라는 “유사배열 객체”.유사배열이란:길이(length) 있음인덱스로 접근 가능여러 요소를 담고 있음하지만,map() 없음filter() 없음reduce() 없음즉, 배열처럼 생겼지만 배열이 아니다.2) NodeList와 배열(Array)의 차..

🖥️ 프론트엔드/🟡JS, React 2025. 12. 12. 08:52

# JS - debounce() 함수 완전 정리

프론트엔드 개발하면서 디바운스 함수를 접해보신 적 있나요?스크롤, 검색창 입력, 윈도우 리사이즈처럼 짧은 시간에 반복해서 호출되는 이벤트를 일정 시간 동안 모아서 한 번만 실행하도록 하는 기술입니다.debounce()란?일정 시간 동안 이벤트가 반복 발생해도, 마지막 호출만 실행되게 하는 함수 제어 기법예를 들어, 검색창에 글자를 입력할 때마다 API를 호출하면 서버가 과부하가 걸릴 수 있어요.이때 debounce()를 사용하면 입력이 멈춘 후 특정 시간(예: 300ms)이 지나면 딱 한 번 API를 호출하게 만들 수 있어요.debounce()가 필요한 상황다음과 같이 “너무 자주 실행되는 이벤트”에서 필요합니다. :실시간 검색 API 호출윈도우 리사이즈 이벤트스크롤 이벤트(무한 스크롤, 스크롤 위치 저..

🖥️ 프론트엔드/🟡JS, React 2025. 12. 10. 13:43

# click up(클릭업) - Description(설명란)에 자주쓰이는 명령어 서식 단축키 모음

ClickUp의 Description 창은 마크다운(Markdown) 기반 + 자체 단축키를 지원합니다.아래는 자주 쓰이는 명령어, 서식, 단축키 모음입니다.1. 제목 / 헤딩 (Heading)기능단축키예시제목 1# 공백# 제목제목 2## 공백## 소제목제목 3### 공백### 내용 구분2. 굵게 / 기울임 / 취소선기능단축키문법굵게Ctrl + B**텍스트**기울임Ctrl + I*텍스트*취소선~~텍스트~~~~삭제~~3. 리스트- 불릿 리스트- 아이템- 아이템 - 번호 리스트1. 첫 번째2. 두 번째3. 세 번째4. 체크박스(To-do)- [ ] 할 일- [x] 완료된 일5. 코드 블록 (개발자용 문서 작성할 때 필수)인라인 코드`코드`블록 코드```언어내용```6. 인용문 (Quote)> 인용문 혹은 강..

🪄 잡동사니 2025. 12. 9. 13:13

# FCM Token 기반 푸시 알림 구현 (Expo + Spring Boot For Android)

React Native(Expo) 앱에서 푸시 알림을 구현하려면Firebase Cloud Messaging(FCM) 을 사용하는 것이 가장 안정적인 구조다.여기서는 ExpoPushToken이 아닌 FCM Token 기반으로 푸시를 구현하는 전체 흐름을 정리한다.1. Firebase 기본 설정1) Firebase 프로젝트 생성https://firebase.google.com/ Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.comFirebase Console → 새 프로젝트 생성필..

🗄️ 백엔드/☕JAVA 2025. 12. 4. 14:32

# JAVA - 메일로 임시 비밀번호 발급하는 방법 (Gmail SMTP)

메일로 임시 비밀번호를 발급하려면 일단 SMTP를 사용해야합니다.저는 구글로 해당 기능을 사용해 보도록 하겠습니다. Gmail SMTPGmail SMTP를 사용하려면 아래 3가지를 충족해야 합니다.구글 계정이 2단계 인증(OTP) 활성화되어 있을 것앱 비밀번호(App Password)를 발급받을 것Spring Boot 메일 설정(application.properties)이 SMTP 규칙에 맞을 것필요한 사전 조건1) 구글 계정에서 2단계 인증 활성화링크: https://support.google.com/accounts/answer/185839?hl=ko&co=GENIE.Platform%3DAndroid→ “2단계 인증” 켜기 2단계 인증 사용 - Android - Google 계정 고객센터2단계 인증을 ..

🗄️ 백엔드/☕JAVA 2025. 12. 3. 11:33

# 인텔리제이(intellij) - 전체파일 단어 일괄 수정하는 방법 (단축키 설정)

상단 메뉴에서Edit - Find - Replace in Files...를 선택한 후해당 창에서 찾으면 되는데 인터넷에서 단축키 검색을 하니까다들 컨트롤 쉬프트 R이라는데 아무리 눌러도 안되더라,,, (캡처에는 설정 후 모습) 보니까 단축키 지정이 안되있는데 나처럼 안되어있는 사람들을 위해단축키 설명하는 방법도 추가로 적겠습니다. File - Settings에서 keymap 검색 보시면 Main Menu라는 목록이 있는데여기서 Edit - Fine 폴더에 Replace in Files...가 있습니다.옆에 단축키가 없으면 비어있을텐데 더블클릭하면요런창이 뜰텐데 이걸 누르고 단축키를 지정해주면 됩니다.

🔍IDE/intelliJ 2025. 12. 2. 15:29

# 이벤트 위임(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