스팀 앱 개발기 #134 - 개발 완료: 태그 및 포스트 리스트 화면에서 텍스트의 HTML 태그 제거
개발 완료: 태그 및 포스트 리스트 화면에서 텍스트의 HTML 태그 제거
No. 134
2025. 09. 11 (목) | Written by @dorian-mobileapp
예전부터 눈에 거슬렸던 것은 태그 화면 또는 포스트 리스트 화면에서 포스트 항목의 텍스트에 HTML 태그가 보이는 것이었습니다. 이를 제거하고 순수 텍스트만 보이기를 원했지요. 이번에는 이러한 작업을 진행하였습니다.
스크린샷
수정 후, 포스트 리스트 화면을 확인했습니다. 텍스트에서 HTML 태그가 보였던 이전에 비해 훨씬 보기 좋아졌어요.
코드
HTML 포맷의 텍스트로부터 순수 텍스트를 추출하는 String의 확장 함수를 구현했습니다. Jsoup 라이브러리를 활용했습니다.
fun String.extractTextIfThisIsHtml(): String {
val document = Jsoup.parse(this)
return document.text()
}
추가로 예전에 구현했던 마크다운 포맷의 텍스트를 HTML 포맷의 텍스트로 변환하는 확장 함수도 보여 드립니다.
fun String.convertMarkdownToHtml(): String {
val extensions = listOf(TablesExtension.create())
val parser = Parser.builder().extensions(extensions).build()
val rootNode: Node = parser.parse(this)
val renderer = HtmlRenderer.builder().extensions(extensions).build()
return renderer.render(rootNode)
}
위 두 함수를 호출하여 마크다운 텍스트로부터 순수 텍스트를 추출할 수 있습니다.
val textContent = body?.convertMarkdownToHtml()?.extractTextIfThisIsHtml() ?: "(No text content)"
GitHub Commit
보다 자세한 코드는 아래 commit을 참고하세요.
지난 스팀 앱 개발기
- #134 - 개발 완료: (1) 태그/포스트 리스트 화면의 포스트 항목에 댓글 개수 보여주기 (2) 댓글 리스트를 Jetpack Compose로 리뉴얼
- #133 - 개발 완료: (1) 검색 버튼 클릭시 키보드 숨기기 (2) 버그 수정: 팔로잉 계정 수 오류
- #132 - 개발 완료: 포스트 이미지 페이저 화면에 XML 대신 Jetpack Compose 적용
- #131 - 개발 완료: 프로필 이미지 화면에 XML 대신 Jetpack Compose 적용
- #130 - 개발 완료: 태그 화면에 XML 대신 Jetpack Compose 적용
- #129 - 개발 완료: 지갑 화면에 XML 대신 Jetpack Compose 적용
- #128 - 개발 완료: 포스트 리스트 화면에 XML 대신 Jetpack Compose 적용
- #127 - 개발 완료: 프로필 화면에 XML 대신 Jetpack Compose 적용
- #126 - 개발 완료: 계정 히스토리 화면에 XML 대신 Jetpack Compose 적용
- #125 - 개발 완료: 댓글 리스트 바텀시트에 XML 대신 Jetpack Compose 적용
- #124 - 개발 완료: 포스트 화면에 XML 대신 Jetpack Compose 적용
- #123 - 개발 완료: 계정 상세 화면
- #122 - 개발 완료: 포스트 화면에서 댓글 리스트 보여주기
- #121 - 개발 완료: 사용자 히스토리 화면에서 항목 클릭시 링크 팝업 띄우기
- #120 - 개발 완료: 사용자 히스토리 화면
- #119 - 개발 완료: Comments, Replies 화면
- #118 - 개발 완료: 포스트(Posts) 화면
- #117 - 개발 완료: 블로그 화면
- #116 - 개발 완료: 프로필 화면
- #115 - 개발: 프로필 화면 구현에 필요한 ProfileViewModel 클래스 개발
- #114 - 수정: 태그 화면의 포스트 리스트 항목 레이아웃 변경
- #113 - 오류 수정: 태그 리스트 로딩 중 다른 화면 이동하면 앱 비정상 종료
- #112 - 포스트 화면에서 보팅 리스트 화면으로 연결
- #111 - 시작 화면 추가
- #110 - 오류 수정: 지갑 화면 시작시 오류 토스트 뜸
- #109 - 개선: 태그 입력하고 검색 버튼 클릭 또는 엔터 키 누르면 키보드 닫기
- #108 - 개선: 태그 검색창에 엔터 키 적용
- #107 - 버그 수정: 태그 화면 복귀시 포스트 리스트 다시 로딩됨
- #106 - 포스트 화면 개발
- #105 - 포스트 화면의 로직 처리를 담당할 PostViewModel 클래스 개발
- #104 - 포스트 내용 읽기 기능을 Repository, Use Case 패턴에 적용
- #103 - 포스트 내용을 읽기 위한 bridge.get_discussion API 연동 코드 작성
- #102 - 포스트 내용을 읽기 위한 bridge.get_discussion API
- #101 - build.gradle에서 라이브러리 이름과 버전 통합
- #1 ~ #100
Layout provided by Steemit Enhancer hommage by ayogom
안녕하세요.
SteemitKorea팀에서 제공하는 'steemit-enhancer'를 사용해 주셔서 감사합니다. 개선 사항이 있으면 언제나 저에게 연락을 주시면 되고, 관심이 있으신 분들은 https://cafe.naver.com/steemitkorea/425 에서 받아보실 수 있습니다. 사용시 @응원해 가 포함이 되며, 악용시에는 모든 서비스에서 제외될 수 있음을 알려드립니다.
안녕하세요.
이 글은 SteemitKorea팀(@ayogom)님께서 저자이신 @dorian-mobileapp님을 응원하는 글입니다.
소정의 보팅을 해드렸습니다 ^^ 항상 좋은글 부탁드립니다
SteemitKorea팀에서는 보다 즐거운 steemit 생활을 위해 노력하고 있습니다.
이 글은 다음날 다시 한번 포스팅을 통해 소개 될 예정입니다. 감사합니다!
Upvoted! Thank you for supporting witness @jswit.
🎉 Congratulations!
Your post has been upvoted by the SteemX Team! 🚀
SteemX is a modern, user-friendly and powerful platform built for the Steem community.
🔗 Visit us: www.steemx.org
✅ Support our work — Vote for our witness: bountyking5