Web15 [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. [자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃 네이버 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 네이버 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 네이버 로그인을 구현해 보겠습니다. 네이버 로그인 API 사용을 위한 애플리케이션 설정 개발의 흐름은 먼저 네이버 개발자 사이트에서 애플리케이션을 세팅을 한 후 사이트 코드를 작성해 주면 됩니다. 먼저 아래 사이트에서 로그인을 진행해 줍니다. https://developers.naver.com/apps/#/register?api=nvlogin TYPE1 *네이버 디벨로퍼를 .. 2021. 7. 15. [앱만들기] 웹개발자가 가장 쉽게 어플만들기③ (EXPO로 AFK 만들기) 준비 앞전 구름 IDE를 통해 NodeJS React Native Expo 개발환경을 구축했으며, Expo를 통해 내가 제작할 어플리케이션을 미리보기로 확인했습니다. 이번에는 미리 본 어플리케이션을 실제 APK로 변환해보는 작업을 진행해보겠습니다. 앞전 개발환경구축링크 [앱만들기] 웹개발자가 가장 쉽게 어플만들기② (구름IDE, EXPO feat 조코딩) 웹 개발자도 쉽게 어플리케이션을 만드는 방법을 찾던 중 조코딩님의 ‘구름 IDE를 이용한 3분 만에 안드로이드와 아이폰 어플 만들기’를 보았고, 이 방법이면 앱 개발자가 아니어도 충분히 tyrannocoding.tistory.com AFK로 만들기 구름IDE에서 기본적으로 제공해주는 NodeJs가 EXPO 버전과 호완성이 맞지 않은지 애러가 나서 APK.. 2021. 7. 7. [앱만들기] 웹개발자가 가장 쉽게 어플만들기② (구름IDE, EXPO feat 조코딩) 웹 개발자도 쉽게 어플리케이션을 만드는 방법을 찾던 중 조코딩님의 ‘구름 IDE를 이용한 3분 만에 안드로이드와 아이폰 어플 만들기’를 보았고, 이 방법이면 앱 개발자가 아니어도 충분히 훌륭한 앱을 만들 수 있겠다는 생각이 들었습니다. 그리고 조코딩님의 유튜브 찍은 날짜가 1년이 넘어, 영상과 다른 부분이 있어 혼자 시행착오하고 성공한 결과를 정리 및 공유드립니다. 진행할 내용은 구름IDE를 활용한 리액트 네이티브로 웹뷰를 활용해 앱을 만드는 것입니다. 리엑트네이티브가 웹 개발자가 앱을 만듬에 있어 강력한 이유는 우리가 ios를 만들기 위해 swift를 공부 및 알 필요도 없으며 안드로이드 언어 또한 마찬가지입니다. 그러므로 최종 완성은 콘텐츠 영역은 html이며, 앱 배포에 필요한 패키징 처리만 아이폰.. 2021. 7. 7. [앱만들기] 웹개발자가 가장 쉽게 어플만들기① (언어 종류 및 선택) 저는 자바 스프링을 주력으로 하는 웹팀에서 웹 개발하고 있는 개발자입니다. 이번에 저희 팀에서는 '구현된 웹'을 '앱'으로 만드는 작업을 해야만 했습니다. 모든 팀원이 앱을 개발해 본적도, 구동하는 방식도 모르는 상태였습니다. 그래서 앱에 대한 배경지식이 전무한 상태로 자료조사를 진행했으며, 가장 쉬운 방법으로 실제 구현까지 진행해봤습니다. 목표는 이미 구현된 웹사이트(웹앱)를 앱 배포에 필요한 패키징 처리만 안드로이드, 아이폰으로 하는 (깡통) 앱을 만드는 것입니다. 앱 종류 (웹앱 vs 네이티브 앱 vs 하이브리드 앱 vs 크로스 플랫폼) 웹앱 웹앱은 모바일 화면에 맞게 개발된 웹페이지입니다. 개발단계에서부터 모바일을 고려해서 홈페이지를 제작하였기 때문에 다양한 모바일 기기에서 주소를 입력하더라도 그.. 2021. 7. 6. [JAVA, SPRING, SUMMERNOTE] 서머노트 사용법 ④ (CSS충돌(부모,상위 겹침) 해결법) 썸머노트를 항상 게시판의 기본 에디터로 사용하면서 겪은 문제점을 같이 공유해보고자 합니다. 문제점(원인) 이런식으로 작성(CREATE)하고 db에 저장했습니다. 그 후 해당 게시판을 수정(UPDATE)하기를 하려고 불러올 때, 이렇게 되는 부분을 확인할 수 있습니다. 저는 이런 식으로 불러왔는데, 썸머노트에 저장했을 때 양식은 적용되지 않고, 부모(상위) css가 적용되었습니다. 페이지가 로딩될 때, JAVA -> JSTL -> HTML -> CSS 순서로 실행됩니다. 그러므로 문제점이 된 원인은 JSTL이 실행이 되고 후에 전체(*) CSS가 적용되었으므로, CSS가 먹혔다고 볼 수 있습니다. 해결방법(JSP , JSTL) 간단하게 value값(JSTL) 출력 순서를 뒤로 하면 됩니다. (주석 부분만 .. 2021. 5. 14. [자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 구글 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 구글 로그인을 구현해 보겠습니다. 구글 로그인 API 사용을 위한 애플리케이션 설정 우선 cloud.google.com/cloud-console/ 해당 사이트에 접속을 한 후 로그인을 하고, 우측 상단의 계정 옆 "콘솔"을 클릭하고, 새 프로젝트를 통해 프로젝트를 만듭니다. 상단 검색창에서 사용자의 정보를 편리하게 가져와줄 people api를 검색하여 사용합니다. 그 후 1.. 2021. 4. 12. [자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 페이스북 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 페이스북 로그인을 구현해 보겠습니다. 페이스북 로그인 API 사용을 위한 애플리케이션 설정 우선 developers.facebook.com/?locale=ko_KR 해당 페이스북 디벨로퍼 사이트를 접속 후 회원가입, 로그인을 하고 "우측 상단의 내 앱" - 앱 만들기 - 연결된 환경 구축을 클릭, 정보 입력 후 앱 만들기를 완료합니다. 페이스북 로그인의 설정을 누른 후, .. 2021. 4. 10. [자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 카카오 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 카카오 로그인을 구현해 보겠습니다. 카카오 로그인 API 흐름 카카오 로그인의 흐름은 간단합니다. 리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 카카오 API 서버에 넘깁니다. 전달받은 정보를 가지고 카카오 API 서버는 데이터를 식별하고 클라이언트가 인증에 성공한 데이터를 통해 5~6시간 로그인을 .. 2021. 4. 10. 이전 1 2 다음
