CodeGym /Java Blog /๋ฌด์ž‘์œ„์˜ /์„œ๋ธ”๋ฆฟ ๋ฐ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€)
John Squirrels
๋ ˆ๋ฒจ 41
San Francisco

์„œ๋ธ”๋ฆฟ ๋ฐ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€)

๋ฌด์ž‘์œ„์˜ ๊ทธ๋ฃน์— ๊ฒŒ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค
์„œ๋ธ”๋ฆฟ ๋ฐ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(1๋ถ€) ๊ธฐ์‚ฌ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ง€์‹: Java Core์— ๋Œ€ํ•ด ์ด๋ฏธ ์–ด๋Š ์ •๋„ ์ดํ•ดํ–ˆ์œผ๋ฉฐ JavaEE ๊ธฐ์ˆ  ๋ฐ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‚ดํŽด๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ๊ธฐ์‚ฌ์™€ ๊ฐ€๊นŒ์šด ์ฃผ์ œ๋ฅผ ๋‹ค๋ฃจ๋Š” Java Collections ํ€˜์ŠคํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ํ•ฉ๋ฆฌ์ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€) - 1

์—”ํ„ฐํ‹ฐ ๋งŒ๋“ค๊ธฐ

์—”ํ‹ฐํ‹ฐ ํŒจํ‚ค์ง€ ์—์„œ ์šฐ๋ฆฌ๋Š” ๋‘ ๊ฐœ์˜ ๋น„๊ณต๊ฐœ ๋ฌธ์ž์—ด ๋ณ€์ˆ˜์ธ name ๋ฐ password ๊ฐ€User ์žˆ๋Š” ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค . ์ƒ์„ฑ์ž(๊ธฐ๋ณธ๊ฐ’ ๋ฐ ๋‘ ๊ฐ’์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๋Š” ์ƒ์„ฑ์ž)์™€ getter/setter๋ฅผ ๋งŒ๋“ค๊ณ  ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๋ฐ ๋ฉ”์„œ๋“œ์™€ ํ•จ๊ป˜ ๋ฉ”์„œ๋“œ๋ฅผ ์žฌ์ •์˜ํ•ฉ๋‹ˆ๋‹ค . ์ฆ‰, ์šฐ๋ฆฌ๋Š” ํ›Œ๋ฅญํ•œ Java ๊ฐœ๋ฐœ์ž๊ฐ€ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค ๋•Œ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ชจ๋“  ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. toString()equals()hashCode()

public class User {
    private String name;
    private String password;

    public User() {
    }

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        User user = (User) o;

        if (name != null ? !name.equals(user.name) : user.name != null) return false;
        return password != null ? password.equals(user.password) : user.password == null;

    }

    @Override
    public int hashCode() {
        int result = name != null ? name.hashCode() : 0;
        result = 31 * result + (password != null ? password.hashCode() : 0);
        return result;
    }
}
์ด์ œ ์‚ฌ์šฉ์ž ๋ชฉ๋ก ์ƒ์„ฑ์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— ์‚ฌ์šฉ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์—ฌ๊ธฐ์—์„œ ์‚ฌ์šฉ์ž๋ฅผ ๊ฐ€์ ธ์™€ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ•œ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์„œ๋ธ”๋ฆฟ ๊ฐœ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Tomcat์ด ์šฐ๋ฆฌ๋ฅผ ์œ„ํ•ด ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์žฌ์ •์˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋Š” ์ด๋ฏธ ์ •์˜๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋‘ ์„œ๋ธ”๋ฆฟ ๋ชจ๋‘์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ณต์œ  ๋ชฉ๋ก์„ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ ์„œ๋ธ”๋ฆฟ์— ๋ชฉ๋ก ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ํ•œ ๋ชฉ๋ก์— ์‚ฌ์šฉ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€๋งŒ ListServlet์—๋Š” ๋‹ค๋ฅธ ๋ชฉ๋ก์˜ ์‚ฌ์šฉ์ž๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค .. ๋”ฐ๋ผ์„œ ๋‘ ์„œ๋ธ”๋ฆฟ์ด ๊ณต์œ ํ•˜๋Š” ๊ฐ์ฒด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ํ”„๋กœ๊ทธ๋žจ์˜ ๋ชจ๋“  ํด๋ž˜์Šค๊ฐ€ ๊ณต์œ ํ•˜๋Š” ๊ฐ์ฒด, ์ฆ‰ ์ „์ฒด ํ”„๋กœ๊ทธ๋žจ์„ ์œ„ํ•œ ํ•˜๋‚˜์˜ ๊ฐ์ฒด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ธ ํŒจํ„ด์— ๋Œ€ํ•ด ๋“ค์–ด๋ณด์…จ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ์ด๊ฒƒ์ด ๊ทธ๋“ค์˜ ํ”„๋กœ๊ทธ๋žจ์—์„œ Singleton ํŒจํ„ด ์— ๋Œ€ํ•œ ์ฒซ ๋ฒˆ์งธ ์ง„์ •ํ•œ ํ•„์š”์„ฑ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . ์ด์ค‘ ํ™•์ธ ๋ฐ ๋™๊ธฐํ™”๋ฅผ ํ†ตํ•ด ์ด์ƒํ•œ ์‹ฑ๊ธ€ํ†ค์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . ๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ์˜ ๋ชฉ์ ์— ์™„์ „ํžˆ ์ ํ•ฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ดˆ๊ธฐ ์ดˆ๊ธฐํ™” ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ

๋ชจ๋ธ ํŒจํ‚ค์ง€์— ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ (๊ทธ๋ฆฌ๊ณ  ์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์„ ๊ตฌํ˜„ํ•˜๊ณ ) ํŠน์ดํ•œ ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ชจ๋ธ . ํด๋ž˜์Šค์—์„œ ์‚ฌ์šฉ์ž์˜ ๊ฐœ์ธ ๋ชฉ๋ก์„ ๋งŒ๋“ค๊ณ  ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ํ•˜๋‚˜๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ๋ฌธ์ž์—ด(์‚ฌ์šฉ์ž ์ด๋ฆ„) ๋ชฉ๋ก์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ๊ฐœ์ฒด๋Š” ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ ๋น„๋ฐ€๋ฒˆํ˜ธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ณ  ์‚ฌ์šฉ์ž ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๊ณต๊ฐœํ•˜๊ณ  ์‹ถ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฆ„ ๋ชฉ๋ก๋งŒ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

public class Model {
    private static Model instance = new Model();

    private List<User> model;

    public static Model getInstance() {
        return instance;
    }

    private Model() {
        model = new ArrayList<>();
    }

    public void add(User user) {
        model.add(user);
    }

    public List<String> list() {
        return model.stream()
                .map(User::getName)
                .collect(Collectors.toList());
    }
}

MVC์— ๋Œ€ํ•ด ์กฐ๊ธˆ

์‹ฑ๊ธ€ํ†ค ์— ๋Œ€ํ•ด ์ด๋ฏธ ๋“ค์–ด๋ดค๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๋””์ž์ธ ํŒจํ„ด ๋ชจ๋ธ-๋ทฐ-์ปจํŠธ๋กค๋Ÿฌ (MVC) ์— ๋Œ€ํ•ด ๋“ค์–ด๋ดค์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค . ๊ทธ ๋ชฉ์ ์€ ๋ทฐ์—์„œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฆ‰, ์ˆ˜ํ–‰ํ•  ์ž‘์—…์„ ๊ฒฐ์ •ํ•˜๋Š” ์ฝ”๋“œ์™€ ํ•ญ๋ชฉ์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ฒฐ์ •ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ทฐ ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๋ฐฉ์‹์„ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ ๋ทฐ๋Š” JSP ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค . ๊ทธ๊ฒƒ์ด ๋ฐ”๋กœ ๋‚ด๊ฐ€ ๊ทธ๊ฒƒ๋“ค์„ views ๋ผ๋Š” ํด๋”์— ๋„ฃ์€ ์ด์œ ์ž…๋‹ˆ๋‹ค . ๋ชจ๋ธ์€ ํ”„๋กœ๊ทธ๋žจ์ด ์‹ค์ œ๋กœ ์ž‘์—…ํ•˜๋Š” ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ ์ด๊ฒƒ์€ ์‚ฌ์šฉ์ž(์‚ฌ์šฉ์ž ๋ชฉ๋ก)์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ปจํŠธ๋กค๋Ÿฌ๋Š” ๊ทธ๋“ค ์‚ฌ์ด์˜ ๋งํฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ๋ชจ๋ธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ๋ทฐ์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค(๋˜๋Š” Tomcat ์—์„œ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค)., ์ฒ˜๋ฆฌํ•˜๊ณ  ๋ชจ๋ธ์— ์ „๋‹ฌ). ๋ชจ๋ธ์ด๋‚˜ ๋ทฐ๊ฐ€ ์•„๋‹ˆ๋ผ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง(ํ”„๋กœ๊ทธ๋žจ์ด ์ˆ˜ํ–‰ํ•ด์•ผ ํ•˜๋Š” ์ž‘์—…)์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ ๋ถ€๋ถ„์€ ์ž์ฒด ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ๋ชจ๋ธ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.
  • ๋ทฐ๋Š” ๋ฐ์ดํ„ฐ์˜ ์•„๋ฆ„๋‹ค์šด ํ‘œํ˜„์„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.
  • ์ปจํŠธ๋กค๋Ÿฌ๋Š” ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ํ”„๋กœ๊ทธ๋žจ์ด ํ•˜๋‚˜์˜ ํด๋ž˜์Šค์— ์žˆ๋Š” ๋ชจ๋“  ์ฝ”๋“œ์˜ ์—„์ฒญ๋‚˜๊ฒŒ ๋งŽ์€ ํž™์ด ์•„๋‹ˆ๋ผ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. MVC ๋Š” ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์ ํ•ฉํ•  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ด ์˜์—ญ์—์„œ ํŠนํžˆ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค(๊ฑฐ์˜ ํ•ญ์ƒ). ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ ์„œ๋ธ”๋ฆฟ์€ ์ปจํŠธ๋กค๋Ÿฌ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํŒจํ„ด์— ๋Œ€ํ•œ ๋งค์šฐ ํ”ผ์ƒ์ ์ด๊ณ  ๊ฐ„๋‹จํ•œ ์„ค๋ช…์ด์ง€๋งŒ MVC ๋Š” ์ด ๊ธฐ์‚ฌ์˜ ์ฃผ์š” ์ฃผ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ์ด ์žˆ๋‹ค๋ฉด Google์ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์นœ๊ตฌ์ž…๋‹ˆ๋‹ค! ์‚ฌ์šฉ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•œ ์–‘์‹์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. add.jsp ์— ์–‘์‹์„ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค . ๋‘ ๊ฐœ์˜ ํ…์ŠคํŠธ ์ž…๋ ฅ ํ•„๋“œ(ํ•˜๋‚˜๋Š” ์ผ๋ฐ˜ ํ•„๋“œ, ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ๋น„๋ฐ€๋ฒˆํ˜ธ ํ•„๋“œ)์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š” ๋ฒ„ํŠผ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<form method="post">
    <label>Name:
        <input type="text" name="name"><br />
    </label>

    <label>Password:
        <input type="password" name="pass"><br />
    </label>
    <button type="submit">Submit</button>
</form>
์—ฌ๊ธฐ์„œ ์–‘์‹์—๋Š” ๊ฐ’์ด post ์ธ ๋ฉ”์†Œ๋“œ ์†์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค . ์ด๋Š” ์ด ์–‘์‹์˜ ๋ฐ์ดํ„ฐ๊ฐ€ POST ์š”์ฒญ ์œผ๋กœ ์„œ๋ฒ„๋กœ ์ด๋™ํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค . ์ž‘์—… ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์š”์ฒญ์ด ์ด ํŽ˜์ด์ง€์— ์˜จ ๊ฒƒ๊ณผ ๋™์ผํ•œ ์ฃผ์†Œ( /add ) ๋กœ ์ „์†ก๋ฉ๋‹ˆ๋‹ค . ๋”ฐ๋ผ์„œ GET ์š”์ฒญ์„ ์ˆ˜์‹ ํ•˜๋ฉด ์ด ์ฃผ์†Œ์— ๋ฐ”์ธ๋”ฉ๋œ ์„œ๋ธ”๋ฆฟ์€ ์‚ฌ์šฉ์ž ์ถ”๊ฐ€ ์–‘์‹๊ณผ ํ•จ๊ป˜ JSP๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  POST ์š”์ฒญ์„ ์ˆ˜์‹ ํ•˜๋ฉด ์–‘์‹์ด ์—ฌ๊ธฐ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ธ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(์—ฌ๊ธฐ์— ์žˆ๋Š” ์š”์ฒญ ๊ฐ์ฒด์—์„œ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค.doPost()๋ฐฉ๋ฒ•, ํ”„๋กœ์„ธ์Šค ๋ฐ ์ €์žฅ์„ ์œ„ํ•ด ๋ชจ๋ธ์— ์ „๋‹ฌ). ์ž…๋ ฅ ํ•„๋“œ์—๋Š” ์ด๋ฆ„ (์‚ฌ์šฉ์ž ์ด๋ฆ„์˜ ๊ฒฝ์šฐ, ๋น„๋ฐ€๋ฒˆํ˜ธ์˜ ๊ฒฝ์šฐ pass ) ์ด๋ผ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ๋‹ค๋Š” ์ ์€ ์ฃผ๋ชฉํ•  ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค . ์ด๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•œ ํฌ์ธํŠธ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์š”์ฒญ(์„œ๋ธ”๋ฆฟ ๋‚ด๋ถ€)์—์„œ ์ด ๋ฐ์ดํ„ฐ(์ž…๋ ฅํ•  ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ ์•”ํ˜ธ)๋ฅผ ์ˆ˜์‹ ํ•˜๊ธฐ ์œ„ํ•ด ์ด๋Ÿฌํ•œ ์ด๋ฆ„ ๋ฐ ํŒจ์Šค ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚˜์ค‘์— ๋” ์ž์„ธํžˆ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์ „์†ก์„ ์œ„ํ•œ ๋‚ด ๋ฒ„ํŠผ์€ ๊ด€๋ก€์ ์ธ ์ถœ๋ ฅ ํ•„๋“œ๊ฐ€ ์•„๋‹Œ ๋ฒ„ํŠผ ์œผ๋กœ ๋‹ค์‹œ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค . ์ด ์ ‘๊ทผ ๋ฐฉ์‹์ด ์–ผ๋งˆ๋‚˜ ๋„๋ฆฌ ์ฑ„ํƒ๋˜์—ˆ๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ €์—๊ฒŒ๋Š” ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค(Chrome ๋ธŒ๋ผ์šฐ์ €).

POST ์š”์ฒญ์˜ ์„œ๋ธ”๋ฆฟ ์ฒ˜๋ฆฌ

AddServlet ์œผ๋กœ ๋Œ์•„๊ฐ€์ž . ์„œ๋ธ”๋ฆฟ์ด GET ์š”์ฒญ์„ "์žก์„" ์ˆ˜ ์žˆ๋„๋ก HttpServletdoGet() ํด๋ž˜์Šค ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์žฌ์ •์˜ํ–ˆ์Œ์„ ์ƒ๊ธฐ์‹œ์ผœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค . ์„œ๋ธ”๋ฆฟ์ด POST ์š”์ฒญ ๋„ ํฌ์ฐฉํ•˜๋„๋ก ๊ฐ€๋ฅด์น˜๋ ค๋ฉด ๋ฉ”์„œ๋“œ ๋„ ์žฌ์ •์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค . Tomcat์€ ์šฐ๋ฆฌ๊ฐ€ ์ž‘์—…ํ•  ์œ ์‚ฌํ•œ ์š”์ฒญ ๋ฐ ์‘๋‹ต ๊ฐœ์ฒด๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์‹œ์ž‘ํ•˜๋ ค๋ฉด ์š”์ฒญ ์ด๋ฆ„์„ ์ถ”์ถœํ•˜๊ณ  ์–‘์‹์—์„œ ๋ณด๋‚ธ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค(์–‘์‹์— ๋‹ค๋ฅธ ์ด๋ฆ„์„ ์ง€์ •ํ•œ ๊ฒฝ์šฐ ํ•ด๋‹น ์ด๋ฆ„ ์‚ฌ์šฉ). ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฐœ์ฒด๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ชจ๋ธ ๊ฐœ์ฒด๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ƒ์„ฑ๋œ ์‚ฌ์šฉ์ž๋ฅผ ๋ชจ๋ธ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. doPost()

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    String password = req.getParameter("pass");
    User user = new User(name, password);
    Model model = Model.getInstance();
    model.add(user);
}

๋ทฐ์— ๋ฐ์ดํ„ฐ ์ „๋‹ฌ

ListServlet ์œผ๋กœ ๋„˜์–ด๊ฐ‘์‹œ๋‹ค . ๋ฐฉ๋ฒ• doGet()์€ ์ด๋ฏธ ๊ตฌํ˜„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋ณด๊ธฐ( list.jsp )๋กœ ์ œ์–ด๋ฅผ ์ „์†กํ•ฉ๋‹ˆ๋‹ค. ์•„์ง ์—†๋Š” ๊ฒฝ์šฐ AddServlet ์˜ ๋ฉ”์†Œ๋“œ์™€ ์œ ์‚ฌํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์‹ญ์‹œ์˜ค . ์ด์ œ ๋ชจ๋ธ์—์„œ ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋ชฉ๋ก์„ ๊ฐ€์ ธ์™€ ๋ณด๊ธฐ์— ์ „๋‹ฌํ•˜๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด Tomcat ์—์„œ ๋ฐ›์€ ์š”์ฒญ ๊ฐœ์ฒด๋ฅผ ๋‹ค์‹œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค . ์ด ๊ฐœ์ฒด์— ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์ผ์ข…์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋ทฐ์— ์ „๋‹ฌํ•˜๋ ค๋Š” ๊ฐ์ฒด๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค .. ์„œ๋ธ”๋ฆฟ์—์„œ ๋ทฐ๋กœ ์ œ์–ด๋ฅผ ์ „์†กํ•  ๋•Œ ์„œ๋ธ”๋ฆฟ์ด ๋ฐ›์€ ๊ฒƒ๊ณผ ๋™์ผํ•œ ์š”์ฒญ ๋ฐ ์‘๋‹ต ๊ฐ์ฒด๋ฅผ ๋ทฐ์— ์ „๋‹ฌํ•œ๋‹ค๋Š” ์‚ฌ์‹ค ๋•Œ๋ฌธ์— ์š”์ฒญ ๊ฐ์ฒด์— ์ด๋ฆ„ ๋ชฉ๋ก์„ ์ถ”๊ฐ€ํ•œ ๋‹ค์Œ ์š”์ฒญ์—์„œ ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋ชฉ๋ก์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณด๊ธฐ์˜ ๊ฐœ์ฒด์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ListServlet ํด๋ž˜์Šค ๋กœ ์ž‘์—…์„ ๋งˆ์ณค ์œผ๋ฏ€๋กœ ์—ฌ๊ธฐ์— ์ „์ฒด ํด๋ž˜์Šค์˜ ์ฝ”๋“œ๋ฅผ ์ œ์‹œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

package app.servlets;

import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class ListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Model model = Model.getInstance();
        List<String> names = model.list();
        req.setAttribute("userNames", names);

        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
        requestDispatcher.forward(req, resp);
    }
}

JSP ํŒŒ์ผ์—์„œ Java ์ฝ”๋“œ ์‹คํ–‰

list.jsp ๋ฅผ ์‚ดํŽด๋ณผ ์‹œ๊ฐ„์ž…๋‹ˆ๋‹ค . ListServlet์ด ์ œ์–ด๋ฅผ ์ „์†กํ•  ๋•Œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค . ๋˜ํ•œ ์šฐ๋ฆฌ๋Š” ์ด๋ฏธ ์„œ๋ธ”๋ฆฟ์˜ ๋ชจ๋ธ์—์„œ ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋ชฉ๋ก์„ ์ค€๋น„ํ•˜๊ณ  ์—ฌ๊ธฐ ์š”์ฒญ ๊ฐ์ฒด์— ์ „๋‹ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฆ„ ๋ชฉ๋ก์ด ์žˆ์œผ๋ฏ€๋กœ ๋ฃจํ”„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜๋ณต forํ•˜๊ณ  ๊ฐ ์ด๋ฆ„์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ „์— ๋งํ–ˆ๋“ฏ ์ด JSP ํŒŒ์ผ์€ Java ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (์ •์  HTML ํŽ˜์ด์ง€์™€ ๋‹ค๋ฅธ ์ ). ์ผ๋ถ€ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋ฉด ๋‹ค์Œ ๊ตฌ์„ฑ์„ ์ ์ ˆํ•œ ์œ„์น˜์— ๋ฐฐ์น˜ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

<!-- html code -->
<%
    // Java code
%>
<!-- html code -->
์ด ๊ตฌ์„ฑ ๋‚ด์—์„œ ์—ฌ๋Ÿฌ ๋ณ€์ˆ˜์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • request โ€” ๋‹จ์ˆœํžˆ req ๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์„œ๋ธ”๋ฆฟ์—์„œ ์ „๋‹ฌํ•œ ์š”์ฒญ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค .
  • ์‘๋‹ต - ์‘๋‹ต ๊ฐ์ฒด( ์„œ๋ธ”๋ฆฟ์—์„œ resp ๋ผ๊ณ  ํ•จ)
  • out โ€” JspWriter ๊ฐ์ฒด(์ผ๋ฐ˜ Writer ๋ฅผ ์ƒ์†ํ•จ)๋กœ, HTML ํŽ˜์ด์ง€ ์ž์ฒด ์— ์ง์ ‘ ๋ฌด์–ธ๊ฐ€๋ฅผ "์“ฐ๋Š”" ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . out.println("Hello, World!") ๋ฌธ ์€ System.out.println("Hello, World!") ์™€ ๋งค์šฐ ์œ ์‚ฌ ํ•˜์ง€๋งŒ ํ˜ผ๋™ํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค!
  • out.println()์€ HTML ํŽ˜์ด์ง€ ์— "์“ฐ๊ณ " System.out.println ์€ ์‹œ์Šคํ…œ ์ถœ๋ ฅ ์ŠคํŠธ๋ฆผ ์— ์”๋‹ˆ๋‹ค . Java ์ฝ”๋“œ๊ฐ€ ์žˆ๋Š” JSP ์„น์…˜ ๋‚ด์—์„œ System.out.println()์„ ํ˜ธ์ถœํ•˜๋ฉด Tomcat ์ฝ˜์†” ์—๋Š” ๊ฒฐ๊ณผ๊ฐ€ ํ‘œ์‹œ๋˜์ง€๋งŒ ํŽ˜์ด์ง€์—๋Š” ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์—ฌ๊ธฐ์—์„œ JSP ๋‚ด์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋‹ค๋ฅธ ๊ฐœ์ฒด๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . request ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ธ”๋ฆฟ์—์„œ ์ „๋‹ฌ๋œ ์ด๋ฆ„ ๋ชฉ๋ก์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ(ํ•ด๋‹น ์†์„ฑ์„ ์ด ๊ฐ์ฒด์— ์ฒจ๋ถ€ํ•จ) out ๊ฐ์ฒด ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋Ÿฌํ•œ ์ด๋ฆ„์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ๋“ค์„ ํ‘œ์‹œํ•ด ๋ด…์‹œ๋‹ค(๋‹น๋ถ„๊ฐ„์€ ๊ฐ„๋‹จํ•œ HTML ๋ชฉ๋ก์œผ๋กœ):

<ul>
    <%
        List<String> names = (List<String>) request.getAttribute("userNames");

        if (names != null && !names.isEmpty()) {
            for (String s : names) {
                out.println("<li>" + s + "</li>");
            }
        }
    %>
</ul>
์‚ฌ์šฉ์ž๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ์—๋งŒ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์•„์ง ์‚ฌ์šฉ์ž๊ฐ€ ์—†๋‹ค๋Š” ๊ฒฝ๊ณ ๋ฅผ ํ‘œ์‹œํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ด ์„น์…˜์„ ์•ฝ๊ฐ„ ๋‹ค์‹œ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<%
    List<String> names = (List<String>) request.getAttribute("userNames");

    if (names != null && !names.isEmpty()) {
        out.println("<ui>");
        for (String s : names) {
            out.println("<li>" + s + "</li>");
        }
        out.println("</ui>");
    } else out.println("<p>There are no users yet!</p>");
%>
์ด์ œ ์„œ๋ธ”๋ฆฟ์—์„œ ๋ทฐ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•˜์œผ๋ฏ€๋กœ AddServlet์„ ๊ฐœ์„ ํ•˜์—ฌ ์„ฑ๊ณต์ ์ธ ์‚ฌ์šฉ์ž ์ถ”๊ฐ€์— ๋Œ€ํ•œ ์•Œ๋ฆผ์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด doPost()๋ฉ”์„œ๋“œ์—์„œ ์ƒˆ ์‚ฌ์šฉ์ž๋ฅผ ๋ชจ๋ธ์— ์ถ”๊ฐ€ํ•œ ํ›„ ์ด ์‚ฌ์šฉ์ž ์ด๋ฆ„์„ req ๊ฐ์ฒด์˜ ์†์„ฑ์— ์ถ”๊ฐ€ํ•˜๊ณ  ์ปจํŠธ๋กค์„ ๋ทฐ ( add.jsp )๋กœ ๋‹ค์‹œ ๋„˜๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ Java ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋œ ์„น์…˜์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์š”์ฒญ์— ์ด๋Ÿฌํ•œ ์†์„ฑ์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ํ•ด๋‹น ์†์„ฑ์ด ์žˆ์œผ๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ ํ›„ AddServlet ์˜ ์ „์ฒด ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

package app.servlets;

import app.entities.User;
import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
        requestDispatcher.forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String password = req.getParameter("pass");
        User user = new User(name, password);
        Model model = Model.getInstance();
        model.add(user);

        req.setAttribute("userName", name);
        doGet(req, resp);
    }
}
์—ฌ๊ธฐ์—์„œ ๋ฉ”์†Œ๋“œ์˜ ๋์—์„œ doPost()๋ชจ๋ธ์— ์ถ”๊ฐ€๋œ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์œผ๋กœ ์†์„ฑ์„ ์ƒ์„ฑํ•œ ๋‹ค์Œ doGet()ํ˜„์žฌ ์š”์ฒญ ๋ฐ ์‘๋‹ต์„ ์ „๋‹ฌํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด doGet()๋ฉ”์„œ๋“œ๋Š” ์ด์ œ ์†์„ฑ์œผ๋กœ ์ฒจ๋ถ€๋œ ์ถ”๊ฐ€๋œ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์ด ์žˆ๋Š” ์š”์ฒญ ๊ฐœ์ฒด๋ฅผ ๋ฐ›๋Š” ๋ณด๊ธฐ๋กœ ์ œ์–ด๋ฅผ ์ „์†กํ•ฉ๋‹ˆ๋‹ค. ๋‚จ์€ ์ž‘์—…์€ ๊ทธ๋Ÿฌํ•œ ์†์„ฑ์ด ์—†์„ ๊ฒฝ์šฐ ์•Œ๋ฆผ์„ ํ‘œ์‹œํ•˜๋„๋ก add.jsp๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์€ add.jsp ์˜ ์ตœ์ข… ๋ฒ„์ „์ž…๋‹ˆ๋‹ค .

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
                }
            %>
            <div>
                <div>
                    <h2>Add user</h2>
                </div>

                <form method="post">
                    <label>Name:
                        <input type="text" name="name"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass"><br />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>
ํŽ˜์ด์ง€ ๋ณธ๋ฌธ์€ ๋‹ค์Œ์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • ํ—ค๋”๊ฐ€ ์žˆ๋Š” div;
  • ์‚ฌ์šฉ์ž ์ด๋ฆ„์ด ์žˆ๋Š” ์†์„ฑ์ด ์กด์žฌํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๋‚ด์šฉ์„ ํฌํ•จํ•˜๋Š” div ์ปจํ…Œ์ด๋„ˆ
  • ์‚ฌ์šฉ์ž ์ถ”๊ฐ€ ์–‘์‹์ด ํฌํ•จ๋œ div
  • ํ•˜๋‹จ์—๋Š” ํ™ˆ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐ€๋Š” ๋ฒ„ํŠผ์ด ์žˆ๋Š” ๋ฐ”๋‹ฅ๊ธ€์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ๋„ˆ๋ฌด ๋งŽ์€ div์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ๋‚˜์ค‘์— ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•  ๋•Œ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์€ list.jsp ์˜ ์ตœ์ข… ๋ฒ„์ „์ž…๋‹ˆ๋‹ค .

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <div>
                <div>
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ui>");
                        for (String s : names) {
                            out.println("<li>" + s + "</li>");
                        }
                        out.println("</ui>");
                    } else out.println("<p>There are no users yet!</p>");
                %>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>
๋”ฐ๋ผ์„œ ์‚ฌ์šฉ์ž๋ฅผ ์ €์žฅ ๋ฐ ์ถ”๊ฐ€ํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋Š” ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ์ด์˜๊ฒŒ ๋งŒ๋“ค๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค... :) ์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€) - 2

์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. W3.CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ ์šฐ๋ฆฌ์˜ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์€ ์ž‘๋™ํ•˜์ง€๋งŒ ์™„์ „ํžˆ ํ„ฐ๋ฌด๋‹ˆ์—†์–ด ๋ณด์ž…๋‹ˆ๋‹ค. ์ด์ œ ๋ฐฐ๊ฒฝ์„ ์ถ”๊ฐ€ํ•˜๊ณ , ํ…์ŠคํŠธ์™€ ๋ฒ„ํŠผ์— ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜๊ณ , ๋ชฉ๋ก์— ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•˜๊ณ , ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๊ณ , ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์Šคํƒ€์ผ์„ ์ˆ˜๋™์œผ๋กœ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋งŽ์€ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๊ณ  ์‹ ๊ฒฝ์ด ์“ฐ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š” W3.CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ์Šคํƒ€์ผ์ด ์žˆ๋Š” ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํด๋ž˜์Šค๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•˜๋ ค๋Š” CSS ํด๋ž˜์Šค๋ฅผ ์˜ฌ๋ฐ”๋ฅธ ์œ„์น˜์— ๋ฐฐ์น˜ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€์— ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ๋จผ์ € ์Šคํƒ€์ผ ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  1. ํŽ˜์ด์ง€๋ฅผ ์‚ดํŽด๋ณด๊ณ  ํ—ค๋“œ ์„น์…˜์— ์Šคํƒ€์ผ ํŒŒ์ผ์— ๋Œ€ํ•œ ๋‹ค์Œ ์ง์ ‘ ๋งํฌ๋ฅผ ์‚ฝ์ž…ํ•˜์‹ญ์‹œ์˜ค.

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    ์ด ์˜ต์…˜์€ ์˜๊ตฌ์ ์ธ ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ์ด ์žˆ๋Š” ๊ฒฝ์šฐ์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ๋กœ์ปฌ ์„œ๋ฒ„์—์„œ ํŽ˜์ด์ง€๋ฅผ ์—ด๋ฉด ์ธํ„ฐ๋„ท์—์„œ ์Šคํƒ€์ผ์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

  2. ๊ทธ๋Ÿฌ๋‚˜ ๋ชจ๋“  ์Šคํƒ€์ผ์„ ๋กœ์ปฌ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ์— ์˜์กดํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด ์Šคํƒ€์ผ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œํ•˜์—ฌ ์›น ํด๋” ( ์˜ˆ: web/styles/w3.css )์— ์ €์žฅํ•˜์‹ญ์‹œ์˜ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ชจ๋“  ํŽ˜์ด์ง€( index.html, add.jsp, list.jsp )๋ฅผ ์‚ดํŽด๋ณด๊ณ  head ์„น์…˜ ๋‚ด๋ถ€์˜ ์Šคํƒ€์ผ ํŒŒ์ผ์— ๋‹ค์Œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค .

    <link rel="stylesheet" href="styles/w3.css">

    ๊ทธ๋Ÿฐ ๋‹ค์Œ ํƒœ๊ทธ๋ฅผ ์‚ดํŽด๋ณด๊ณ  ์›ํ•˜๋Š” ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ๋‹ค๋ฃจ์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋Œ€์‹  ๋ž˜์Šคํ„ฐ ์Šคํƒ€์ผ ํด๋ž˜์Šค๊ฐ€ ํฌํ•จ๋œ ํŒŒ์ผ 3๊ฐœ์˜ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„์ „์„ ์ œ๊ณตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Super app!</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center">
            <div class="w3-bar w3-padding-large w3-padding-24">
                <button class="w3-btn w3-hover-light-blue w3-round-large" onclick="location.href='/list'">List users</button>
                <button class="w3-btn w3-hover-green w3-round-large" onclick="location.href='/add'">Add user</button>
            </div>
        </div>
    </body>
</html>
add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-padding">
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<div class=\"w3-panel w3-green w3-display-container w3-card-4 w3-round\">\n" +
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-green w3-border w3-border-green w3-hover-border-grey\">ร—</span>\n" +
                            "   <h5>User '" + request.getAttribute("userName") + "' added!</h5>\n" +
                            "</div>");
                }
            %>
            <div class="w3-card-4">
                <div class="w3-container w3-center w3-green">
                    <h2>Add user</h2>
                </div>
                <form method="post" class="w3-selection w3-light-grey w3-padding">
                    <label>Name:
                        <input type="text" name="name" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <button type="submit" class="w3-btn w3-green w3-round-large w3-margin-bottom">Submit</button>
                </form>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>
list.jsp

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users list</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center w3-margin-bottom w3-padding">
            <div class="w3-card-4">
                <div class="w3-container w3-light-blue">
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ul class=\"w3-ul\">");
                        for (String s : names) {
                            out.println("<li class=\"w3-hover-sand\">" + s + "</li>");
                        }
                        out.println("</ul>");

                    } else out.println("<div class=\"w3-panel w3-red w3-display-container w3-card-4 w3-round\">\n"
+
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-red w3-border w3-border-red w3-hover-border-grey\">ร—</span>\n" +
                            "   <h5>There are no users yet!</h5>\n" +
                            "</div>");
                %>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>
๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒŒ ๋‹ค์•ผ. :) ์—ฌ์ „ํžˆ ๊ถ๊ธˆํ•œ ์ ์ด๋‚˜ ์˜๊ฒฌ์ด ์žˆ๊ฑฐ๋‚˜ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฉด ์˜๊ฒฌ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”. ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๋˜์—ˆ๋Š”์ง€์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์Šคํฌ๋ฆฐ์ƒท์„ ์ฒจ๋ถ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€) - 3
์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€) - 4
์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋งŒ๋“ค๊ธฐ(2๋ถ€) - 5
๋งˆ์ง€๋ง‰์œผ๋กœ ์ด ํ”„๋กœ์ ํŠธ๋กœ ์—ฐ์Šตํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ์„ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์„œ๋ธ”๋ฆฟ๊ณผ JSP๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉ์ž๋ฅผ ์‚ญ์ œํ•˜๊ณ  ๋‹ค๋ฅธ ์Œ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ธฐ์กด ์‚ฌ์šฉ์ž๋ฅผ ํŽธ์ง‘ํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋Š” ์„œ๋ธ”๋ฆฟ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ•๋œ ์ง„์ •ํ•œ CRUD ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ;)
  • ์ถ”๊ฐ€๋œ ์‚ฌ์šฉ์ž๊ฐ€ ์„œ๋ฒ„๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•œ ํ›„์— ์‚ฌ๋ผ์ง€์ง€ ์•Š๋„๋ก ๋ชฉ๋ก์„ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ ๊ต์ฒดํ•˜์‹ญ์‹œ์˜ค. :)
ํ–‰์šด์„ ๋นŒ์–ด์š”!
์ฝ”๋ฉ˜ํŠธ
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION