'분류 전체보기'에 해당되는 글 508건

  파라미터의 수집을 다른 용어로는 binding(바인딩)이라고 합니다. 변환이 가능한 데이터는 자동으로 변환되지만 경우에 따라서는 파라미터를 변환해서 처리해야 하는 경우도 존재합니다. 예를 들어, 화면에서 '2018-01-01'과 같이 문자열로 전달된 데이터를 java.util.Date 타입으로 변환하는 작업이 그러합니다. 스프링 Controller에서는 파라미터를 바인딩할 때 자동으로 호출되는 @InitBinder를 이용해서 이러한 변환을 처리할 수 있습니다.

package org.zerock.domain;

import java.util.Date;

import lombok.Data;

@Data
public class TodoDTO {

	private String title;
	private Date dueDate;
}

TodoDTO

package org.zerock.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;

import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.zerock.domain.SampleDTO;
import org.zerock.domain.SampleDTOList;
import org.zerock.domain.TodoDTO;

import lombok.extern.log4j.Log4j;



@Controller
@RequestMapping("/sample/*")
@Log4j
public class SampleController {
	
	@InitBinder
	public void initBinder(WebDataBinder binder) {
		SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
		binder.registerCustomEditor(java.util.Date.class, new CustomDateEditor(dateFormat, false));
	}
	

	
	@GetMapping("/ex03")
	public String ex03(TodoDTO todo) {
		log.info("todo:" + todo);
		
		return "ex03";
	}
}

SampleController

@RequestMapping의 변화

  @Controller 어노테이션은 추가적인 속성을 지정할 수 없지만, @RequestMapping의 경우 몇가지 속성을 추가할 수 있다.

이중에서도 가장 많이 사용하는 속성이 method 속성이다. Method 속성은 흔히 GET 방식, POST방식을 구분해서 사용할 때 이용한다.

스프링 4.3 버전부터는 이러한 @RequestMapping을 줄여서 사용할 수 있는 @GetMapping, @PostMapping이 등장하는데 축약형의 표현이므로, 아래와 같이 비교해서 학습하는 것이 좋다.

package org.zerock.controller;

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

import lombok.extern.log4j.Log4j;



@Controller
@RequestMapping("/sample/*")
@Log4j
public class SampleController {
	
	@RequestMapping("")
	public void basic() {
		log.info("basic.....");
	}
	
	@RequestMapping(value="/basic", method = {RequestMethod.GET, RequestMethod.POST})
	public void basicGet() {
		log.info("basic get..........");
	}
	
	@GetMapping("/basicOnlyGet")
	public void basicGet2() {
		log.info("basic get only get..........");
	}
}

@RequestMapping은 GET, POST방식 모두를 지원해야 하는 경우에 배열로 처리해서 지정할 수 있다. 일반적이 경우에는 GET, POST방식만을 사용하지만 최근에는 PUT, DELETE방식등도 점점 많이 사용하고 있다. @GetMapping의 경우 오직 GET 방식에만 사용할 수 있으므로, 간편하기는 하지만 기능에 대한 제한은 많은 편이다.

  스프링 MVC를 이용하는 경우 작성되는 Controller는 다음과 같은 특징이 있습니다.

1. HttpServletRequest, HttpServletResponse를 거의 사용할 필요없이 필요한 기능 구현

2. 다양한 타입의 파라미터 처리, 다양한 타입의 리턴 타입 사용가능

3. GET방식, POST방식 등 전송 방식에 대한 처리를 어노테이션으로 처리가능

4. 상속/인터페이스 방식 대신에 어노테이션만으로도 필요한 설정 가능

다른 프레임 워크들과 달리 스프링 MVC는 어노테이션을 중심으로 구성되기 때문에 예제들을 작성할 때에도 각 어노테이션의 의미에 대해서 주의해가며 학습해야 한다.

...중략

  Java를 이용하는 웹 어플리케이션을 제작해 본 적이 있다면 Servlet/JSP 기술을 활용해서 제작하는 방식을 먼저 배우게 됩니다. 이후에는 모델 2라는 방식에 대해서 학습하게 되는데, 스프링 MVC의 경우 이러한 부분은 개발자들에게 보여주지 않고, 개발자들은 자신이 필요한 부분만을 집중해서 개발할 수 있는 구조로 만들어져 있습니다.

  웹 프로그래밍을 배워보 적이 있다면 가장 익숙한 단어들 중 하나는 Request/Response일 것입니다. Servlet/JSP에서는 HttpServletRequest/HttpServletResponse라는 타입의 객체를 이용해 브라우저에서 전송한 정보를 처리하는 방식입니다. 스프링 MVC의 경우 이 위에 하나의 계층을 더한 형태가 됩니다.

  스프링 MVC를 이용하게 되면 개발자들은 직접적으로 HttpServletRequest/HttpServletResponse등과 같이 Servlet/JSP의 API를 사용할 필요성이 현저하게 줄어듭니다. 스프링은 중간에 연결 역할을 하기 때문에 이러한 코드를 작성하지 않고도 원하는 기능을 구현할 수 있게 됩니다.

  개발자의 코드는 스프링 MVC에서 동작하기 때문에 과거에는 스프링 MVC의 특정한 클래스를 상속하거나 인터페이스를 구현하는 형태로 개발할 수 있었지만, 스프링 2.5버전부터 등장한 어노테이션 방식으로 인해 최근 개발에는 어노테이션이나 XML등의 설정만으로 개발이 가능하게 되었습니다.

모델 2와 스프링 MVC

  스프링 MVC역시 내부적으로는 Servlet API를 활용합니다. 스프링 MVC는 '모델2' 라는 방식으로 처리되는 구조이므로 모델 2방식에 대해서 간단히 살펴볼 필요가 있습니다. 모델 2방식은 쉽게 말해서 '로직과 화면을 분리'하는 스타일의 개발 방식입니다. 모델 2방식은 MVC의 구조를 사용하는데, 이를 그림으로 표현하면 아래와 같습니다.

중략....

  모델2방식에서 사용자의 Request는 특정한 상황이 아닌 이상 먼저 Controller를 호출하게 됩니다. 이렇게 설계하는 가장 중요한 이유는 나중에 View를 교체하더라도 사용자가 호출하는 URL 자체에 변화가 없게 만들어 주기 때문입니다. 컨트롤러는 데이터를 처리하는 존재를 이용해서 데이터(Model)를 처리하고 Response할 때 필요한 데이터 (Model)를 View쪽으로 전달하게 됩니다. Servlet을 이용하는 경우 개발자들은 Servlet API의 RequestDispatcher등을 이용해서 이를 직접 처리해왔지만 스프링 MVC는 내부에서 이러한 처리를 하고, 개발자들은 스프링 MVC의 API를 이용해서 코드를 작성하게 됩니다.

중략..

스프링 MVC를 학습하는데 가장 먼저 기억해야 하는 점은 스프링 MVC가 스프링의 서브 프로젝트라는 것이다.

스프링은 하나의 기능을 위해서만 만들어진 프레임워크가 아니라 코어라고 할 수 있는 프레임워ㅡ에 여러 서브 프로젝트를 결합해서 다양한 상황에 대처할 수 있또록 개발되었다. 서브 프로젝트라는 의미를 개발자의 입장에서 가장 쉽게 이해할 수 있는 방법은 '별도의 설정이 존재할 수 있다'라는 개념이다. Spring Legacy Project로 생성한 예제의 경우에도 servelet-context.xml과 root-context.xml로 설정파일이 분리된 것을 볼 수 있다. 스프링 mvc가 서브 프로젝트 이므로 구성 방식이나 설정 방식 역시 조금 다르다고 볼 수 있다.

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

첫번째로 위의 사이트에서 jdk 1.8을 다운받아 설치하였습니다.

이제 환경 변수 설정을 해보겠쒀요.

검색창에 환경 치니까 바로 시스템 환경 변수 편집이 뜨더라구요!? 그걸 클릭!

JDK설치한 폴더에 들어가서 주소를 복사한 후에 새 시스템 변수 값에다가 넣어줘요!

이름에는 위와 같이 JAVA_HOME을 넣어주면 되요!

그 후에

Path 를 클릭하고 편집을 눌러주세요.

새로 만들기를 클릭해 주시고

방금 우리가 설정한 JAVA_HOME있죠? 그 경로를 사용할거에요

%JAVA_HOME%\bin <--- 이렇게 하면 우리가 설정한 JAVA_HOME의 경로에서 \bin 폴더를 가르키는 거에요!

그럼 cmd창을 열고

javac를 해보세요!

그리고 버전 확인을 위해서 java -version을 해보세요!

아래와 같이 나오면 설정이 완료 된거 같아요!

App.js

import React, { useRef, useState } from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";
import CreateUser from "./CreateUser.js";

function App() {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
      active: true
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
      active: false
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };
  const onRemove = id => {
    setUsers(users.filter(user => user.id !== id));
  };
  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
}

export default App;

UserList.js

import React from "react";

function User({ user, onRemove, onToggle }) {
  const { username, email, id, active } = user;
  return (
    <div>
      <b
        style={{ color: active ? "green" : "black", cursor: "pointer" }}
        onClick={() => onToggle(id)}
      >
        {username}
      </b>{" "}
      <span>({email})</span>
      <button onClick={() => onRemove(id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

app.js

import React, { useRef, useState } from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";
import CreateUser from "./CreateUser.js";

function App() {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com"
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com"
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com"
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };
  const onRemove = id => {
    setUsers(users.filter(user => user.id !== id));
  };

  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}

export default App;

UserList.js

import React from "react";

function User({ user, onRemove }) {
  const { username, email, id } = user;
  return (
    <div>
      <b>{username}</b> <span>({email})</span>
      <button onClick={() => onRemove(id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map((user, index) => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;