kiki-dev

Typescript for Beginners

kiki97 — Sat, 9 Dec 2023 00:14:31 +0900

Typescript

Strongly typed programming
컴파일 시 javascript로 변환됨
에러가 발생 → 컴파일 X

Javascript

매우 유연해서 에러를 잘 보여주지 않음

숫자 배열 + false → 배열이 사라지고 string으로 바뀜
함수의 인자에 데이터타입이 잘못 들어가도 실행됨
const a = { a: "A" }; a.hello(); 실행 시 에러 발생
(런타임에러, 실행할때 발생하는 에러) → 실행 전에 에러 감지 불가

타입스크립트를 사용하는이유

타입 안정성은 타입스크립트가 제공하는 가장 큰 장점이다.
타입 안정성 덕분에 버그가 엄청 줄어든다.

Type 시스템

명시적 정의(변수 선언 시 타입 정의)
let a: boolean = "x" → ❌ boolean 타입에 string타입 할당 불가 알림

변수만 생성(타입 추론)
let b = "hello" → b가 string 타입이라고 추론
b = 1 → ❌ string 타입에 number타입 할당 불가 알림

Type Alias(별칭) 타입

Type Aliases을 사용하여 객체 타입뿐만 아니라 모든 이름에 타입을 지정할 수 있습니다.

type Player = {
    readonly name: string, // ❗ readonly가 있으면 최초 선언 후 수정 불가 '읽기전용'
    age?:number //number | undefine
}

argument 역시 타입을 지정할 수 있다. `(parameter : type)`
함수의 return에도 타입을 지정할 수 있다.
function (parameter : type) : type {
    return
}

✅ Tuple
정해진 개수와 순서에맞는 타입의 값을 요구할때 유용하다.
const player: [string, number, boolean] = ["nico", 1, true]
player[0] = 1 // 바꿀수없다. string으로 지정됨

✅ any, unknown, void, never
any: 아무 타입. 타입체크를 '비활성화' 시켜버린다.
unknown : 변수의 타입을 미리 알지 못할때 사용할때마다 변수타입 지정을 요구한다.
void : 값을 반환하지 않는 함수에서 반환 자료형
never : 함수가 절대 return 하지 않는다.

❗ ?를 :앞에 붙이면 optional
❗ readonly가 있으면 최초 선언 후 수정 불가 ⇒ immutability(불변성) 부여 but, javascript에서는 그냥 배열

Call Signatures

함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다.

* React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능!

type Add = (a: number, b: number) => number;

//화살표 함수 중괄호 주의사항
const add:Add = (a,b) => a+b
function add(a, b) {
	return (a+b)
}

const add:Add = (a,b) => {a+b}
function add(a, b) {
	a+b;
}

화살표 함수에서 {}를 생략하면 return이 생략된 것
즉 a + b 와 { return a+b } 는 같은 뜻
{a+b}라고 하면 아무것도 리턴하지 않기 때문에 에러남

Overloading

동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다.

TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출할 수 있는 함수"를 지정할 수 있습니다.

type Add = {
    (a: number, b: number): number,
    (a: number, b: string): number
}

const add: Add = (a, b) => {
    if (typeof b === "string") return a;
    return a + b;
}

매개변수의 데이터 타입이 다른 경우 예외 처리

type Add2 = {
    (a: number, b: number): number,
    (a: number, b: number, c: number): number
}

const add2: Add2 = (a, b, c?: number) => {
    if (c) return a + b + c;
    return a + b;
}

polymorphism

인자들과 반환값에 대하여 형태(타입)에 따라 그에 상응하는 형태(타입)를 갖을 수 있다.

any와의 차이점은 해당 타입에 대한 정보를 잃지 않는다.
any는 any로서 밖에 알 수 없지만 generics는 타입 정보를 알 수 있다.

type SuperPrint={
    <T>(arr:T[]):T;
}

const superPrint:SuperPrint=(arr)=>{
    return arr[0]
}

const a=superPrint([1,2,3])
const b=superPrint([true,false,true])
const c=superPrint(["a","b"])
const d=superPrint([1,2,"a","b",true])

Generics

변수나 인수에 타입을 정해주는 Concrete같이 딱딱한 기법과 달리 어떤 타입을 쓸지 정해주지 않고 그 타입에 대해 어떤 변수를 넣어주냐에 따라 결정되는 유연한 기법이다.

function identity< Type >(arg: Type): Type {
    return arg;
}

const identity=< Type extends {} >(arg: Type):Type => {
    return arg;
}

type Player<T> = {
    name: string,
    extraInfo: T
};

const player2: Player<object> = {
    name: "Yee",
    extraInfo: {
        age: 23,
        stature: 170,
        weight: 60
    }
};

Classes

추상(abstract) 클래스
추상 클래스는 오직 다른 클래스가 상속받을 수 있는 클래스이다.
하지만 직접 새로운 인스턴스를 만들 수는 없다.

abstract class User {
    constructor(
        private firstName: string,
        private lastName: string,
        protected nickname: string,
    ) {

    }

    abstract getNickName(): void
     // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현(implement)해야하는 메서드이다.
}

class Player extends User {
    getNickName() {
        return `nickname: ${this.nickname}`
    }
}

const lsc: Player = new Player("lee", "sc", "lsc");

구분	선언한 클래스 내	상속받은 클래스 내	인스턴스
private	⭕	❌	❌
protected	⭕	⭕	❌
public	⭕	⭕	⭕

type Team = "read"| "blue" | "yellow" // type에 특정 값을 가지도록 제한

type Words = { // 해시
    [key: string]: (string | string[])
    //객체의 property에 대해 모르지만 타입만을 알 때 유용하다
}
class Dict {
    private words: Words
    constructor() {
    this.words = {}
}


// 각각의 단어에 대한 클래스
class Word {
    constructor(
        public readonly term: string, //readonly '읽기전용, 수정불가'
        public def: string
    ) {}
}

Static Members

static Methods는 클래스를 생성안해도 사용이 가능!

class MyClass {
    static x = 0;
    
    static printX() {
    	console.log(MyClass.x);
    }
}

Interfaces

객체의 모양을 특정해주기 위해 사용합니다.

interface Hello = string; // 오류, 인터페이스는 오로지 오브젝트

type Hello = string // type은 가능, 비슷한 type이 기능이 더 많다

클래스는 여러 인터페이스를 구현할 수도 있다

tsconfig.json설정

디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.

{
    "include": ["src"],
    "compilerOptions": {
        "outDir": "build",
        "target": "ES6",
        "moduleResolution": "node",
        "lib": ["ES6","DOM"] // 타입스크립트에게 어떤 환경에서 코드를 실행하는 지를 지정할 수 있습니다.
                             //(target 런타임 환경이 무엇인지를 지정합니다.)
    }
}

타입스크립트 코드 테스트

https://www.typescriptlang.org/play

출처

노마드 코더 타입스크립트로 블록체인 만들기

fullpage.js v2.9.7

kiki97 — Wed, 5 Apr 2023 14:55:55 +0900

라이브러리 깃허브 사이트

v2까지는 무료이용이 가능하다구함

https://github.com/alvarotrigo/fullPage.js/tree/2.9.7

CDN

https://cdnjs.com/libraries/fullPage.js/2.9.7

예제파일

https://alvarotrigo.com/fullPage/examples/scrollBar.html

fullPage.js-master.zip

8.52MB

안에 예제보면서 필요한 부분들 가지구와서 쓰면 댈듯

Jquery load()

kiki97 — Tue, 6 Dec 2022 08:50:00 +0900

.load()

서버에서 데이터를 로드하고 반환된 HTML을 일치하는 요소에 배치한다.

.load(url [, data ][, complete ])

공통 부분 컴포넌트화

많은 페이지에서 사용되는 헤더부분이 수정되면 그 페이지들마다 하나씩 수정해줘야하는 번거로움이 있는데

공통된부분을 따로 빼서 불러오는 방식으로 분리해서 관리했다.

<script>
    $("#headers").load("common/header.html");
    $("#footers").load("common/footer.html");
</script>

<body> 
    <div id="headers"></div>
    <div id="footers"></div>
</body>

load불러온 데이터가 headers,footers안으로 들어가게된다.

스크립트 적용

load메소드로 불러온 데이터는 동적으로 추가된거라 그런지 스크립트가 안먹혔다.

클릭이벤트와 같은것은 동적 이벤트 바인딩을 통해서 사용하면 됐는데, 스와이퍼js같이 로드되고나서 바로

적용돼야하는 스크립트가 안먹혔었는데 load 메소드뒤 콜백함수안에 넣어서 사용하니 해결됐다.

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

참고

https://api.jquery.com/load/

https://blog.naver.com/blacklish1/221017411129

https://offbyone.tistory.com/235

React.js란?

kiki97 — Tue, 1 Nov 2022 21:19:54 +0900

리액트(React)란?

자바스크립트의 UI 라이브러리 지금은 Meta가 된 Facebook이 개발한 오픈소스

JSX

자바스크립트를 확장한 문법

React요소를 HTML문법처럼 만들수 있게해줌

https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

자바스크립트 예약어랑 겹치는건 사용못하니 주의
- class = className, for = htmlFor

Babel

JSX코드를 브라우저가 이해할수 있는 형태로 바꿔줌

https://unpkg.com/@babel/standalone/babel.min.js

컴포넌트의 첫 글자는 반드시 대문자

React.js의 state

const [counter, setCounter] = React.useState(0); //값을 넣지않으면 초기값은 0 이다
//setCounter : counter값 수정 후 리렌더해줌

'실제로 바뀌는 값'만 판단해서 불필요한 리렌더링을 제외하고 동작한다.
counter 은 현재의 값 state이다

State Functions

const onClick = () => {
    setCounter(counter + 1);
    setCounter((current)=> current + 1); //함수를 사용할 경우 리액트가 current 값이 현재 값이라는걸 보장
}

현재 state를 기반으로 계산하고 싶다면 함수를 이용
예상치 못한 업데이트가 어디선가 일어났다고 해도 안전

Props

function Btn(props)

// props 생략하고 꺼내오기 가능
function Btn({text})

function App() {
    return (
        <div>
            <Btn text="Save Changes" big={true}/>
        </div>
    )
}

속성안에 있는 모든값들을 첫번째 인자에 객체로 넘겨줌

Memo

인텔리제이 한글깨짐

kiki97 — Thu, 27 Oct 2022 21:25:27 +0900

단축키 Ctrl + Alt + S

위와 같이 설정 고고링

머스테치가 스프링부트 2.7.0이상에서 한글깨짐 이슈가 있다고한다.

bulid gradle에서 2.6.7로 버전을 다운그레이드 하니 한글깨짐이슈 해결완료

HTTP 요청 메소드(GET, POST)

kiki97 — Fri, 21 Oct 2022 19:40:12 +0900

HTTP 요청 메소드

URL을 이용하면 서버에 특정 데이터를 요청할 수 있다.

여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 HTTP 요청 메소드(Http Request Methods)를 이용한다.

일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 주요 메서드를 갖고 있다.

GET : 존재하는 자원에 대한 요청
POST : 새로운 자원을 생성
PUT : 존재하는 자원에 대한 변경
DELETE : 존재하는 자원에 대한 삭제

GET방식

클라이언트에서 서버로 어떠한 리소스 정보를 요청하기 위해(데이터를 읽거나 검색할때) 사용되는 메서드

GET은 요청을 전송할 때 필요한 데이터를 쿼리스트링을 통해 전송한다.

URL의 끝에 ? 와 함께 이름과 값으로 상을 이루는 요청 파라미터를 쿼리스트링이라고 부른다.

쿼리스트링을 사용하면 URL에 조회 조건을 표시하기 때문에 특정 페이지를 링크하거나 북마크할 수 있다.

www.example-url.com/resources?name1=value1&name2=value2

만약, 요청 파라미터가 여러 개면 &로 연결한다.
요청 파라미터명은 nam1, nam2
각각의 파라미터는 value1, value2라는 값으로 서버에 요청을 보낸다.

GET은 불필요한 요청을 제한하기 위해 요청이 캐시가 될 수 있다.
JS,CSS같은 정적 컨텐츠는 데이터양이 크고, 변경될 일이 적어서 반복해서 동일한 요청을 보낼 필요가없다. 
정적 컨텐츠를 요청하고 나면 브라우저에서는 요청을 캐시로해두고,
동일한 요청이 발생할 때 서버로 요청을 보내지 않고 캐시된 데이터를 사용한다.
그래서 프론트엔드 개발을 하다보면 정적 컨텐츠가 캐시돼 컨텐츠를 변경해도 내용이 바뀌지 않는 경우가 종종 발생한다. 
이 때는 브라우저의 캐시를 지우고 다시 컨텐츠를 조회하면 된다.

GET 요청은 캐시가 가능하다.
:GET을 통해 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운로드하는 대신
리소스의 복사본을 반환한다. HTTP 헤더에서 cache-control 헤더를 통해 캐시 옵션을 지정할 수 있다.
GET 요청은 브라우저 히스토리에 남는다.
GET 요청을 북마크에 추가할 수 있다.
GET 요청은 길이 제한이 있다.
GET 요청은 중요한 정보를 다루면 안된다. (파라미터 내용이 노출돼서)
GET 요청은 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않는다.(데이터의 변형 위험 없이 사용가능)

POST방식

리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 메서드

데이터를 HTTP 메세지의 Body에 담아서 전송한다.(길이의 제한 없음)

크롬 개발자 도구로 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우 반드시 암호화해 전송해야한다.

POST로 요청을 보낼 때는 요청 헤더의 Content-Type에 요청 데이터의 타입을 표시해야한다.

데이터 타입을 표시하지 않으면 서버는 내용이나 URL에 포함된 리소스의 확장자명 등으로 데이터 타입을 유추한다.
만약, 알 수 없는 경우에는  application/octet-stream로 요청을 처리한다.

POST 요청은 캐시되지 않습니다.
POST 요청은 브라우저 기록에 남아 있지 않습니다.
POST 요청을 북마크에 추가할 수 없습니다.
POST 요청에는 데이터 길이에 대한 제한이 없습니다.
Post 요청 중 자원 생성은 201(Created) HTTP 응답 코드를 반환합니다.

GET과 POST에 차이점

	GET	POST
캐시	⭕️	❌
브라우저 기록	⭕️	❌
북마크 추가	⭕️	❌
데이터 길이 제한	⭕️	❌
HTTP 응답 코드	200(Ok)	201(Created)
언제 주로 사용하는가?	리소스 요청	리소스 생성
리소스 전달 방식	쿼리스트링	HTTP Body
idempotent	⭕️	❌

idempotent(멱등성)란??

연산을 여러번 적용하더라도 결과가 달라지지 않는 성질

즉, 멱등이라는 것은 동일한 연산을 여러 번 수행하더라도 동일한 결과가 나타나야 한다.

GET으로 서버에 동일한 요청을 여러번 전송하더라도 동일한 응답이 돌아와야 한다는 것을 의미한다.

따라서 GET은 서버의 데이터나 상태를 변경시키지 않아야한다.

예) 브라우저에서 웹페이지를 열어보거나 게시글을 읽는 등 조회를 하는 행위를 GET으로 요청하게 된다.

POST는 서버의 상태나 데이터를 변경시킬 때 사용

출처

https://brilliantdevelop.tistory.com/32

https://velog.io/@songyouhyun/Get과-Post의-차이를-아시나요

절대경로와 상대경로

kiki97 — Fri, 21 Oct 2022 16:06:50 +0900

절대경로

최상위 디렉토리부터 해당 파일까지 경유한 경로를 전부 기입하는 방식

/ : 최상위 디렉토리(루트 디렉토리)

상대경로

현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로

./ : 현재 디렉토리
../ : 현재 디렉토리의 상위 디렉토리

절대로경로와 상대경로의 차이점

	절대경로	상대경로
컴파일 속도	느리다	빠르다
해당 소스의 위치 변환 시	경로를 다시 지정	기준이 된 폴더의 구성이 달라지지 않는 한 경로지정을 할 필요가 없다.
분실 가능성	낮다	높다
사용할 때	타 개발자의 소스 링크시	개발팀 내에서 소스 링크 시

출처

https://mollangpiu.tistory.com/222

https://mommoo.tistory.com/82

https://velog.io/@ryurbsgks5114/절대경로와-상대경로

머스테치(mustache)란?

kiki97 — Thu, 20 Oct 2022 20:38:17 +0900

템플릿 엔진

지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다.

템플릿 엔진에는 서버 템플릿 엔진과 클라이언트 템플릿 엔진이 있다.

서버 템플릿 엔진

서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다.

https://qazyj.tistory.com/344

JPS, Velocity : 스프링 부트에서는 권장하지 않는 템플릿 엔진
Freemarker : 템플릿 엔진으로는 너무 과하게 많은 기능을 지원한다.
(숙련도가 낮을수록 비즈니스 로직이 추가될 가능성이 높다)
Thymleaf : 스프링 진영에서 적극적으로 지원하는 템플릿 엔진이지만 문법이 어렵다.

클라이언트 템플릿 엔진

서버에서는 브라우저로 데이터만 직렬화(JSON)해서 넘겨주고, 브라우저에서 HTML을 생성한다.

따라서 소스 코드가 브라우저에서 실행된다.

https://qazyj.tistory.com/344

React, Vue, Anguler 와 같이 서버에서 가져온 데이터(JSON, XML 등)를 가지고 웹 화면을 꾸며주는
라이브러리(혹은 프레임워크)

mustache란?

Springboot 에서 공식으로 지원하는 템플릿 엔진, 수 많은 언어를 지원하는 가장 심플한 템플릿 엔진

JAVA에서 사용될 때는 서버 템플릿 엔진으로, Javascript에서 사용될 때는 클라이언트 템플릿 엔진으로 사용가능

머스테치의 장점

문법이 다른 템플릿 엔진보다 심플하다.
로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리

JSP경우 <% %>안에 있는 JAVA문법은 서버단에서, Javascirpt 는 클라이언트단에서 동작하기 때문에 
하나의 JSP 파일 안에서 서버와 클라이언트 코드가 뒤섞이는 등의 문제가 있어 유지보수하기 어려움

mustache설치

Setting -> Plugins Mustache 검색 후 install -> restart

https://qazyj.tistory.com/344

dependencies{
	compileOnly 'org.springframework.boot:spring-boot-starter-mustache'
}

build.gradle에 의존성 추가
의존성만 추가하면 다른 스타터 패키지와 마찬가지로 추가 설정 없이 설치가 끝난다.
머스테치의 파일 위치는 기본적으로 main/resources/templates 이다.

Mustache 의 ViewResolver 처리 방식

컨트롤러에서 뷰를 리턴할 때 ViewResolver가 뷰 객체 처리를 담당하는데,

머스테치를 사용하면 뷰를 리턴할 때 ViewResolver가 알아서 src/main/resources/template 안에

*.mustache 파일이 존재하는지 확인하고, 존재한다면 해당 뷰를 보여주도록 한다.

@GetMapping("/")
public String index(Model model){
     // mustache 를 사용하게 되면 앞에 경로(src/main/resources/templates)와
     // 뒤에 확장자(.mustache)는 생략을 한 순수한 파일의 이름만 반환하면 된다.
     // 아래와 같이 index 를 반환하게 되면
     // src/main/resources/templates/index.mustache 로 변환되어 View Resolver 가 처리하게 된다.
     return "index";
}

출처

스프링 @Controller, @GetMapping

kiki97 — Thu, 20 Oct 2022 19:14:24 +0900

@Controller

Spring에서 컨트롤러를 지정해주기 위한 어노테이션

@Controller의 역할은 Model 객체를 만들어 데이터를 담고 View를 반환하는 것

아래와 같은 과정을 통해 Spring MVC Container는 Client의 요청으로부터 View를 반환한다.

www.facebook.com/photo/?fbid=1873079892846068&set=gm.3389524044492534

Client는 URL형식으로 웹 서비스에 요청을 보낸다.
DispatcherServlet이 요청을 위임할 HandlerMapping을 찾는다.
HandlerMapping을 통해 요청을 Controller로 위임한다.
Controller는 요청을 처리한 후에 ViewName을 반환한다.
DispatcherServlet은 ViewResolver를 통해 ViewName에 해당하는 View를 찾아 사용자에게 반환한다.

@GetMapping

HTTP GET 요청을 처리하는 메서드를 맵핑(@RequestMapping)하는 어노테이션

메서드(url)에 따라 어떤 페이지를 보여줄지 결정하는 역할을 한다.

@Controller
public class FirstController {

    @GetMapping("/hi") //해당 url이 호출될때 아래 메서드가 호출된다.
    public String hi(){
        return "hi"; // 리턴값의 이름을 가진 파일을 찾아 출력한다.
    }

}

MVC패턴이란?

kiki97 — Thu, 13 Oct 2022 19:27:01 +0900

MVC패턴이란?

모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.

어플리케이션을 세 개의 영역으로 분할하고 각 구성 요소에게 고유한 역할을 부여하는 개발 방식

MVC패턴을 도입하면 도메인(비즈니스 로직)영역과 UI영역이 분리되므로 서로 영향을 주지 않고 유지보수가 가능하다.

디자인패턴이란?
프로그램을 개발하는 과정에서 빈번하게 발생하는 디자인 문제를 정리해 재사용하기 좋은 형태로
특정 규약을 만들어서 정리한것. 즉, 효율적인 코드를 만들기 위한 방법론

모델(Model)

DATA, 정보들의 가공을 책임지는 컴포넌트

모델은 어플리케이션의 정보, 데이터를 나타낸다. 데이타베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻한다.

비즈니스 로직을 처리한 후 모델의 변경사항을 컨트롤러와 뷰에 전달한다.

모델은 다음과 같은 규칙을 가지고 있다.
사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다.
변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만 한다.

️ 뷰(View)

사용자에게 보여지는 부분, 유저 인터페이스를 의미한다.

MVC패턴은 여러 개의 뷰(View)가 존재할 수 있으며, 모델에게 질의하여 데이터를 전달받는다.

뷰는 받은 데이터를 화면에 표시해주는 역할을 가지고 있다. 사용자가 화면에 표시된 내용을 변경하게 되면

모델에게 전달하여 모델을 변경해야한다.

뷰는 다음과 같은 규칙을 가지고 있다.
모델이 가지고 있는 정보를 따로 저장해서는 안된다.
모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 된다.
변경이 일어나면 변경통지에 대한 처리방법을 구현해야한다.

️ 컨트롤러(Controller)

모델과 뷰 사이를 이어주는 브릿지 역할을 의미한다.

모델이나 뷰는 서로의 존재를 모르고 있다. 변경 사항을 외부로 알리고 수신하는 방법만 있는데, 컨트롤러는 이를 중재하기 위해 모델과 뷰에 대해 알고 있어야 한다. 모델이나 뷰로부터 변경 내용을 통지 받으면 이를 각 구성 요소에게 통지해야한다. 사용자가 어플리케이션을 조작하여 발생하는 변경 이벤트들을 처리하는 역할을 수행한다.

컨트롤러는 다음과 같은 규칙을 가지고 있다.
모델이나 뷰에 대해서 알고 있어야한다.
모델이나 뷰의 변경을 모니터링 해야한다.

MVC 패턴흐름

사용자가 웹 사이트에 접속
컨트롤러는 사용자가 요청한 웹페이지를 서비스하기 위해서 모델을 호출
모델은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후 그 결과를 리턴
컨트롤러는 모델이 리턴한 결과를 뷰에 반영(Updates)
데이터가 반영된 View는 사용자에게 보여짐

MVC 패턴방식

MVC패턴에는 모델1 방식과 모델2 방식이 있다.

모델 1 방식 : JSP에서 출력과 로직을 전부 처리
모델 2방식 : JSP에서 출력만 처리

Model1

https://cocoon1787.tistory.com/733

모델1방식은 컨트롤러 영역에 뷰영역을 같이 구현하는 방식이며, 사용자의 요청을 JSP가 전부 처리한다.

요청을 받은 JSP는 JavaBean Service Class를 사용하여 사용자가 요청한 작업을 처리하고 그 결과를 출력

Model1 방식으로 웹서비스를 개발하는 사례는 백엔드와 프론트엔드의 역할 분담이 모호해져
협업이 쉽지 않으며 실제 서비스들 중에서 거의 없다고 봐도 무방하다.

Model2

https://cocoon1787.tistory.com/733

모델2 방식은 사용자의 요청을 서블릿이 받고 서블릿은 해당 요청으로 View로 보여줄 것인지 Model로 보낼 것인지를 판단하여 전송한다. 또한 모델2 방식의 경우 HTML소스와 JAVA소스를 분리해놓았기 때문에 모델1 방식에 비해 확장시키기도 쉽고 유지보수 또한 쉽다.

출처

https://junhyunny.github.io/information/design-pattern/mvc-pattern/

https://cocoon1787.tistory.com/733

[개념은 호옹~, 실습 빡] 스프링 부트, 입문!