20111222 :: [iOS] 저장이 가능한 간단 메모장 2 (2/2)

이번 시간에는 지난 글에 이어 앱을 작성된 메모를 테이블뷰에 보여주고, 이를 편집하고 삭제하는 기능을 추가해 보도록 하겠다. 사실 메모장 만들기의 핵심 파일에 데이터를 저장하는 것이고 맨 처음 글과의 차이점은 여러 개의 메모를 객체로 만들어서 파일에 저장하는 방법을 서술했다. 마지막 글은 앱의 모양새를 조금 다듬는 정도가 되겠지만, 테이블뷰 사용에 익숙하지 않은 초보자에게는 좋은 읽을 거리가 될 수 있도록 하겠다.

테이블 뷰

테이블 뷰는 iOS에서 주로 목록을 만들 때 많이 사용하게 된다. 가장 쉬운 예로는 연락처 앱의 메인 UI를 생각할 수 있으며, 조금 다른 모양새이기는 하나 설정 앱도 테이블 뷰를 기반으로 하고 있다. 테이블 뷰는 여러 개의 셀을 나열하는 조금 독특한 형태의 뷰로, 이 테이블뷰를 구현하기 위해 테이블 뷰 컨트롤러는 2가지의 프로토콜을 따라야 한다. 그것은 각각 UITableViewDelegateUITableViewDataSource이다.

데이터소스는 테이블뷰의 각 셀에 표시되는 내용을 만들어주는 역할을 한다. 즉 테이블 뷰에 섹션이 몇개있고, 각 섹션에는 몇 개의 셀이 있으며, 각 셀에는 어떤 내용이 들어가야 하는지를 알려주는 것이다. 테이블 뷰는 자신을 그려야할 때 데이터소스로 지정된 객체에 일련의 메시지를 보내어 자신이 렌더링 되어야 하는 모양을 알게 된다. (그리고 이 때 보내는 메시지들은 UITableViewDataSource에 선언되어 있다.)

테이블뷰 델리게이트는 테이블 뷰의 각 셀을 탭하거나 지우거나 편집하는 등의 액션과 관련이 있다. 단지 테이블뷰가 내용만을 보여주고 별다른 사용자 상호작용을 하지 않는 경우에는 특별히 구현해야 하는 필요가 없다.

이제, 테이블 뷰 컨트롤러로 만들어진 RootViewController를 수정하여 저장된 내용을 보여주고, 셀을 탭하여 기존 내용을 편집하는 방법에 대해 살펴보도록 하겠다.

인터페이스

실제 데이터는 앱 델리게이트가 가지고 있으며, 테이블 뷰 컨트롤러에 필요한 것은 각 셀의 내용을 담는 배열하나 뿐이다. 따라서 인터페이스 부분은 다음과 같이 만들어진다.

#import <UIKit/UIKit.h>
#import "AppDelegate.h"
@interface RootViewController : UITableViewController
{
    NSArray *itemListArray;
    AppDelegate *appDelegate;
}
@end

구현부

테이블 뷰 컨트롤러의 구현 부 중 데이터 소스를 먼저 살펴보자. 데이터 소스는 테이블 뷰를 새로 그릴 때마다 “섹션은 몇 개”이며 “각 섹션에는 셀이 몇 개” 있고, “각 셀은 이러이러하다”는 내용을 테이블 뷰에게 알려주는 메소드들이다. 따라서 이 세가지 메소드는 필수적으로 구현해야 하며 각 메소드의 이름은 다음과 같다.

  • – (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
  • – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  • – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

이 중 마지막 tableView:cellForRowAtIndexPath: 가 가장 중요한데, 테이블 뷰는 알려진 셀의 개수만큼 루프를 돌면서 이 메소드를 호출하게 되고, 매 호출시 마다 idnexPath에 담긴 정보에 따라 해당 셀을 반환받게 된다.  또 한가지 중요한 것은 테이블 뷰는 아주아주 큰 크기를 가질 수 있는데 예를 들어 5000개 정도의 길이를 갖는 테이블 뷰가 있다고 하면 이 뷰를 채울 테이블 뷰 셀 역시 5000개가 필요하나, 메모리에 큰 부담을 주게 되므로 테이블 뷰는 이미 만들어진 셀을 재활용하게 된다. 따라서 각 셀은 Reuse Identifier를 설정해 주어 이에 맞는 셀을 사용하도록 한다.

스토리보드에서 테이블 뷰의 셀을 선택하고 Reuse Identifier에 Cell 이라고 입력한다. 또한 셀의 스타일은 기본적으로 Custom으로 되어 있는데 따로 디자인을 변경할 것이 아니므로 Basic으로 변경한다. (Basic 은 텍스트라벨 하나만을 표시하는 기본 셀이다.)

다시 RootViewController.m 파일로 돌아와서 각 부를 구현한다. 테이블 뷰 컨트롤러 템플릿으로부터 만들게 되니 아마 필요한 메서드들은 기본적으로 타이핑이 되어 있다. 먼저 뷰가 로딩되었을 때이다.

-(void)viewDidLoad
{
    [super viewDidLoad];
    appDelegate = [[UIApplication sharedApplication] delegate];
    itemListArray = [[NSArray alloc] init];
}

우선 섹션은 1개만 사용하고, 셀의 개수는 메모의 개수와 같다.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    itemListArray = [[appDelegate memoListArray] copy];
    return [itemListArray count];
}

각 셀을 표시하도록 한다.

- (UITableViewCell *)tableView:(UITableView *)tableView 
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"Cell"; //스토리보드에서 입력한 reuse identifier와 동일한 문자열
    UITableViewCell *cell = [tableView deque.... :cellIdentifier];
    // Cell의 내용을 정의
    [[cell textLabel] setText:[[itemListArray objectAtIndex:indexPath.row] title]];

    return cell;
}

상세 뷰에서 새 메모를 추가한 경우, 이를 테이블 뷰에 반영하기 위해서는 뷰가 보여질 때 테이블 뷰의 데이터를 갱신해야 한다.

-(void)viewWillAppear:(BOOL)animated
{
    [self.tableView reloadData];
}

이제 앱을 빌드하고 실행하면 기존에 생성했던 메모들이 표시되고, 새 메모를 작성하고 돌아오면 신규 메모가 리스트의 맨 상단에 표시되는 것을 볼 수 있다.

이번에는 기존 메모를 편집하는 부분이다.  먼저 스토리보드에서 테이블뷰의 셀을 선택해, 이를 디테일뷰와 연결한다. 연결 유형은 push로 한다. 이제 셀을 탭하면 디테일뷰로 이동하게 된다. 그런데 셀을 탭해도 신규 메모를 만드는 화면이 뜨게 되는데 이는 앱 델리게이트의 메모인덱스가 계속 -1 이기 때문이다. 이를 변경하는 절차가 있어야 한다.

기본적으로 테이블 뷰 델리게이트에는 셀을 선택했을 때 동작을 정의하는 메소드가 있지만, 우리는 스토리보드에서 segue를 통해 이동하므로 선택이 되기 직전에 인덱스를 바꾸는 작업을 해야 한다. 따라서 기존에 타이핑이 되어있는 메서드인 tableView:didSelectRowAtIndexPath: 를 지우고 새로운 메소드를 정의한다. 즉 선택이 되기 직전에 호출되는 메소드이다.

-(NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [appDelegate setMemoIndex:indexPath.row];
    return indexPath;
}

이제 기존 메모를 선택하면 해당 메모의 내용이 표시되는 것을 앱을 실행하여 확인할 수 있다.

다음은 셀을 지우는 부분이다. 이 중 많은 내용은 이미 타이핑이 되어 있을 것이다.

-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(editingStyle == UITableViewCellEditingStyleDelete){
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
        [[appDelegate memoListArray] removeObjectAtIndex:indexPath.row];
        [appDelegate saveData];
    }
}

여기까지 우리는 간단한 메모를 만들고 이를 편집/삭제하여 외부파일로 저장하는 앱을 만드는 방법을 살펴보았다. 언제가 될지는 모르겠지만 지금까지 만들어본 내용을 코어데이터를 사용하여 만드는 방법도 한 번 포스팅할 생각인데, 역시나 연재라는 건 부담이 크고 나는 너무 게으르기 때문에 그 언제가 언제가 될지는 모르겠다. 긴 글 읽어주셔서 감사하다.

20111207 :: [iOS] 저장이 가능한 간단 메모장

iOS 앱이 데이터를 저장하는 방법

많은 튜토리얼에서 간단한 아이폰 앱을 만드는 방법을 설명하고 있는데, 이런 튜토리얼을 따라서 이것 저것 만들어 보는 것 또한 재미도 있고, 또 여러가지 테크닉을 익힐 수 있지만 정작 활용이 가능한 앱을 만드는 것은 쉽지 않다. 이 글 (과 아마도 이어질 글들)에서는 메모장과 같이 간단히 입력한 텍스트를 저장하는 앱을 만들어 보는 것을 함께 알아보고자 한다. 혼자 삽질과 염탐(?)을 거듭하여 알아낸 내용들을 정리하는 차원이기도 하니 아주 자세하게는 아니지만 소상히 쓰려고 노력할 것이다.

iOS 앱이 어떤 데이터를 영구적으로 보관하는 방법에는 사실 여러가지가 있는데 대략 다음과 같은 방법들이 있다.

  • 코어데이터
  • SQLite
  • 아카이빙(직렬화)
  • 프로퍼티 리스트

코어데이터

코어데이터는 데이터를 저장소에 읽고 쓰고 또 관리하는 전반적인 기능을 제공하는 프레임워크이다. 코어데이터는 저장 방법을 아카이브 또는 데이터베이스(SQLite)로 사용할 수 있고, 변경 사항을 쉽게 추적하여 저장하고 또 저장된 객체를 불러와서 자동으로 관리해주는 다양한 기능들을 제공한다. 이를 잘 사용하면 엄청나게 많은 양의 코드를 손쉽게 줄일 수도 있다. 하지만 이 프레임워크는 결정적으로 초보자가 사용하기에는 조금 어렵다. 코어데이터 프레임워크 자체의 개념 자체가 초보자에게는 낯설기 때문이나, 실질적으로 예제를 만들어보면 허무할만큼이나 간단하게 데이터를 처리해준다.  예를 들어 사용자가 편집한 변경사항을 자동으로 기록한다거나 하는 것들을 지원한다.

코어데이터는 OSX용 앱을 제작할 때 코코아 바인딩과 결합하면 “한 줄의 코드도 작성하지 않고” 데이터를 불러오고 편집하고 저장하는 앱을 만드는 것이 가능할 정도의 모든 기능을 제공해주므로 시간이 될 때 꼭 공부해볼 것을 권장하며, 이 연재의 마지막에는 코어데이터를 사용하여 메모앱을 작성하는 방법을 살펴볼 것이다.

SQLite

SQLite는 아이폰에도 내장되어 있는 경량 데이터베이스 엔진이다. 개인적으로는 초보자에게 차라리 코코아 프레임워크를 권하고 싶다. 코코아터치에 포함되어 있는  SQLite3 프레임워크는 대부분 C 형식의 함수를 사용하고 있고 데이터 입출력시에는 일일이 쿼리 문을 작성해야 하므로 SQL에 대한 지식도 알고 있어야 하는 데 난점이 있다. 단, 사전이나 레퍼런스와 같은 형태의 앱을 작성할 때 미리 자료를 정제하여 DB 형태로 만들기가 쉬우므로 이 경우에는 SQLite를 쓰는 것이 좋을 수도 있다.

아카이빙

아카이빙 역시 초보자들에게는 조금 어려운 개념일 수 있으나, 대부분의 표준 코코아터치 클래스들은 스스로를 인코딩하는 방법을 알고 있기 때문에 의외로 손쉽게 접근할 수 있는 방법이나, SQLite에 밀려서 많이 쓰이고 있지 않다. 이 연재에서 우선적으로 다뤄볼 기법이기도 하다.

프로퍼티 리스트

프로퍼티 리스트는 일종의 XML의 포맷으로 키-값 의 짝을 기록하는 방법이다. 이 방법으로 생성된 데이터는 별도의 프로그램 없이 사람이 확인할 수 있다는 장점이 있다. 하지만 나는 잘 모르므로 패스하겠다.

아카이빙

아카이빙은 앱이 실행될 때 서로 서로 관계를 맺고 있는 객체들을 직렬화하여 데이터 스트림으로 만드는 기법이다. 이 데이터 스트림을 파일에 저장하고 또 읽어 들이는 방법으로 사용자 데이터를 보존할 수 있다.

다행히도 많은 표준 코코아터치 클래스들은 스스로를 아카이빙하는 방법을 알고 있다. 이러한 객체들은 NSCoding 프로토콜을 따르는데, 이 프로토콜을 따르는 객체는 스스로를 아카이빙하면서 자신과 연관을 맺고 있는 모든 객체에 대해 아카이빙하라는 메시지를 보낸다. 따라서 우리는 각각의 객체가 NSCoding 프로토콜을 따르도록하고 루트 객체를 아카이빙하면 필요한 모든 객체를 아카이빙할 수 있게 된다. (이와 관련해서는 나중에 다시 살펴볼 계획이다.) 이 방식의 강점은 여러 객체를 저장하기 위해서는 이를 단순히 배열에 담고 그 배열 객체를 한 번만 아카이빙하면 마치 전염병처럼 메시지가 번져나가 모든 객체를 아카이빙 할 수 있다는 것이다. 또한 단순한 값이 아닌 바이너리 데이터도 파일에 함께 그대로 저장할 수 있다는 강점이 있다.

객체를 아카이빙하기 위해서는 NSCoder 클래스를 사용한다. 하지만 NSCoder는 추상 클래스로 프로그래머가 직접 NSCoder 클래스의 인스턴스를 만드는 일은 거의 없다, 대신에 이 클래스에서 구체화된 NSKeyedArchiverNSKeyedUnarchiver 클래스를 사용한다.

예제 1 – 입력된 내용을 저장하는 메모판

이 모든 이야기는 예제를 통해 확인하면 보다 쉽게 이해될 수 있다. Xcode에서 새로운 프로젝트를 만든다. 프로젝트 이름이야 다들 알아서 하시고 iOS Application에서 single view 기반의 프로젝트를 생성하자. 이는 Xcode의 버전에 따라서는 window-based 앱일 수도 있다.

프로젝트가 생성되면 스토리보드 (혹은 MainWindow) 파일이 있는데 여기에 텍스트뷰를 하나 집어 넣고 사용자가 내용을 입력할 수 있도록 속성창에서 editable에 체크를 해 준다.  또한 저장하는 액션을 호출하기 위한 버튼도 하나 달아준다. 버튼은 텍스트뷰 위에 달아도 되고 아래에 달아도 된다. 디자인은 각자 알아서 하면 될 거 같다.

이제 RootViewController.h 에는 다음의 내용에 다음 코드를 추가하자

#import <UIKit/UIKit.h>

@interface RootViewController : UIViewController
{
    NSString *dataFilePath;
}
@property (nonatomic, strong) IBOutlet UITextView *memo;
-(IBAction)saveData:(id)sender;
@end

dataFilePath는 데이터를 저장할 파일의 경로를 담는 변수가 될 것이며, memo는 인터페이스 빌더에서 추가한 텍스트뷰의 아울렛이다. 파일을 저장하고 인터페이스 빌더에서 해당 텍스트뷰에 아울렛을 지정해 준다. (지정이 끝나면 nib 파일을 꼭 저장하라)

이제 이 클래스의 구현부이다. 프로퍼티를 선언했으니 맨 먼저 해줘야 하는 일이 있겠지…  @implementation RootViewController 라고 써 있는 줄 바로 아래에 다음 문장을 추가한다.

@synthesize memo;

다음은 앱이 실행되어 뷰가 로드되었을 때 바로 파일을 저장할 경로를 준비해두는 작업을 해보자. 1viewDidLoad` 매서드를 찾아 다음 코드를 추가한다.

NSString *docsDir;
NSArray *dirPaths;
dirPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory
        , NSUserDomainMask, YES);
docsDir = [dirPaths objectAtIndex:0];
dataFilePath = [[NSString alloc] initWithString:[docsDir
stringByAppendingPathComponent:@"data.archive"]];

먼저 이 구문은 그냥 그대로 쓰는 거라고 외워두면 될 정도이다. 맨 마지막 줄의 파일 이름은 꼭 data.archive로 할 필요 없고 취향에 맞게 쓰면 된다. 이 코드는 앱의 하위 디렉토리 중에서 사용자 데이터 파일이 저장되는 Documents 디렉터리를 찾고 이 속에 파일이 저장될거라고 미리 파일의 경로를 생성해 두었다는 정도가 된다. 다행히 NSString은 파일 경로를 쉽게 다룰 수 있는 메서드를 이미 가지고 있으니 천만다행.

이제 실제 저장되는 부분을 보도록 하자.

-(IBAction)saveData:(id)sender
{
    [NSKeyedArchiver archiveRootObject:[memo text] toFile:dataFilePath];
}

좀 허무하리 만치 간단하지 않은가? NSKeyedArchiver 객체가 저장할 데이터를 아카이빙하고 파일에 저장하는 작업을 모두 처리해 준다.

이제 다시 인터페이스 빌더에서 저장 버튼을 뷰컨트롤러의 -saveData 메서드에 연결해준다.

뭔가 한가지 빠진게 있는데, 저장은 했다손 치더라도 그럼 앱이 다시 열렸을 때 저장된 내용을 복원해줘야 제맛 아니겠는가. 지금은 저장만 처리했지 데이터를 읽어오는 내용은 처리하지 않았다. 그럼 다시 RootViewController.m 에서 viewDidLoad 메서드의 끝 부분에 로딩에 관련된 코드를 추가하자.

로딩과 관련해서는 다음의 액션을 취한다.

  1. 먼저 데이터 파일 경로에 파일이 있는지 확인한다음,
  2. 파일이 있으면 파일을 읽어 들인다.
  3. 읽어들인 내용을 텍스트뷰에 옮겨준다.

코드는 다음과 같다.파일을 처리하기 위해서 NSFileManager를 사용한다.

// viewDidLoad의 마지막부분
NSFileManager *fileManager = [NSFileManager defaultManager];
if( [fileManager fileExistsAtPath:dataFilePath])
{
    NSString *memoData = [NSKeyedUnarchiver unarchiveObjectWithFile:dataFilePath];
    memo.text = memoData;
}

사실 여기까지하면 끝인데, 한 가지만 더 추가하자. 만약 텍스트 뷰 아래에 저장 버튼을 추가했다면, 키보드가 올라오는 바람에 저장 버튼을 누를 수 없는 경우가 있을 수 있는데, 뷰의 배경을 클릭해서 키보드를 닫도록 하자. 역시 뷰컨트롤러의 구현부에 추가한다.


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if( [memo isFirstResponder] ){
        [memo resignFirstResponder];
    }
}

끝이다. 빌드하고 실행해본다. 에뮬레이터에서 앱을 종료한 후 다시 실행해보아도 입력했던 내용이 여전히 남아 있는 것을 확인할 수 있을 것이다.

그런데 이 예제만 만들고 나면 왠지 좀 속는 기분이 든다. 만약 뷰에서 다루는 데이터가 여러 종류이고, 이를 함께 저장하려면 어떻게 하는가?  그럼 이 메모장에서 제목란을 추가해서 한 번 수정해 보도록 하자.

인터페이스 빌더에서 루트 뷰 컨트롤러의 텍스트 뷰 크기를 좀 조정해서 빈칸을 만든 다음, 여기에 텍스트 필드를 하나 추가한다. 그리고 뷰컨트롤러의 헤더에 이 텍스트 필드에 대한 아울렛을 지정하는 코드를 만들자.

@property (nonatomic, strong) IBOutlet UITextField *title;

헤더 파일을 저장한 다음, 인터페이스 빌더에서 이 아울렛을 실제 텍스트 필드와 연결한 후 저장한다. 다시 구현부로 간다. 추가한 property에 대해 synthesize 구문을 추가해준다.

@synthesize title;

이제 -saveData: 메서드를 바꾼다. title과 memo의 내용을 한 번에 저장할 것이기 때문에 NSString을 아카이빙하는 것이 아니라 NSDictionary로 만들어서 저장한다.

-(IBAction)saveData:(id)sender
{
    NSMutableDictionary *dataDictionary = [[NSMutableDictionary alloc]
        initWithObjectsAndKeys:title.text,@"title",memo.text,@"memo", nil];
    [NSKeyedArchiver archiveRootObject:dataDictionary toFile:dataFilePath];
}

저장하는 방법을 바꿨으니, 불러오는 방법도 바꿔야겠지. -viewDidLoad 의 마지막 부분을 아래와 같이 바꾸면 된다. NSKeyedUnarchiver를 사용하여 NSDictionary를 복원한다음, 각 키 값을 사용하여 title, memo의 내용을 복원해주면 된다.

 
if([filemanager fileExistsAtPath:dataFilePath])
{
    NSDictionary *dataDictionary;
    dataDictionary = [NSKeyedUnarchiver unarchiveObjectWithFile:dataFilePath];
    memo.text = [dataDictionary objectForKey:@"memo"];
    title.text = [dataDictionary objectForKey:@"title"];
}

자, 이래도 아카이빙이 어려운가?   다음 글에서는 메모 한 개가 아니라 여러 개를 만들 수 있는 앱을 어떻게 만들 것인지 알아보도록 하겠다. 긴 글 읽으시느라 고생많았다.

이어지는 글 : 저장이 가능한 간단 메모장 2 (1/2)