본문 바로가기

전체 글129

[Thymeleaf] 타임리프 삼항 연산자 삼항 연산자 타임리프에서 제공하는 삼항연산자는 우리가 익히 알고있는 일반적인 삼항연산자 뿐만 아니라, Elvis 연산자, No-Operation 도 사용할 수 있다. back단에서 넘겨 받은 데이터에 따라 적절히 사용하면 된다. 적용 ✔️1. 삼항 연산자 📌 일반적으로 널리 사용되는 삼항 연산자이다. 형태를 살펴보자. -> 넘겨 받은 data가 true면 data 출력, false면 '데이터가 없음'을 출력한다. ✔️2. Elvis 연산자 📌 Elvis 연산자는 data가true면해당 값을 출력하고 false면 뒤에 있는 값을 치환하여 출력한다. ✔️3. No-Operation : _ 사용 📌 문자 그대로 작동하지 않는 것이다. 마치 타임리프가 실행되지 않는 것 처럼 말이다. data가 true면 dat.. 2023. 3. 3.
[Vue, Spring Boot]Proxy error: Could not proxy request ~ 상황 그동안 내가 맡았던 프로젝트는 front와 back이 뚜렷한 경계없이 Spring boot, JavaScript를 사용하여 한 프로젝트 내에서 풀스택으로 개발을 진행했다. 올해부터는 회사에서 내부 프로젝트를 진행하면서, front-end와 back-end의 구분을 나누게 되었다. back과 front를 분리하여 개발을 진행하는 것이 처음이다보니, 생각지도 못한 곳에서 에러가 발견되곤 했다. (글에 본격적으로 들어가기에 앞서, 나는 Vue2에 대한 전반적인 내용만 겉핥기식으로 이해하고 있는 상황이라서 잘못된 내용이 있을 수도 있다. 문제 있을 경우 살포시 알려주시면 더 공부해보겠다.) 환경 front : vue 2 (8080 포트사용) back : Spring Boot (8081 포트사용) IDE :.. 2023. 2. 28.
[jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 jQuery Validation form 입력 데이터의 유효성을 검증하는 것은 아주 중요한 일이다. jQuery에서 제공하는 validate 플러그인은 유효성 검증을 더욱 쉽게 해주도록 도와준다. 사용자 입장에서 form에 데이터를 입력하고 submit을 했을 때, 개발자가 일일히 걸어놓은 유효성 검증을 거쳐 통과못한 경우에 계속해서 alert창이 뜬다면 번거로울 것이다. validate플러그인을 이용하면 사용자가 빠르게 체크할 수 있도록 시각화해주고 onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능도 가능하다. 이 외에도 다양한 기능을 제공하니 공식문서를 확인하여 참고해야겠다. https://jqueryvalidation.org/ jQuery Validation Plugin | F.. 2023. 2. 28.
[Java] Stream 스트림으로 중복 값 찾기 Stream Java 8 부터 도입된 Stream을 이용해서 중복 값을 찾는 방법을 알아보자. 방법 ✔️1. Stream.distinct() disticnt() 메서드는 중복되는 요소들을 제거하고 새로운 스트림을 반환한다. 📌 중복된 값을 제거하고 List 반환하기 List list = Arrays.asList("A", "B", "B", "C", "D", "D"); List distinctList = list.stream() .distinct() .collect(Collectors.toList()); // 결과 // [A, B, C, D] 📌 중복된 값이 무엇인지 찾기 List list = new ArrayList( Arrays.asList("A", "B", "B", "C", "D", "D") ); Li.. 2023. 2. 22.
[Java] Optional 개념, 사용법 Optional이란? Java8부터 지원하는 Optional class에 대해 기록하려고 한다. 개발하다 보면 정말 자주 만나게 되는 예외가 바로 NPE(NullpointerException)다. NPE를 내뱉지 않게 하려면 null-safe하게 만들기 위해 null여부를 꼼꼼하게 검사해야 된다. 하지만 그렇게 하다보면 코드가 복잡해지고, 가독성은 떨어지고, 각 변수마다 null값 체크하다보면 프로그래머의 실수로 놓치는 부분이 생길 수 있다. Optional는 null이 올 수 있는 값을 감싸는 Wrapper 클래스로, 참조하더라도 NPE가 발생하지 않도록 도와준다. Optional 을 이용하면 위 문제들을 해결할 뿐만 아니라, 가독성 좋고 NPE를 방지하는 코드를 만들 수 있다. Optional 활용하.. 2023. 2. 21.
jQuery를 바닐라 JS(Vanilla JS)로 변환하기 Pure Javascript 상황 프로젝트를 진행하면서 스크립트를 짤 때, 나는 대부분 jQuery를 이용했다. 가독성이 좋고, 편하다는 이유로 순수 자바스크립트로 코드를 작성하는 것을 미루고 있었다. 순수 자바스크립트로 작성하는 비중을 늘리기 위해, jQuery를 바닐라 JS(Pure JS)로 변환해보려고 한다. 적용 ✔️1. 선택자( Selector ) 1) 단순 선택자 DOM 요소를 선택하는 것은 가장 기본적인 요소 중 하나이다. $(selector) -> querySelector() 또는 querySelectorAll() // jQuery(.className모두 선택) $(".className"); //.className의 첫번째 인스턴스 선택 document.querySelector(".className"); //.clas.. 2023. 2. 16.

티스토리툴바