개발 공부중

[javascript/jquery] 자바스크립트 url 파라미터 숨기기 (history.replaceState)

개발자 leelee — Sun, 15 Mar 2026 21:39:58 +0900

history.replaceState로 URL 파라미터 숨기기

웹 개발 중 파라미터가 노출된 URL을 지워야하는 상황

https://example.com/search?keyword=자바스크립트&userId=1234&token=abcxyz

보안이 중요한 데이터가 주소창에 그대로 보이거나, URL을 깔끔하게 유지하고 싶은 상황에서 유용하게 쓸 수 있는 방법을 정리했다.

      history.replaceState({}, null, location.pathname) 한 줄로 URL 파라미터를 숨기는 방법
  

✅ 핵심 코드 한 줄

history.replaceState({}, null, location.pathname);

이 한 줄이 하는 일은 현재 URL에서 쿼리스트링(? 이후)을 전부 제거하고, 경로(path)만 남긴다. 페이지는 새로고침되지 않는다.

인자 하나씩 뜯어보기

history.replaceState( state,  title,  url )
                      ↓       ↓       ↓
history.replaceState( {},     null,   location.pathname )

① {} — state 객체

히스토리에 함께 저장할 데이터다. 빈 객체 {}를 넘겼다는 건, 따로 저장할 데이터 없이 URL만 바꾸겠다는 의미다.

// 데이터를 함께 저장하고 싶다면 이렇게
history.replaceState({ keyword: '검색어' }, null, location.pathname);

② null — title

원래 페이지 타이틀을 지정하는 인자인데, 현재 모든 브라우저가 이 값을 무시한다. 관례적으로 null 또는 ""을 넣는다.

③ location.pathname — 변경할 URL

여기가 핵심이다. location 객체의 속성들을 비교해보면 이해가 쉽다.

// 현재 URL: https://example.com/search?keyword=테스트&page=1

location.pathname  →  "/search"                           (? 이전 경로만)
location.search    →  "?keyword=테스트&page=1"   (쿼리스트링)
location.href      →  "https://example.com/search?keyword=테스트&page=1"

location.pathname만 넘기면 쿼리스트링이 포함되지 않으므로, URL에서 파라미터가 사라진다.

⚙️ 동작 흐름

페이지 진입
↓ https://example.com/search?keyword=테스트&page=1

파라미터 읽어서 처리 (검색 실행 등)
↓

history.replaceState({}, null, location.pathname);
↓

주소창 URL 변경
→ https://example.com/search ✅ 파라미터 사라짐
(페이지 새로고침 없음, 히스토리 스택 교체)

pushState vs replaceState

// replaceState: 현재 히스토리를 덮어씀
// → 뒤로가기 해도 파라미터 있던 URL로 못 돌아감
history.replaceState({}, null, location.pathname);

// pushState: 새 히스토리를 쌓음
// → 뒤로가기 하면 파라미터 있던 URL로 돌아감
history.pushState({}, null, location.pathname);

메서드	히스토리 처리	뒤로가기 시	적합한 상황
`replaceState`	현재 항목 교체	파라미터 URL 차단 ✅	파라미터 완전히 제거
`pushState`	새 항목 추가	파라미터 URL 복원	히스토리 유지 필요 시

파라미터를 완전히 지워버리고 싶을 때는 replaceState가 맞다. 뒤로가기로 파라미터가 다시 노출되는 상황을 막을 수 있기 때문이다.

실제 활용 패턴

기본 패턴 — 파라미터 읽고 → 즉시 제거

const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');

if (keyword) {
  // ① 파라미터 값으로 필요한 처리 먼저
  doSearch(keyword);

  // ② 처리 후 URL에서 파라미터 제거
  history.replaceState({}, null, location.pathname);
}

⚠️ 순서가 중요하다. 반드시 파라미터를 읽고 처리한 후에 제거해야 한다. 제거 후 읽으면 이미 파라미터가 없으므로 null이 반환된다.

jQuery AJAX 조합 패턴

$('#searchForm').on('submit', function(e) {
  e.preventDefault();

  const keyword = $('#keyword').val();

  $.ajax({
    url: '/api/search',
    method: 'GET',
    data: { keyword: keyword },
    success: function(response) {
      // AJAX로 데이터를 가져오되, URL에는 파라미터 노출하지 않음
      history.replaceState({}, null, location.pathname);
      renderResult(response);
    }
  });
});

⚠️ 주의사항

항목	내용
새로고침 시 state 소멸	replaceState에 저장한 state는 새로고침하면 사라진다. 중요한 데이터는 `sessionStorage`와 병행 사용 권장
서버 라우팅 주의	존재하지 않는 URL로 변경 후 새로고침하면 404 발생 가능. 서버에서 해당 경로를 처리할 수 있어야 함
완전한 보안 X	URL에서 숨길 뿐, 클라이언트 단의 조작이다. 민감한 데이터는 POST + HTTPS와 함께 서버 인증을 병행해야 함

한 줄 요약

    history.replaceState({}, null, location.pathname) 는 "URL은 깔끔하게 바꾸되, 페이지는 그대로 유지" 하는 가장 심플한 파라미터 은닉 방법이다.
  

[error] 이클립스 안 켜짐 해결방법 (로딩화면에서 응답없음)

개발자 leelee — Mon, 9 Feb 2026 21:46:25 +0900

나의 상황

이클립스를 열어야되는데

로딩되다가 중간에 자꾸만 멈춰서 응답없음 상태가 되는 상황

원인

용량 정리한다고 바탕화면과 폴더 정리를 했는데 뭔가 그때 이클립스 폴더도 왔다갔다 해서 그런지

이클립스 상태 정보 파일이 꼬인 것 같았다.

이클립스가 켜지면서 그 파일이 깨져 있으니 무한 루프에 빠져버린 것

해결방법

cmd를 열어서

이클립스 설치 경로로 이동하여 아래 명령어를 입력해 실행한다.

eclipse.exe -clearPersistedState

이렇게 하면 기존에 배치했던 창 위치나 열려있던 파일 탭들이 초기화된다.

설정해둔 테마나 폰트 같은 핵심 설정은 유지됨!!

끝

[LINUX] 서버 용량(디스크) 체크하는 방법 (du/df)

개발자 leelee — Tue, 27 Jan 2026 23:16:40 +0900

갑자기 파일업로드가 안 되는 상황

로그를 확인해보니 어느 순간부터 저장이 안되고 있어서 찾아보니

서버 용량이 가득차 있었다.

서버 용량(디스크) 체크하는 방법

1. 서버 전체 디스크 용량 확인

df -h

결과예시

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1        50G   46G  2.0G  96% /
tmpfs           1.9G     0  1.9G   0% /dev/shm
/dev/sdb1       100G   20G   75G  22% /home

size : 전체용량

used : 사용중인 용량

avail : 남은 용량

use % : 사용률

mounted on : 실제 경로

2. 디렉토리 별로 뭐가 제일 많이 차지하고 있는지 확인

du -h | sort -rh | head -n 10

결과예시

12G     ./var
9.5G    ./var/log
4.8G    ./var/log/syslog
3.9G    ./var/log/nginx/access.log
1.2G    ./var/lib/docker

나의 경우, 로그 파일이 계속 쌓이고 있어서 용량을 많이 차지하고 있었다.

날짜를 확인하고 과거의 로그는 지워줬다.

서버가 터지기 전에

정기적으로 확인하는게 중요한 것 같다.

끝

[HTML/CSS] 홈페이지에 rss로 최신 뉴스기사 불러오기 (닷홈빌더 활용)

개발자 leelee — Tue, 27 Jan 2026 00:29:19 +0900

누군가에게 필요할까 싶어서 써보는

닷홈빌더로 만든 홈페이지에 rss로 최신 뉴스기사 불러오기

사이트 이름은 가렸음

빠르게 홈페이지를 만들고 싶어서 뭘 써볼까 고민하다가

닷홈에서 손쉽게 홈페이지를 만드는 기능이 있는 걸 발견했다.

그래서 닷홈빌더를 활용해서 친구들과 사용할 홈페이지를 만들었다. 놀랍게도 하루만에 만들었다.

그런데 홈페이지가 너무 허전해서 최신정보를 볼 수 있는 메뉴를 만들었다.

완성 화면

1. 프레임을 나누고 요소 코드를 추가해준다.

그럼 아래처럼 화면이 된다.

2. 코드를 입력하고 적용하기

<style>
    .news-widget-box {
        font-family: 'Malgun Gothic', sans-serif;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        max-width: 100%;
        margin-bottom: 20px; /* 박스 간 간격 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .news-widget-header {
        background: #0b0e23; /* 배경색 */
        color: #fff;
        padding: 15px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .news-widget-list { padding: 0; margin: 0; list-style: none; }
    .news-widget-item { padding: 15px; border-bottom: 1px solid #eee; transition: background 0.2s; }
    .news-widget-item:hover { background-color: #f9fbfc; }
    .news-widget-item a { text-decoration: none; color: #333; font-size: 15px; font-weight: 500; display: block; margin-bottom: 5px; }
    .news-widget-item a:hover { color: #1a73e8; text-decoration: underline; }
    .news-widget-meta { font-size: 12px; color: #888; }
    .news-loading { padding: 20px; text-align: center; color: #666; }
</style>

<script>
    // 이 함수가 뉴스를 가져와서 박스에 넣어줍니다.
    function loadNewsWidget(boxId, searchKeyword, titleText) {
        // 1. 박스 찾기
        const box = document.getElementById(boxId);
        if (!box) return;

        // 2. 제목 설정
        const titleArea = box.querySelector('.widget-title-text');
        if (titleArea) titleArea.innerText = titleText || searchKeyword + " 뉴스";

        // 3. RSS 주소 생성
        const baseUrl = "https://news.google.com/rss/search";
        const params = `?q=${encodeURIComponent(searchKeyword)}&hl=ko&gl=KR&ceid=KR:ko`;
        const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(baseUrl + params)}`;

        // 4. 데이터 가져오기
        fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            const listArea = box.querySelector('.news-widget-list');
            
            if (data.status === 'ok' && data.items.length > 0) {
                let html = '';
                data.items.slice(0, 5).forEach(item => {
                    // 날짜 포맷
                    let dateStr = item.pubDate;
                    try {
                        const d = new Date(item.pubDate);
                        dateStr = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
                    } catch(e) {}

                    html += `
                        <div class="news-widget-item">
                            <a href="${item.link}" target="_blank">${item.title}</a>
                            <div class="news-widget-meta">${dateStr} | ${item.author || '뉴스'}</div>
                        </div>`;
                });
                listArea.innerHTML = html;
            } else {
                listArea.innerHTML = '<div class="news-loading">검색 결과가 없습니다.</div>';
            }
        })
        .catch(err => {
            const listArea = box.querySelector('.news-widget-list');
            if(listArea) listArea.innerHTML = '<div class="news-loading">불러오기 실패</div>';
        });
    }
</script>

<div id="news-1" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // loadNewsWidget('아이디', '검색어', '박스제목');
    loadNewsWidget('news-1', '핸드볼', '핸드볼 최신 뉴스');
</script>

첫번째 code/ 박스

<div id="news-2" class="news-widget-box">
    <div class="news-widget-header">
        <span class="widget-title-text">뉴스 로딩 중...</span>
        <span style="font-size:11px; opacity:0.8;">Live</span>
    </div>
    <div class="news-widget-list">
        <div class="news-loading">뉴스를 검색하고 있습니다...</div>
    </div>
</div>

<script>
    // 아이디를 news-2 로 맞춰줍니다.
    loadNewsWidget('news-2', '여자축구', '여자축구 최신 뉴스');
</script>

두번째 code/ 박스

style 과 script 는 이미 첫번째 박스에서 써서 훨씬 간단하게 작성할 수 있다.

코드 전문 맨 아래에 있는

loadNewsWidget('아이디', '검색어', '박스제목');

아이디만 각 박스 별 div id와 맞추고, 검색어와 박스제목만 바꿔주면 끝~

구글서치콘솔에 등록했는데 한번 실패하고 다시 개선해서 재등록 중이다.

등록이 잘 되길...

끝

[Spring] 의존성 주입(DI) 방식 비교와 빈(Bean) 충돌 해결하기

개발자 leelee — Sun, 25 Jan 2026 22:33:54 +0900

생성자 주입 (Constructor Injection)

객체가 생성되는 시점에 딱 한 번만 호출되어 부품을 끼우는 방식

코드의 안전성과 불변성을 보장한다.

@Component
public class Car {
    private final Engine engine; // final을 붙이기

    @Autowired
    public Car(Engine engine) {
        this.engine = engine;
    }
}

수정자 주입 (Setter Injection)

객체를 먼저 만들어 놓고, 나중에 set~ 메서드를 통해 부품을 끼우는 방식입니다.
NullPointerException 에러가 발생 가능성 높

@Component
public class Car {
    private Engine engine; // 나중에 바꿀 수 있어서 final을 못 씀

    @Autowired
    public void setEngine(Engine engine) {
        this.engine = engine;
    }
}

Lombok

생성자 주입이 좋지만 코드가 길어지는 단점이 있어서,

Lombok(롬복) 라이브러리를 써서 간단하게 할 수 있다.

@Component
@RequiredArgsConstructor // final이 붙은 애들만 모아서 생성자를 자동으로 만들어줌
public class Car {
    private final Engine engine; // 생성자 직접 안 써도 됨
}

여러개의 빈이 선택될 수 있을 해결방법 (빈 충돌 해결)

만약 Engine 인터페이스를 상속받은 GasolineEngine과 ElectricEngine이 둘 다 스프링 빈으로 등록되어 있다면,

스프링은 어떤 것을 주입해야 할지 몰라서 오류가 난다.

1. @Primary

메인 부품이 정해져 있을 때 우선순위 지정

@Component
@Primary  // 똑같은 엔진이 여러 개면 기본선택은 이거
public class ElectricEngine implements Engine { ... }

@Component
public class GasolineEngine implements Engine { ... }

2. @Qualifier

여러 부품을 골고루 섞어 써야 할 때 등 때에 따라서 지정

@Component
@Qualifier("fastEngine") // 이 부품의 별명을 'fastEngine'으로 정함
public class GasolineEngine implements Engine { ... }

// 주입받는 곳
@Component
public class Car {
    private final Engine engine;

    public Car(@Qualifier("fastEngine") Engine engine) { // 별명이 'fastEngine'인 애를 가져옴
        this.engine = engine;
    }
}

3. 필드 이름 매칭

스프링은 똑같은 타입이 여러 개 있으면, 마지막 수단으로 변수(필드) 이름과 똑같은 이름의 빈이 있는지 찾음

@Component
public class GasolineEngine implements Engine { ... }

@Component
public class ElectricEngine implements Engine { ... }

@Component
public class Car {
    // 변수 이름을 'electricEngine'으로 지으면, 스프링이 알아서 ElectricEngine을 가져옴
    @Autowired
    private Engine electricEngine; 
}

세 가지 중, 공통적으로 많이 쓰는 것에 @Primary를 붙이고,

특별한 경우에만 @Qualifier로 지목해서 쓰는 방식을 사용하기

[Spring] 컴포넌트 스캔 @ComponentScan @Filter @Autowired

개발자 leelee — Sun, 18 Jan 2026 21:44:10 +0900

컴포넌트 스캔 (@ComponentScan)

기존에는 객체(Bean)를 스프링 컨테이너에 넣어달라고 직접 명시했다면,

컴포넌트 스캔은 "알아서 클래스를 찾아서 자동으로 스프링 빈으로 등록하는 기능"

@ComponentScan: 설정 정보 클래스 위 붙임
@Component: 등록하고 싶은 클래스 위에 붙임

@ComponentScan 은 @Component가 붙은 모든 클래스를 스프링 빈으로 등록

필터 (@Filter)

includeFilters : 컴포넌트 스캔 대상을 추가로 지정

excludeFilters : 컴포넌트 스캔에서 제외할 대상을 지정

@Configuration
@ComponentScan(
// 하위 패키지까지 스캔
    basePackages = "com.example.demo",
    
    // Configuration이 붙은 클래스는 스캔 대상에서 제외
    excludeFilters = @ComponentScan.Filter(type = FilterType.ANNOTATION, classes = Configuration.class)
)
public class AutoAppConfig {
}

오토와이어드 (@Autowired)

생성자에 @Autowired를 붙여주면,

스프링이 빈을 생성할 때 타입을 보고 알맞은 의존성(객체)을 자동으로 찾아서 주입

(타입이 같은 빈을 찾음)

@Component
public class OrderServiceImpl implements OrderService {
    
    private final MemberRepository memberRepository;

    @Autowired // 생성자가 하나라면 생략 가능 (스프링 부트)
    public OrderServiceImpl(MemberRepository memberRepository) {
        this.memberRepository = memberRepository;
    }
}

컴포넌트 스캔은

@Component, @Controller, @Service, @ Repository, @Configuration

도 스캔 대상에 포함

컴포넌트 스캔에서 같은 이름의 빈이 등록되는 경우

1. 자동 빈 등록 vs 자동 빈 등록
만약 서로 다른 패키지에 같은 이름의 클래스(예: service.MemberService, domain.MemberService)가 있고 둘 다 @Component가 붙어있다면? 스프링은 ConflictingBeanDefinitionException 예외를 발생시킴

해결: 클래스 이름을 변경하거나, @Component("customName")처럼 이름을 직접 지정하기

2. 수동 빈 등록 vs 자동 빈 등록
AppConfig에 수동으로 등록한 빈 이름과, @Component로 자동 등록된 빈 이름이 충돌하면?

과거 스프링은 수동 등록 빈이 우선권을 가졌지만(자동 빈을 오버라이딩).
최근 스프링 부트는 설정 실수를 방지하기 위해 기본적으로 에러를 발생시키도록 변경

*************************** APPLICATION FAILED TO START ***************************
Description:

The bean 'memberService', defined in class path resource [(경로)/DependencyConfig.class], could not be registered. A bean with that name has already been defined in file [(경로)/member/MemberService.class] and overriding is disabled.

Action:
Consider renaming one of the beans or enabling overriding by setting spring.main.allow-bean-definition-overriding=true

Action 에 있는 메시지를 보고

application.properties 파일에 위 코드를 입력하면 오버라이딩 가능하도록 변경됨

[LINUX] MobaXterm에서 Alias(별칭) 설정 방법

개발자 leelee — Tue, 13 Jan 2026 23:45:57 +0900

1. 문제상황

PuTTY에서 사용하던 alias 설정을 MobaXterm 에서도 똑같이 사용하려니 되지 않았다.
MobaXterm 로컬 터미널의 .bash_profile에 추가했지만

명령어를 찾을 수 없다는(Command not found) 오류가 발생

2. 원인

터미널(Shell)이 실행될 때 설정 파일을 읽어오는 우선순위

.bashrc > .bash_profile

3. 해결 방법

.bashrc 파일에 직접 alias를 설정해주었다.

# .bashrc 하단에 직접 추가
alias tomcat='cd  ~~~ '

리눅스 명령어 자주 쓰는 건 기억해놔야겠다.

끝!

프론트에서 할까 백에서 할까 내가 생각한 기준 정리

개발자 leelee — Wed, 7 Jan 2026 01:05:06 +0900

화면을 로드했을 때 조회되는 조건의 기본값(하드코딩)을 바꿀 일이 생겼다.

근데 아래 세 가지 수정방법이 있었다.

1. 백단(java)에서 수정

2. 프론트단(jsp)에서 수정

3. 공통으로 처리

나의 경우 보통 다른 사람이 만든 걸 보고 기준을 잡아서 따라했었는데

처리 방법이 다양해서 고민해본 처리 기준 (?)

1. 백단에서 수정해야할 경우

- 같은 api를 여러 화면/엑셀 등에서 같이 사용할 때

- 기본값이 규칙에 가까울 때 (ex 명확한 기준 오늘 날짜로부터 3년전)

=> 조회시 사용자가 값을 바꿀 수 없어서 값이 안전하고 일관됨

=> 화면이 바뀌어도 규칙이 유지됨

=> 단점, 백엔드와 화면 둘 다 수정

2. 프론트단에서 수정해야할 경우

- 화면에서만 바꾸면 될 때

- 서버 로직 변경 없이 빠르게 처리해야할 때

=> 빠르고 영향 범위가 좁음

=> 서버를 안 내려도 됨

=> 단점, api가 다른 곳에서도 쓰이면 기본값이 달라질 수 있음

3. 공통 파일로 처리

- 여러 조회 화면에 똑같이 적용됨

- 공통적인 규칙이 자주 바뀔 수 있을 때

=> 유지보수 편리

이번 경우엔 1번으로 처리했다.

오늘 날짜 값이 controller에 있고 수정코드가 좀 더 짧게 해결됨

날짜 기본값을 controller에서 만들고 프론트에서는 <input value = "${data}"> 로 표시해줬다.

앞으로는 어디를 수정해야 효율적인지 고민하고

다른 사람은 왜 이렇게 했지? 생각해보고

여러방법으로 디버깅도 돌려봐야겠다.

[ORACLE] CSV 파일 Import 시 무결성 제약 오류 해결 방법 (임시테이블 활용)

개발자 leelee — Sun, 27 Apr 2025 23:39:07 +0900

엑셀로 전달 받은 데이터를 CSV파일로 바꿔서 테이블에 import하는데

전달받은 데이터에 중복값들이 있는지 무결성 제약에 위배된다고 뜨는 상황 발생

데이터가 많을 경우, 그 중 중복 값 찾는 방법

=> CSV를 DB에 임시로 넣고 SQL로 중복값 찾기

1. 임시 테이블 생성 후 CSV 데이터를 넣어준다.

CREATE TABLE IMSI(
컬럼명 형식(크기);
...
);

2. SQL 로 중복 조합을 찾는다.

SELECT 컬럼명1, 컬럼명2, COUNT(*) 
FROM IMSI
GROUP BY 컬럼명1, 컬럼명2
HAVING COUNT(*) > 1;

=> 결과를 조회하면 중복된 조합이 나옴

결과값을 보고 중복된 데이터를 뺀 후 CSV 파일을 밀어넣으니 성공!

끝!

[DBeaver] There is no physical unique key defined for 해결

개발자 leelee — Mon, 31 Mar 2025 23:45:25 +0900

문제상황

select한 화면에서 컬럼을 수정하려고 하는데,

수정이 안되고 아래처럼 오류문구가 떴다.

There is no physical unique key defined for '테이블명'

[Use All Columns] 버튼을 누르면 내가 수정하려는 데이터 외에 다른 데이터도 변경될 수 있어서

[취소] 버튼을 눌러줬다.

오류원인

수정하려는 해당 테이블에 기본키(primary key)나 고유키(unique key)가 정의되어 있지 않아서 생긴 오류.

값을 수정하거나 삭제할 때, 어떤 행을 기준으로 업데이트할지 디비버가 알 수 없어서 생긴 팝업창이다.

해결방법

1. 기본키 또는 고유키 설정하기

=> 테이블 조건을 바꿀 수는 없었음

2. row조건만 잘 걸어서 수정하기

=> 다른 티스토리를 참고했는데 나의 경우에는 같은 오류 떴음

3. 뷰테이블

=> 알고보니 원인은 뷰테이블

뷰테이블을 수정하고 있어서 생긴 오류였다.

조인 (join), 그룹핑(group by), 서브쿼리 등이 있으면 어떤 원본 테이블을 수정해야할지 디비버가 알 수 없다.

=> 원본 테이블을 찾아서 직접 수정해준다.

뷰테이블은 조회전용이라는 걸 기억하자

끝!