Base64 인코더/디코더
텍스트를 입력하면 Base64로 인코딩하고, Base64 문자열을 입력하면 디코딩합니다.
Base64 변환기
제작 방식
브라우저에 내장된 btoa() (binary to ASCII)와 atob() (ASCII to binary) 함수를 사용하는 간단한 React 컴포넌트입니다. 인코딩: btoa() 함수는 문자열을 Base64로 인코딩합니다. 하지만 유니코드 문자열을 직접 처리하지 못하므로, encodeURIComponent와 unescape를 조합하여 UTF-8 문자열을 안전하게 처리하는 로직이 추가될 수 있습니다. btoa(unescape(encodeURIComponent(str))) 디코딩: atob() 함수는 Base64 문자열을 디코딩합니다. 인코딩의 역순으로 decodeURIComponent(escape(atob(str)))와 같이 처리하여 유니코드 문자열을 복원합니다. 두 개의 텍스트 영역(textarea)을 두고, onChange 이벤트를 통해 한쪽의 내용이 변경되면 다른 쪽을 실시간으로 업데이트하여 상호 변환 결과를 보여줍니다.
활용 방안
사용자 이름과 비밀번호를 HTTP Basic Authentication 헤더에 포함시키기 위해 username:password 형식을 Base64로 인코딩할 때 사용합니다. 이미지나 작은 바이너리 파일을 문자열 형태로 임베드(embed)해야 할 때, 해당 파일의 내용을 Base64로 인코딩하여 사용합니다. URL 파라미터로 특수 문자가 포함된 문자열을 안전하게 전달하기 위해 인코딩하는 용도로도 활용됩니다.
제공 가치
안전한 데이터 전송: 바이너리 데이터를 텍스트 기반의 프로토콜(HTTP 등)을 통해 안전하게 전송할 수 있도록 변환해줍니다. 간편함과 신속성: 별도의 라이브러리나 복잡한 과정 없이, 웹 브라우저에서 즉시 Base64 인코딩/디코딩 결과를 확인할 수 있어 개발 속도를 높여줍니다.