솜이노트

#intelliJ(인텔리제이) 학생용 라이센스 기관확인 + 연장방법

뭉지맘 — Tue, 10 Mar 2026 13:34:14 +0900

인텔리제이 프로그램을 실행하여 Help - Register 을 선택하면 라이센스 남은 기간을 확인할 수 있다.

https://account.jetbrains.com/licenses

JetBrains Account

account.jetbrains.com

사이트에 접속한 후 로그인을 하면 라이센스 정보가 뜰텐데

라이센스 종료일이 임박하면 Renew my Education Pack 하고 버튼이 있을것이다.

클릭해서 갱신해주면

1년이 추가로 늘어난 것을 확인할 수 있다.

# Tomcat - tcnative-1.dill: Can't load IA 32-bit .dll on a AMD 64-bit platform 해결방법

뭉지맘 — Tue, 24 Feb 2026 10:19:44 +0900

OS/프로세스가 64-bit로 실행 중(“on a AMD 64-bit platform!” 문구)
Tomcat이 tcnative-1.dll(Tomcat Native)을 로드하려고 시도
그런데 해당 DLL이 32-bit(“Can’t load IA 32-bit .dll …”)

즉, 비트수(32/64)가 안 맞아서 실패한 경우입니다.

로그에 나와있는 경로에 tcnative-1.dll 파일을 64bit 파일로 바꿔주면 해결됩니다.

해당 경로로 들어가 파일을 우클릭한 후 속성 - 자세히 메뉴로 가면 해당 파일 버전이 몇버전인지 확인할 수 있습니다.

https://archive.apache.org/dist/tomcat/tomcat-connectors/native/

Index of /dist/tomcat/tomcat-connectors/native

archive.apache.org

이 사이트에서 알맞은 버전에 binary파일을 다운하면 해당 위치에 64비트 파일이 함께 들어있습니다.

이 64비트 파일로 변경해주면 해결됩니다.

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

뭉지맘 — Fri, 12 Dec 2025 08:52:27 +0900

querySelectorAll() 은 배열처럼 보이지만 “배열이 아니다.”

그래서 map(), filter() 같은 배열 전용 메서드를 쓸 수 없다. Array.from() 으로 진짜 배열로 변환하는 과정이 필요하다.

1) querySelectorAll()의 반환값은 “NodeList”

예를 들어:

const checked = document.querySelectorAll(".row-check:checked");

checked 는 배열이 아니다.
정확한 타입은 NodeList 라는 “유사배열 객체”.

유사배열이란:

길이(length) 있음
인덱스로 접근 가능
여러 요소를 담고 있음

하지만,

map() 없음
filter() 없음
reduce() 없음

즉, 배열처럼 생겼지만 배열이 아니다.

2) NodeList와 배열(Array)의 차이

특징	NodeList	Array
length 있음	O	O
인덱스로 접근	O	O
map(), filter() 사용	X	O
push(), pop() 사용	X	O
진짜 배열?	X	O

즉,

NodeList = 배열처럼 보이지만 기능이 제한됨.

3) 그럼 왜 Array.from()을 쓰냐?

바로 쓸 수 없는 NodeList를
완전한 배열(Array)로 변환하기 위해서.

const arr = Array.from(checked);

→ 이제 arr은 진짜 배열이 된다.

그러면:

arr.map(...)
arr.filter(...)
arr.reduce(...)

모든 배열 기능을 사용할 수 있게 된다.

✔ querySelectorAll → NodeList(유사배열, map 없음)

✔ Array.from(NodeList) → 진짜 Array

✔ Array.map(el ⇒ … ) 사용 가능

그래서 순서가 이렇게 된다:

const checked = document.querySelectorAll(".row-check:checked");  
// NodeList

const ids = Array.from(checked).map(el => el.dataset.id);
// Array → id 배열 생성

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

뭉지맘 — Wed, 10 Dec 2025 13:43:26 +0900

프론트엔드 개발하면서 디바운스 함수를 접해보신 적 있나요?

스크롤, 검색창 입력, 윈도우 리사이즈처럼 짧은 시간에 반복해서 호출되는 이벤트를 일정 시간 동안 모아서 한 번만 실행하도록 하는 기술입니다.

debounce()란?

일정 시간 동안 이벤트가 반복 발생해도, 마지막 호출만 실행되게 하는 함수 제어 기법

예를 들어, 검색창에 글자를 입력할 때마다 API를 호출하면 서버가 과부하가 걸릴 수 있어요.
이때 debounce()를 사용하면 입력이 멈춘 후 특정 시간(예: 300ms)이 지나면 딱 한 번 API를 호출하게 만들 수 있어요.

debounce()가 필요한 상황

다음과 같이 “너무 자주 실행되는 이벤트”에서 필요합니다. :

실시간 검색 API 호출
윈도우 리사이즈 이벤트
스크롤 이벤트(무한 스크롤, 스크롤 위치 저장 등)
입력 폼 자동 저장
버튼 중복 클릭 방지

debounce() 기본 동작 방식 요약

이벤트가 발생하면 타이머를 초기화
일정 시간 동안 추가 이벤트가 들어오면 기존 타이머 취소
마지막 이벤트가 들어온 후 지정 시간 지난 뒤 실행

즉, "보다가 멈추면 실행" 구조!

가장 많이 쓰는 debounce 코드

function debounce(func, delay) {
    let timer;

    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

사용 예제 1 — 검색창 API 호출 제어

const search = debounce(function (keyword) {
    console.log("API 호출:", keyword);
}, 300);

document.querySelector("#search").addEventListener("input", (e) => {
    search(e.target.value);
});

효과:
사용자가 빠르게 타이핑해도 API는 입력이 멈춘 후 단 한 번 실행됨.

사용 예제 2 — 스크롤 이벤트 최적화

function handleScroll() {
    console.log("스크롤 위치:", window.scrollY);
}

window.addEventListener("scroll", debounce(handleScroll, 200));

스크롤은 엄청나게 많이 실행되기 때문에 디바운스로 CPU 부담을 줄일 수 있습니다.

throttle과 debounce 차이

개념	동작	원리
debounce	입력이 멈춘 뒤 한 번 실행	검색창 입력
throttle	일정 간격마다 실행	스크롤 위치 계산

둘 다 이벤트 제어지만 목적과 타이밍이 다릅니다.

정리

debounce()는 연속된 호출을 묶어서 마지막 호출만 실행한다.
타이핑, 스크롤, 리사이즈 등 이벤트 최적화에 필수.
setTimeout을 이용해 간단히 구현 가능.
throttle과의 차이까지 알아두면 더 확실!

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

뭉지맘 — Tue, 9 Dec 2025 13:13:53 +0900

ClickUp의 Description 창은 마크다운(Markdown) 기반 + 자체 단축키를 지원합니다.

아래는 자주 쓰이는 명령어, 서식, 단축키 모음입니다.

1. 제목 / 헤딩 (Heading)

기능	단축키	예시
제목 1	# 공백	# 제목
제목 2	## 공백	## 소제목
제목 3	### 공백	### 내용 구분

2. 굵게 / 기울임 / 취소선

기능	단축키	문법
굵게	Ctrl + B	텍스트
기울임	Ctrl + I	텍스트
취소선	~~텍스트~~	~~삭제~~

3. 리스트

- 불릿 리스트

- 아이템
- 아이템

- 번호 리스트

1. 첫 번째
2. 두 번째
3. 세 번째

4. 체크박스(To-do)

- [ ] 할 일
- [x] 완료된 일

5. 코드 블록 (개발자용 문서 작성할 때 필수)

인라인 코드

`코드`

블록 코드

```언어
내용
```

6. 인용문 (Quote)

> 인용문 혹은 강조하고 싶은 말

7. 구분선

---

8. Slash Commands (/ 명령어)

명렁어	기능
/h1, /h2, /h3	제목
/divider	구분선
/table	표
/bulleted list	리스트
/numbered list	번호 리스트
/code	코드 블록
/quote	인용문
/embed	Embed 삽입
/image	이미지 삽입
/mention	유저 언급

위 서식들을 즐겨찾기처럼 저장해두면 업무 문서, 회의록, 개발 정리까지 훨씬 효율적으로 작성할 수 있게됩니다.

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

뭉지맘 — Thu, 4 Dec 2025 14:32:47 +0900

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

Firebase Console → 새 프로젝트 생성

필요한 기능:

Cloud Messaging
Firebase Admin SDK (백엔드)

2) Android 설정

Android 앱 추가 → 패키지명 입력
경로 예시:

com.appname.app

이후 제공되는 파일을 다운로드:

google-services.json

Expo(EAS)에서는 다음처럼 app.json 또는 app.config.js에 등록해준다:

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    }
  }
}

2. FCM Token 가져오기 (Expo 앱)

Expo Go에서는 FCM Token이 생성되지 않기 때문에
반드시 EAS Build로 만든 독립 앱에서 테스트해야 한다.

앱에서 토큰을 가져오는 API:

import * as Notifications from "expo-notifications";

const tokenInfo = await Notifications.getDevicePushTokenAsync();
const fcmToken = tokenInfo.data;

이렇게 받아온 FCM Token을 백엔드에 저장해야 한다.

3. 백엔드(Firebase Admin SDK) 설정

1) Admin SDK 설치

Firebase Console
→ 프로젝트 설정
→ 서비스 계정
→ “새 비공개 키 생성”

파일명 예:

bimong-firebase-adminsdk-xxxx.json

Spring Boot 리소스 폴더 또는 Docker 컨테이너 내에 넣은 후
application.properties에서 경로 설정:

firebase.service-account=/app/config/firebase-service-account.json

3) FirebaseApp 초기화

@Configuration
public class FirebaseConfig {

    @Value("${firebase.service-account}")
    private String serviceAccountPath;

    @PostConstruct
    public void init() throws IOException {
        FileInputStream serviceAccount = new FileInputStream(serviceAccountPath);

        FirebaseOptions options = FirebaseOptions.builder()
                .setCredentials(GoogleCredentials.fromStream(serviceAccount))
                .build();

        if (FirebaseApp.getApps().isEmpty()) {
            FirebaseApp.initializeApp(options);
        }
    }
}

4. 백엔드에서 FCM으로 푸시 보내기

1) 메시지 DTO

public class PushMessageDTO {
    private String token;
    private String title;
    private String body;
}

2) 메시지 전송 서비스

@Service
public class FcmService {

    public void sendMessage(PushMessageDTO dto) throws Exception {

        Message message = Message.builder()
                .setToken(dto.getToken())
                .setNotification(
                        Notification.builder()
                                .setTitle(dto.getTitle())
                                .setBody(dto.getBody())
                                .build()
                )
                .build();

        String response = FirebaseMessaging.getInstance().send(message);
        System.out.println("FCM 응답: " + response);
    }
}

FirebaseMessaging은 FCM v1 API 기반으로 작동한다.

5. 실제 동작 흐름

앱 실행 → FCM Token 발급
앱이 토큰을 백엔드로 전송
백엔드 DB에 deviceId + fcmToken 저장
스케줄러나 특정 비즈니스 로직에서 fcmToken 조회
Firebase Admin SDK → FCM 서버에 메시지 전송
FCM 서버 → 기기(iOS/Android)로 알림 전달
앱이 백그라운드/꺼진 상태여도 알림 수신

6. 정리

푸시가 정상적으로 동작하려면:

Firebase Cloud Messaging 설정
google-services.json / plist 포함된 EAS 앱 빌드
앱에서 FCM Token 발급
백엔드에 저장
백엔드에서 Firebase Admin SDK로 푸시

이 구조가 완성돼야 기기에서 푸시가 정상 동작한다

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

뭉지맘 — Wed, 3 Dec 2025 11:33:34 +0900

메일로 임시 비밀번호를 발급하려면 일단 SMTP를 사용해야합니다.

저는 구글로 해당 기능을 사용해 보도록 하겠습니다.

Gmail SMTP

Gmail 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단계 인증을 사용하면 비밀번호가 도용되는 경우에 대비하여 계정 보안을 한층 강화할 수 있습니다. 2단계 인증을 설정한 후에는 다음을 사용하여 계정에 로그인할 수 있습니다. 비밀번호 및 2

support.google.com

2) App Password 발급

2단계 인증을 켠 뒤에 아래 메뉴가 보인다.

앱: Mail
기기: 원하는 이름(예: SpringBootServer)

→ 16자리 비밀번호가 생성됨
→ 이 코드가 SMTP 비밀번호 역할을 한다.

전체 구성

(1) application.properties 설정

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=your_email@gmail.com
spring.mail.password=발급받은_앱_비밀번호
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.ssl.trust=smtp.gmail.com

(2) 의존성 추가 (build.gradle)

implementation 'org.springframework.boot:spring-boot-starter-mail'

(3) 템플릿 메일 발송 임시 코드

JavaMailSender + MimeMessageHelper를 이용해 HTML 형식으로 전달해야 한다.
변수를 템플릿에 바인딩하는 로직이 있어야 한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body style="font-family: Arial;">

    <h2 th:text="${title}">메일 제목</h2>

    <p th:text="${message}">기본 메시지</p>

    <div style="margin-top:20px; padding:10px; border:1px solid #ddd;">
        <p>보낸 시각: <span th:text="${sendTime}"></span></p>
    </div>

</body>
</html>

public class MailDTO {
    private String to;
    private String subject;
    private String title;
    private String message;
}

@Service
@RequiredArgsConstructor
public class MailService {

    private final JavaMailSender mailSender;
    private final SpringTemplateEngine templateEngine;

    public void sendTemplateMail(MailDTO dto) throws MessagingException {

        // MIME 메일 객체 생성
        MimeMessage mimeMessage = mailSender.createMimeMessage();
        MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, true, "UTF-8");

        // 제목 / 받는사람 설정
        helper.setTo(dto.getTo());
        helper.setSubject(dto.getSubject());

        // 템플릿에 넣을 데이터 구성
        Context context = new Context();
        context.setVariable("title", dto.getTitle());
        context.setVariable("message", dto.getMessage());
        context.setVariable("sendTime", LocalDateTime.now().toString());

        // HTML 템플릿 렌더링
        String html = templateEngine.process("mail/sample-mail", context);

        // HTML 메일로 설정
        helper.setText(html, true);

        mailSender.send(mimeMessage);
    }
}

templateEngine.process("mail/sample-mail", context);
→ templates/mail/sample-mail.html 파일을 읽어서 HTML을 만들어줌
helper.setText(html, true)
→ true = HTML이라는 의미
메일 내용에 variables(title, message, sendTime)을 모두 바인딩할 수 있음.

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/mail")
public class MailController {

    private final MailService mailService;

    @PostMapping("/send-template")
    public String sendTemplate(@RequestBody MailDTO dto) throws MessagingException {
        mailService.sendTemplateMail(dto);
        return "success";
    }
}

전송 테스트 (POST)

POST /api/mail/send-template
{
  "to": "받을사람@gmail.com",
  "subject": "템플릿 메일 테스트",
  "title": "환영합니다!",
  "message": "템플릿 기반 HTML 메일이 정상적으로 발송되었습니다."
}

이번 글은 기본 설정과 템플릿 기반 메일 발송까지 정리한 내용이다.

더 확장하여 다양한 곳에서도 활용하면 좋을 것 같다.

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

뭉지맘 — Tue, 2 Dec 2025 15:29:45 +0900

상단 메뉴에서

Edit - Find - Replace in Files...를 선택한 후

해당 창에서 찾으면 되는데 인터넷에서 단축키 검색을 하니까

다들 컨트롤 쉬프트 R이라는데 아무리 눌러도 안되더라,,, (캡처에는 설정 후 모습)

보니까 단축키 지정이 안되있는데 나처럼 안되어있는 사람들을 위해

단축키 설명하는 방법도 추가로 적겠습니다.

File - Settings에서 keymap 검색

보시면 Main Menu라는 목록이 있는데

여기서 Edit - Fine 폴더에 Replace in Files...가 있습니다.

옆에 단축키가 없으면 비어있을텐데 더블클릭하면

요런창이 뜰텐데 이걸 누르고 단축키를 지정해주면 됩니다.

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

뭉지맘 — Wed, 26 Nov 2025 09:30:00 +0900

DOM에서 요소를 클릭할 때 실행되는 이벤트는 **자식 → 부모로 전파(버블링)**됩니다.
이 특성을 이용해서, “여러 자식 요소마다 이벤트를 붙이지 않고 부모 하나에 이벤트를 맡기는 방식”을 **이벤트 위임(Event Delegation)**이라고 합니다.

1. 기존 방식: 요소마다 이벤트 직접 등록

deleteBtn.addEventListener("click", function(){
    newDiv.remove();
})

✔ 동작 방식

카드 1개 생성 → 삭제 버튼 1개 → 이벤트 핸들러 1개
카드 100개 생성 → 삭제 버튼 100개 → 이벤트 핸들러 100개

즉, 요소 개수만큼 이벤트가 증가한다.

이 방식의 문제점:

카드 100개면 이벤트 핸들러도 100개 생김
성능 떨어지고 관리가 복잡해짐
동적으로 추가된 요소는 처음엔 이벤트가 안 붙어있음

그래서 이벤트 위임을 사용하면 더 효율적인 방식으로 변경 할 수 있음

2. 이벤트 위임 방식: 부모에 이벤트 한 번만 등록

삭제 버튼 클릭 이벤트를 삭제 버튼에 붙이지 않고
부모 요소(cards) 하나에만 이벤트를 등록한다.

cards.addEventListener("click", function(e){
    if (e.target.classList.contains("delete-btn")) {
        e.target.parentElement.remove();
    }
});

✔ 동작 방식

클릭된 요소가 .delete-btn인지 체크
맞으면 해당 카드 삭제
삭제 버튼이 10개든 100개든 이벤트 핸들러는 단 하나

장점:

성능 좋음 (핸들러 1개)
동적으로 추가된 요소도 자동 적용
코드가 단순해지고 유지보수 편함

3. 실제 적용 포인트

리스트나 테이블처럼 반복되는 요소가 많을 때 필수
버튼, 메뉴, 아이템 삭제/토글 등에 매우 효과적
SPA, 동적 UI에서 거의 기본 패턴으로 사용됨

특히 Vue/React 같은 프레임워크가 나오기 전부터
jQuery 시절에도 기본적인 성능 최적화 방식으로 널리 사용되던 패턴이다.

마무리 정리

이벤트 위임을 한 문장으로 정리하면:

“동적으로 변하는 UI를 효율적으로 제어하기 위해, 이벤트를 부모에게 한 번만 맡기는 방식”

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

뭉지맘 — Tue, 25 Nov 2025 15:35:08 +0900

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 등 외부 서버일 경우 외부 호스트, 로컬은 localhost
-U	PostgreSQL 사용자명
-d	백업할 DB 이름
-F c	Custom format (pg_restore로 복원 가능)
-f	출력 파일 경로

2. localhost 확인 (로컬 PostgreSQL 서버 목록 확인)

로컬 DB에 복원하기 전에, 내 PC에서 어떤 DB가 존재하는지 확인해 보겠습니다.
이 명령은 **CMD(명령 프롬프트)**에서 실행해야 합니다.

psql -h localhost -U postgres -l

대부분 설치 직후에는 아래 3개가 보입니다.

DB 이름	설명
postgres	기본 DB (우리가 주로 복원하게 되는 DB)
template0	시스템 템플릿 DB
template1	새로운 DB 생성 시 기본 템플릿

즉, 로컬에서 우리가 사용할 DB는 대부분 postgres DB입니다.

3. pg_restore를 이용한 로컬 DB 복원

3-1. 특정 스키마(abc)에 복원

이미 로컬 DB(postgres)에 abc스키마가 존재한다고 가정하면:

pg_restore -h localhost -U postgres -d postgres -n abc "C:\경로\파일.dump"

옵션 설명

옵션	설명
-d postgres	로컬의 postgres DB에 복원
-n split	split 스키마에만 복원
"파일.dump"	백업본 파일 경로

주의

dump 안의 원본 스키마가 public이면 abc로 들어가지 않을 수도 있다. 그럴 땐 아래 옵션 사용해야 한다.

pg_restore -h localhost -U postgres -d postgres -N public --schema=abc "C:\경로\파일.dump"

4. 복원 결과 확인

복원 후 아래 명령으로 테이블이 정상적으로 들어왔는지 확인할 수 있다.

스키마의 테이블 목록 보기

\dt abc.*

5. 정리

pg_dump → DB 전체를 백업하는 도구
pg_restore → Custom format dump를 복원하는 도구
로컬 복원 시 -h localhost를 사용하면 내 PC에만 복원되므로 다른 서버에 영향을 주지 않는다
dump 생성 시 원본 스키마 구조에 따라 복원할 스키마 옵션이 다를 수 있다
pgAdmin의 SQL 창에서는 pg_restore가 동작하지 않음 → 반드시 CMD에서 실행해야 함