AngularJS - 번역 애플리케이션

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 AngularJS의 세계로 돌아가 번역 애플리케이션을 만드는 흥미로운 여정을 시작할 것입니다. 코드를 한 줄도 적어본 적이 없어도 걱정하지 마세요 - 나는 당신의 친절한 안내자가 되어 단계별로 안내해 드릴 것입니다. 이 튜토리얼의 끝을 맞아서, 당신은 다양한 언어 간의 텍스트를 번역할 수 있는 멋진 작은 앱을 가지게 될 것입니다. 이 얼마나 멋질까요?

AngularJS - Translate Application

AngularJS는 무엇인가요?

번역 애플리케이션에 들어가기 전에, AngularJS가 무엇인지 이해하는 데 잠시 시간을 투자해 보겠습니다. 집을 짓는 것을 상상해 보세요. AngularJS는 집을 효율적으로 조직하고 구조화하는 프레임워크와 같습니다. 이는 강력한 JavaScript 프레임워크로, 동적인 웹 애플리케이션을 만드는 데 도움을 줍니다.

프로젝트 설정

단계 1: AngularJS 포함

먼저, 프로젝트에 AngularJS를 포함시켜야 합니다. 이를 위해 HTML 파일에 스크립트 태그를 추가합니다:

<!DOCTYPE html>
<html>
<head>
<title>제 멋진 번역자</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 앱 콘텐츠를 여기에 추가할 것입니다 -->
</body>
</html>

이 코드는 AngularJS를 우리의 파티에 초대하는 것과 같습니다. 이는 브라우저가 AngularJS 라이브러리를 로드하도록 하여 우리가 그 초능력을 사용할 수 있게 합니다.

단계 2: 앱 모듈 생성

이제 AngularJS 앱을 생성해 보겠습니다. 이를 위해 본문의 끝에 스크립트 태그를 추가합니다:

<body ng-app="translatorApp">
<!-- 앱 콘텐츠 여기에 -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

여기서 우리는 AngularJS에게 "이제 'translatorApp'이라는 앱을 만들고 싶어"라고 말하고 있습니다. 본문 태그에 있는 ng-app 속성은 우리의 앱에 이름표를 달아 AngularJS가 앱이 어디에 있는지 알 수 있게 합니다.

번역자 구축

단계 3: 컨트롤러 생성

AngularJS에서 컨트롤러는 우리의 작업의 뇌와 같습니다. 데이터와 앱의 행동을 관리합니다. 컨트롤러를 하나 만들어 보겠습니다:

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// 번역 로직을 여기에 추가할 것입니다
$scope.outputText = "번역 진행 중...";
};
});
</script>

이 컨트롤러는 두 개의 변수(inputText과 outputText)와 translate 함수를 설정합니다. 이를 통해 우리의 입력, 출력, 그리고 마법의 번역 과정을 담을 컨테이너를 생각할 수 있습니다.

단계 4: 사용자 인터페이스 생성

이제 번역자의 간단한 인터페이스를 만들어 보겠습니다:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>제 멋진 번역자</h1>
<textarea ng-model="inputText" placeholder="번역할 텍스트를 입력하세요"></textarea>
<button ng-click="translate()">번역</button>
<p>{{ outputText }}</p>
</div>

<!-- 스크립트 태그 여기에 -->
</body>

이를 해부해 보면:

ng-controller를 사용하여 HTML을 컨트롤러와 연결합니다.
ng-model="inputText"는 텍스트 영역을 inputText 변수와 바인딩합니다.
ng-click="translate()"는 버튼을 클릭할 때 translate 함수를 실행하도록 합니다.
{{ outputText }}는 outputText의 값을 표시합니다.

번역 기능 추가

단계 5: 번역 API 통합

우리의 번역자가 실제로 작동하려면 번역 서비스를 사용해야 합니다. 이 예제에서는 무료 MyMemory Translation API를 사용할 것입니다. HTTP 요청을 보내기 위해 $http 서비스를 컨트롤러에 추가해 보겠습니다:

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Oops! 무언가 잘못되었습니다.";
});
};
});

이 업데이트된 컨트롤러는 언어 선택을 포함하고 번역 함수가 호출될 때 번역 API에 요청을 보냅니다.

단계 6: 사용자 인터페이스 업데이트

이제 HTML을 업데이트하여 언어 선택을 포함시키겠습니다:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>제 멋진 번역자</h1>
<select ng-model="fromLang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
<select ng-model="toLang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
<textarea ng-model="inputText" placeholder="Enter text to translate"></textarea>
<button ng-click="translate()">Translate</button>
<p>{{ outputText }}</p>
</div>

<!-- 스크립트 태그 여기에 -->
</body>

결론

축하합니다! 지금까지 AngularJS를 사용하여 간단하지만 기능적인 번역 애플리케이션을 만들었습니다. 이제 우리가 배운 것을 요약해 보겠습니다:

AngularJS 애플리케이션을 설정했습니다.
앱의 행동을 관리하는 컨트롤러를 만들었습니다.
AngularJS 디렉티브를 사용하여 사용자 인터페이스를 구축했습니다.
번역 API를 통합하여 실제 기능을 제공했습니다.

기억하시라, 코딩을 배우는 것은 여정입니다. 처음에는 몇 가지 부분이 혼란스러울 수 있지만, 연습을 하면 점점 이해가 더해집니다. 계속 실험하고 배우고, 언제나 더 복잡하고 흥미로운 애플리케이션을 만들 수 있을 것입니다!

이제 우리가 사용한 주요 AngularJS 개념을 요약한 표를 제공합니다:

개념	설명	예제
모듈	앱의 컨테이너	`angular.module('translatorApp', [])`
컨트롤러	앱의 행동을 관리	`app.controller('TranslatorController', function($scope) {...})`
스코프	컨트롤러와 뷰를 연결	`$scope.inputText = ''`
디렉티브	HTML을 확장	`ng-app`, `ng-controller`, `ng-model`, `ng-click`
표현식	값을 표시	`{{ outputText }}`

행복하게 코딩하시고, 번역 여정이 버그 없이 배우는 것으로 가득 차기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:

AngularJS - 카트 애플리케이션

다음 튜토리얼:

AngularJS - 차트 애플리케이션