React, axios 사용하기 axios 사용 JQuery에 ajax가 있다면, React에는 axios가 있다. axios를 다음과 같이 import 할 경우, axios를 사용할 수 있다. axios.get('http://localhost:8080/joinAction.ad?Email=MOLLANG101@test456.com&password=mollang') .then(function(response) { alert('성공'); }); axios.get(URL) 할 경우, 해당 action을 호출할 수 있다. axios 사용하기 - 2 function joinAction() { let param = { Email : 'test@mollang.com', Password : '1234' } const j..
JPA, 시간 Default 적용하기 시간 설정하는 방법 SpringBoot 시작할 때, @EnableJpaAuditing을 설정한다. @Entity에도 설정을 해야 한다. @EntityListeners(AuditingEntityListener.class)를 적용한다. @Column에는 화면과 같이 설정을 한다. @CreatedDate와 @LastModifiedDate는 Insert일 경우 등록된다. @LastModifiedDate는 해당 Entity일 경우 실행된다. 해당 JPA를 Insert 할 경우, 다음과 같이 등록된 것을 확인할 수 있다.
JPA, Not Null 처리하는 방법 - Default 적용 JPA ColumnDefault DB에서 NotNull의 처리는 까다롭다. 해당 칼럼 값 속성이 NotNull일 경우, Null이 값일 때, Insert가 되지 않기 때문이다. 그렇기에 중요한 값일수록 null은 매우 치명적이고, JPA가 Table을 관리하는 만큼 JPA에서 Not Null 설정 시 어떻게 할 수 있는지를 알아봐야 했다. 그러나 이는 약간 일반적인 상식과 거리가 멀었다. @ColumnDefault는 해당 필드가 null일 경우, 적용될 Default 값을 설정한다. @ColumnDefault는 해당 필드가 설정될 경우, Class 위에 @DynamicInsert를 적용해야 한다. Insert할 때 null이 발견될 경우 De..
React, onClick 이벤트 만들기 회원가입 클릭시 회원가입 버튼 눌렀을 경우, Event가 발생되도록 하는 Event를 간단하게 만드려고 한다. HTML하고 비슷하지만 onClick 이벤트의 들어있는 값이 다른 것을 확인할 수 있다. joinAction이라는 명칭을 찾는 것인데, 이는 변수명 혹은 function명 모두 동일하게 적용된다. 해당 코드에서는 function명을 정의하는 코드명이며, joinAction을 찾아서 결과를 출력한다.
Optional Operator mollang.first; // Null일 경우 Error 발생 mollang?.first;//Null일 경우 undefined 반환 JavaScript에서 Null일 경우 Error가 발생되어 JS의 동작이 원활하게 되지 않는 경우가 발생된다. 이를 해결하기 위해서는 객체를 호출할 때, 점 앞에 물음표를 넣기만 하면 된다. 만약, 값이 없을 경우 undefined 를 반환하므로 Error를 무시할 수 있다.
Spring, MyBatis의 resultMap MyBatis란? Spring이 지원하는 DAO, JTBC 기능 중 하나로 DB와 연결되는 부분 중 하나이다. SQL 문법 그대로 사용할 수 있다는 장점이 있어서 인기가 좋으며, 가독성 또한 월등하니 우리나라에서 많이 사용하는 형식이다. MyBatis의 오류 여기서 MyBatis는 해당 Bean 혹은 VO의 위치가 어딧는지를 모른다. 이 글을 읽는 독자 또한 저 TestVO가 무엇인지, 어느 패키지 장소를 구분하기란 어렵다. 이 부분을 해소시키기 위해서 resultMap이 있다. resultMap이 Mybatis에서 사용하는 Type의 위치를 어딧는지, 무엇인지 알려주는 기준점이 된다. 이 resultMap기능을 안 쓸 경우 사용하는 VO가 어딧는지를 명확..
Jquery, Hover 기능 만들기 Hover 기능 특정 영역에 마우스를 올렸을 때 발생되는 Event를 Hover라고 부른다. 카테고리, 메뉴 혹은 마우스 올렸을 때 , 사용자에게 강조하기 위해 많이 사용하며 CSS 외에 Jquery를 통해서 Hover기능을 추가할 수도 있다. Hover 기능 사용하기 //Hover 추가하기 //마우스 올렸을 때 발생되는 이벤트 $(Hover대상).hover(function() { $(this).css('background', 'green'); }, //마우스가 영역 바깥으로 나갔을때 발생되는 이벤트 function() { $(this).css('background', 'white'); }) 만약 Hover대상에 마우스가 올려갔을 경우, 배경이 초록색으로 변한다. 그..
Spring, Out of range value column Error 문단제목 갑작스러운 Error 코드가 발생되었다. Out of range value for column 'PLACE_TYPE' 의 ERROR이다. 원인은 다음과 같다. DB의 TYPE과 Java의 Type가 일치 혹은 값을 넘겨받을 수 없을 경우 발생된다. 필자가 이 같은 원인이 나온 이유는 DB는 VARCHAR(String)을 입력해놓고, VO는 int로 설정했었다.
SpringBoot, JSP 자동 업데이트 JSP 영역 SpringBoot에서 jsp를 사용한다면 불편한 점이 발생된다. 보통 html(View) 부분은 새로고침만 해도 자동 업데이트가 돼서 빠른 편집이 가능하다는 장점이 있지만, SpringBoot에서 실행했을 경우에는 새로고침을 눌러도 편집이 되지 않는다. 따라서, SpringBoot 재시작을 하면서 jsp를 편집해야하는 불편함이 존재한다. 그래서 아래와 같이 설정함으로써 jsp 편집을 편하게 할 수 있도록 설정하는 것을 권장한다. Gradle 설정하기 implementation 'org.springframework.boot:spring-boot-devtools'//jsp 자동업데이트 설정 Gradle에서 jsp의 설정을 하기 위해서는 spring-b..
SpringBoot, JSP 연결하기 SpringBoot 설정하기 SpringBoot에서 JSP를 불러오기 위해서는 다음과 같이 파일을 설정해야 한다. webapp 디렉터리 생성, WEB-INF 디렉터리도 생성해야 한다. JSP를 한 번쯤 사용했다면, 'jsp는 WEB-INF 안의 내용을 불러온다.'라고 배운 적이 있을 것이다. 그런 의미로, JSP를 사용하기 위해서는 기본적으로 위와 같이 설정해야 한다. Gradle 설정 implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' implementation 'javax.servlet:jstl' Gradle 사용할 경우, 두 가지의 설정은 반드시 해야 한다. JSTL은 JSP사용을 좀 더 매끄럽게 하기 위..
Jquery, Jquery 라이브러리 설치하기 Jquery 설치하기 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com Jquery를 설치하기 위해서는, 정식 사이트에서 설치받는 것이 매우 안전하다. Jquery는 많은 다운로드 중에서 ..
React, Route 사용하기 Route 사용하기 Route는 여럿 React의 js를 관리 및 사용하기 위해 배웠다. Html의 a링크처럼 클릭해서 서로 다른 React 기능을 관리하기 위해 배웠지만 사용하고 느껴보니 a 링크하고 무언가 다른 기능이었다. jsp의 include의 개념과 비슷하며, 페이지 이동한다기보다는 그 화면의 영역을 해당 Component로 바꾸고 있었다. https://www.youtube.com/watch?v=WLdbsl9UwDc&t=595s Route는 YOUTUBE를 통해서 공부를 했다. 코딩생활, 코딩악마등 다양한 유튜브를 활용했다. 사용 결과 MollangPiu Blog에서 위의 Link를 통해서 아래 영역이 변경되는 모습을 볼 수 있었다. 먼저 결과를 보여준 이유는,..