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 설정하기 Logback 사용하는 계기 Java를 Test를 한다면 가장 대표적인 명령어, System.out.println() 이 있다. 보통 우리가 개발할 때는 이 언어를 주로 사용하지만, 만약 실 사용서버에서 사용할 경우에는 위의 명령어가 무섭게 느껴질 수 있다. System에서 가져다 쓰는 static의 규칙으로 인해 우리는 항상 console창에 해당 파일이 실행되는 여부를 파악할 수 있었다. 그러나 System에서 가져다 쓰는 만큼 메모리 사용량이 그만큼 높아지고, 그렇기 때문에 남발할 경우 서버의 사양을 높일 수도 있다는 경우가 있기 때문이다. 따라서 System.out.print 대신 Logback를 사용하게 된다. logback 설정하기 해당 Projec..
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..
ㅇㅇ GibberishAES 암호화 본문의 내용을 전송할 때, 데이터를 암호화 시키기 위한 방법 중 하나이다. 실행이 정상적으로 되었을 경우, console창에 임꺽정과 알수 없는 단어가 나열되어 나타난다. enc는 encoding 한 결과, dec는 decoding한 결과물이다. 단어는 임꺽정 동일하다. 해당 AES를 활용할 때, SCRIPT 가장 하단에 놓여있다. 다음과 같은 함수를 이용할 경우, 변형이 되는 것을 확인 할 수 있다. 키 변경은 가장 위에 aes_key 변수를 통해 변경할 수 있다. key는 mollang, korea, slacademy 등 원하는 key로 변경이 가능하다. 단, AES로 암호화 된 단어는 동일한 key를 통해 원하는 값으로 복호화가 가능하다. 즉, key값이 일치하지..
준비 과정 - HTML 활용하기 전체 체크 test checkbox의 전체선택하는 방법은 의외로 간단하다. checkbox를 묶는 상위 테그를 생성하면 쉽게 만들 수 있다. 여기서는 알기 쉽게 div 테그를 생성하였고 check_all이라는 명칭을 주었다. 전체 선택 만들기 체크박스 전체 체크 test 전체checkbox를 클릭할 경우, 나머지 checkbox도 모두 체크된다. Jquery의 Click을 활용하여, 전체 채크 할 수 있도록 만들었다. 그러나 여기서, CheckBox는 click으로 할 경우 문제가 발생한다. checkBox를 click으로만 받을 경우, true와 false의 구분이 한 박자 느린 결과를 보여준다. 따라서 checkBox는 change를 사용하는 것이 더 명확하다. 전체 ..
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 사용 JavaScript에서 Thymeleaf 사용 방법 JavaScript에서 Thymeleaf를 사용하기 위해서는 th:inline="javascript"를 script에 추가하기만 하면 된다. 일반적인 script에서는 thymeleaf를 사용할 수 없으며, 오직 th:inline이 선언된 script에서만 사용할 수 있다. 그 뒤로는 [[]] 대괄호를 통해 thymeleaf를 보호한다. var test = [[${session.test.tt}]]; thymeleaf에서 session을 불러오는 방법이다. javascript에서는 대괄호로 보호한 대상만 값을 온전히 불러올 수 있다.
Thymeleaf, Null 구분하기 NULL 구분하는 방법 Thymeleaf를 사용하면서, Login 여부를 판독하기 위해 사용하는 session의 존재 유무. 혹은 request값의 존재 유무를 파악하기 위해 값을 불렀지만 null이 발생되어 error 문구가 나오는 문제가 발생되었다. 이 문제가 나타나는 이유는 Thymeleaf에서 호출 시, 값을 찾을 수 없기에 나타나는 증상이다. 보통 Thymeleaf는 request값이 null인지, 아닌지 구분을 해주는 경우가 있다. 따라서 if문을 통해 null구분이 가능하지만 애석하게도 값을 부르는 것 조차 null이 발생되어 위와 같은 문제를 발생되고, 위 문제를 통해 아래의 Thymeleaf의 기능이 동작이 되지 않는 증상이 발생되기도 한다. TEXT..
SpringBoot, Interceptor 사용하기 Interceptor Interceptor은 BackEnd, Server부분에서 알아두면 좋은 기술이다. 각 회사마다 지켜주는 사람이 있듯이, Server에 접근할 때 권한 여부를 판독하는 기능 중 하나가 Interceptor이다. 대표적으로 사용예시는 로그인 여부, 권한 체크 등이 있다. Controller의 Error를 미리 잡아주며, 유효성 검사에도 도움이 된다. 이 기능의 활용이 login check여부이다. 반드시 사용할 필요는 없지만, 객체지향 프로그램(OOP)의 장점을 아주 잘 활용한 예시라고 생각되며 중복된 코드를 최소화시킬 수 있어서 애용하는 기능 중 하나이다. 사용하기 위해서는 org.springframework.boot sprin..
ㅇㅇ layout 소개 2022.03.23 - [Web/Thymeleaf] - [Thymeleaf] template 기능 - replace [Thymeleaf] template 기능 - replace Thymeleaf, template 기능 사용하기 template 사용하기 HTML에서 흔히 사용하는 이 방식은 header, section, nav, footer, main 등 다양하게 나뉜다. 이는 각 part마다의 기능을 나누는 것을 목적으로 두지만 각.. mollangpiu.tistory.com 이전 글은 공통된 부분을 불러오는 방법이라면, 이번에는 main, content 등 다양한 명칭으로 불리는 변하는 부분에 대해 불러오는 기능을 작성하였다. nz.net.ultraq.thymeleaf thyme..
Thymeleaf, template 기능 사용하기 template 사용하기 HTML에서 흔히 사용하는 이 방식은 header, section, nav, footer, main 등 다양하게 나뉜다. 이는 각 part마다의 기능을 나누는 것을 목적으로 두지만 각 기능이 나뉜 만큼 각 사이트마다 중복되는 영역이 존재하여 template, layout 등 다양한 용어로 페이지를 쪼개어서 유지보수를 쉽게 하기 위함이 가장 뚜렷하다. th:fragment - 영역 저장하기 ============== Top ========== 쉽게 설명하기 위해서 해당 페이지를 불러온다면, 정상적인 html을 볼 수가 있다. 그러나 th:fragment는 html 중에서, 가져가고 싶은 영역만 따로 지정할 수가 있다. th:repl..
SpringBoot, API 방식으로 File Upload 하기 파일 업로드 설정 #MultiPart spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=10MB spring.servlet.multipart.location=D:\\const/test SpringBoot를 사용한다면 위와 같은 코드를 활용하면 된다. 필요에 따라서 추가해도 되고, 삭제해도 된다. max-file-size : 전송되는 개별 파일 크기 제한 max-request-size : 서버에 전송되는 파일의 크기 제한 location : 저장위치 기본 설정 값 (경로에 폴더가 없을 경우 폴더가 새로 생성된다) 파일 업로드하기 @PostM..