본문 바로가기

Web/기타7

[Javascript, CkEditor5] CK에디터5 사용법 및 예제 ① 클라이언트 측에서 브런치와 같은 에디터를 만들어 달라고 요청하였고, 브런치(카카오)는 에디터를 오픈소스로 제공하지 않아 그 대안으로 찾은 것이 바로 CkEditor5였습니다. CK에디터란? CK에디터란 '이지윅' 에디터로 'WYSIWYG'는 What You See Is What You Get의 줄임말로서 '보는 대로 얻는다'라는 의미입니다. 그 말은 즉슨 html처럼 따로 css문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말합니다. CK에디터는 씨티은행을 포함해 여러 대기업에서도 사용하는 솔루션이며, 홈페이지에서 나와있듯이 3천만 회 이상 다운로드, 수억 명의 사용자가 사용하는 '검증된 에디터'라고 볼 수 있습니다. 이러한.. 2021. 8. 24.
[초간단] 애플 로그인 API 연동 초기 설정 하기 IOS 앱 배포를 위해 본인의 어플을 애플에 심사함에 있어, 소셜 로그인 기능을 사용하지만 애플 로그인이 없으면 reject사유가 되므로 전혀 고려하지 않은 애플 로그인을 만들게 되었습니다. 여러 자료들을 종합하고 본인의 시행착오를 거쳐 최대한 정제해서 정리했습니다. 애플로그인 초기 세팅 우선 애플 로그인 API를 이용하기 위해서는 연간 99달러를 지불해야 하는, “애플 디벨로퍼 개발자 프로그램”에 등록해야 합니다. 해당 계정으로 애플 로그인 API를 이용하기 위해서는 진행해야 할 것이 3가지가 있습니다. 1. APP ID 등록 2. KEY 생성 3. SERVICE ID 생성 입니다. APP ID 등록 https://developer.apple.com/account/ 우선 해당 사이트에 접속후 로그인합니.. 2021. 8. 20.
[JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ④ (CSS충돌(부모,상위 겹침) 해결법) 썸머노트를 항상 게시판의 기본 에디터로 사용하면서 겪은 문제점을 같이 공유해보고자 합니다. 문제점(원인) 이런식으로 작성(CREATE)하고 db에 저장했습니다. 그 후 해당 게시판을 수정(UPDATE)하기를 하려고 불러올 때, 이렇게 되는 부분을 확인할 수 있습니다. 저는 이런 식으로 불러왔는데, 썸머노트에 저장했을 때 양식은 적용되지 않고, 부모(상위) css가 적용되었습니다. 페이지가 로딩될 때, JAVA -> JSTL -> HTML -> CSS 순서로 실행됩니다. 그러므로 문제점이 된 원인은 JSTL이 실행이 되고 후에 전체(*) CSS가 적용되었으므로, CSS가 먹혔다고 볼 수 있습니다. 해결방법(JSP , JSTL) 간단하게 value값(JSTL) 출력 순서를 뒤로 하면 됩니다. (주석 부분만 .. 2021. 5. 14.
[API] PayPal(페이팔) 테스트 환경 구성 - 최신버전 페이팔 결제 연동 아임 포트 API 연동을 위해 페이팔 테스트 환경을 구축함에 있어 시행착오를 정리했습니다. 페이팔 테스트(샌드박스) 계정 만들기 페이팔 테스트 계정으로 연동하는 법을 알아보겠습니다. 먼저 www.paypal.com/사이트에 접속해 회원가입을 판매자 계정으로 신청합니다. 후에 developer.paypal.com/ 개발페이지로 이동하여 Log in Dashboard를 클릭하여 가입한 아이디로 로그인해줍니다. SANDBOX의 Accounts로 들어가셔서 Create account를 통해 새로운 계정을 만듭니다. (만들지 않고 default 계정을 사용하셔도 됩니다.) Personal 은 테스트 구매자 계정이므로 Business 테스트 판매자 계정을 선택 후 Create를 진행합니다. 만든 계정의 더보기를 통.. 2021. 3. 18.
[JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ③ (다중 이미지 업로드) 서머노트 툴바설정 : tyrannocoding.tistory.com/14 [JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ② (Toolbar 수정) 서머노트 연동 : tyrannocoding.tistory.com/13 [JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ① 기존에 서머노트 외에 많이 쓰는 CKEditor 같은 경우는 file에 대해서는 부분 유료라는 단점으로 괜찮은 에디터.. tyrannocoding.tistory.com 서머노트 툴바 설정 이후 게시글입니다. 이미지업로드 툴바에 있는 이미지로 사진을 첨부할 수도 있지만 마우스를 이용한 드래그 앤 드롭으로 아래처럼 이미지를 첨부할 수 있습니다. 문제는 섬머노트는 로 이루어져 있어 서버로 데이터를 넘겨줄 때 파일.. 2020. 12. 3.
[JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ② (Toolbar 수정) 서머노트 연동 : tyrannocoding.tistory.com/13 [JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ① 기존에 서머노트 외에 많이 쓰는 CKEditor 같은 경우는 file에 대해서는 부분 유료라는 단점으로 괜찮은 에디터를 찾다가 효율적인 서머노트를 찾았습니다. 서머노트란? 서머노트란 오픈소스 ' tyrannocoding.tistory.com 서머노트 연동 이후 게시글 입니다. 서머노트 ToolBar 수정 서머노트 기본을 그대로 사용하기에는 네이버 블로그라던지 티스토리에 비해 많이 미흡한 측면이 있어 Toolbar옵션을 보통 추가해서 사용합니다. 모든 게시판 쓰기에 보편적으로 있는 글꼴, 글자크기설정, 굵기, 글자색, 표만들기, 첨부(이미지, 동영상, 링크), 코드보기 .. 2020. 12. 3.
[JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ① 기존에 서머노트 외에 많이 쓰는 CKEditor 같은 경우는 file에 대해서는 부분 유료라는 단점으로 괜찮은 에디터를 찾다가 효율적인 서머노트를 찾았습니다. 서머노트란? 서머노트란 오픈소스 '이지윅'에디터로 'WYSIWYG' 는 What You See Is What You Get 의 줄임말로서 '보는대로 얻는다'라는 의미입니다. 그 말은 즉슨 html처럼 따로 css문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말합니다. 서머노트는 Super Simple WYSIWYG Editor using Bootstrap 이라는 설명처럼 간단한 설정만으로 사용할 수 있습니다. 뿐만아니라 bootstrap4에 기반을 둔 버전과 독립적으로.. 2020. 12. 3.

티스토리툴바