프론트에서 Restful API 통신작업을 하는 도중 발견한 에러이다. 서론 특정 데이터를 삭제하는 기능의 API가 있었다. 해당 API는 delete 메소드로 구현이 되어있었다. 현업에서 특정 상황에서의 요구에 따라 해당 메소드를 Delete에서 Post로 수정하여야 했다. 이 과정에서 발생한 에러이다. 예시 Post 메소드 사용을 위해 정상작동하던 API에 매핑 방식을 @DeleteMapping 에서 @PostMapping으로 변경하니 에러가 발생하였다. 변경 후 에러가 나는 코드는 다음 상황이다. @PostMapping("/delete") // 기존 @DeleteMapping public String testUser (@RequestParam(name = "userId", required = tru..

JAVA에서 변수의 타입을 확인하는 방법은 변수.getClass().getName() 을 통해 확인할 수 있다. 예제 코드 >> String str = "개발"; Integer i = 123; ArrayList list = new ArrayList(); System.out.println("String 예제 : " + str.getClass().getName()); System.out.println("Integer 예제 : " + i.getClass().getName()); System.out.println("ArrayList 예제 : " + list.getClass().getName()); 출력 결과 >>

웹개발시 사용자 세션정보를 확인할때 필수로 사용되는 HttpSession 객체와 세션에 대한 정리이다. 1. 개념 * 세션(Session) 이란? HTTP 기반으로 동작하는 클라이언트가 서버에 정보를 요청할 때 생성되는 '상태정보' 이다. HttpSession이라는 인터페이스 객체로 표현되며, HttpSession 객체는 HttpServletRequest의 getSession() 메소드를 이용하여 생성할 수 있다. * HttpSession HttpSession 객체가 생성될 때는 요청을 보내온 클라이언트의 정보, 요청 시간 정보 등을 조합한 세션 ID가 부여되며, 이 세션 ID는 클라이언트 측에 쿠키로 저장된다. 클라이언트마다 개별적으로 생성되어 유지되는 HttpSession 객체는 요청을 보내온 클라이..

vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며, 해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다. 이를 위해 특정 요소 외부클릭을 인식해야했다. dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다. 버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다. 1. 라이브러리 인스톨 나는 v-click-outside 라이브러리를 사용하였다. 우선 라이브러리 인스톨을 수행한다. npm install v-click-outside 2. import 및 directives 추가 import vClickOutside from 'v-click-outside' export default { ..

dom 요소의 클래스 목록을 확인하면서, 특정 클래스 존재 여부를 판단해야하는 필요성이 있었다. 객체에 특정 값이 있는지 확인은 다음과 같이 할 수 있다. 1. 객체 형태 let classList = event.target.classList console.log(classList) 출력 >> {"0":"apple","1":"banana"} classList라는 변수가 내가 확인하고자 하는 객체이다. 2. value값만 리스트로 뽑아내기 let classListValues = Object.values(classList) console.log(classListValues) 출력 >> ['apple', 'banana'] 3. 특정값 여부 찾기 (메소드 최종 결과) let result = Object.value..

selectBox 화살표 디자인을 없앤 후, 내가 원하는 svg 이미지를 배경으로 설정하는 방식으로 변경할 수 있다. 1. selectBox 화살표 없애기 selectbox style에 해당값을 부여하여 디자인 속성을 없앤다. appearance:none; 2. 화살표 svg 이미지 삽입하기 background 속성으로 화살표 이미지를 추가한다. 이미지는 url로 삽입하며 상대경로를 활용하여 이미지 경로를 추가한다. 아이콘 반복형식으로 배경이 지정되지 않도록 no-repeat 속성을 함께 부여한다. 또한 아이콘 위치 및 크기를 함께 정의하면 끝! background:url('../icon/my-arr.svg') no-repeat 97% 50%/20px;

Vue에서는 여러 프로젝트를 생성할 수 있다. SpringBoot에서 각각의 프로젝트가 짝꿍이라는것을 어떻게 알려줘야 하는것인지는 다음과 같다. Spring Boot와 Vue.js 를 연동하기 위해 빌드 타겟 디렉토리를 설정해야한다. Vue 프로젝트 파일에 vue.config.js 파일을 생성한다. module.exports = { outputDir: '../../src/main/webapp/MyProject', } Spring Boot의 경우 내장Tomcat이 의존성에 의해 들어와있기 때문에 다음과 같이 경로를 지정하여 해당 빌드파일을 서버가 읽을 수 있도록 배치시킨다.

Vue CLI로 생성한 프로젝트의 웹팩인 webpack.config.js와 vue.config.js 의 차이를 적어보려 한다. Vue CLI로 생성한 프로젝트와 웹팩의 관계? 실제 서비스를 만들기 위해 뷰 CLI를 이용해서 프로젝트를 생성했다. 이렇게 생성된 뷰 프로젝트는 웹팩을 기반으로 동작합니다. (웹팩은 최신 프런트엔드 빌드 시스템의 핵심이 되는 빌드 도구이다!) npm run serve : 로컬 서버를 웹팩 데브 서버로 실행 npm run build : 웹팩으로 최종 결과물 변환(빌드) webpack.config.js와 vue.config.js의 차이? 뷰 CLI 버전 2 이하에서는 웹팩 설정 파일(webpack.config.js)이 프로젝트 루트 레벨에 노출되어 있었다. 하지만 뷰 CLI 버전 ..