작은 새의 날개짓

Web (135)

반응형

[JavaScript] Optional Operator, Null Error 방지

Optional Operator mollang.first; // Null일 경우 Error 발생 mollang?.first;//Null일 경우 undefined 반환 JavaScript에서 Null일 경우 Error가 발생되어 JS의 동작이 원활하게 되지 않는 경우가 발생된다. 이를 해결하기 위해서는 객체를 호출할 때, 점 앞에 물음표를 넣기만 하면 된다. 만약, 값이 없을 경우 undefined 를 반환하므로 Error를 무시할 수 있다.

더 읽기

[Spring] MyBatis의 ResultMap

Spring, MyBatis의 resultMap MyBatis란? Spring이 지원하는 DAO, JTBC 기능 중 하나로 DB와 연결되는 부분 중 하나이다. SQL 문법 그대로 사용할 수 있다는 장점이 있어서 인기가 좋으며, 가독성 또한 월등하니 우리나라에서 많이 사용하는 형식이다. MyBatis의 오류 여기서 MyBatis는 해당 Bean 혹은 VO의 위치가 어딧는지를 모른다. 이 글을 읽는 독자 또한 저 TestVO가 무엇인지, 어느 패키지 장소를 구분하기란 어렵다. 이 부분을 해소시키기 위해서 resultMap이 있다. resultMap이 Mybatis에서 사용하는 Type의 위치를 어딧는지, 무엇인지 알려주는 기준점이 된다. 이 resultMap기능을 안 쓸 경우 사용하는 VO가 어딧는지를 명확..

더 읽기

[Jquery] Hover 기능 만들기

Jquery, Hover 기능 만들기 Hover 기능 특정 영역에 마우스를 올렸을 때 발생되는 Event를 Hover라고 부른다. 카테고리, 메뉴 혹은 마우스 올렸을 때 , 사용자에게 강조하기 위해 많이 사용하며 CSS 외에 Jquery를 통해서 Hover기능을 추가할 수도 있다. Hover 기능 사용하기 //Hover 추가하기 //마우스 올렸을 때 발생되는 이벤트 $(Hover대상).hover(function() { $(this).css('background', 'green'); }, //마우스가 영역 바깥으로 나갔을때 발생되는 이벤트 function() { $(this).css('background', 'white'); }) 만약 Hover대상에 마우스가 올려갔을 경우, 배경이 초록색으로 변한다. 그..

더 읽기

[Spring, MyBatis Error] out of range value column 에러처리

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 자동 업데이트

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, 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사용을 좀 더 매끄럽게 하기 위..

더 읽기

[JavaScript, Jquery] Jquery 라이브러리 설치하기

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 사용하기

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를 통해서 아래 영역이 변경되는 모습을 볼 수 있었다. 먼저 결과를 보여준 이유는,..

더 읽기

[React] npm WARN config global '--global', '--local' are deprecated. Use '--location=global' insted.

React, NPM 최신으로 업데이트 npm Error Code npm WARN config global '--global', '--local' are deprecated. Use '--location=global' insted. npm을 이용해서 react-router-dom을 설치하는 과정 속에서 에러가 발생된 모습이다. 발생되는 원인에 대해서는 명확하지는 않으나 nodeJS의 버전문제로 원인으로 생각된다. 오류 해결하기 1. Set-ExecutionPolicy Unresticted -Scope CurrentUser -Force PowerShell에서 스크립트 실행을 위한 권한을 부여하는 명령어. 2. npm install --global --production npm-windows-upgrade n..

더 읽기

[SpringBoot] Logback 설정하기

SpringBoot, Logback 설정하기 Logback 사용하는 계기 Java를 Test를 한다면 가장 대표적인 명령어, System.out.println() 이 있다. 보통 우리가 개발할 때는 이 언어를 주로 사용하지만, 만약 실 사용서버에서 사용할 경우에는 위의 명령어가 무섭게 느껴질 수 있다. System에서 가져다 쓰는 static의 규칙으로 인해 우리는 항상 console창에 해당 파일이 실행되는 여부를 파악할 수 있었다. 그러나 System에서 가져다 쓰는 만큼 메모리 사용량이 그만큼 높아지고, 그렇기 때문에 남발할 경우 서버의 사양을 높일 수도 있다는 경우가 있기 때문이다. 따라서 System.out.print 대신 Logback를 사용하게 된다. logback 설정하기 해당 Projec..

더 읽기

[SpringBoot] JPA 연동하기

SpringBoot, JPA 연동하기 JPA 시작하기 JPA는 MyBatis 다음으로 가장 많이 사용하는 언어 중 하나로 손꼽히고 있다. 그런만큼 SpringBoot를 공부하면서 JPA를 시작하게 되었고, 이틀간의 노력으로 JPA를 통해 처음으로 insert 작업이 성공되었다. Gradle 설정하기 dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' testImplementation 'org.springframework.boot:spring-boot-starter-test' implem..

더 읽기

[JavaScript] GibberishAES 암호화

ㅇㅇ GibberishAES 암호화 본문의 내용을 전송할 때, 데이터를 암호화 시키기 위한 방법 중 하나이다. 실행이 정상적으로 되었을 경우, console창에 임꺽정과 알수 없는 단어가 나열되어 나타난다. enc는 encoding 한 결과, dec는 decoding한 결과물이다. 단어는 임꺽정 동일하다. 해당 AES를 활용할 때, SCRIPT 가장 하단에 놓여있다. 다음과 같은 함수를 이용할 경우, 변형이 되는 것을 확인 할 수 있다. 키 변경은 가장 위에 aes_key 변수를 통해 변경할 수 있다. key는 mollang, korea, slacademy 등 원하는 key로 변경이 가능하다. 단, AES로 암호화 된 단어는 동일한 key를 통해 원하는 값으로 복호화가 가능하다. 즉, key값이 일치하지..

더 읽기

[JQuery] CheckBox 전체 선택 하기과 해제

준비 과정 - HTML 활용하기 전체 체크 test checkbox의 전체선택하는 방법은 의외로 간단하다. checkbox를 묶는 상위 테그를 생성하면 쉽게 만들 수 있다. 여기서는 알기 쉽게 div 테그를 생성하였고 check_all이라는 명칭을 주었다. 전체 선택 만들기 체크박스 전체 체크 test 전체checkbox를 클릭할 경우, 나머지 checkbox도 모두 체크된다. Jquery의 Click을 활용하여, 전체 채크 할 수 있도록 만들었다. 그러나 여기서, CheckBox는 click으로 할 경우 문제가 발생한다. checkBox를 click으로만 받을 경우, true와 false의 구분이 한 박자 느린 결과를 보여준다. 따라서 checkBox는 change를 사용하는 것이 더 명확하다. 전체 ..

더 읽기

[JavaScript] 배열 추가하기, 삭제하기

JavaScript 배열 추가하기, 삭제하기 ​ 배열 만들기 let arr = new Array(); JavaScript 생성하기 위해서는 다음과 같다. new Array(); 할 경우 간단하게 배열이 생성된다. let test_arr = [1, 2, 3]; 위의 같은 경우에는 배열을 선언 뒤 생성했다면, 이 같은 경우는 배열 생성과 동시에 값을 추가한다. 보통 이 방법은 Test 할 때 사용하거나, 변하지 않는 값을 정의할 때 이용하는 방법이다. 배열 추가하기 1. 배열 추가하기 - 기본 let arr = new Array(); arr[0] = 'a'; arr[arr.length-1] = 'b'; arr[2] = 'b'; 배열[인덱스 번호] = 값; 추가할 곳의 인덱스번호를 지정 후 값을 지정할 경우,..

더 읽기

[Thymeleaf] JavaScript에서 Thymeleaf 사용 방법

Thymeleaf, JavaScript에서 Thymeleaf 사용 JavaScript에서 Thymeleaf 사용 방법 JavaScript에서 Thymeleaf를 사용하기 위해서는 th:inline="javascript"를 script에 추가하기만 하면 된다. 일반적인 script에서는 thymeleaf를 사용할 수 없으며, 오직 th:inline이 선언된 script에서만 사용할 수 있다. 그 뒤로는 [[]] 대괄호를 통해 thymeleaf를 보호한다. var test = [[${session.test.tt}]]; thymeleaf에서 session을 불러오는 방법이다. javascript에서는 대괄호로 보호한 대상만 값을 온전히 불러올 수 있다.

더 읽기
반응형

Copyright © 작은 새의 날개짓 All Rights Reserved

Designed by JB FACTORY

티스토리툴바