본문 바로가기

분류 전체보기29

[jQuery] 테이블 sort $(document).ready(function(){ $('#테이블아이디 th').each(function (column) { $(this).click(function() { if($(this).is('.asc')) { $(this).removeClass('asc'); $(this).addClass('desc'); sortdir=-1; } else { $(this).addClass('asc'); $(this).removeClass('desc'); sortdir=1; } $(this).siblings().removeClass('asc'); $(this).siblings().removeClass('desc'); var rec = $('#테이블아이디').find('tbody>tr').get(); rec.sor.. 2022. 10. 11.

Vue.js(4) Router 및 Axios, async await 개념 Vue Router 싱글페이지 애플리케이션 구현할 때 사용하는 라이브러리 이다. 페이지간에 이동하는 기능 구현할때 사용한다. 라우터 인스턴스 생성 var router = new VueRouter({ ... }) 라우터 옵션 추가 가능 routes : 라우팅 할 URL 과 컴포넌트 값 지정 path : 페이지 url component : 해당 페이지가 뿌려질 컴포넌트 mode URL 의 해쉬 값 제거 속성 mode=''history' ===> # 가 기본값으로 붙는 것을 제거 인스턴스에 라우터 인스턴스 등록 new Vue({ router: router ...}) 설치 https://router.vuejs.org/installation.html 공식사이트 설치 링크 npm install vue-router .. 2022. 10. 9.

Vue.js(3) Vue 인스턴스 속성 및 컴포넌트 Vue 인스턴스 new Vue({ el:, template:, data: , methods: , created: , watch: , }); el: 인스턴스가 그려지는 화면의 시작점 template: 화면에 표시할 요소 data: 데이터 methods: 이벤트 함수들 created: 라이프사이클 중 하나 watch: data에서 정의한 속성이 변경됐을 때 추가 동작을 정의 computed: 데이터를 계산한 결과를 속성으로 사용하기 위해 사용 methods 함수저장소 computed 데이터의 값에 따라서 바뀌는 값을 정의하는 속성이다. 템플릿 내에 표현식을 넣을 수 있다. 하지만 간단한 연산일 때만 이용하는 것이 좋다. {{ message.split('').reverse().join('') }} 이렇게 연산.. 2022. 10. 9.

Vue.js(2) vue 인스턴스 및 템플릿 문법 Vue Instance Vue.js 화면 개발을 위해 꼭 생성해야 하는 필수 단위이다.Instance 생성 // 새롭게 Vue를 선언 new Vue({ el: '#app', // 어떤 요소에 적용을 할 지 정함 여기서는 HTML 코드에 선언된 id="app"인 div 태그를 지정 data: { // data 는 해당 VueJS에서 사용할 정보들을 선언해주는 역할 title: '안녕 VueJS!' } }) 인스턴스 사용할 수 있는 속성과 API new Vue({ el: , // 인스턴스가 그려지는 화면의 시작점 (특정 HTML태그) template: , // 화면에 표시할 요소 (HTML, CSS 등) data: , // 뷰의 반응성(Reactivity) 가 반영된 데이터 속성 methods: , // 화.. 2022. 10. 9.

Vue.js(1) 프로젝트 생성 및 프로젝트 구성 MVVM 이란? 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다. 역사 : 데이터 바인딩을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴이다. 1. 모델 Model 비즈니스 로직과 데이터를 다룬다.2. 뷰 View UI와 UI 로직을 다룬다.3. 뷰 모델 View Model View 를 표현하기위해 만든, View를 위한 Model이다. View를 나타내주기 위한 Model 이자 View 를 나타내기 위한 데이터 처리를 하는 부분이다. 동작 사용자의 Action들은 View를 통해 들어오게 됨 View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달 View Model은 Model에게 데이터를 요청 Model은 .. 2022. 10. 9.

[JUnit] command line is too long. shorten command line for or also for junit default configuration 문제 발생 Intellij 에서 Junit Test 를 하려고 했는데 갑자기 아래와 같은 에러가 발생했다. 문제 해결 shorten command line 을 설정해주지 않았을 경우, 테스트를 실행하는 명령어 라인이 너무 길어서 생기는 오류라 하며 구글 검색을 통해 해결할 수 있었다. 테스트별로 설정을 할 수 있지만, 테스트를 추가할 때마다 설정도 함께 해야하는 번거로움을 덜기위해 default 로 설정하였다. 1. Run => Edit Configurations 클릭 2. 왼쪽 하단에 Edit configuration templates.. => JUnit 에서 오른쪽 상단의 Modify options 클릭 3. Shorten command line 을 선택한다. 4. JAR manifest 를 선택 후.. 2022. 10. 5.

[Vue.js] SpringBoot + Vue.js 404페이지 해결 문제발생 HTML5 히스토리 모드 vue-router 의 기본 모드는 hash mode 로, URL 해시를 사용하여 전체 URL 을 시뮬레이트 하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다...!? # 해시를 제거하기 위해 라우터의 history 모드를 사용할 수 있다. SPA(Single Page Application) 특성상 vue는 index.html 파일 하나로 관리한다. 기본적으로 URL 을 입력하면 서버접속을 먼저 시도하기때문에 서버설정이 없는 클라이언트 앱이라 사용자가 직접 URL 에 접속하면 404 에러가 발생한다. 해결방안 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면된다! SPA 앱에 있는 index.html 페이지를 매핑하도록 하면 된다. ==> 모든 요청은 서버에.. 2022. 10. 3.

자바스크립트 스크롤 맨위/맨아래 로 올리기/내리기 전역객체 메서드 활용 window.scrollTo(x 좌표 , y 좌표) x 좌표 : 문서 왼쪽 상단부터 가로축 y 좌표 : 문서 왼쪽 상단부터 세로축 문서 맨 위로 이동 window.scrollTo(0 , 0) 문서 맨 아래로 이동 window.scrollTo(0, document.body.scrollHeight) 2022. 9. 17.

Address already in use : bind 해결 문제 발생 서버 기동 중 아래와 같은 에러 발생 java.net.BindException : Address already in user : bind 현재 start 하려는 포트가 이미 사용중이라는 것으로 가끔 서버가 제대로 종료되지 않았을 경우 발생하는 것 같다. 해결 cmd 실행 netstat -ano 입력 현재 실행중인 process 중 종료해야할 포트의 PID 찾기 포트 8081 의 PID 는 5720 taskkill /f /pid 프로세스ID 입력 및 실행 ex ) taskkill /f /pid 5720 프로세스가 종료 후, 다시 서버가 정상 기동이 되었다. 2022. 9. 1.

이전 1 2 3 다음

티스토리툴바

티스토리툴바