전체 글 (210) 썸네일형 리스트형 [Spring project] 투투 리스트 프로젝트 완성: 모든 과정을 정리하며 결과1. To do 리스트 화면리스트 조회 화면진행 상태 표시 2. To do 리스트 추가화면To do 리스트 추가화면10글자 초과할 경우 유효성 체크3. 상세 내용 리스트상세 내용 리스트상단에 To do 제목 표시전체 삭제 수정 및 단건 삭제 기능 결론 및 고찰 이번 프로젝트를 통해 Bootstrap과 JavaScript를 활용한 반응형 웹사이트 개발에 대한 이해를 깊게 할 수 있었다. 특히, 모달을 통한 동적인 UI 구현 과정에서 사용자 경험을 고려한 디자인의 중요성을 느꼈다. 처음에는 복잡해 보였던 데이터 바인딩과 동적 인터페이스 구현이 점차 명확해지면서, 보다 직관적이고 사용성 높은 웹 애플리케이션을 만들 수 있었다.이 프로젝트는 단순한 기능 구현에서 끝나는 것이 아니라, 실무에서 자주 사용하.. [Spring project] Spring Boot Todo 리스트 관리: Todo 데이터 수정 및 삭제 처리 이번 포스팅에서는 Spring Boot와 JPA를 사용하여 Task 엔티티의 데이터를 수정하고 삭제하는 방법을 다룬다. 특히, 특정 엔티티를 삭제할 때 연관된 데이터도 함께 삭제해야 하는 시나리오와 트랜잭션 관리를 중심으로 설명할 예정이다. 1. 수정 처리: Task 엔티티의 데이터 수정Spring Boot에서 특정 엔티티의 필드만 수정하는 것은 매우 간단하다. 아래는 Task 엔티티의 taskNm(할 일 이름)과 modifyDt(수정일)를 수정하는 예제이다.Task 수정 메서드 구현Controller.java@PostMapping("/{totoNo}/tasks/{taskNo}/edit")public String updateTaskNameAndDate(@PathVariable int totoNo, @Pa.. [Spring project] Spring Boot Todo 리스트 관리: 삭제 기능 구현 및 Task 입력 기능 이번 포스팅에서는 Todo 리스트 관리 애플리케이션에서 Task 삭제 기능과 Task 입력 기능을 구현한 과정을 정리하려고 한다. 이를 통해 Spring Boot와 Thymeleaf, MySQL을 연동하여 CRUD 기능을 어떻게 처리했는지 자세히 설명하겠다.삭제 기능 구현1. Task 삭제 기능 구현Todo 리스트에서 특정 Task를 삭제하는 기능을 먼저 구현했다. Task 엔티티는 taskNo와 totoNo로 복합 키를 구성하고 있어, 이를 고려한 코드를 작성해야 했다.1.1 TaskController - 삭제 기능 추가삭제 요청을 처리하기 위해 컨트롤러에 DELETE 요청을 매핑하여 처리하는 메서드를 추가했다. // TaskController.java@GetMapping("/totos/{totoNo}.. [Vue.js] 뷰 라우터 뷰 라우터Vue.js의 라우터는 웹 페이지 간의 이동을 관리하는 도구로, SPA(Single Page Application)에서 다양한 화면 간의 네비게이션을 쉽게 처리할 수 있다. 이번 포스팅에서는 Vue 라우터의 여러 예제를 통해 라우팅의 기본 개념과 다양한 구현 방식을 설명한다. 아래에는 3가지 예제, 즉 단일 컴포넌트 라우터, 네스티드(중첩) 라우터, 그리고 네임드 라우터를 다루겠다. 1. 단일 컴포넌트를 이용한 라우터 예제 첫 번째 예제는 Vue 라우터를 통해 두 개의 컴포넌트(Main, Login)를 이동하는 간단한 예제이다. router-link를 통해 사용자 인터페이스에서 링크를 생성하고, router-view를 통해 해당 경로에 맞는 컴포넌트가 표시된다. 뷰 라우터 예.. [Vue.js] 컴포넌트 통신 컴포넌트 간 통신과 유효 범위다음은 Vue.js에서 컴포넌트 간 데이터 공유가 어떻게 이루어지는지를 설명하는 예제 코드이다. 이 코드는 두 개의 지역 컴포넌트 my-component1과 my-component2를 등록하고, 두 번째 컴포넌트가 첫 번째 컴포넌트의 데이터를 참조하려고 시도하지만 실패하는 상황을 보여준다. 컴포넌트 간 데이터 공유 문제Vue.js는 화면을 여러 컴포넌트로 나누어 구성한다. 각 컴포넌트는 자체적인 스코프를 가지고 있으며, 독립적으로 작동한다. 즉, 한 컴포넌트의 데이터는 다른 컴포넌트에서 직접적으로 접근할 수 없다. 이 독립성은 컴포넌트가 재사용 가능하고 유지보수가 쉬워지게 만들지만, 컴포넌트 간 데이터 공유가 필요한 경우 문제를 일으킬 수 있다. .. [Vue.js] 뷰 컴포넌트 컴포넌트란?컴포넌트는 웹 애플리케이션의 UI 요소를 작은 블록으로 나누어 관리하는 기능이다. 화면을 구성할 때 내비게이션 바, 테이블, 리스트, 인풋 박스 등을 컴포넌트로 분리하여 사용할 수 있다. 이를 통해 코드의 재사용성을 높일 수 있고 유지보수가 용이해진다. 컴포넌트 등록 방식Vue.js에서 컴포넌트는 두 가지 방식으로 등록할 수 있다.전역 컴포넌트: 여러 Vue 인스턴스에서 공통으로 사용할 수 있는 컴포넌트이다.지역 컴포넌트: 특정 Vue 인스턴스에서만 사용할 수 있는 컴포넌트이다. 결과전역 컴포넌트Vue.component('my-component', {...})로 등록된 컴포넌트는 전역 컴포넌트이다. 이 컴포넌트는 모든 Vue 인스턴스에서 사용할 수 있다.지역 컴포넌트첫 번째 인스턴스에서 com.. [Vue.js] 뷰 인스턴스 뷰 인스턴스의 정의와 속성Vue 인스턴스는 Vue.js 애플리케이션의 핵심 단위로, 화면을 동적으로 관리하고, 데이터를 바인딩하거나 이벤트를 처리하는 데 필수적인 요소이다.Vue 인스턴스를 생성하기 위해서는 new Vue() 생성자를 호출해야 하며, 이를 통해 Vue 애플리케이션이 동작하게 된다. Vue 생성자 new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); new Vue()는 Vue 인스턴스를 생성하는 생성자 함수로, Vue.js 라이브러리를 로딩한 후 접근할 수 있습니다. 이 생성자를 통해 Vue 인스턴스는 특정 HTML 영역에 .. [Vue.js] Hello Vue.js 프로젝트 만들기 Hello Vue.js 프로젝트 만들기 1. HTML 구조 {{message}} 기본적인 HTML 페이지 구조로, 요소는 Vue.js 애플리케이션이 동작하는 루트 DOM 요소입니다.{{message}}는 Vue.js의 템플릿 문법으로, Vue 인스턴스에서 제공하는 data 속성의 message 값을 출력합니다. 2. Vue.js 라이브러리 포함 Vue.js를 외부 CDN에서 불러와서 웹 페이지에 Vue.js 기능을 사용할 수 있게 합니다. 이 코드에서는 Vue 2.5.2 버전을 사용하고 있습니다.3. Vue 인스턴스 생성 new Vue({})는 새로운 Vue 인스턴스를 생성합니다.el: '#app': Vue 인스턴스가 연결될 DO.. 이전 1 2 3 4 ··· 27 다음
