'2020'에 해당되는 글 497건

  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;

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;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

CreateUser.js

import React from "react";

//4가지의 props를 받아옴
function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

export default CreateUser;

출처 : 벨로퍼트님의 강의 예제입니다.

App.js

import React 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";

function App() {
  return <UserList />;
}
export default App;

UserList.js

import React from "react";

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "sh",
      email: "sh@gmail.com"
    },
    {
      id: 2,
      username: "js",
      email: "js@mgail.com"
    },
    {
      id: 3,
      username: "hs",
      email: "hs@gmail.com"
    }
  ];

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

export default UserList;

App.js

import React 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";

function App() {
  return <InputSample />;
}
export default App;

InputSample.js

import React, { useState, useRef } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });

  const nameInput = useRef();

  const { name, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    //객체 상태를 업데이트 할때에는 객체를 복사하고 나서 덮어씌우고 업데이트 해줘야 한다.

    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
    nameInput.current.focus();
  };
  return (
    <div>
      <input name="name" onChange={onChange} placeholder="이름" value={name} />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
        ref={nameInput}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: 닉네임</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;