[HTML] 브라우저 자동완성 문제 해결: autocomplete="off" + 뒤로가기 잔상?

ADMIN 개발을 진행하다, 뒤로가기 액션에서 select박스의 잔상이 남아있는 현상이 있었습니다!
분명 소스는 option 1이 selected 되었지만, 잔상은 이전 타입 그대로라 왜 캐시가 남아있지 하고 고민하던 중 
자동완성 기능이라는 것을 깨달았습니다 :) 

웹 개발 중 자주 마주치는 문제 중 하나는 브라우저의 자동 완성 기능으로 인한 불편함입니다.

특히, 사용자가 폼 필드를 작성할 때 브라우저가 이전 입력 값을 자동으로 제안하거나 채워 넣는 기능이 원하지 않는 동작을 초래할 수 있습니다. 이 문제를 해결하기 위해 autocomplete="off" 속성을 사용하는 방법에 대해 소개하겠습니다.

문제 발생

자동 완성 기능은 일반적으로 사용자 경험을 향상시키기 위해 설계되었지만, 특정 상황에서는 문제가 될 수 있습니다. 예를 들어:

• 로그인 폼: 사용자 이름과 비밀번호를 저장해 두고 자동으로 채워 넣는 기능이 보안상의 우려를 일으킬 수 있습니다.
• 설문 조사: 사용자가 이미 입력한 값이 자동으로 채워지는 것이 원하지 않는 경우가 있습니다.
• 자동 완성 버그: 페이지를 새로고침하거나 뒤로가기 버튼을 눌렀을 때 폼 필드가 이전의 값으로 채워지며 화면이 업데이트되지 않는 경우.

이런 문제를 해결하기 위해 autocomplete="off" 속성을 활용할 수 있습니다.

autocomplete="off"란?

autocomplete 속성은 입력 필드나 폼에 대해 자동 완성 기능을 제어합니다. autocomplete="off"를 사용하면 브라우저가 해당 입력 필드의 이전 입력 값을 자동으로 제안하거나 채우지 않도록 합니다.

사용 방법

1. 특정 입력 필드에 적용하기

각 입력 필드에 대해 자동 완성을 비활성화하려면 다음과 같이 autocomplete="off"를 설정할 수 있습니다.

<input type="text" name="username" autocomplete="off">
<input type="password" name="password" autocomplete="off">

2. 전체 폼에 적용하기

폼 전체에 대해 자동 완성을 비활성화하려면 폼 태그에 autocomplete="off"를 추가합니다.

<form autocomplete="off">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Submit</button>
</form>

버그 해결 사례

저는 웹 애플리케이션 개발 중 사용자가 뒤로가기 버튼을 눌렀을 때 <select> 박스가 이전 선택 값으로 채워지며 화면이 업데이트되지 않는 문제를 경험했습니다. 이 문제를 해결하기 위해 autocomplete="off"를 사용하였습니다.

문제 해결 과정

1. 문제 확인:
   • 페이지를 로드할 때 <select> 박스가 이전 선택 값으로 채워지며, 화면의 다른 부분이 업데이트되지 않음.
2. 해결 방법:
   • 폼 필드에 autocomplete="off" 속성을 추가하여 브라우저의 자동 완성 기능을 비활성화함.
   • 이를 통해 페이지가 로드될 때 브라우저가 이전 값을 자동으로 채우는 동작을 방지함.
3. 코드 적용:

<select id="select1" autocomplete="off">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select id="select2" autocomplete="off">
    <option value="A">Option A</option>
    <option value="B">Option B</option>
</select>

 

평소에도 자주 사용하던 기능이였지만, 뒤로가기 액션에도 이러한 현상이 일어난다는 게 너무 재밌었어요 ㅇ0ㅇ!
예전에 레디스 트랜잭션때와 같이, 진짜 사소하지만 생각지도 못한 부분에서 깨달음이 있을 때 가장 재밌는 것 같네요 :> 
특히 아무도 생각지 않은 부분들을 발견해서 고쳐놓을때 가장 뿌듯하답니다 :) 

이 글을 보게되는 분들 전부 즐거운 개발되세요 :)