카테고리 보관물: 프로그래밍

C#을 이용한 네이버 오픈 API 연동

들어가는 말

요즈음은 포털 사이트에서 Open API를 제공하여 검색의 결과나 다른 정보를 가져와서 필요에 맞게 구성할 수 있게 되었습니다. Open API를 사용하여 그 결과를 가져오는 방법이 언어에 따라 차이가 있는데 C#을 이용한 네이버 오픈 API 연동 에 관하여 알아보도록 하겠습니다.

연동설정 및 대상

먼저 네이버에 애플리케이션을 등록하여야 하는데 이 과정은 아래의 링크를 참고 하시면 됩니다.

https://developers.naver.com/apps/#/register?defaultScope=search

연동에 필요한 기본적인 설정은 되어 있다고 가정하겠습니다. 서비스 API > 검색에서 여러 영역이 있는데 카페글을 대상으로 진행해 보겠습니다. 웹문서, 블로그 등도 비슷한 방식으로 연동하시면 됩니다.

연동방법

C#에서는 WebRequest 클래스를 이용하여 Open API와 연동합니다. 레퍼런스는 아래의 링크에서 확인하실 수 있습니다.

https://msdn.microsoft.com/ko-kr/library/system.net.webrequest(v=vs.110).aspx

연동 자체는 어렵지 않습니다. 다음과 같은 방식으로 결과를 가져옵니다. GetRequestResult 메소드는 네이버 오픈 API URL, 클라이언트 ID와 secret을 전달받아 그 결과를 string으로 반환합니다.

private string GetRequestResult(string openApiUrl, string clientId, string clientSecret)
{
	var requestResult = String.Empty;

	try
	{
		WebRequest request = null;

		request = WebRequest.Create(openApiUrl);

		request.Headers.Add("X-Naver-Client-Id", clientId);
		request.Headers.Add("X-Naver-Client-Secret", clientSecret);

		Stream dataStream = null;

		var response = request.GetResponse();
		dataStream = response.GetResponseStream();
		var reader = new StreamReader(dataStream);
		requestResult = reader.ReadToEnd();
		reader.Close();
		dataStream.Close();
		response.Close();
	}
	catch (Exception ex)
	{
		logger.Fatal("Exception occurred!");
	}

	return requestResult;
}

13, 14행에 클라이언트 ID와 secret를 지정해 주고 openApiUrl은

https://openapi.naver.com/v1/search/cafearticle.json?query=키워드&display=40

와 같은 형태로 지정합니다. 요청 변수 및 출력결과에 대한 설명은 아래의 링크에서 확인하실 수 있습니다.

https://developers.naver.com/docs/search/cafearticle/

결과 반환형식은 XML 또는 JSON으로 지정할 수 있습니다. 사용하기 편한 형태로 지정하여 사용하면 됩니다. 필자는 JSON 형태로 지정하여 결과값을 받았습니다. 그 값을 JSON Parser(Newtonsoft.Json)를 이용하여 parsing 후 값을 가져왔습니다. 예를 들면 다음과 같습니다.

responseJSON = GetRequestResult(openApiUrl, clientId, clientSecret);

var parseJSON = JObject.Parse(responseJSON);

var queryResultCount = Convert.ToInt32(parseJSON["display"]); //검색된 검색 결과의 개수
var totalResultCount = Convert.ToInt32(parseJSON["total"]); //검색 결과 문서의 총 개수

//개별 검색 결과
var cafeTitle = parseJSON["items"][0]["title"].ToString();
var cafeContent = parseJSON["items"][0]["description"].ToString();
var cafeName = parseJSON["items"][0]["cafename"].ToString();
var cafeUrl = parseJSON["items"][0]["cafeurl"].ToString();

5행은 parsing하여 변수에 대입하는 코드이고 나머지는 몇 가지 요소의 값을 가져오는 코드입니다. 위의 링크의 출력 결과 정보와 함께 보시면 됩니다. 링크의 설명에는 개별 검색 결과의 필드가 item 이라고 되어 있는데 실제 결과를 받아보니 items 로 되어 있었습니다. 원하는 값을 가져올 수 없는 경우 반환값의 필드명이 다른 것이 아닌지 확인할 필요가 있습니다.

이상으로 C#을 이용한 네이버 오픈 API 연동 방법에 대하여 알아보았습니다.

 

CKEditor 이미지 파일 업로드 적용

들어가는 말

사용자들이 게시물을 작성할 때 이전과 다르게 기본 에디터를 제공하여 편의성을 제공합니다. 연동할 수 있는 에디터가 많이 있습니다. 그 중에 CKEditor 를 이용하여 이미지 파일 업로드 적용 방법과 기본적인 설정 몇 가지를 변경하는 방법을 알아보고자 합니다.

CKEditor 연동

기본적인 연동은 간단합니다. http://ckeditor.com 사이트에 방문하여 Download 페이지로 이동하면 용도에 따라 다운로드 받을 수 있도록 준비되어 있습니다. 본인에게 맞는 패키지를 선택하여 다운로드 하면 됩니다. 필자는 Full Package를 받았습니다.

다운로드 후 압축파일을 풀고 프로젝트 폴더의 적당한 곳에 복사를 합니다. 그 다음 연동하고자 하는 페이지에 다음과 같이 추가해 줍니다.

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

<div class="form-group">
 <label for="noticeContent">내용</label>
 <textarea class="form-control" name="noticeContent" id="noticeContent" cols="50" rows="15"></textarea>
 <script>
 CKEDITOR.replace('noticeContent');
 </script>
</div>

CKEditor 이미지 파일 업로드 적용 활성화

Toolbar에 이미지를 추가할 수 있는 버튼을 클릭해보면 대화상자가 나타나는데 아무리 찾아보아도 이미지를 올릴 수 있는 방법이 없습니다. 기본적으로 비활성화 되어 있는 상태라서 그렇습니다. 에디터 폴더에 있는 config.js 파일에 다음과 같이 추가합니다.

config.filebrowserUploadUrl = '업로드 된 파일을 처리할 프로그램 경로(ex:/ckeditor/fileUpload.aspx');

새로 고침을 한 후 이미지 버튼을 클릭해 보면 다음과 같이 업로드 탭이 나타납니다.

업로드 탭이 추가된 대화상자

업로드 탭이 추가된 대화상자

이미지 파일을 선택하고 서버로 전송 버튼을 클릭하면 위에서 지정한 파일업로드 프로그램을 통하여 처리됩니다. 파일업로드 부분은 본인의 상황에 맞게 구현하시면 됩니다. 간단한 예를 들어보겠습니다.

var uploadFile = HttpContext.Current.Request.Files;

var currentUploadFile = uploadFile[0];
if (currentUploadFile != null && currentUploadFile.ContentLength > 0)
{
 var uploadFileName = Path.GetFileName(currentUploadFile.FileName);

 var baseDomainAddress = "toughman.pe.kr";
 var fileUploadFolder = "d:\\www\editor_upload\\";
 var fileUploadFolderWebPath = baseDomainAddress + "/editor_upload" ;

 if (Directory.Exists(fileUploadFolder) == false)
 {
 Directory.CreateDirectory(fileUploadFolder);
 }

 var fileUploadAllowExtension = "jpg,png,jpeg";

 var uniqueFileNameFullPath = GetUniqueFileName(fileUploadFolder, uploadFileName);

 var fileExtension = uniqueFileNameFullPath.Substring(uniqueFileNameFullPath.LastIndexOf(".") + 1).ToLower();

 var allowFileExtension = fileUploadAllowExtension.Split(',');

 if (allowFileExtension.Contains(fileExtension) == true)
 {
 currentUploadFile.SaveAs(uniqueFileNameFullPath);
 var webPath = fileUploadFolderWebPath + Path.GetFileName(uniqueFileNameFullPath);

 Response.Write("<script type='text/javascript'>\nwindow.parent.CKEDITOR.tools.callFunction(1, '" + webPath + "', '');\n</script>");
 }
 else
 {
 Response.Write("<script type='text/javascript'>\nalert('허용되지 않은 파일 유형입니다.');\n</script>");
 }
}

다른 부분의 처리는 다를 수 있지만 30행은 업로드된 이미지를 에디터에 나타나도록 하는 코드 입니다. 이것이 없으면 업로드는 되지만 이미지가 에디터에 나타나지 않습니다.

Toolbar 설정

Full Package를 연동해 보면 Toolbar 항목이 많습니다. 대부분 모든 기능을 제공할 필요는 없고 최소한의 기능만 제공해 주면 됩니다. Toolbar 항목을 원하는 대로 편집할 수 있습니다. 모든 항목에 대한 정확한 정보를 알기아 어려우므로 Toolbar Configurator를 사용하면 됩니다. 주소는 다음과 같습니다.

http://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

페이지에 접속해 보면 Ckeditor Toolbar 가 있고 아래에 체크박스를 토글해 보면 Toolbar 항목이 같이 토글됨을 알 수 있습니다. 상단에 Basic, Advanced 선택 버튼이 있는데 필자는 Advanced 로 변경해 놓고 편집하였습니다. 그 다음 그 내용을 config.js 파일에 다음과 같이 추가하였습니다.

CKEDITOR.editorConfig = function( config ) {

	config.toolbar = [
			{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
			{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'] },
			'-',
			{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
			{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
			{ name: 'links', items: ['Link', 'Unlink'] },
			'/',
			{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
			{ name: 'colors', items: ['TextColor', 'BGColor'] },
	];

};

이런 방식으로 필요한 기능만 제공할 수 있습니다.

Bootstrap Modal 과 충돌

프로젝트 특성상 일관성 유지를 위하여 에디터 기능을 Bootstrap Modal에 포함시켜야 하는 경우가 있습니다. 에디터 자체는 나타나는데 스타일, 문단, 글꼴 등을 선택할 수 없는 문제가 있습니다.

Bootstrap Modal안에 연동

Bootstrap Modal안에 연동

선택할 수 있도록 변경을 해야 하는데 이미 같은 문제를 겪은 프로그래머가 패치를 만들었습니다. 필자의 경우 패치를 적용해도 변화가 없어서 다른 포럼에서 참고한 조건을 추가하여 다음과 같이 적용하였습니다.

// bootstrap-ckeditor-fix.js
// hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
//
// Include this file AFTER both jQuery and bootstrap are loaded.
// http://ckeditor.com/comment/127719#comment-127719
$.fn.modal.Constructor.prototype.enforceFocus = function() {
 modal_this = this
 $(document).on('focusin.modal', function (e) {
 if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length && $(e.target.parentNode).hasClass('cke_contents cke_reset')
 && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
 && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
 modal_this.$element.focus()
 }
 })
};

글꼴 추가

기본적으로 글꼴이 영문위주로 되어 있습니다. 한글 글꼴을 추가하려면 config.js 파일에 다음의 내용을 추가하면 됩니다.

config.font_names = CKEDITOR.config.font_names = '맑은 고딕/Malgun Gothic;굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;' + CKEDITOR.config.font_names;

세미콜론으로 구별하여 DropDown에 나타날 글자/폰트명 형식으로 추가하면 됩니다. 뒤쪽에 CKEDITOR.config.font_names 부분은 원래 있었던 것을 추가하는 부분입니다. 즉, 한글 글꼴이 앞쪽에 나오고 원래 설정되어 있던 것이 뒤쪽에 나타나게 됩니다.

글꼴을 추가한 후 항목변화

글꼴을 추가한 후 항목변화

필자의 경우 한글로 지정한 레이블이 깨져서 나왔습니다. config.js 파일의 인코딩이 [한국어 – 코드 페이지 949] 되어 있던 것이 원인 이었습니다. 이것을 비주얼 스튜디오에서 [유니코드(서명 있는 UTF-8) – 코드 페이지 65001] 로 변경하여 저장하니 한글이 제대로 나타났습니다.

Enter 키 처리

에디터에서 문장을 입력하고 엔터를 입력하면 삽입되는 태그를 선택할 수 있습니다. 처음에는 <br /> 태그가 적용되지 않아서 행간의 사이가 너무 벌어져 보였습니다. 다음과 같이 config.js 파일에 적용 후 행간이 적당하게 되었습니다.

config.enterMode = CKEDITOR.ENTER_BR;

이상으로 CKEditor 이미지 파일 업로드 적용 방법과 설정을 상황에 맞게 변경하는 부분을 알아보았습니다.