1. 서론
웹, 앱이 둘다 되는 하이브리드 앱을 개발 중에 나의 앱과 메시지 앱을 연동하는 동시에 나의 앱에서 복사된 메시지를 메시지 앱에 붙여넣기를 해야하는 상황이 발생했다.
=> 한마디로 버튼 클릭하면 자동으로 문자 전송 전 상황까지 자동으로 해 달라는 뜻.
2. 본론
메시지 앱과 연동하기 위해서 검색해봤고, 아래와 같은 코드로 연동이 가능했다.
// 나머지 코드
window.location.href = `sms:${Phone}?body=${message}`;
// 나머지 코드
문제 발생
처음에는 Message를 바로 body 쪽에 넣어봤는데, 모든 줄바꿈과 공백이 사라진 채 메시지가 입력되는 문제가 발생!!
=> window.location.href를 사용하여 SMS 메시지를 보내는 기능을 구현할 때, 줄바꿈과 공백을 유지하려면 URL 인코딩을 해야 한다고 한다.
수정된 코드 예시
// 전화번호와 메시지 정의
const phone = "010-1234-5678"; // 여기에 실제 전화번호를 입력하세요
const message = `안녕하세요!
이 메시지는 줄바꿈과 공백이 유지되어야 합니다.`;
// 메시지 URL 인코딩
const encodedMessage = encodeURIComponent(message);
// SMS 앱 열기
window.location.href = `sms:${phone}?body=${encodedMessage}`;
이렇게 코드를 작성하면 줄바꿈과 공백이 유지된 채 메시지앱에 입력된다.
추가 참고 사항
- encodeURIComponent()를 사용하여 message 문자열을 URL 인코딩합니다. 이 함수는 공백을 %20으로, 줄바꿈을 %0A로 변환하여 URL 내에서 제대로 처리할 수 있게 만듬.
- 인코딩된 메시지를 sms: URL 스킴에 포함시켜 window.location.href를 사용해 SMS 앱을 연다.
3. 결론
메시지 앱과 연동할 경우에는 encodeURIComponent() 메서드를 이용해서 한번 더 인코딩 해주어야, 공백과 줄바꿈이 유지된다.
'프로그래밍 > React' 카테고리의 다른 글
[React] useEffect가 2번 호출되는 이유 (0) | 2023.12.30 |
---|---|
[React] 보일러 플레이트와 React 초기 폴더 설명 (0) | 2023.09.24 |
[React] node.js, npm, yarn의 이해 (0) | 2023.09.20 |