리눅스, 유닉스에 설치된 텍스트에디터 vim을 사용하여 파일을 서로 비교하는 방법을 알아봅니다. 어떻게하면 두 개의 파일을 서로 비교할 수 있을까요?# vim 파일 비교하기만약 파일 두 개를 비교하려면? 이때 vim을 사용해서도 파일 비교를 할 수 있습니다. 방법은 아래와 같이 두 가지가 있습니다.1. vimdiff 사용하는 방법vimdiff file1 file22. vim -d 옵션 사용하기vin의 d 옵션을 사용하면 두 개의 파일의 다른 부분을 찾을 수 있습니다.vim -d file1 file2! vim 에디터 정보 더 알아보기만약 vi 또는 vim 에디터에 대하여 자세한 정보나 팁이 궁금하시면 아래 링크에서 확인하실 수 있습니다.vi vim 더보기는 아래 링크를 클릭 >https://webisfree.com/2017-06-08/vm-또는-vim-텍스트-에디터를-사용한-파일-수정-방법
2018-07-11 14:29:16클라우드 에디터(Cloud Editor) 중에서 많이 사용되는 Codeanywhere!! 신규앱이 나왔군요~이전 버전의 앱은 자체 서비스 가입에 대한 로그인만 가능했었죠. 이번에 업데이트를 통해서 소셜 로그인이 안되던 불편을 제거했습니다. 이제는 웹과 똑같이 소셜로그인이 가능합니다.개인적으로 가장 좋아하는 클라우드 에디터가 바로 Codeanywhere입니다!! 그 이유는 몇 가지 있는데요 ~ 일단 매우 직관적이고 편리한 인터페이스도 좋습니다. 그리고 서버의 재시작 속도 및 유지시간도 좋은 편입니다. 물론 무료사용을 기준으로 말씀드립니다. 그리고 이처럼 앱에서도 편하게 사용할 수 있다는 점? 아무래도 급하게 처리해야할 부분이 있다면 핸드폰으로 간단한 부분을 추가 ~ 수정할 수 있어 매우 편리하죠!편리한 Codeanywhere를 사용하시려면 아래 링크에서 다운로드 받아 사용해보시기 바랍니다.
2017-08-17 10:42:49Cloud 에디터를 사용해보면 너무나 장점이 많습니다. 가장 큰 장점은 뭐니뭐니해도 언제 어디서든 바로 자신의 개발환경에서 업무, 코딩이 가능하다는 점입니다.이런 장점을 가진 클라우드 에디터 중에서 인기있는 앱인 Codeanywhere의 개발환경을 구축한 경우 코드 테스트를 하기위한 테스트 url 정보를 얻는 방법에 대하여 알아봅니다.# 테스트 url을 확인하기먼저 CodeAnywhere는 Costom URL을 지원합니다. 하지만 이는 자체적으로 제공하는 테스트 url과는 다르며 기본으로 제공되는 환경의 url을 확인하려면 어떻게 할까요? 이 경우 아래의 방법을 따릅니다.사실 저 역시 이걸 찾는라 애먹었는데요... 해당 위치는 바로 저기의 Info를 누를 경우 나오게됩니다.좌측 메뉴의 Connection 바로 아래 자신의 앱에서 오른쪽 버튼 클릭클릭 후 나타나는 메뉴 중 Info를 클릭나타나는 정보 중 하단의 port-xx로 시작하는 url주소를 띄우기참고로 port-xx의 포트번호
2017-08-01 16:18:19리눅스, 유닉스 환경에서 자주 사용되는 에디터 vi 또는 vim에 대하여 알아봅니다. 먼저 vi, vim은 파일을 수정하는 에디터 기능을 제공합니다. vi와 vim의 차이점은 vi의 경우 초창기 개발 어플리케이션이고 vim은 vi improved로 개선된 기능을 제공합니다.! vi 그리고 vim의 차이점간단한 차이점 몇 가지를 알아보면...- 더 많은 언어에 대하여 하이라이트, 강조 기능- 네트워크를 사용한 에디팅 가능- 화면 분할이 가능- 압축파일에서도 파일 변경이 가능- 파일 비교하기 기능(vimdiff)- 플러그인 지원- vimscript 스크립팅 가능# Shell에서 vm 또는 vim을 사용한 문서 편집먼저 아래 커맨더로 파일을 수정에 접근할 수 있습니다.vm filenamevim filename@ 파일 내용 수정하기위 커맨더 입력 후 파일을 수정할 수 있습니다. 이때 수정모드로 들어가기 위해서는 a 또는 i를 입력합니다.@ 파일 수정 후 저장하기파일 수정을 마친후 ESC 버
2017-06-08 17:04:13CKEDITOR 에디터 이미지 첨부 안되도록 하는 방법을 알아보려고 합니다.만약 에디터의 사용자에게 이미지 첨부가 안되는 제약사항을 주려면 어떻게해야할까요? 먼저 확인해야할 사항이 있습니다.! config 설정에 image 플러그인이 사용가능한지 확인만약 config 파일 내부에 image 플러그인을 사용하도록 설정된 경우 replace()를 사용한 에디터 config 설정이 동작하지 않을 수 있습니다. 이 경우 Custom config 파일을 사용하도록 변경하는 등의 다른 조치가 필요합니다.그 후에 에디터의 config 설정에서 허용가능하지 않도록 입력합니다.# CKEDITOR config 설정하기아래와 같이 config를 설정합니다.CKEDITOR.editorConfig = function(config) { config.disallowedContent = 'img';};이제 img 태그는 허용이 되지 않습니다.
2017-05-31 09:58:39만약 Default로 설정된 config.js 파일이 아닌 다른 파일로 변경하여 적용하기 위한 방법을 알아보겠습니다.# 다른 config.js 파일로 CKEDITOR 실행하기먼저 다른 이름의 config파일은 생성하고 원하는 값을 설정합니다. 만약 해당 파일이 아래에 위치한 경우라면CKEDITOR.replace('myEditor',{ customConfig: '/public/scrips/my_config.js'});이제 CKEDITOR가 로딩된 후 읽게 될 config 파일은 해당 파일로 바뀌어 로딩됩니다.# config.js 파일 로딩하지 않는 방법추가적으로 아예 config.js 로딩을 하지 않는 방법도 가능합니다. 아래와 같이 입력하세요.CKEDITOR.replace('myEditor',{ customConfig: '' // 빈값을 사용});이 경우 로딩하지 않게 됩니다.
2017-05-30 13:18:12CKEDITOR에서 img 태그나 원하는 태그만 제거 또는 선택할 수 있거나 원하는 태그만 필터링하는 방법이 있을까요?방법을 찾아보니 아래와 같은 방법이 있더군요~CKEDITOR.editorConfig = function(config) { config.allowedContent = 'img';};아래는 선택 가능하지 않도록 태그를 적용하는 방법입니다. disallowedContent를 사용합니다.CKEDITOR.editorConfig = function(config) { config.disallowedContent = 'img';};좀 더 테스트는 해봐야겠습니다.
2017-05-30 11:49:17웹개발, 퍼블리싱에 사용하는 텍스트 에디터! 선택은? 일반적으로 아래 에디터들이 사용되죠~notepad++editplusultra editsublimewebstormvisual studioBrackets (http://brackets.io/)오픈소스인 텍스트에디터입니다.# cloud editor요즘은 클라우드 형태로 웹개발을 할 수 있습니다. 무료로도 사용가능한 c9도 유명합니다.c9특정 언어 개발에 사용되는 에디터도 있습니다.PyCharm파이썬 개발 에디터입니다.
2017-04-27 02:59:52CKEDITOR를 사용하여 AJAX로 불러온 데이터를 추가하는 방법입니다. 아래 방법이 유용한 이유는 CKEDITOR를 사용하여 다른 방법으로 텍스트를 추가할 경우 함께 추가된 img 및 태그 요소가 적용되지 않을 수 있습니다. 이 경우 아래 방법을 사용하면 모두 정상적으로 코드가 추가되게 됩니다. 그럼 아래 코드를 봐주세요.# CKEDITOR 에디터 html 코드 적용하는 예제소스// Insert Text into CKEDITORCKEDITOR.instances.blogEditor.setData(); // 에디터에 내용 초기화(비우기) setTimeout(function() { CKEDITOR.instances.blogEditor.document.getBody().setHtml(response.data.text); // html 코드를 정상적으로 에디터에 추가하기 위한 방법 }, 200);});여기서 setTimeout()을 사용하여 200 ms를 주었는데 그 이
2017-04-24 23:57:24CKEDITOR를 로딩한 후 바로 포커스가 이동하기 위한 방법은 무엇일까요?# 에디터 로딩 후 포커스하는 방법CKEDITOR.instances.editor.on('instanceReady', function(event) { CKEDITOR.instances.editor.focus();});위 코드를 실행할 경우 에디터가 활성화... 준비된 경우 포커스가 이동하게 됩니다.
2017-04-18 08:45:26SPA(Single page application)에서 CKEDITOR를 적용하는 방법은 무엇일까요?싱글페이지 어플리케이션의 경우 비동기 방식으로 DOM이 그려지기 때문에 textarea 태그가 언제 그려질지 확실히 알기가 어려울 수 있습니다. 예를들어 해당하는 textarea 태그가 directive의 내부의 내부...에 사용되는 경우라던가 기타 ajax가 추가로 사용되는 경우 등등 이 경우 어떻게 할까요?문제는 document의 onready state 또는 onload등의 이벤트 등을 사용하여도 확인이 안되는데 있습니다. 이 경우 지연시간을 강제로 발생하는 방법도 존재하지만... 예를들어 setTimeout() 등을 사용하는 방법이죠. 아니면 태그에 isLoaded 등의 변수를 할당하고 이를 $watch를 사용하여 확인할 수도 있습니다.가장 좋은 방법은 해당하는 디렉티브, 컨트롤러에 CKEDITOR 코드를 추가하는 것이 아니라 CKEDITOR를 사용하기 위한 커스텀 디렉티브로
2017-04-14 11:22:15CKEDITOR에서 생성될 에디터가 노출되지 않고 DOM 엘리먼트를 스크립트에서 생성하여 replace() 적용한 뒤 보여주게 하려는 경우 어떻게할까요? 그 방법은을 알아봅니다. 이해하기 쉽게 말하면 html을 추가한 뒤 로드가 되면 replace('name')을 적용하지만 자바스크립트에서 DOM 엘리먼트 추가하여 적용하는 방법입니다?var editor = document.body.appendChild(document.createElement('textarea'));CKEDITOR.replace(editor);참고로 위와 같은 방법으로 미리 CKEDITOR의 인스턴스는 생성할 수 있으나 이를 다시 옮기려고 할 경우 문제가 발생할 수 있습니다. 여러가지 테스트 해본 결과 CKEDITOR의 인스턴스와 함께 생성된 이벤트가 정상적으로 다른 엘리먼트에 이동되지 못하는 문제점이 있으니 참고바랍니다.처음부터 원하는 위치에 엘리먼트를 위치 시킨 후 CKEDITOR.replace() 함수를 사용하
2017-04-13 15:34:06CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
2017-04-13 11:29:31CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
2017-04-13 11:26:44CKEDITOR에서 초기 높이 설정하는 방법 무엇일까요?# CKEDITOR 에디터 높이 설정하기만약 name이 testEditor라면 다음과 같이 높이를 설정합니다.CKEDITOR.replace('testEditor', { height: 100});위 코드는 높이값이 100px로 설정됩니다.
2017-04-12 17:13:18CKEDITOR 에디터 replace 한 뒤에 다시 원상태로 초기화하는 방법은 무엇일까요?# destroy() 메소드를 사용하여 초기화 가능예를들어 만약 name이 testEditor인 경우...CKEDITOR.instances.testEditor.destroy();이제 다시 replace()를 사용하는 것도 가능해지게됩니다.
2017-04-12 17:01:45CKEDITOR 로딩된 상태를 알아내는 방법을 알아보려 합니다.CKEDITOR는 replace() 메소드를 사용하면 새로운 인스턴스를 생성하게 됩니다. 작성된 콘텐츠를 추가하려는 경우 해당 인스턴스의 상태가 준비가 되었는지 알아야하며 이때 이벤트 'instanceReady'를 통해 준비 이후 추가하는 것이 가능합니다. 아래 예제를 봐주세요.CKEDITOR.on('instanceReady', function() { // 필요한 작업 실행} );아래 방법 역시 동일하나 에디터를 생성하면서 동시에 이벤트를 실행하는 방법입니다.CKEDITOR.replace( 'myEditor', { on: { instanceReady: function() { // 필요한 작업 실행 } }} );만약 상태만 알면될 경우 아래의 방법으로 확인합니다.CKEDITOR.instances.myEditor.status;'Ready'// 준비된 경우 '
2017-03-30 08:28:15CKEditor를 사용하여 읽기전용 상태로 변경하는 방법입니다. setReadOnly() 메소드를 사용하여 설정합니다.만약 Auto Grow 플러그인을 사용중인 경우 마우스로 에디터를 클릭해야 크기가 늘어납니다. 처음부터 화면이 resize되길 원할 경우 아래와 같이 config를 설정합니다.config.autoGrow_onStartup = true;만약 Auto Grow 플러그인이 없다면 추가해야합니다.
2017-03-27 11:12:04CKEditor를 설정하는 방법과 제거하는 ~ 삭제하는 방법은 어떻게 될까요???! CKEditor 사용방법CKEditor는 정말 편리하고 좋은 에디터툴입니다! 개인적으로 아주 잘 사용하고 있습니다. 아래에는 아주 간단한 명령어를 알아보려고 합니다.# CKEditor 사용하기만약 textarea 태그가 있고 name 속성이 editor라면 아래와 같이 CKEditor로 사용 설정이 가능합니다.<textarea name="editor"></textarea><script> CKEDITOR.replace('editor'); // 기본옵션으로 사용하는 경우</script># 에디터 내용 가져오기위와 같이 에디터를 실행할 경우 CKEDITOR에 인스턴스가 생성됩니다. 이 인스턴스를 컨트롤하여 내용을 가져올 수 있습니다.위의 경우는 아래처럼 사용합니다.CKEDITOR.instances.editor.getData();// 에디터 내용 불러오기CKEDITOR.instances.editor.d
2017-03-22 22:04:41CKEditor에서 자동으로 height를 조절할 수 있는 방법이 있을까요?스크립트를 사용하여 구현한 예제를 보았으나 모든 브라우저 사용이 가능하면 좋을 것 같습니다.
2017-03-22 20:05:11
