<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/http_response_decode/">[Flutter] 서버 데이터의 한글, 일본어 깨짐 수정</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#http로-데이터-가져오기">http로 데이터 가져오기</a></li><li><a href="#한글이나-일본어가-포함된-경우">한글이나 일본어가 포함된 경우</a></li><li><a href="#utf8decode">utf8.decode</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>Flutter에서 서버와 통신을 할 때, <code>http</code> 패키지를 사용합니다.<ul><li>http 패키지: <a href="https://pub.dev/packages/http" rel="noopener" target="_blank">https://pub.dev/packages/http</a></li></ul>이 때, 서버로부터 전달받은 <code>JSON</code> 데이터의 한글이나 일본어를 화면에 표시할 때, 글자가 깨지는 문제가 발생할 때가 있습니다. 이번 블로그 포스트에서는 <code>http</code> 패키지를 사용하여 서버로부터 전달받은 <code>JSON</code> 데이터의 한글이나 일본어가 깨져서 표시되는 문제를 해결하는 방법에 대해서 알아보겠습니다.<h2 id="http로-데이터-가져오기">http로 데이터 가져오기</h2>Flutter에서는 보통 다음과 같이 <code>http</code> 패키지를 사용하여 서버로부터 데이터를 받아오게 됩니다.<div><pre><code>import 'package:http/http.dart' as http;
...
final httpClient = http.Client();
...
final url = Uri.parse('${ENV.apiServer}/data');
final response = await httpClient.post(
 url,
 headers: {
 'Authorization': 'Bearer $token',
 'Content-Type': 'application/json; charset=UTF-8',
 },
 body: jsonEncode(
 {
 ...
 },
 ),
);

final data = jsonDecode(response.body);
print(data['error_message']);
</code></pre></div>이때, 서버로부터 받은 데이터가 영어인 경우, 다음과 같이 문제없이 데이터가 표시됩니다.<h2 id="한글이나-일본어가-포함된-경우">한글이나 일본어가 포함된 경우</h2>하지만, 서버로부터 전달받은 데이터가 한글 또는 일본어인 경우, 다음과 같이 문자가 깨져서 표시되는 것을 확인할 수 있습니다. 이번 블로그 포스트에서는 서버 에러(<code>サーバーエラー</code>)를 일본어로 전달받은 경우에 대해서 알아보겠습니다.<div><pre><code># flutter: サーバーエラー
flutter: ãµã¼ãã¼ã¨ã©ã¼
</code></pre></div><h2 id="utf8decode">utf8.decode</h2>이와 같이 서버로부터 전달받은 데이터의 문자가 깨지는 경우, 다음과 같이 <code>utf8.decode</code>를 사용하여 문제를 해결할 수 있습니다.<div><pre><code>import 'dart:convert';
...
final response = await httpClient.post(
 ...
);

final data = jsonDecode(utf8.decode(response.bodyBytes));
print(data['error_message']);
</code></pre></div>이렇게 코드를 수정하고, 데이터를 확인해 보면 다음과 같이 데이터가 잘 표시되는 것을 확인할 수 있습니다.<h2 id="완료">완료</h2>이것으로 <code>Flutter</code>에서 <code>http</code> 패키지를 사용하여 서버로부터 전달받은 데이터안의 한글 또는 일본어가 깨지는 문제를 해결하기 위해 <code>utf8.decode</code>을 사용하는 방법에 대해서 알아보았습니다. 혹시 서버로부터 전달받은 데이터의 문자가 제대로 표시되지 않는 경우, <code>utf8.decode</code>을 사용해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter에서 http 패키지를 사용하여 서버로부터 JSON 데이터를 받을 때, JSON 데이터안에 한글이나 일본어가 깨져서 화면에 표시되는 문제를 해결하는 방법에 대해서 알아보도록 하겠습니다.