본문 바로가기

전체 글

 (234)
[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..
[Vue.js] Vue.js란? Vue.js란?Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크입니다. 이 프레임워크는 처음에는 간단한 라이브러리로 시작했지만, 점진적으로 프레임워크로 발전하면서 다양한 기능을 제공하고 있습니다. Vue는 점진적인 프레임워크로 불리는데, 이는 프로젝트에 필요한 부분만 선택해서 사용할 수 있다는 의미입니다. Vue.js는 프레임워크 시장에서 점점 성장하고 있으며, 점유율도 꾸준히 증가하고 있습니다.Vue의 큰 장점 중 하나는 배우기 쉽고 성능이 뛰어나다는 것입니다. 프레임워크를 처음 접하는 초보자부터 숙련된 개발자까지 모두가 쉽게 접근할 수 있습니다.  Vue.js의 특징 1. MVVM 패턴Vue.js는 MVVM (Model-View-ViewModel) 패턴을 따릅니다. 이 패턴은 사용자..
[Spring project] Task 리스트 조회, 입력 Task 이름: 상태: Toto ID: 저장Task 엔티티 생성Task 엔티티는 작업의 이름, 상태, 생성/수정 시간을 관리하며, Toto라는 다른 엔티티와 다대일 관계로 연결된다. writeDt와 modifyDt는 자동으로 현재 날짜와 시간을 설정하며, status는 입력되지 않았을 때 기본값으로 "N"을 설정.package com.babobird.Toto.entity;import com.babobird.Toto.dto.TaskFormDto;import jakarta.persistence.*;import lombok.Getter;import lombok.Setter;import lombok.ToString;import java.time.LocalDateTime;@E..
[Spring Project] To do 리스트 조회 프로젝트 설정Spring Boot 프로젝트에서 Thymeleaf 템플릿 엔진을 사용하려면 필요한 의존성을 추가해야 한다. build.gradle 파일에 다음과 같은 의존성을 추가해보자. MySQL을 사용하는 경우 mysql-connector-java도 추가build.gradledependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' runtime..
[ASP.NET] Controller, View Controller, View이전 시간에는 url을 통해 서버로 파라미터를 전달했다. 이번 시간에는 view 화면을 만들어서 사용자가 input창에 입력한 값을 Controller로 전달해보자 . 예제1. Views 폴더 생성 이 폴더는 웹페이지의 화면에 해당하는 파일들이 저장된다. ASP.NET Core mvc에서는 Razor View가 사용된다.  * Razor View에는 HTML 태그와 C# 프로그래밍 언어를 사용할 수 있다.  2. index.cshtml  hello asp.net!!=> 일반 html 페이지와 유사하다. html에서 사용되는 표준 요소를 사용할 수 있으며, css 파일, script와도 연결할 수 있다. 그러나 실제 html 파일은 아니며 빌드로 컴파일된 후에 사용..
[ASP.NET] Controller:query string을 통해 데이터 조회 query string사용자가 요청할 때 Request 파라미터를 받는 다양한 방법이 있다. 이 중에서 url에 포함되어서 전달되는 문자열을 query string이라 부른다. 서버에서 이 요청을 받기 위해서는 일반적인 함수처럼 매개변수를 생성하면 된다.  예제 1. Controller에 매개변수 추가HomeControlle.cs public class HomeController : Controller { public string Index(string userid) { return "응답입니다." + userid; } } 실행 결과 예제2 _ 매개변수가 여러 개 일 때1. Controller 파라미터 추가 public class..
[ASP.NET] 프로젝트 생성 프로젝트 생성, Controller(MVC)1. 먼저 프로젝트를 생성해보자.  MVC를 학습하기 위해 먼저 ASP.NET Core 비어 있음으로 프로젝트 선택하고 필요한 요소들을 추가해보자.  2. 버전은 .NET 8.0만들기를 누르면 프로젝트가 생성된다. 이제 이 프로젝트에 MVC 패턴을 적용해보자.  ASP.NET Core MVC란?ASP.NET Core 플랫폼의 일부이며, 순수한 ASP.NET Core 보다 ASP.NET Core MVC를 사용하면 애플리케이션의 구성을 단순화 할 수 있다. 특히 웹 응용 프로그램을 만들 때 용이하다.  3. 컨트롤러를 생성해보자. 프로젝트에 Controllers 폴더를 만들고 마우스 우클릭을 한 뒤 MVC 컨트롤러를 선택한다.  Controller를 상속 받고 있다..

티스토리툴바