20230615 수업내용👏👏👏

Vue.js 주소를 script 하면 Class Vue{ }를 가져다 쓸 수 있다. 그리고

script 안에 new Vue({ })를 작성하여 사용할 수있다. 괄호안에는 option을 넣어 사용할 수 있는데 어제 수업에서는 el, data, method를 사용했었다

el은 선택자라고 하여

el에서 "#app"라고 되어있는 건 id = "app"영역에서 Vue를 사용하겠다는 의미이다.

v-bind:class는 class를 관리한다는 것은 class를 추가 제거한다는 의미이다.

<button class="btn" v-bind:class="{'btn-primary':isPrimary, 'btn-lg':isLg}">Vue 버튼</button>

' ' 을 사용하는 이유는 btn-primary에서 - 를 산술연산자로 인식하기에 ' '로 감싸서 사용해주어야 한다.

checkbox 에 v-model을 지정하면 true/false가 들어가게 된다. checkbox가 check되어있으면 true 해제되어있으면 false로 인식이 된다.

위처럼 data에 obj라는 이름으로 넣어주었지만 작동은 하지 않는다 이를 작동하기위해 computed라는 속성을 사용해야 한다.

computed:{
        	 obj:function(){
        		 return {'btn-primary':this.isPrimary, 'btn-lg':this.isLg}
        	 }

위 코드를 보면 obj라는 함수가 return해주는 값을 사용할 수 있다.

종속된 모델이 바뀌게 되면 다시 호출되어서 연산된 값을 리턴해준다.

 

 

v-bind:class에는 object가 아닌 배열도 넣을수 있다.

v-bind는 생략이 가능하다.

@input 은 입력했을 때 onIdInput이라는 함수가 호출되도록 해준다.

Vue에서는 -가 있으면 산술연산으로 인식하기 때문에 카멜케이스 방식으로 css를 입력한다.

 

오후 진도는 Spring Framework

https://spring.io/tools

https://maven.apache.org/

먼저 Java 11을 설치 한다. 그 이유는 spring tool(개발 IDE에는 Java가 기본적으로 설치가 되어있다)에는 자바가 설치가 안되있어서이고

apache maven은 spring 프로젝트의 빌드시스템으로 maven을 사용하여 수업을 진행할 것이다.

환경 변수 설정

폴더를 하나 저장해두고 JAVA_HOME과 MAVEN_HOME 경로를 잡아준다.

 

Java version11과 maven 설치완료

 

 

STS를 눌러서 Spring 실행! work_space는 새로 만들어주겠다.

 

기본으로 잡혀져있는 서버를 삭제해준다 왜냐하면 톰캣을 사용할 거니까~

 

이클립스 - window - Preferences 에서 검색창에 enc라 검색한 후에 모든 encoding을 utf-8로 바꿔준다.

 

톰캣 server.xml souce에서 port번호를 8888로 바꿔준다.

그냥 Spirng으로 실습할 것이라서 Spring Legacy Project로 만들어 준 후에 Project name은 Hello로 해주고 Spring MVC Project로 프로젝트를 생성해준다.

 

이렇게 Project를 다 만들어 주면 위에 스크린샷처럼 Project가 완성이 된다.

 

사용할 Browser는 Chrome으로 설정해 주었다.

이렇게 서버를 Run하면 Hello world! 가 뜬다.

HomeController를 간단하게 바꿔보았다.

@RequestMapping("/")의 의미는 /home/이 프로젝트의 최상위 경로 요청이 오면 Web-INF/views/home.jsp 페이지로 forward 이동해서 응답하겠다는 의미이다.

package com.gura.hello;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {
   
	//이 프로젝트의 최상위 경로 요청이 오면
   @RequestMapping("/")
   public String home() {
      
	   //WEB-INF/views/home.jsp 페이지로 forward 이동해서 응답하겠다는 의미
	   //"home"이라는 문자열을 리턴하면 앞에 "/WEB-INF/views/" 뒤에 자동으로 ".jsp"가 자동으로 붙는다.
      return "home";
   }
   
}

새로운 home.jsp를 만들어 주었다.

HomeController 에서는 home.jsp 페이지에서 필요한 모델(data)를 HttpServletRequest 객체에 담아둘 것이다.

HomeController에서는 프로젝트의 최상위 경로 요청이 오면 "home"이라는 문자열을 리턴하면 앞에 "/WEB-INF/vies/" 뒤에 ".jsp"가 자동으로 붙는다. 

최상위 경로를 나타내준다!!!중요!!!!!!!!!!

 

Spring에서는 WEB-INF에 직접 폴더를 만들어서 해줘야한다. 그리고 프레임워크에서는 fortune.jsp라는 것은 사용하지 않는다. 만들려면

"/hello/fortune"

이렇게 작성해줘야한다.

 

hello의 최상위 요청은 home.jsp로 해주었지만 /hello/fortune의 경로는 .jsp가 아닌 개발자가 직접 정해줘야한다.

하나의 예시로 HomeController에 fortune이라는 메소드를 만들어서 비교해 보면 오늘의 운세라고 "오늘은 되는게 없네염" 이라고 작성해보겠다.