본문 바로가기

전체 글65

[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.