frontend9

• 

  [Vue.js] 뷰 디렉티브(v-로 시작하는 속성들을 의미) v-bind(:콜론 바인딩으로 줄임 가능) {{ num }} 결과v-if(조건문) 관리자 사용자 그 외 new Vue({ el: '#app', data: { auth: '관리자', }})결과개발자 vue도구에서 data 변경 시 데이터도 변경됨v-show(show, hide) 관리자 사용자 그 외 관리자 js코드는 위와 동일결과v-model(:콜론 바인딩으로 줄임 가능)(데이터 동기화) {{ userName }}new.. 💻 it/development 2025. 11. 20.

• 

  [Vue.js] modal창 데이터 바인딩 안될 때 문제:modal 표시 시 ajax로 데이터는 가져오지만 바인딩이 되지 않음환경: thyemelaf 파일에 vue.js를 적용(별도 node.js 환경 X)thymeleaf파일에 vue.js를 적용한 경우에 modal창에 아래처럼 바인딩이 안된 경우가 있었다.원인은 간단했다.기존 thyemelaf파일에서는 아래처럼 전체를 나타내는 div 영역 밖에 모달창 div가 있었음기존에는 javascript/jQuery로 페이지 로드 후 DOM에 직접 접근해서 작업해서 문제가 안되었음하지만 vue.js에서는 root element안에 모달영역이 포함되어 있어야 vue.js의 인스턴스와 연결되어vue.js의 바인딩 기능 사용 가능(vue.js에서는 DOM에 직접 접근하는 일이 거의 없음) 위 코드처럼 modal영역.. 💻 it/development 2025. 11. 19.

• [Vue.js] 기존 thymeleaf에 Vue.js 적용하는 방법 2가지 방법 존재node.js 환경으로 구동(node.js 런타임 환경 필요, 서비스 구동 시 서버와 port 다르게 구성)기존 thyemeleaf파일에 script만 추가(thyemelaf 렌더링 이후 조작하는 방식이라 node.js 불필요)여기선 2번 째 방법 채택기존 html의 body 태그안에 Vue.js 관련 script import(실제 배포 시엔 js파일 직접 import 권장) vue.js를 입힐 div root id 설정(예시)--> 주소록 사원명 .. 💻 it/development 2025. 11. 19.

• [Vue.js] checkbox 일괄 체크 전체선택 {{ item.name }} checkbox element를 v-model로 data의 items의 isChecked속성과 양방향 바인딩 시킨 후전체선택 버튼 클릭 시 items를 순회하며 isChecked를 현재 상태와 반대로 설정 💻 it/development 2025. 11. 18.

• 

  [JavaScript] 객체 해체 할당(Object Destructuring Assignment)(feat. ES6) ES6부터 지원하는 기능 중 하나인 객체 해체 할당객체에서 바로 변수에 값을 한번에 할당할 때 사용(코드의 가독성 및 객체의 속성을 더 쉽게 추출)//객체의 구조가 복잡하거나 여러개의 속성을 한번에 추출할 때 유용하게 사용됨const person = { name: '어흥', age: 50 };//객체해체할당을 통해 객체의 속성값을 바로 변수에 할당const { name, age } = person;//변수명 변경도 가능(아래는 person객체의 name값을 uname이라는 변수에 할당하는 예시)//const { name: uname } = person;console.log(name); // '어흥'console.log(age); // 50//객체 해체 할당 미사용const person = { name:.. 💻 it/development 2025. 11. 16.

• 

  [javascript] javascript this javascript에서의 this에 대해 숙지해보았다.(함수 호출 방식에 의해 결정되는 this)refrerence: https://www.youtube.com/watch?v=tDZROpAdJ9w&t=754s 💻 it/development 2025. 11. 10.

• 

  [thymeleaf] Thymeleaf Layout (feat. sb-admin 2) bootstrap sb-admin 2를 이용한 Thymeleaf Layout 적용폴더 구조fragments폴더의 sidebar, config, footer 등의 공통으로 사용될 파일조각들을 default_layout.html에서 연결 후 layout을 각 html에 적용해서 사용build.gradleplugins { id 'java' id 'org.springframework.boot' version '3.3.7' id 'io.spring.dependency-management' version '1.1.7'}group = 'com.duo'version = '0.0.1-SNAPSHOT'java { toolchain { languageVersion = JavaLanguage.. 💻 it/development 2025. 11. 10.

• [axios] axios 비동기 통신 목차샘플 코드function callAPI(e) { e.preventDefault(); const url = 'api.test.com'; axios.post(url, { param: //데이터 있으면.. 넣기 }) // 정상인 경우 .then((response) => { if (response.data.success) { location.href = "/"; } }) // 예외 발생 .catch((error) => { console.error('데이터 처리 .. 💻 it/development 2025. 11. 10.

• 

  [jQuery] 체크 이벤트 강제 발생 시키기 화면에 체크박스가 2개 있고, 체크박스의 change 이벤트를 감지하여 두 체크박스가 모두 체크되었을 때만 버튼을 활성화시키는 기능이 있다.그런데, 사용자가 직접 체크박스를 체크했을 때는 이벤트가 잘 감지되었지만, 함수 호출로 동적으로 체크박스를 체크한 경우는 감지되지 않는 문제가 있었다.이유는 기본적으로 체크박스를 동적으로 조작하면 이벤트가 발생하지 않기 때문에 그렇다.그래서 trigger.('이벤트명')으로 이벤트를 강제로 발생시켜 해결 했다.수정 전function check(checkId, target) { document.getElementById(target).classList.add('d-none'); $("#" + checkId).prop('checked', true); .. 💻 it/development 2025. 8. 31.