AngularJS - 검색 탭

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 AngularJS의 흥미로운 세상으로 뛰어들어 검색 탭을 만드는 방법을 배우겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 여정을 단계별로 안내해 드리겠습니다. 그럼 커피 한 잔 (또는 여러분의 좋아하는 음료)을 손에 들고, 시작해 보세요!

AngularJS - Search Tab

AngularJS 검색 탭 소개

코드로 들어가기 전에, 검색 탭이 무엇이고 왜 유용한지 이해해 보겠습니다. 대량의 데이터를 가진 웹사이트를 만들고 있다고 상상해 보세요, 예를 들어 도서 목록이나 온라인 상점. 검색 탭을 사용하면 사용자가 끝없는 페이지를 스크롤할 필요 없이 빠르게 찾고 싶은 것을 찾을 수 있습니다. 마치 초능력을 가진 어시스턴트가 필요한 정보를 즉시 찾아주는 것과 같습니다!

프로젝트 설정

가장 먼저, 우리는 프로젝트를 설정해야 합니다. 이전에 이 작업을 해본 적이 없으신다면 걱정 마세요 - 저가 단계별로 안내해 드리겠습니다!

단계 1: AngularJS 라이브러리 포함

AngularJS를 사용하려면 HTML 파일에 그 라이브러리를 포함해야 합니다. HTML의 <head> 섹션에 다음 줄을 추가하세요:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

이 줄은 AngularJS를 우리의 코딩 파티에 초대하는 것과 같습니다. 이제 모든 멋진 기능에 접근할 수 있습니다.

단계 2: HTML 구조 생성

이제 검색 탭의 기본 구조를 만들어 보겠습니다. 다음과 같습니다:

<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchText" placeholder="Search...">
<ul>
<li ng-repeat="item in items | filter:searchText">{{item}}</li>
</ul>
</div>

이를 분해해 보겠습니다:

ng-app="searchApp": 이 div가 AngularJS 애플리케이션임을 알립니다.
ng-controller="searchCtrl": 이 HTML을 우리가 곧 만들 controller와 연결합니다.
ng-model="searchText": 이 입력 필드를 searchText라는 변수와 연결합니다.
ng-repeat="item in items | filter:searchText": 우리의 items 배열의 각 요소에 대해 searchText를 필터링하여 목록 항목을 생성합니다.

AngularJS 컨트롤러 생성

이제 우리의 HTML 구조가 완성되었으므로, 애플리케이션의 뇌 - 컨트롤러를 만들어 보겠습니다!

var app = angular.module('searchApp', []);

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
});

여기서 일어나는 일:

우리는 searchApp이라는 AngularJS 모듈을 생성합니다.
searchCtrl이라는 컨트롤러를 정의합니다.
컨트롤러 내부에서 items 배열을 생성하여 검색할 대상을 설정합니다.

모든 것이 어떻게 작동하는가

검색 상자에 입력을 할 때, AngularJS는 자동으로 searchText 변수를 업데이트합니다. ng-repeat 디렉티브는 이 searchText를 사용하여 items 배열을 필터링합니다. 마치 마법처럼 보이지만, 실제로는 AngularJS가 배경에서 그 일을 수행하는 것입니다!

검색 탭 개선

이제 기본 검색이 작동하므로, 몇 가지 추가 기능을 더해 보겠습니다!

대소문자 무시 검색

검색이 대소문자를 무시하도록 하기 위해 필터를 수정할 수 있습니다:

<li ng-repeat="item in items | filter:searchText:ignoreCase">{{item}}</li>

커스텀 필터 함수

보다 복잡한 필터링을 위해 커스텀 필터 함수를 생성할 수 있습니다:

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});

그런 다음 HTML에서:

<li ng-repeat="item in items | filter:customFilter">{{item}}</li>

이 커스텀 필터는 필요한 경우 더 복잡한 검색 로직을 구현할 수 있습니다.

검색 탭 스타일링

우리의 검색 탭을 보기 좋게 꾸미는 것도 잊지 마세요! 다음 CSS를 추가하여 예쁘게 꾸며 보겠습니다:

<style>
.search-container {
max-width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}
</style>

메인 div에 search-container 클래스를 추가하지 마세요!

모든 것을 한데 모음

이제 모든 조각을 한 데 모아 놓은 HTML 파일을 보여드리겠습니다:

<!DOCTYPE html>
<html ng-app="searchApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS 스타일 여기에 */
</style>
</head>
<body ng-controller="searchCtrl">
<div class="search-container">
<input type="text" ng-model="searchText" placeholder="Search...">
<ul>
<li ng-repeat="item in items | filter:customFilter">{{item}}</li>
</ul>
</div>
<script>
var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

결론

축하합니다! 여러분은 AngularJS를 사용하여 기능적인 검색 탭을 만들었습니다. 프로젝트 설정에서 커스텀 필터와 스타일링까지, 많은 부분을 다루었습니다. 연습이 완벽을 만들어 줍니다. 따라서 다른 데이터 셋을 실험하거나 검색 탭에 더 많은 기능을 추가해 보세요.

여기서 사용한 주요 AngularJS 디렉티브와 개념을 요약한 표를 보여드리겠습니다:

디렉티브/개념	목적
ng-app	AngularJS 애플리케이션 정의
ng-controller	애플리케이션의 컨트롤러 지정
ng-model	입력 필드와 변수를 연결
ng-repeat	콜렉션을 반복
filter	배열을 기준에 따라 필터링
커스텀 필터 함수	보다 복잡한 필터링 로직 구현

계속 코딩하고, 호기심을 유지하며, 행복하게 검색하세요!

Credits: Image by storyset

이전 튜토리얼:

AngularJS - 주문 폼

다음 튜토리얼:

AngularJS - 드래그 애플리케이션