국비교육과정 정리/최종프로젝트5 MySQL DELETE 에러 [a foreign key constraint fails] 프로젝트를 진행하면서 MyBatis를 이용해 DB에 저장된 데이터 삭제 기능을 구현해야 했다. 위 ERD에서 이력서 테이블(Resume List)에 저장되어있는 특정 행을 삭제하려고 하였다. 1. 문제 delete from resumelist where res_num = #{res_num} 위 쿼리문을 작성 후 실행하고 Cause: java.sql.SQLIntegrityConstraintViolationException: Cannot delete or update a parent row: a foreign key constraint fails 에러로 실행이 되지 않았으며 FK 참조 무결성 제약조건을 위배했다는 것을 알 수 있었다. 이력서 테이블의 PK값인 res_num을 학력, 자격증, 경력 테이블에서 .. 국비교육과정 정리/최종프로젝트 2023. 3. 21. [Vue] 이벤트 핸들링(Event Handling) Vue.js 에서 이벤트는 v-on 을 이용해 핸들링할 수 있다. v-on을 줄여서 @ 로 대체해 간편하게 작성할 수도 있다. 그리고 이벤트 핸들링을 하는 함수는 data() {} 에서 정의하는 것이 아닌 methods: {}에서 함수를 정의해 사용한다. 1. 클릭 이벤트 일반적으로 button 요소에서 많이 사용되는 onclick 이벤트는 다음과 같이 사용할 수 있다. onclick -> v-on:click or @click Add 1 {{ counter }} 2. 체인지 이벤트 input, select 와 같은 요소에서 많이 사용되는 onChange 이벤트 onChange -> v-on:change or @change 1) v-for를 이용해 select 의 option 요소 생성 2) 도시 선택을 .. 국비교육과정 정리/최종프로젝트 2023. 3. 6. [Vue] 데이터 핸들링(Data Handling) 1. String 데이터 핸들링 String 타입의 데이터는 {{ }} 를 이용해서 다룬다. 2. DOM 핸들링 3. v-model 속성을 이용한 데이터 핸들링 1) input 데이터 핸들링 Vue.js 에서는 input의 name, id를 사용하지 않고도 양방향 바인딩이 가능하다. v-model 속성을 이용하면 2) select 데이터 핸들링 select 요소에서도 v-model 의 양방향 데이터 바인딩을 활용할 수 있다. 사용자가 선택한 option의 값이 자동으로 select요소의 value값과 3) checkbox 데이터 핸들링 v-model 속성을 사용해 input과 select의 데이터핸들링은 값을 문자열로 받았지만, checkbox 타입은 값이 여러 개가 선택될 수 있기 때문에 4. v-bi.. 국비교육과정 정리/최종프로젝트 2023. 3. 6. [Vue] 컴포넌트 만들기 & 단방향 데이터바인딩(String) 컴포넌트 컴포넌트를 구성하는 폴더는 views와 components 폴더 두 가지가 존재한다. views폴더는 화면 전체에 해당하는 컴포넌트들로 이루어져 있다. views폴더에 포함된 컴포넌트 파일의 이름 마지막을 View로 맞추는 것이 관례이며, 이를 통해 components폴더의 컴포넌트와 구분한다. components폴더는 전체화면이 아닌 화면 일부분의 컴포넌트이며 하나의 화면 뿐만 아니라 다양한 화면에서도 재사용되는 컴포넌트 파일들을 모아둔 것이다. 컴포넌트 생성 views 폴더에 컴포넌트를 생성하므로 파일이름 마지막에 View를 붙였다. 컴포넌트 파일은 , , 데이터바인딩 바인딩(Binding)이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해 .. 국비교육과정 정리/최종프로젝트 2023. 3. 1. Vue.js 3.x 설치 vue 설치 전에 vue가 설치되었는지 확인한다. 다음과 같이 Terminal에 vue --version 을 입력하였을 때 버전이 나타난다면 vue 가 설치되어있는 것이다. 만약 vue가 설치되어 있지 않다면 다음 명령어를 입력하여 vue를 설치한다. 여기서 -g란 글로벌로 설치한다는 옵션을 작성한 것이다. (해당 폴더 뿐만이 아니라 모든 폴더에서 사용하도록) npm install -g @vue/cli 설치 완료 후 vue 프로젝트를 생성한다. (경로를 변경하고자 한다면 cd 명령어를 통해 변경하자) vue create 프로젝트이름 프로젝트 생성 명령어를 입력하면 설치할 버전을 선택하는 메뉴가 나온다. 기본값으로 설치해도 되지만 Manually select features를 선택해서 원하는 옵션을 추가할.. 국비교육과정 정리/최종프로젝트 2023. 2. 28. 이전 1 다음
