jackson 사용중에 json string to object를 하는중 위와 같은 오류가 발생하였다. 해결하는 방법에 대해서 공유하고자 한다. 오류 내용 cannot deserialize from Object value (no delegate- or property-based Creator) 대충 객체를 직렬화 할 수 없다는 것이다. 이는 문법적인 오류는 아니고 jackson 라이브러리 자체가 빈 생성자가 없는 객체를 인식하지 않는다고 한다. 따라서 객체에서 빈 생성자를 추가해주면된다. 오류 해결 Java class 객체 package com.example.demo.domain; import lombok.Getter; import lombok.Setter; @Getter @Setter public cla..
웹 프로젝트를 개발하다보면 editor가 필요할 때가 많다. 간단한 블로그나 게시판을 만들때도 글을 쓰기 위해 적절한 editor가 필요한데 이를 직접 개발해도 되지만 아무래도 여간 힘든일일것이다. 이번 포스팅에서는 웹 개발에서 자주 사용되는 ckeditor 중 balloon block editor 사용법에 대해서 알아보려고 한다. ckeditor online builder https://ckeditor.com/ckeditor-5/online-builder/ CKEditor 5 Online Builder | Create your own editor in 5 steps Create your own CKEditor 5 build with customized plugins, toolbar and languag..
안녕하세요. 요즘 풀스택으로 간단하게 프로젝트 하나를 개발하고 있는데요. 뭔가 문제가 발생하여 포스팅으로 작성합니다. 항상 js 부분에서 promise는 지금까지도 잘 이해가 안되는 것 같아요. 일단 이번 포스팅으로 해결한 방법을 작성하고 이후에 promise에 대하여 심도있게 공부한 후에 포스팅하겠습니다. Map에서 Promise 풀기 let editContents = await Promise.all($(".edit-content-section").map(async function () { console.log($(this).attr('type')) if ($(this).attr('type') == 'file') { const fileSendUrl = "/profile/content/file/uploa..
안녕하세요. 최근 이쁜 웹페이지를 만들기 위해 노력중에 있습니다. 아무래도 백엔드 개발을 주 포지션으로 하다 보니 웹페이지를 디자인할때면 머리가 멍해질 때가 많습니다. 고민 끝에 css를 직접 작성하는 방향보다 웹상에 존재하는 좋은 lib를 가져와서 활용하기로 하였습니다. 이번 포스팅에서 알아볼 lib는 토스트 메시지 처리에 최적화 된 toastr js입니다. toastr.js lib 가져오기 https://codeseven.github.io/toastr/ Toastr by CodeSeven toastr toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is..
개발을 할 때면 이미지를 삽입해야 하는 경우가 있는데 일단 빠르게 개발을 하기 위해 예제용 이미지를 첨부하는 경우가 많다. 이미지를 html 요소에 넣는 방법은 로컬 파일에서 가져오는 방법이 있고 웹상의 cdn 주소를 이용해 가져오는 방법이 있다. 이번 포스팅에서는 손십게 sample용 이미지를 cdn 링크로 가져오는 방법을 알아보려고 한다. Lorem Picsum : 필자가 예제용 이미지를 가져오는데 가장 많이 사용하는 사이트이다. 일반 이미지를 cdn 링크로 가져올때는 크기가 맞지않아 깨지는 경우가 존재하는데 lorem picsum 의 이미지 cdn 링크는 경로를 통해 크기를 일이이 지정할 수 있다. 예를들어 https://picsum.photos/id/237/200/300 이렇게 이미지 cdn 링크..
모듈 bundling의 개념을 가진 webpack은 다양한 프로젝트 부분에서 좀 더 편하게 코딩하도록 도와준다. chrome extension 또한 어느 분이 chrome extension webpack을 올려주셨는데 실제로 사용해보니 너무 편해서 포스팅을 한다. chrome extension의 경우 가장 핵심인 manifest.json을 필두로 여기에 등록된 resources로만 접근하여 앱을 실행하는데 이걸 등록하고 일일히 설정하는것이 여간 힘든일이 아니다. chrome extension webpack은 이러한 어려운 부분들을 해소시켜 주는데 여러 파일을 만들어도 build시 한 파일로 모아지기 때문에 manifest.json에는 최종 결과 파일 하나만 등록시키면 된다는 장점이 있다. chrom ex..
요즘 스프링으로 열심히 프로젝트를 개발하고 있다. 개발하는 도중 JPA 관련 오류가 생겨 이를 해결하는 포스팅을 하려고 한다. JPA 오류 @Entity @Getter @Setter public class ProfileBlockTemplate { @Id @GeneratedValue @Column(name = "profile_bt_id") private Long id; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "member_id") Member member; // @OneToMany(mappedBy = "profileBlockTemplate") // private List profileTemplateComponents; @Column(name = "p..
유니코드 우리는 다양한 종류의 컴퓨터를 활용하는데 유니 코드는 모든 문자들을 일관되게 표현하여 다를 수 있게 정한 산업 표준이다.유니코드 표준이 이용되어 문자 인코딩을 통해 실제 우리의 눈에 획일화된 언어를 볼 수 있는 것이다.개발하면서 가끔 특수 문자를 사용해야 하는 경우가 있다.( 물론 이 경우도 대부분 아이콘으로 대체할거라 생각되지만..) 유니코드를 사용해야 하는 경우 좋은 참고 사이트를 발견하여 소개하려고 한다. 유니코드 백과 바로가기 : 유니코드 백과 이곳에서 다양한 유니코드 문자들을 볼 수 있고 이를 곧바로 개발에 사용할 수 있다. 해당 기호 클릭 사용하려는 기호를 클릭하면 html,css,일반 유니코드 등 바로 복붙할수 있도록 테이블 형태로 표기되어 있다. 이를 복사하여 개발하려는 코드에 그..
kwargs, dict 개념 kwargs는 key와 value의 파라미터를 동적으로 지정할 수 있는 파이썬의 좋은 문법이다. 코딩하다보면 사용할 일이 은근 많다. 하지만 웹 서비스를 구현할 때에 kwargs를 파라미터로 설정해두고 dictionary 형태로 데이터를 받고 싶은 경우가 있다. 그렇다면 파라미터가 kwargs 형태일때 dict으로 어떻게 데이터를 넘길까 kwargs function class Basic: def kwargs_test(**kwargs): print("Basic kwargs : ",kwargs) for args in kwargs.items(): print(f"this is {args}") dict으로 data 넘기기 data_set = dict() data_set = { "nam..
View 테이블이란 View 테이블은 가상 테이블이며 실제로 테이블이 만들어지는 것이 아닌 사용자의 SQL 접근 편의성을 위해서 구현된 시스템이다. View 테이블 목적 보통 DB 설계를 진행하다 보면 테이블이 정말 많을 때가 있다. 이 떄 테이블간 특정 컬럼끼리 조합이 필요하거나 SQL 함수를 사용하는 경우 일일히 쿼리를 작성하기에는 상당히 귀찮은 점이 많다. 이를 위해 view 테이블이라는 개념이 고안되었으며 한번 사용하기 시작하면 정말 편해 계쏙 사용하게 된다. view table 생성 CREATE VIEW member_web_list AS SELECT a.*,u.user_name,AVG(r.review_star) as review_star,COUNT(r) as review_count FROM we..
Spring Security 개념 대부분의 웹 프로젝트는 인증 시스템을 가지고 있다. 작게는 경로를 설정해두었지만 특정한 사람만 들어오도록 하는 것이고 많이 쓰이는 인증 시스템으로는 로그인 한 유저만 볼 수 있는 페이지를 만드는 것이다. spring security는 spring 기반의 보안 담당 프레임워크이다. 인증과 권한에 대한 부분을 filter의 흐름에 따라 처리하고 있다. 경로에 대한 Role 설정 및 로그인 시스템 및 페이지 등을 자동으로 처리해주어 편하다. Spring Security build.gradle 먼저 spring security를 사용하기 위해서는 gradle을 추가해야 한다. // web security 관련 implementation 'org.springframewor..
angular js 자바 스크립트 기반 프레임워크로 프론트 영역에서 서버처럼 mvc 구조를 고안하기 위해 제안되었다. 그동안 jquery만 사용하다가 angular js를 접하고 보니 편해서 기본 문법에 대해서 정리한다. (html 부분 작성은 pug로 하였다) 본문의 문법들은 angular js 일부 기능으로 그 외에 기능들은 angular js 공식 document에서 확인할 수 있습니다 app 등록 기본적으로 angular js를 활용하는데 있어 중요한 점은 해당 로직의 scope이다. angular js는 다양한 방법으로 scope를 지정할 수 있는데 대표적으로 ng-app이 있다. .tutorial(ng-app="my-app") .container //bootstarp 테..
많은 사람들이 리눅스 환경에서 웹서버를 돌리고 있다. 이 때 별도로 cloud db를 사용하는 경우가 있지만 해당 서버에 db를 설치해서 사용하는 경우도 많다. 오늘은 ubuntu 환경에서 mariadb를 설정해 외부 접속을 하는 방법에 대해서 알아보겠다. mariadb 설치 필자는 ubuntu 초기 환경이라고 가정하며 apt install을 통해 설치하였따. apt install mariadb-server mariadb 권한 설정 mariadb에 접속할 사용자 추가 및 권한 설정을 진행한다. mysql -u root GRANT ALL PRIVILEGES ON *.* TO [이름]@localhost IDENTIFIED BY '[password]'; GRANT ALL PRIVILEGES ON..
chrome storage chrome storage는 여느 브라우저가 제공하는 localStorage와 비슷하다. chrome과 동기화 가능 데이터를 객체로 저장 가능 비동기 처리 대충 이렇게 정리할 수 있겠다. manifest.json 반드시 permission에 storage를 추가해야 한다. "permissions": [ "storage", ] 저장 chrome.storage.sync.set을 이용해 데이터를 저장한다. await chrome.storage.sync.set({[key]:[value]}, function() { if (chrome.runtime.error) { console.log("Runtime error."); } }); 가져오기 chrome.storage.sync.get을 이용..
vim 명령어 정리 이동 일반적인 화살표 : 이동 h j k l :왼쪽 위 아래 오른쪽 이동 w b : 다음 문자로 이동 (왼쪽 오른쪽) {{ }} : 맨 처음 이동, 맨 마지막 이동 편집 관련 u : 되돌리기 (ctrl + z와 같음) ctrl + r : 되돌린거 다시 원상복구 삭제 dd : 해당 줄 삭제 5dd : 해당 줄부터 5줄 삭제 d5w : 해당 줄에 다음 단어 5개 삭제 복사/붙여넣기 yy : 해당 줄 복사 2yy : 해당 줄부터 2줄 복사 p : 복사한 것 붙여넣기 5p : 복사한거 5번 붙여넣기 파일 저장/나가기 :wq : 저장하고 나가기 :q! : 편집기 강제 종료 :w [파일명] : 다른 파일명으로 저장
1. branch 만들기 두 사람이 각 branch에서 작업한다고 가정 ➜ git_test_develop2 git:(main) git branch develop1 ➜ git_test_develop2 git:(main) git branch develop2 2. git clone 두번 하기 ➜ git_test git clone https://github.com/JellytoDev/git_test.git Cloning into 'git_test'... remote: Enumerating objects: 44, done. remote: Counting objects: 100% (44/44), done. remote: Compressing objects: 100% (29/29), done. remo..
popup js to contentscript js 통신 popup 단과 contentscript 단은 다르다. popup은 chrome extension 아이콘 클릭시 나오는 창으로 브라우저에서 동작한다. contentscript 는 페이지 로드시 함께 동작되며 page 영역에서 동작한다. 이 둘의 통신을 위해서는 chrome extension object를 활용해야한다. manfiest.json 코드 반드시 manifest.json permission에 activeTab,tab을 활성화 시켜줘야 아래 코드가 실행된다. "permissions": [ "activeTab", "tabs" ] popup.js 코드 function digitalon_use(){ chrome.tabs.query({active:..
코드리뷰 1차 이번에 현장실습 나온 회사의 팀장님께서 코드 리뷰를 해주셨따. frontend 부분에서 항상 많은 부족함을 느끼는데 좋은 기회였다. 프로젝트는 크롬 익스텐션인데 html,js,css가 주되다 보니 거의 프론트 영역에 가까웠다. js 부분 main 부분은 main 용 이름으로 파일을 구성해라 index.js, index.html, app.js, app.html과 같이 변수, 함수 이름 등을 동사 + 명사로 구성해라 지금까지 app을 생성하는 함수면 app_create라 이름을 지었는데 create_app으로 변경하였다. element의 class id 부분에서 왠만하면 class를 사용해라 아무래도 id는 고유값이기 때문에 제약이 많다. 함수들의 나열 순서는 호출부는 나중에 선언부는 먼저 오..
크롬 익스텐션 구조 contentscript.js html 로드시 함꼐 작동하는 스크립트 페이지의 현재 상태 및 dom을 읽어와 조작이 가능하다. background.js 브라우저 영역에서 동작 이벤트 트리거 방식으로 동작된다. 보통 중요한 이벤트는 현재 페이지에서 contentscript를 통해 읽어드리고 이후 background.js에서 처리한다. popup.js 크롬 오른쪽 상단에 앱 아이콘을 클릭할 시 나오는 페이지 조작 script이다. 기본적인 html script와 동작 방식이 같다. popup.html 이 script 역할을 한다. manifest.json chrome extension 설정 정보 파일 각 script 등록 및 permission 허가, 버전 관리 등을 여기서 한다. 최근 ..
ckeditor5 는 강력한 js 편집 library이다. 간혹 bootstrap modal과 같이 사용해야 하는 경우가 발생하는데 이 때 modal에 가려져 balloon block editor의 편집 pannel이 안보이는 현상이 있다. 이 때 2시간동안 z-index 조절을 했지만 문제는 z-index가 아닌 focus 문제였다. 편집하기 $('#document-edit-window').modal( { focus: false, // Do not show modal when innitialized. show: false } ); body { /* We need to assaign this CSS Custom property to the body instead of :root, because of CS..
부모 -> 자식 이런 관계로 DB가 구성되어 있을 때 부모를 삭제 시 cascade가 설정되어 있지 않아 상태 변화가 자식에게까지 전해지지 않는다. cascade는 Entity의 상태 변화를 설정하는 옵션으로 부모가 삭제 될 시 cascade = CascadeType.REMOVE 이 옵션을 OneToMany Entity에 설정하여 부모에 대한 변화가 자식에게 까지 전파되도록 한다. @OneToMany(mappedBy = "profileBlockComponent",cascade = CascadeType.REMOVE) private List profileBlockComponentContents; 바꾸면 해결된다.
jquery에서 특정 이벤트를 발생시킬 때 파라미터로 일반 function 형태와 화살표 함수를 쓰거나 한다. 사람마다 스타일이 다르지만 화살표 함수의 경우 주의해야할 것이 있다. $(".component-edit-button").click(function(){ console.log($(this).data("content-id")); console.log($(this).text()); $("#content-id").val($(this).data("content-id")); }) 이럴떄는 this를 사용할 수 있지만 $(".component-edit-button").click(()=>{ console.log($(this).data("content-id")); console.log($(this).text()..
1. 코드상황 Profile.class package com.jelly_develop.passprofile.domain.profile; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.RequiredArgsConstructor; import lombok.Setter; import javax.persistence.*; import java.util.List; @Entity @Getter @Setter public class Profile { @Id @GeneratedValue @Column(name = "profile_id") private Long id; @Column(name = "profile_title") private St..
JPA Entity Repository 작업중에 해당 오류가 떴다. package com.jelly_develop.passprofile.domain.profile; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.RequiredArgsConstructor; import lombok.Setter; import javax.persistence.*; import java.util.List; @Entity @Getter @Setter public class Profile { @Id @GeneratedValue @Column(name = "profile_id") private Long id; @Column(name = "profile_ti..
MemberRepository java 코드 public interface MemberRepository extends JpaRepository { public Member findByEmail(String email); public Member findByName(String name); } Member 코드 package com.jelly_develop.passprofile.domain.member; import com.sun.istack.NotNull; import lombok.Data; import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; import javax.persistence.Column; import j..