hyeon_geun.log

[JS] Vanilla javascript 로 테트리스 만들기

Thu, 17 Aug 2023 03:13:19 GMT

🧸 Intro

Vanilla javascript 로 할만한 간단한 프로젝트가 뭐가 있을까 고민을 하다가 유튜브 강의 중에 바닐라 자바스크립트로 테트리스 만들기가 있어서 한 번 따라 만들어 봤다.

https://www.youtube.com/watch?v=1lNy2mhvLFk

🎲 Function

기본적인 테트리스 게임의 기능만 구현했다. (시간이 된다면 CSS 및 다른 기능들을 추가할 예정이다)

블록 생성 및 제거

게임을 시작했을 때와 블록이 다 내려왔을 때, 새로운 블록을 랜덤으로 생성한다. 생성된 블록은 일정한 속도로 내려온다.
(점수가 높아질수록 속도 추가예정 ..)*
한 줄이 블록으로 모두 차게 되면, 해당 라인을 제거하고 최상단에 새로운 라인을 추가한다.
라인을 제거하면 점수를 추가한다.
(한 번에 많이 제거하면 점수 ++ 예정)*

주요 코드

function prependNewLine(){
    const li = document.createElement("li");
    const ul = document.createElement("ul");
    for (let j = 0; j < GAME_COLS; j++) {
        const matrix = document.createElement("li");
        ul.prepend(matrix);
    }
    li.prepend(ul);
    playground.prepend(li);
}

function renderBlocks(moveType=""){
    //변수에 바로 접근할 수 있도록 선언.
    const { type, direction, top, left } = tmpMovingItem;
    const movingBlocks = document.querySelectorAll(".moving");
    movingBlocks.forEach((moving) =>{
        moving.classList.remove(type, "moving");
    })
    // forEach 대신 some 사용 > 원하는 시점에 멈출 수 있게
    BLOCKS[type][direction].some(block=>{
        const x = block[0] + left;
        const y = block[1] + top;
        const target = playground.childNodes[y] ? playground.childNodes[y].childNodes[0].childNodes[x] : null;
        const isAvailable = checkEmpty(target);
        if (isAvailable) {
            target.classList.add(type, "moving");
        } else {
            tmpMovingItem = { ... movingItem }
            if(moveType === 'retry'){
                clearInterval(downInterval);
                showGameOverText();
            }
            //콜스택 에러방지
            setTimeout(()=>{
                renderBlocks('retry');
                if(moveType === "top"){
                    seizeBlock();
                }
            }, 0)
            return true;
        }
    })
    movingItem.left = left;
    movingItem.top = top;
    movingItem.direction = direction;
}

블록의 위치

좌,우 방향키를 눌렀을 때 블록 위치를 좌,우로 옮긴다.
아래 방향키를 눌렀을 때 블록을 아래로 내린다.
위 방향키를 눌렀을 때 블록의 모양을 바꾼다.
블록을 이동시킬 때 격자를 넘어가지 못하게 한다.
블록이 더이상 내려가지 못하면 새로운 블록을 생성한다.

주요 코드

document.addEventListener("keydown", (e)=>{
    switch (e.keyCode){
        case 39:
            moveBlock("left", 1);
            break;
        case 37:
            moveBlock("left", -1);
            break;
        case 40:
            moveBlock("top", 1);
            break;
        case 38:
            chageDirection();
            break;
        case 32:
            dropBlock();
            break;
        default :
            break;
    }
})

게임 시작 및 종료

새로운 블록이 생성될 수 없을 때 게임 종료 메세지를 띄운다.
게임 종료 시 다시 시작 버튼을 누르면 게임을 시작할 수 있다.
재시작시 점수와 게임 화면을 리셋한다.

주요 코드*

function init(){
   // 값만 따오는 것이기 때문에 tmpMovingItem 은 변경 x >> 값을 복사
   tmpMovingItem = { ...movingItem };
   for (let i = 0; i < GAME_ROWS; i++) {
       prependNewLine();
   }
   generateNewBlock();
}

GitHub [전체 코드]

https://github.com/hyeongeunee/ToyPJ_TETRIS

💡 만들면서 배운 것

🔎 반복문 사용하기

반복문을 사용할 때 상황에 따라 some()이나 every()를 사용해보자 !

forEach를 쓰게 되면 반복문을 중단할 수 없다.

some() 성능을 위해 조건을 만족하는 값이 발견되면 그 즉시 순회가 중단된다 (Return True)

사용 예시

var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return true }
    console.log(el)
})


// 출력
> 1

--------------
var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return false }
    console.log(el)
})

// 출력
> 1
> 3
> 4
> 5

every() 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환

사용 예시

var testArr = [1, 2, 3, 4, 5]

testArr.every(el => el > 3); // false
testArr.every(el => el >= 1); // true

🔎 Wrapper의 개념

wrapper는 단일 요소를 감싸는 경우 사용한다 !

단일 요소를 감싸는 div인 경우 wrapper를, 여러 요소를 감싸는 경우 container를 사용한다고 한다.

사용 예시

🔎 얕은 복사에 대해서...

객체를 복사할 때 얕은 복사를 조심하자 ! movingItem은 이전의 상태를 불러오기 위해 사용하는 객체이므로 spread 연산자를 활용하여 프로퍼티를 깊은 복사했다.

const tempMovingItem = { ...movingItem } 이와 같이 객체를 복사하면 얕은 복사가 되기 때문에 tempMovingItem의 값을 변경하게 되면 원본인 movingItem도 같이 변하게 된다.

🤔 얕은 복사 (Shllow Copy)

얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다.

객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

사용 예시

const obj = { a: 1 };
const copyObj = obj;

copyObj.a = 2;

console.log(obj.a); // 2
console.log(obj === copyObj); // true

🤔 깊은 복사 (Deep Copy)

깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

사용 예시

const a = 1;
const b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

React Lifecycle

Thu, 17 Aug 2023 02:50:11 GMT

🌱 React Lifecycle

React는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명 주기가 존재한다.

React에서는 생성(Mount) -> 업데이트(Update) -> 제거(Unmount)의 생명주기를 갖는다.

🤔 Mount

DOM이 생성된 후, 웹 브라우저에 최종적으로 나타나는 것을 mount라고 한다.

constructor 컴포넌트 생성자 메서드이자, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드. 이 메서드에서는 초기 state를 정할 수 있다.
render 컴포넌트를 렌더링하는 메서드. 가장 기초적이자 가장 중요한 메서드이다.
componenetDidMount 컴포넌트의 첫 렌더링이 끝난 후 실행되는 메서드이고, 이 메서드가 실행되는 시점에는 이미 컴포넌트가 화면에 출력된 상태 여기서는 주로 DOM을 사용해야 하는 외부 라이브러리 연동, axios, fetch등을 사용해서 데이터를 요청하는 작업들을 진행한다.

🤔 Update

컴포넌트가 업데이트 되는 시점 즉, 리렌더링을 완료한 후에 실행된다.

getDerivedStateFromProps 리액트에서의 컴포넌트 업데이트 감지는 현재 컴포넌트에서 state나 props의 변경 유무로만 판단한다. 이 때 사용되는 메서드가 getDerivedStateFromProps이다.

if, state의 변경이 일어났다면? 리액트는 효율적으로 state의 변경사항을 감지해 다시 변경된 부분을 그려준다.

componentDidUpdate 컴포넌트의 변경이 완료되었을 때 실행되는 메서드이다. 의존성 배열이 변할때만 useEffect가 실행하는 것과 같다.

🤔 Unmount

unmount는 컴포넌트가 화면에서 사라지는 것을 뜻한다.

componentWillUnmount 이 메서드는 컴포넌트가 사라지기 전에 호출된다. 주로 DOM에서 직접 등록했던 이벤트를 제거하는 등의 작업을 한다. 여기서는 컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다. (setInterval, eventListener 등)

참고

https://react.vlpt.us/basic/25-lifecycle.html

React #1

Thu, 17 Aug 2023 02:21:53 GMT

💡 React 생성

Node.js install
npm / yarn install
IDE install (visual studio code)
Git install
터미널에 create-react-app 명령어로 프로젝트 생성

npx create-react-app 프로젝트명

🤔 useState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.

만약 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 useState를 사용하면 된다.

사용 예시

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    
      
        현재 카운터 값은 {count} 입니다.
      
      
      
    
  );
};

🤔 useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.

사용 예시

const UnmountTest = () => {
    useEffect(() => {
        console.log('Mount!');

        return () => {
            // Unmount 시점에 실행되게 함
            console.log('Unmount!');
        };
    }, []);
    return Unmount Testing Component;
};

주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있다.

props 로 받은 값을 컴포넌트의 로컬 상태로 설정
외부 API 요청 (REST API 등)
라이브러리 사용 (D3, Video.js 등...)
setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

언마운트 시에 하는 작업들은 다음과 같은 사항이 있다.

setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
라이브러리 인스턴스 제거

🤔 useContext

일반적인 React 데이터는 props를 통해서 부모에서 자식에게 전달 되지만, 어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것이다.

데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다

createContext -context 객체 생성 Provider ** -생성한 context를 하위 컴포넌트에게 전달 **Consumer -context의 변화를 감시

const ThemeContext = React.createContext();

function App() {
  const theme = /* some theme data */;
  return (
    
      
      
    
  );
}

function Header() {
  const theme = useContext(ThemeContext);
  // Header 컴포넌트에서 theme 사용
}

function MainContent() {
  const theme = useContext(ThemeContext);
  // MainContent 컴포넌트에서 theme 사용
}

Maven & Gradle

Thu, 17 Aug 2023 01:09:55 GMT

🤔 Maven

Maven은 자바 프로젝트의 빌드(build)를 자동화 해주는 빌드 툴(build tool)이다.

Maven에 관한 자세한 내용은 아래 링크에 정리되어 있다.

https://velog.io/@hyeon_geun/Maven

📖 Gradle

Gradle이란 기본적으로 빌드 배포 도구(Build Tool)이다. 안드로이드 앱을 만들때 필요한 공식 빌드시스템이기도 하며 JAVA, C/C++, Python 등을 지원한다.

기본 메이븐의 경우 XML로 라이브러리를 정의하고 활용하도록 되어 있으나, Gradle의 경우 별도의 빌드스크립트를 통하여 사용할 어플리케이션 버전, 라이브러리등의 항목을 설정 할 수 있다.

장점으로는 스크립트 언어로 구성되어 있기때문에, XML과 달리 변수선언, if-else, for등의 로직이 구현가능하여 간결하게 구성 가능하다.

라이브러리 관리 : 메이븐 레파지토리를 동일하게 사용할 수 있어서 설정된 서버를 통하여 라이브러리를 다운로드 받아 모두 동일한 의존성을 가진 환경을 수정할 수 있다. 자신이 추가한 라이브러리도 레파지토리 서버에 올릴 수 있다.
프로젝트 관리 : 모든 프로젝트가 일관된 디렉토리 구조를 가지고 빌드 프로세스를 유지하도록 도와준다.
단위 테스트 시 의존성 관리 : junit 등을 사용하기 위해서 명시한다.

** 사용 예시 **

// 자바를 컴파일하기 위해 java plugin을 설정한다. 
apply plugin: 'java' 
// application으로 컴파일하기 위해 설정한다. 
apply plugin: 'application' 

//저장소를 입력하는 섹션이다. 주로 Maven의 저장소를 그대로 사용한다.
repositories { 
    mavenCentral()
}
//종속성을 입력하는 섹션이다. 기존에는 compile이 있었으나 3.0버전부터 deprecated 되었다.
dependencies {
    //'group:name:version' 순으로 적는다. group: 'junit', name: 'junit', version: '4.12'식으로도 가능하다.
    api 'com.google.guava:guava:22.0' //간접 의존, 직접 의존하는 모든 모듈을 rebuild 한다
    implementation 'junit:junit:4.12' //직접 의존하는 모듈만 rebuild 한다.
} 
application {
    // 메인 class의 위치와 이름을 적는다.
    mainClass = 'package.name.AppClass'
}

Gradle 특징

가독성이 좋다 : 코딩에 의한 간결한 정의가 가능하므로 가독성이 좋다.
재사용에 용이 : 설정 주입 방식(Configuration Injection)을 사용하므로 재사용에 용이하다.
*구조적인 장점 * : Build Script를 Groovy 기반의 DSL(Domail Specific Language)를 사용하여 코드로서 설정 정보를 구성하므로 구조적인 장점이 있다.
편리함 : Gradle 설치 없이 Gradle wrapper를 이용하여 빌드를 지원한다.
멀티 프로젝트 : Gradle은 멀티 프로젝트 빌드를 지원하기 위해 설계된 빌드 관리 도구이다.
지원 : Maven을 완전 지원한다.

💡 Gradle vs Maven

빌드 속도가 Maven에 비해 10~100배 가량 빠르다.

Spring Boot #2

Thu, 17 Aug 2023 00:55:40 GMT

📌 Component

구성요소라는 뜻으로 독립적인 단위 모듈을 뜻한다. 스프링 부트에선 IoC 컨테이너에 등록된 클래스를 뜻한다.

@Component 어노테이션을 사용해 직접 작성한 클래스를 IoC 컨테이너에 등록 할 수 있다.

Controller Component란?

Client의 요청을 직접적으로 받는 Component이다. Cleint가 url을 통한 요청을 보내면 해당 url에 매칭되는 Controller가 해당 요청을 handle한다.

🤔 Controller

@Controller 어노테이션을 통해 생성한 컨트롤러는 전통적인 Spring MVC Framework에서 주로 사용하는 컨트롤러이다. 이 컨트롤러의 주요 목적은 View를 반환하기 위함이다. 즉, Client에 요청에 따라 그에 맞는 View를 찾아 반환해주는 역할을 수행한다.

사용 예시

@Controller
@RequestMapping("/user")
public class UserController {

    @Resource(name = "userService")
    private UserService userService;

    @PostMapping(value = "/info")
    public @ResponseBody User info(@RequestBody User user){
        return userService.retrieveUserInfo(user);
    }

    @GetMapping(value = "/infoView")
    public String infoView(Model model, @RequestParam(value = "userName", required = true) String userName){
        User user = userService.retrieveUserInfo(userName);
        model.addAttribute("user", user);
        return "/user/userInfoView";
    }

}

@RestController

@RestController는 @Controller에 @ResponseBody 어노테이션을 활용해 데이터를 반환하던 것과 같은 역할을 수행한다. 즉, @RestController는 View가 아니라 JSON와 같은 데이터를 반환하는 용도로 사용된다.

사용 예시

@RestController
@RequestMapping("/user")
public class UserController {

    @Resource(name = "userService")
    private UserService userService;

    @PostMapping(value = "/info1")
    public User info1(@RequestBody User user){
        return userService.retrieveUserInfo(user);
    }

    @PostMapping(value = "/info2")
    public ResponseEntity info2(@RequestParam(value = "userName", required = true) String userName){
        User user = userService.retrieveUserInfo(userName);

        if(user == null){
            return ResponseEntity.noContent().build()
        }

        return ResponseEntity.ok(user)
    }

    @PostMapping(value = "/info3")
    public ResponseEntity info3(@RequestParam(value = "userName", required = true) String userName){
        return Optional.ofNullable(userService.retrieveUserInfo(userName))
                .map(user -> ResponseEntity.ok(user))
                .orElse(ResponseEntity.noContent().build());
    }
}

🤔 WebConfig

SpringBoot에서 WebConfig 설정을 할 때,@EnableWebMvc, WebMvcConfigurer를 설정하는 방법이 있다.

@EnableWebMvc를 사용하거나 WebMvcConfigurer를 구현하지 않으면 아래와 같이 WebConfig 설정 시 Bean을 직접 등록해줘야하는 등으로 권장하지 않는 방법이라고 한다.

@Configuration
public class WebConfig {
    @Bean 
    public InternalResourceViewResolver viewResolver() {
           InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
           viewResolver.setPrefix("/WEB-INF/jsp/");
           viewResolver.setSuffix(".jsp");
           return viewResolver;
    }
}

WebMvcConfigurer는 SpringBoot의 자동 설정(WebMvcAutoConfiguration)을 유지하면서 기능을 쉽게 확장할 수 있게 해준다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        registry.jsp("/WEB-INF/jsp/",".jsp");
    }
}

Spring Boot #1

Mon, 17 Jul 2023 07:03:15 GMT

📖 AOP

Aspect Oriented Programming(관점 지향 프로그래밍)의 약어

어떠한 기준을 정하고, 관점을 나누어서 각 관점 별로 모듈화를 하여 사용하는 방식이다.

AOP 의 필요성

일반적인 자바 애플리케이션은 웹 계층, 비즈니스 계층, 데이터 계층 등 여러 계층으로 응용 프로그램을 개발한다.

이때 각 계층의 책임은 다르지만 로깅, 트랜잭션, 보안, 인증, 캐싱 등 공통적인 로직이 필요하다.

이러한 공통적인 로직을 횡단 관심사(cross-cutting concern)이라고 부른다.

공통 로직을 각 계층에서 개별적으로 구현하면, 코드 유지관리가 어려워진다.

이 문제를 극복하기 위해 AOP는 횡단 관심사 구현하는 해결책을 제공한다.

AOP(Aspect Oriented Programming)의 장점

공통 관심 사항을 핵심 관심사항으로부터 분리시켜 핵심 로직을 깔끔하게 유지할 수 있다.
그에 따라 코드의 가독성, 유지보수성 등을 높일 수 있다.
각각의 모듈에 수정이 필요하면 다른 모듈의 수정 없이 해당 로직만 변경하면 된다.
공통 로직을 적용할 대상을 선택할 수 있다

AOP는 횡단 관심사의 분리를 통해 공통 기능을 한 곳에 정의하여 모듈성을 증가시킨다.

스프링은 내부에서 트랜잭션 관리, 캐싱, 보안 등의 선언적인 서비스를 구현하기 위해 Spring AOP 프레임워크를 제공한다.

스프링 프레임워크 대신 AspectJ를 애플리케이션에서 AOP 프레임워크로 사용할 수도 있다.

📌 1. 의존성 추가

Maven


    org.springframework.boot
    spring-boot-starter-aop
    2.5.5

Gradle

implementation group: 'org.springframework.boot', name: 'spring-boot-starter-aop', version: '2.5.5'

📌 2. @EnableAspectAutoProxy 적용

main 메소드를 갖는 Application 클래스에 @ Annotation을 추가

예시

JavaConfig

@Configuration
@EnableAspectJAutoProxy
public class JavaConfig {

    // MessengerAspect 를 bean 으로 만들기
    @Bean
    public MessengerAspect msa() {
        return new MessengerAspect();
    }
}

Application

@SpringBootApplication
public class Boot02AopApplication {

    public static void main(String[] args) {
        ApplicationContext ctx = SpringApplication.run(Boot02AopApplication.class, args);

        Messenger m1 = ctx.getBean(Messenger.class);
        String msg = m1.getMessage();
        System.out.println("Messenger 객체로부터 받은 메세지 : " + msg);

        m1.sendGreeting("안녕하세요");
        m1.sendGreeting("안녕 바보야");
        m1.sendGreeting("또 만났군요!");
    }
}

📌 3. 공통기능 정의와 공통기능 사용될 시점 정의(Advice or Aspect)

@Aspect, @Component 라는 어노테이션을 함께 붙여준다.
Advice 어노테이션 @Before, @After, @Around 등의 어노테이션을 메서드 단위에 붙여준다.
Advice 어노테이션에는 Point-cut 문법으로 부가기능을 적용할 대상을 설정한다.
부가기능의 적용 대상은 메서드 단위이다.
실제 부가기능을 수행하는 메서드를 Advice라고 부르기도 한다.
Advice 어노테이션, Point-cut 문법, Advice 메서드를 통틀어 Aspect라고 한다.

Advice 종류

@Before Target 메소드 호출 전에 적용

@AfterReturning Target 메소드 호출 후 적용
@AfterThrowing Target에서 예외 발생 후 적용
@After Target 메소드 호출 후 예외 발생에 상관없이 적용
@Around Target 메소드 호출 전/후 적용

** 실행순서**

** 사용 예시 **

@Aspect
public class MessengerAspect {

    @Around("execution(void send*(..))")
    public void checkGreeting(ProceedingJoinPoint joinPoint) throws Throwable {

        // aspect 가 적용된 메소드가 호출되기 직전에 할 작업은 여기서 한다.

        // 메소드에 전달된 인자들 목록 얻어내기
        Object[] args = joinPoint.getArgs();
        for (Object tmp : args) {
            // 만일 String type 이면
            if (tmp instanceof String) {
                // 원래 type 으로 casting
                String msg = (String) tmp;
                System.out.println("aspect 에서 읽어낸 내용: " + msg);
                if (msg.contains("바보")) {
                    System.out.println("바보는 금지된 단어입니다.");
                    return; // 메소드 끝내기
                }
            }
        }

        // aspect 가 적용된 메소드가 호출되기 직전에 할 작업은 proceed() 호출 전에 한다.

        // proceed() 를 호출해야 aspect 가 적용된 메소드가 실행이 된다.
        joinPoint.proceed();

        // aspect 가 적용된 메소드가 호출되기 직전에 할 작업은 proceed() 호출 이후에 한다.

        System.out.println("aspect 가 적용된 메소드가 리턴했습니다.");
    }

    /*
        return type 은 String 이고
        get 으로 시작은 메소드 이고
        메소드에 전달되는 인자는 없다
        java.lang 패키지에 있는 type 은 패키지명 생략 가능
     */
    @Around("execution(String com.example.aop.util.*.get*())")
    public Object checkReturn(ProceedingJoinPoint joinPoint) throws Throwable {

        // aspect 가 적용된 메소드를 수행하고 리턴되는 데이터 받아오기
        Object obj = joinPoint.proceed();

        // 원래 type 으로 casting 해서 조사해볼 수가 있다.
        String a = (String) obj;

        // 조사 후 아예 다른 값을 리턴해 줄 수도 있다.
        return "놀자 ~~";
    }
}

🤔 정리

AOP는 핵심기능(Core Concerns)과 부가기능 (Cross Cutting Concerns)을 분리하여 개발할 수 있게 해 준다.
부가기능에 해당하는 코드인 어드바이스와 적용한 위치를 문법적으로 표현한 포인트 컷을 합친 개념이 Aspect이다.
스프링 AOP는 메소드 조인 포인트만 지원하여 간단하게 쉽게 AOP를 구현할 수 있다.
포인트 컷의 문법을 이용하여 원하는 위치에 부가기능 어드바이스를 추가할 수 있다.
Advice는 타깃 객체 이전과 이후 그리고 이전/이후 모두에 적용 가능하다.

Spring #4

Tue, 11 Jul 2023 02:47:50 GMT

📖 인터셉터(Interceptor)

'가로채다' 라는 의미가 있다. 위의 의미와 같이 Client에서 Server로 보낸 Request를 Controller에 도달하기 전 가로채도록 하는 역할을 한다. Dispatcher Servlet이 Controller를 호출하기 전 / 후에 인터셉터가 끼어들어 요청과 응답을 참조하거나 가공할 수 있는 기능을 제공한다.

웹 컨테이너에서 동작하는 필터와 달리 인터셉터는 스프링 컨텍스트에서 동작한다.

디스패처 서블릿이 핸들러 매핑을 통해 컨트롤러를 찾도록 요청하는데, 그 결과로 실행 체인(HandlerExecutionChain)을 돌려준다. 여기서 1개 이상의 인터셉터가 등록되어 있다면 순차적으로 인터셉터들을 거쳐 컨트롤러가 실행되도록 하고, 인터셉터가 없다면 바로 컨트롤러를 실행한다.

실제로 Interceptor가 직접 Controller로 요청을 위임하는 것은 아니다.

💡 Interceptor 의 장점

누락에 대한 위험 감수

코드 재사용성을 증가 시켜 메모리 낭비, 서버 부하 감소 가 있다.

📌 Interceptor 의 메소드 종류

인터셉터를 추가하기 위해서 org.springframework.web.servlet의 HandlerInterceptor 인터페이스를 구현(implements) 해야 하며, 다음과 같은 메소드를 가진다.

public interface HandlerInterceptor {

    default boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
// View의 모든 작업이 완료된 후 실행된다.
// 리소스를 반환해주기 적당한 메소드이다.
        return true;
    }

    default void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
            @Nullable ModelAndView modelAndView) throws Exception {
// Controller 가 실행 후 View 가 생성되기 이전에 호출한다.
// ModelAndView 를 통해 View 에 들어가는 데이터를 조작할 수 있다.
    }

    default void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
            @Nullable Exception ex) throws Exception {
// Controller 가 호출되기 전에 실행된다.     // Controller 실행 전 처리할 작업이나 정보를 가공, 추가하는 경우 사용된다.
// return 값이 true 일 경우 정상적으로 Controller 로 접근하고
// false 일 경우 Controller 에 접근하지 않는다.
    }

preHandle()
- Controller가 호출되기 전에 실행된다.
- Controller 실행 전 처리할 작업이나 정보를 가공, 추가하는 경우 사용된다.
- return 값이 true일 경우 정상적으로 Controller로 접근하고
- false일 경우 Controller에 접근하지 않는다.
  >
postHandle()
- Controller가 실행 후 View가 생성되기 이전에 호출한다.
- ModelAndView를 통해 View에 들어가는 데이터를 조작할 수 있다.
  >
afterCompletion()
- View의 모든 작업이 완료된 후 실행된다.
- 리소스를 반환해주기 적당한 메소드이다.

사용 예시 LoginInterceptor

// 로그인된 사용자인지 검사할 인터셉터
public class LoginInterceptor implements HandlerInterceptor {
    // Controller 메소드 수행직전에 로그인된 사용자 인지 검증을 해서
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
        throws Exception {
        // 세션 객체의 참조값을 얻어와서
        HttpSession session = request.getSession();
        String id = (String) session.getAttribute("id");
        // 만일 로그인을 하지 않았다면
        if (id == null) {
            // 로그인 페이지로 리다일렉트 이동시키고 false 를 리턴한다.

            // 원래 가려던 url 정보 읽어오기
            String url = request.getRequestURI();
            // GET 방식 전송 파라미터를 query 문자열로 읽어오기 ( a=xxx&b=xxx&c=xxx )
            String query = request.getQueryString();
            // 특수 문자는 인코딩을 해야한다.
            String encodedUrl;
            if (query == null) {// 전송 파라미터가 없다면
                encodedUrl = URLEncoder.encode(url);
            } else {
                // 원래 목적지가 /test/xxx.jsp 라고 가정하면 아래와 같은 형식의 문자열을 만든다.
                // "/test/xxx.jsp?a=xxx&b=xxx ..."
                encodedUrl = URLEncoder.encode(url + "?" + query);
            }

            // 3. 로그인을 하지 않았다면  /users/loginform 페이지로 리다일렉트 이동 시킨다. (HttpServletResponse)
            String cPath = request.getContextPath();
            response.sendRedirect(cPath + "/users/loginform?url=" + encodedUrl);
            return false;
        }
        // 로그인을 했다면 흐름을 이어간다.
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                           ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
        throws Exception {

    }
}

🤔 필터(Filter)와 인터셉터(Interceptor)의 차이 및 비교

필터는 Request와 Response를 조작할 수 있지만, 인터셉터는 조작할 수 없다.

public class MyFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
    throws IOException, ServletException {
        // 다른 request와 response를 넣어줄 수 있음
        chain.doFilter(request, response);
    }
}

필터가 다음 필터를 호출하기 위해서는 필터 체이닝(다음 필터 호출)을 해주어야 한다. 이때 request, response 객체를 넘겨주므로 우리가 원하는 request, response 객체를 넣어줄 수 있다.

하지만 인터셉터는 처리 과정이 필터와 다르다.

public class MyInterceptor implements HandlerInterceptor {

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) 
    throws Exception {
        // Request, Response를 교체할 수 없고 boolean 값만 반환 가능
        return true;
    }
}

디스패처 서블릿이 여러 인터셉터 목록을 가지고 있고, 순차적으로 실행시킨다. true를 반환하면 다음 인터셉터가 실행되거나 컨트롤러로 요청이 전달되며, false가 반환되면 요청이 중단된다. 그러므로 다른 request, response 객체를 넘겨줄 수 없다.

Filter 와 Interceptor 의 사용 사례

Filter 의 사용 사례

보안 및 인증/인가 관련 작업
모든 요청에 대한 로깅 또는 검사
이미지/데이터 압축 및 문자열 인코딩
Spring과 분리되어야 하는 기능

필터는 기본적으로 스프링과 무관하게 전역적으로 처리해야 하는 작업들을 처리할 수 있다. 또한, 이미지나 데이터의 압축, 문자열 인코딩과 같이 웹 어플리케이션에 전반적으로 사용되는 기능을 구현하기에 적당하다.

Interceptor 의 사용 사례

세부적인 보안 및 인증/인가 공통 작업
API 호출에 대한 로깅 또는 검사
Controller로 넘겨주는 정보(데이터)의 가공

인터셉터에서는 클라이언트의 요청과 관련되어 전역적으로 처리해야 하는 작업들을 처리할 수 있다.

Spring #3

Mon, 10 Jul 2023 09:04:16 GMT

MyBatis

SQL Mapping 프레임워크로 흔히 분류된다. 개발자들은 JDBC 코드의 복잡하고 지루한 작업을 피하기 위해 사용한다.

<전통적인 JDBC프로그램과 MyBatis의 구조 비교>

전통적인 JDBC프로그램
- 직접 Connection을 맺고 마지막에 close()
- PreparedStatement 직접 생성 및 처리
- PreparedStatement의 setXXX() 등
- Select 경우 ResultSet 직접 처리
MyBatis
- 자동으로 Connection close() 가능
- MyBatis 내부적으로 PreparedStatement 처리
- #{prop} 과 같이 속성 지정하여 자동 처리
- 리턴 타입을 지정하는 경우 자동으로 객체 생성 및 ResultSet 처리

스프링은 다른 프레임워크들과의 연동을 쉽게 하는 추가적인 라이브러리들이 많다. MyBatis 또한 mybatis-spring 이라는 라이브러리를 통해 쉽게 연동이 가능하다.

MyBatis 관련 라이브러리


    org.mybatis
    mybatis
    3.4.6



    org.mybatis
    mybatis-spring
    1.3.2



    org.springframework
    spring-tx
    ${org.springframework-version}




    org.springframework
    spring-jdbc
    ${org.springframework-version}

MyBatis의 주요 Component와 동작 과정을 그림으로 표현하면 다음과 같다.

MyBatis Config 파일을 읽어 SqlSessionFactoryBuilder 객체를 생성한다. MyBatis Config 파일에는 DB설정 정보, mapper 파일 등록, typeAlias설정 등이 들어있다.

SqlSessionFactoryBuilder 객체를 이용해 SqlSessionFactory 객체를 생성한다.

SqlSessionFactoryBuilder는 단순히 SqlSessionFactory 객체를 생성해주기 위한 용도다.

앱 실행 중(런타임)에 CRUD처리가 들어오면 SqlSessionFactory로 SqlSession 객체를 생성한다.

SqlSession 객체를 이용해 DB요청을 한 후, 결과값을 받아온다.

먼저 MyBatis Config 파일은 XML로 작성하고, 다음과 같이 작성할 수 있다.

아래 MyBatis Config XML 파일은 4개의 정보를 설정하고 있다.

: 프로퍼티 파일을 정의합니다.
: mapper.xml에서 사용할 alias를 설정합니다. (긴 패키지 경로 대신 짧은 단어 하나로 사용하기 위해)
: DB 정보를 설정합니다. 에 ${driver}로 적은 것은 위 에서 가져온 내용을 대입한다는 의미입니다.
: 어떤 XML 파일이 mapper 파일인지를 설정합니다.

SQLSessionFactory

SQLSession은 개발자가 이를 통해 Connection을 생성하거나 원하는 SQL을 전달하고, 결과를 리턴 받는 구조로 작성하게 된다.

Mapper

Mapper을 작성하는 것은 XML을 이용할 수도 있지만 인터페이스로도 가능하다.

MyBatis가 동작할 때 이 Mapper를 인식할 수 있도록 root-context.xml에 설정을 해야한다. 가장 간단한 방법은 태그를 이용하는 것이다.

root-context.xml > Namespaces > mybatis-spring 탭 선택 아래 코드 작성한다.

base-package속성은 지정된 패키지의 모든 MyBatis 관련 어노테이션을 찾아 처리한다.
** Mapper 사용 예시
**[Configuration.xml]

[UserMapper.xml]




    
        INSERT INTO USER_TB
            (ID, PWD, EMAIL, REGDATE)
        VALUES (#{id}, #{pwd}, #{email}, SYSDATE)
    

    

    
        UPDATE USER_TB
        SET PWD = #{newPwd}
        WHERE ID = #{id}
    

    
        UPDATE USER_TB
        SET EMAIL = #{email}, PROFILE = #{profile}
        WHERE ID = #{id}
    

    
        DELETE FROM USER_TB
        WHERE ID = #{id}

Spring 프로젝트 생성(IntelliJ + Maven)

Thu, 06 Jul 2023 02:41:19 GMT

인텔리제이(IntelliJ)에서 스프링 MVC 프로젝트 생성

프로젝트를 구성하는 방법은 여러 가지가 있겠지만, 여기선 우선 Maven으로 프로젝트를 생성하고 Spring MVC 프레임워크를 추가하여 기본 틀을 만든 뒤에 라이브러리를 Maven으로 관리할 수 있도록 설정할 것이다.
(이클립스와 최대한 개발 환경 맞추기...😥)

1. 프로젝트 생성

New Project에서 Maven을 선택하고 JDK 버전을 설정한 뒤, Archetype을 org.apache.maven.archetypes:maven-archetype-webapp 으로 선택한 뒤 생성한다.

2. pom.xml 에 dependency 추가

다른 블로그들을 참고해보면 프로젝트에서 Add FrameWork Support ... 를 통해서 Spring MVC 를 추가하는데, 나는 눈을 씻고 찾아봐도 안나와서 dependency 에서 직접 추가했다.. 🤮

https://mvnrepository.com/ 에서 필요한 dependency 를 찾아서 추가한다. 💡 종류가 여러 개 있어서 뭘 추가해야하는지 모를 땐 그냥 많이 다운받은 걸로 하면 된다 !

pom.xml springMVC, tomcat, jstl, jsp, servelt 추가


        
            junit
            junit
            3.8.1
            test
        
>
        
        
            org.springframework
            spring-webmvc
            3.0.1.RELEASE
        
>
        
        
            javax.servlet
            jstl
            1.2
        
>
        
        
            org.apache.tomcat
            tomcat-jsp-api
            8.5.88
        
>
        
        
            org.apache.tomcat
            tomcat-servlet-api
            8.5.88
        
>

pom.xml에 dependency 를 작성하고 나면 우측에 Maven 마크가 뜨는데 누르면 알아서 라이브러리에 추가해준다.

Spring MVC에서 기본적으로 설정해야 하는 dependency

slf4j

https://mvnrepository.com/artifact/org.slf4j/slf4j-api
  
      org.slf4j
      slf4j-api
      1.7.36

lombok

https://mvnrepository.com/artifact/org.projectlombok/lombok
  
      org.projectlombok
      lombok
      1.18.22
      provided

logback-classic

https://mvnrepository.com/artifact/ch.qos.logback/logback-classic
  
      ch.qos.logback
      logback-classic
      1.2.10

jackson-databind

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
  
      com.fasterxml.jackson.core
      jackson-databind
      2.13.1

spring framework 관련 dependency
spring-framework-bom

https://mvnrepository.com/artifact/org.springframework/spring-framework-bom
이 dependency는 spring-framework의 version 관리를 해준다.
지금까지는 RELEASE의 최고 버전 사용 중.
  
      org.springframework
      spring-framework-bom
      5.2.19.RELEASE
      import
      pom

bom에서 따로 버전을 관리하기 때문에 이름만 변경해주면 동일하게 사용할 수 있다. 1. spring-web 2. spring-webmvc

  
      org.springframework
      spring-`사용할 dependency명`

spring-framework-bom을 사용하지 않을 경우 1. spring-web

https://mvnrepository.com/artifact/org.springframework/spring-web
      
          org.springframework
          spring-web
          5.2.19.RELEASE

2. spring-webmvc

    https://mvnrepository.com/artifact/org.springframework/spring-webmvc
      
          org.springframework
          spring-webmvc
          5.2.19.RELEASE

spring security 관련 dependency spring-security-bom

https://mvnrepository.com/artifact/org.springframework.security/spring-security-bom
위의 spring-security-bom의 version 관리해준다.
원래 spring-framework-bom의 버전보다 낮은 버전을 사용하는 게 훨씬 안전하지만 둘 다 RELEASE 버전을 사용하고 있기 때문에 그냥 제일 높은 버전을 사용함.
  
      org.springframework.security
      spring-security-bom
      5.3.13.REALASE
      pom

> bom에서 버전 관리를 하기 때문에 이름만 변경해주면 동일한 코드가 사용 가능하다. `spring-security-core`, `spring-security-web`, `spring-security-config`, `spring-security-taglibs` ```xml org.springframework.security spring-security-'사용할 dependency명' ``` > `servlet-api` ``` https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api 웹 관련 요청에 대하여 동적인 처리를 도와주는 기술 javax.servlet javax.servlet-api 4.0.1 provided ``` `jsp-api` ``` https://mvnrepository.com/artifact/javax.servlet.jsp/javax.servlet.jsp-api java 언어를 기반으로 웹 서비스를 제공하기 위해 만든 기술 javax.servlet.jsp javax.servlet.jsp-api 2.3.3 provided ``` `jstl` ``` https://mvnrepository.com/artifact/javax.servlet/jstl javax.servlet jstl 1.2 ``` --- **SQL 관련 dependency**
`spring-jdbc` ``` https://mvnrepository.com/artifact/org.springframework/spring-jdbc org.springframework spring-jdbc ``` `commons-dbcp2` ``` https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 org.apache.commons commons-dbcp2 2.9.0 ``` `spring-data-jpa` ``` https://mvnrepository.com/artifact/org.springframework.data/spring-data-jpa org.springframework.data spring-data-jpa 2.3.9.RELEASE ``` `hibernate-core` ``` https://mvnrepository.com/artifact/org.hibernate/hibernate-core org.hibernate hibernate-core 5.6.5.Final ``` `spring-orm` ``` https://mvnrepository.com/artifact/org.springframework/spring-orm org.springframework spring-orm ``` `ojdbc8` ``` com.oracle.database.jdbc ojdbc8 21.1.0.0 ``` --- **MyBatis 관련 dependency**
`mybatis` ``` https://mvnrepository.com/artifact/org.mybatis/mybatis org.mybatis mybatis 3.5.9 ``` `mybatis-spring` ``` https://mvnrepository.com/artifact/org.mybatis/mybatis-spring org.mybatis mybatis-spring 2.0.7 ```

`pom.xml` 전체 코드


    4.0.0
    org.example
    SpringPj
    war
    1.0-SNAPSHOT
    SpringPj Maven Webapp
    http://maven.apache.org
    
        1.8
        4.0.0.RELEASE
        1.6.10
        1.6.6
    
    
        
        
            org.springframework
            spring-context
            4.0.0.RELEASE
            
                
                
                    commons-logging
                    commons-logging
                
            
        
        
            org.springframework
            spring-webmvc
            4.0.0.RELEASE
        

        
        
            org.aspectj
            aspectjrt
            ${org.aspectj-version}
        

        
        
            org.slf4j
            slf4j-api
            ${org.slf4j-version}
        
        
            org.slf4j
            jcl-over-slf4j
            ${org.slf4j-version}
            runtime
        
        
            org.slf4j
            slf4j-log4j12
            ${org.slf4j-version}
            runtime
        
        
            log4j
            log4j
            1.2.15
            
                
                    javax.mail
                    mail
                
                
                    javax.jms
                    jms
                
                
                    com.sun.jdmk
                    jmxtools
                
                
                    com.sun.jmx
                    jmxri
                
            
            runtime
        

        
        
            javax.inject
            javax.inject
            1
        

        
        
            javax.servlet
            javax.servlet-api
            3.1.0
            provided
        
        
            javax.servlet.jsp
            jsp-api
            2.2
            provided
        
        
            javax.servlet
            jstl
            1.2
        

        
        
            junit
            junit
            4.13.1
            test
        
        
        
        
            org.mybatis
            mybatis
            3.2.7
        

        
            org.mybatis
            mybatis-spring
            1.2.2
        
        
        
            org.springframework
            spring-jdbc
            4.0.0.RELEASE
        
        
        
            commons-io
            commons-io
            2.7
        
        
            commons-fileupload
            commons-fileupload
            1.3.1
        
        
        
            com.fasterxml.jackson.core
            jackson-databind
            2.12.7.1
        
        
        
            org.springframework
            spring-aop
            4.0.0.RELEASE
        
        
            org.aspectj
            aspectjweaver
            1.8.0
        
        
        
            org.springframework.security
            spring-security-web
            4.0.0.RELEASE
        
        
        
            org.springframework
            spring-tx
            4.0.0.RELEASE
        
        
        
            com.oracle.database.jdbc
            ojdbc8
            21.1.0.0
        
        
            com.vaadin.external.google
            android-json
            0.0.20131108.vaadin1
        
    

    
        
            
                org.codehaus.mojo
                exec-maven-plugin
                1.2.1
                
                    org.test.int1.Main
                
            
            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    1.8
                    1.8
                
            
        
        SpringPj

pom 요소만 추가하면 기본적인 세팅이 끝난다. 이후에 servlet-context.xml, root-context.xml, Controller.java 등은 개발 환경에 맞게 세팅하면 된다 !

Spring #2

Sun, 02 Jul 2023 13:43:20 GMT

🧷 Client - Web Server - WAS - DB

Web server (정적 리소스 처리): HTML, 이미지 등을 처리하며 잘 죽지 않고 오류화면 HTML을 노출 시킬 수 있다.
WAS, Web Application Server (동적 리소스 처리): 업무 분담으로 과부하를 줄여주며 애플리케이션 로직을 실행시킨다.

📌 Servlet

: 자바를 사용해 웹 페이지를 동적으로 생성하는 서버측 프로그램 혹은 사양

서블릿은 서버에서 처리해야 하는 수많은 업무 중 비즈니스 로직을 제외한 모든 일을 대신 수행해준다. 이는 싱글톤으로 관리되어 공유 변수에 주의하여야 하며 소스코드는 싱글 스레드 프로그래밍하듯 개발하면 된다.

서블릿은 요청/응답 정보를 편리하게 사용할 수 있도록 HttpServletRequest, HttpServletResponse를 사용한다.

HTTP 요청을 하면 WAS는 request, response 객체를 새로 만들어 서블릿 객체를 호출한다. 그럼 그때 개발자는 request 객체에서 HTTP 요청 정보를 꺼내 쓰고, response 객체에 HTTP 응답 정보를 입력하면 된다.

WAS는 response 내용으로 HTTP 응답 정보를 생성해 브라우저로 전달해준다.

📖 Spring MVC

서블릿으로 개발할 때는 뷰를 위한 HTML 코드가 자바 코드와 섞여 복잡했다. 이를 해결하기 위해 JSP를 사용해 뷰를 생성하는 HTML 작업을 분리시켰고 중간중간 동적인 작업이 필요한 부분만 자바 코드를 적용시켰다. 하지만 이 또한 많은 자바 코드가 JSP에 노출되어 JSP가 너무 많은 역할을 떠맡게 된다.

그래서 비즈니스 로직과 뷰를 그리는 작업을 분리하기 위하여 MVC 패턴을 사용하게 되었다.

JSP, Java Server Pages

: HTML 코드에 자바 코드를 넣어 동적 웹 페이지를 생성하는 웹 어플리케이션 도구

MVC 패턴이란 JSP가 처리하던 것을 컨트롤러와 뷰 영역으로 나눈 것이다.

컨트롤러 :HTTP 요청을 받아 파라미터를 검증하고 비즈니스 로직을 수행한다. 그리고 뷰에 전달할 결과 데이터를 조회해 모델에 담는다.
모델 :뷰에 출력할 데이터를 담아둔다. 모델 덕분에 뷰는 화면을 렌더링하는 일에만 집중하면 된다.
뷰 :모델에 담긴 데이터를 사용해 화면을 그린다. (HTML 생성)

[Controller vs Service]

컨트롤러에 비즈니스 로직을 둘 수는 있지만, 이는 컨트롤러가 너무 많은 역할을 담당하게 된다.

그래서 비즈니스 로직을 Service 서비스 계층을 별도로 생성하여 처리한다. 그리고 Controller 컨트롤러는 비즈니스 로직이 있는 서비스를 호출하는 역할을 담당한다.

비즈니스 로직을 변경하면 비즈니스 로직을 호출하는 컨트롤러의 코드도 함께 변경될 수 있다.

MVC 패턴 동작

📌 Front Controller

초기 MVC 패턴은 컨트롤러의 역할과 뷰의 렌더링 역할을 명확히 구분하여 뷰의 코드가 깔끔하고 직관적이도록 해주었다. 하지만 컨트롤러는 중복이 많아 프론트 컨트롤러(Front Controller) 패턴을 도입하게 되었다.

프론트 컨트롤러는 프론트 컨트롤러라는 서블릿 하나로 클라이언트의 요청을 받은 다음 프론트 컨트롤러가 요청에 맞는 컨트롤러를 찾아 호출해주는 역할을 수행한다.

그래서 스프링에서는 DispatcherServlet이 FrontController 패턴으로 구현되어 있어 이를 사용할 수 있다.

Spring MVC 구조

스프링 MVC의 전체 구조를 보면 아래와 같다

DispatcherServlet(Front Controller) : 제일 앞단에서 HTTP Request를 처리하는 컨트롤러
Controller(Handler) : HTTP Request를 처리해 Model을 만들고 View 지정
ModelAndView : Controller에 의해 반환된 Model과 View가 Wrapping 된 객체 (Model은 데이터만 저장하고 ModelAndView는 데이터와 이동하고자 하는 view page를 함께 저장한다.)
ViewResolver : ModelAndView를 처리해 View 그리기

[동작 순서]

핸들러 조회
핸들러 어댑터 조회
핸들러 어댑터 실행
핸들러 실행
ModelAndView 반환
viewResolver 호출
View 반환
뷰 렌더링

📌 Controller의 @RequestMapping

@RequestMapping는 실무에서 많이 쓰인다.

이는 요청 정보를 매핑하는 어노테이션으로 해당 URL이 호출되면 해당 메소드가 실행된다.

@GetMapping
@PostMapping 위와 같이 명확하게 써야한다.

@Controller vs @RestController

@Controller는 반환 값이 String일 때 뷰 이름으로 인식하여 뷰를 찾고 뷰가 랜더링 된다. 반면, @RestController는 반환 값으로 뷰를 찾는 것이 아닌, HTTP 메시지 바디에 바로 입력되어 반환된 문자열을 그대로 노출시킬 수 있다.

** Controller 사용 예시 [HomeController]**

@Controller
public class HomeController {

    // 이 프로젝트의 최상위 경로 요청이 오면
    @RequestMapping("/")
    //생성자에 임의로 객체를 선언할 수 있다.
    public String home(HttpServletRequest request) {
        // home.jsp 페이지에서 필요한 모델(data)를 HttpServletRequest 객체에 담아두기
        List noticeList = new ArrayList();
        noticeList.add("날씨가 많이 더워지고 있어요.");
        noticeList.add("어떡하죠");
        noticeList.add("물을 많이 마셔요");
        request.setAttribute("noticeList", noticeList);
        // /WEB-INF/views/home.jsp 페이지로 forward 이동해서 응답하겠다는 의미
        // "home"이라는 문자열을 리턴하면 앞에 "/WEB-INF/views/"뒤에 ".jsp"가 자동으로 붙는다.
        return "home";
    }

    @RequestMapping(value = "/fortune")
    public String fortune(HttpServletRequest request) {
        //오늘의 운세라고 가정하자
        // String fortuneToday = "오늘은 되는게 없어요";
        String fortuneToday = "오늘은 불금불금~~ 저녁에 맥주 한 잔하게 될 거에요";
        // "fortuneToday" 라는 키값으로 String type 데이터를 담는다
        request.setAttribute("fortuneToday", fortuneToday);
        // "/WEB-INF/views/" + "test/fortune" + ".jsp"
        return "test/fortune";
    }

}

Controller 사용 예시 [UserController]

@Controller
public class UsersController {
    // 의존 객체 주입 받기(DI)
    @Autowired
    private UsersService service;

    /*
        GET 방식 /users/signup_form 요청을 처리할 메소드
        - 요청방식이 다르면 실행되지 않는다.
     */
    @RequestMapping(method = RequestMethod.GET, value = "/users/signup_form")
    public String signupForm() {

        return "users/signup_form";
    }

    // 회원 가입 요청처리
    @RequestMapping(method = RequestMethod.POST, value = "/users/signup")
    public ModelAndView signup(ModelAndView mView, UsersDto dto) {
        // 서비스를 이용해서 DB 에 저장하고
        service.addUser(dto);
        // view page 로 forward 이동해서 응답
        mView.setViewName("users/signup");
        return mView;
    }

    // 로그인 폼 요청 처리
    @RequestMapping(method = RequestMethod.GET, value = "/users/loginform")
    public String loginform() {
        return "users/loginform";
    }

    // 로그인 요청 처리
    @RequestMapping("/users/login")
    public ModelAndView login(ModelAndView mView, UsersDto dto, String url, HttpSession session) {
        /*
            서비스에서 비즈니스 로직을 처리할 때 필요로 하는 객체를 컨트롤러에서 직접 전달을 해주어야 한다.
            주로, HttpServeltRequest, HttpServletResponse, HttpSession, ModelAndView
            등등의 객체이다.
         */
        service.loginProcess(dto, session);

        // 로그인 후에 가야할 목적지 정보를 인코딩 하지 않는 것과 인코딩한 것을 모두 ModelAndView 객체에 담고
        String encodedUrl = URLEncoder.encode(url);
        mView.addObject("url", url);
        mView.addObject("encodedUrl", encodedUrl);

        // view page 로 forward 이동해서 응답한다.
        mView.setViewName("users/login");
        return mView;
    }

    @RequestMapping("/users/logout")
    public String logout(HttpSession session) {
        // 세션에서 id 라는 키값으로 저장된 값 삭제
        session.removeAttribute("id");
        return "users/logout";
    }

    // 개인정보 보기 요청 처리
    @RequestMapping("/users/info")
    public ModelAndView info(HttpSession session, ModelAndView mView) {
        service.getInfo(session, mView);

        mView.setViewName("users/info");
        return mView;
    }

    // 비밀번호 수정폼 요청 처리
    @RequestMapping("/users/pwd_updateform")
    public String pwdUpdateForm() {
        return "users/pwd_updateform";
    }

    // 비밀번호 수정 요청 처리
    @RequestMapping("/users/pwd_update")
    public ModelAndView pwdUpdate(UsersDto dto, ModelAndView mView, HttpSession session) {
        // 서비스에 필요한 객체의 참조값을 전달해서 비밀번호 수정 로직을 처리한다.
        service.updateUserPwd(session, dto, mView);
        // view page 로 forward 이동해서 작업 결과를 응답한다.
        mView.setViewName("users/pwd_update");
        return mView;
    }

    // 개인정보 수정폼 요청 처리
    @RequestMapping("/users/updateform")
    public ModelAndView updateform(HttpSession session, ModelAndView mView) {
        service.getInfo(session, mView);
        mView.setViewName("users/updateform");
        return mView;
    }

    // ajax 프로필 사진 업로드 요청 처리
    @RequestMapping(value = "/users/profile_upload", method = RequestMethod.POST)
    @ResponseBody
    public Map profileUpload(HttpServletRequest request, MultipartFile image) {
        // 서비스를 이용해서 이미지를 upload 폴더에 저장하고 리턴되는 Map 을 리턴해서 json 문자열 응답하기
        return service.saveProfileImage(request, image);
    }

    @RequestMapping(value = "/users/update", method = RequestMethod.POST)
    public ModelAndView update(UsersDto dto, HttpSession session, ModelAndView mView) {
        // 서비스를 이용해서 개인정보를 수정하고
        service.updateUser(dto, session);
        // 개인정보 보기로 리다일렉트 이동시킨다.
        mView.setViewName("redirect:/users/info");
        return mView;
    }

    // 회원 탈퇴 요청 처리
    @RequestMapping("/users/delete")
    public ModelAndView delete(HttpSession session, ModelAndView mView){
        service.deleteUser(session, mView);
        mView.setViewName("users/delete");
        return mView;
    }
}

Service 사용 예시 [CafeService.interface]

public interface CafeService {
    public void getList(HttpServletRequest request);

    public void getDetail(HttpServletRequest request);

    public void saveContent(CafeDto dto);

    public void updateContent(CafeDto dto);

    public void deleteContent(int num, HttpServletRequest request);

    public void getData(HttpServletRequest request); // 글 수정하기 위해 정보 불러오는 기능

    public void saveComment(HttpServletRequest request); // 댓글 저장

    public void deleteComment(HttpServletRequest request); // 댓글 삭제

    public void updateComment(CafeCommentDto dto); // 댓글 수정

    public void moreCommentList(HttpServletRequest request); // 댓글 더보기 기능
}

[CafeServiceImpl]

@Service
public class CafeServiceImpl implements CafeService {
    @Autowired
    private CafeDao cafeDao;

    @Autowired
    private CafeCommentDao cafeCommentDao;

    // 페이징 처리, 검색어 기능을 고려한 비즈니스 로직 처리를 하는 메소드
    @Override
    public void getList(HttpServletRequest request) {
        // 한 페이지에 몇개씩 표시할 것인지
        final int PAGE_ROW_COUNT = 5;
        // 하단 페이지를 몇개씩 표시할 것인지
        final int PAGE_DISPLAY_COUNT = 5;

        // 보여줄 페이지의 번호를 일단 1이라고 초기값 지정
        int pageNum = 1;
        // 페이지 번호가 파라미터로 전달되는지 읽어와 본다.
        String strPageNum = request.getParameter("pageNum");
        // 만일 페이지 번호가 파라미터로 넘어 온다면
        if (strPageNum != null) {
            // 숫자로 바꿔서 보여줄 페이지 번호로 지정한다.
            pageNum = Integer.parseInt(strPageNum);
        }

        // 보여줄 페이지의 시작 ROWNUM
        int startRowNum = 1 + (pageNum - 1) * PAGE_ROW_COUNT;
        // 보여줄 페이지의 끝 ROWNUM
        int endRowNum = pageNum * PAGE_ROW_COUNT;

      /*
         [ 검색 키워드에 관련된 처리 ]
         -검색 키워드가 파라미터로 넘어올수도 있고 안넘어 올수도 있다.
      */
        String keyword = request.getParameter("keyword");
        String condition = request.getParameter("condition");
        // 만일 키워드가 넘어오지 않는다면
        if (keyword == null) {
            // 키워드와 검색 조건에 빈 문자열을 넣어준다.
            // 클라이언트 웹브라우저에 출력할때 "null" 을 출력되지 않게 하기 위해서
            keyword = "";
            condition = "";
        }

        // 특수기호를 인코딩한 키워드를 미리 준비한다.
        String encodedK = URLEncoder.encode(keyword);

        // CafeDto 객체에 startRowNum 과 endRowNum 을 담는다.
        CafeDto dto = new CafeDto();
        dto.setStartRowNum(startRowNum);
        dto.setEndRowNum(endRowNum);

        // 만일 검색 키워드가 넘어온다면
        if (!keyword.equals("")) {
            // 검색 조건이 무엇이냐에 따라 분기 하기
            if (condition.equals("title_content")) { // 제목 + 내용 검색인 경우
                // 검색 키워드를 CafeDto 에 담아서 전달한다.
                dto.setTitle(keyword);
                dto.setContent(keyword);
            } else if (condition.equals("title")) { // 제목 검색인 경우
                dto.setTitle(keyword);
            } else if (condition.equals("writer")) { // 작성자 검색인 경우
                dto.setWriter(keyword);
            } // 다른 검색 조건을 추가 하고 싶다면 아래에 else if() 를 계속 추가 하면 된다.
        }
        // 글 목록 얻어오기
        List list = cafeDao.getList(dto);
        // 전체글의 갯수
        int totalRow = cafeDao.getCount(dto);

        // 하단 시작 페이지 번호
        int startPageNum = 1 + ((pageNum - 1) / PAGE_DISPLAY_COUNT) * PAGE_DISPLAY_COUNT;
        // 하단 끝 페이지 번호
        int endPageNum = startPageNum + PAGE_DISPLAY_COUNT - 1;


        // 전체 페이지의 갯수
        int totalPageCount = (int) Math.ceil(totalRow / (double) PAGE_ROW_COUNT);
        // 끝 페이지 번호가 전체 페이지 갯수보다 크다면 잘못된 값이다.
        if (endPageNum > totalPageCount) {
            endPageNum = totalPageCount; // 보정해 준다.
        }
        // view page 에서 필요한 값을 request 에 담아준다.
        request.setAttribute("pageNum", pageNum);
        request.setAttribute("startPageNum", startPageNum);
        request.setAttribute("endPageNum", endPageNum);
        request.setAttribute("condition", condition);
        request.setAttribute("keyword", keyword);
        request.setAttribute("encodedK", encodedK);
        request.setAttribute("totalPageCount", totalPageCount);
        request.setAttribute("list", list);
        request.setAttribute("totalRow", totalRow);
    }

    @Override
    public void getDetail(HttpServletRequest request) {
        // 자세히 보여줄 글번호를 읽어온다.
        int num = Integer.parseInt(request.getParameter("num"));
        // 조회수 올리기
        cafeDao.addViewCount(num);

      /*
         [ 검색 키워드에 관련된 처리 ]
         -검색 키워드가 파라미터로 넘어올수도 있고 안넘어 올수도 있다.
      */
        String keyword = request.getParameter("keyword");
        String condition = request.getParameter("condition");
        // 만일 키워드가 넘어오지 않는다면
        if (keyword == null) {
            // 키워드와 검색 조건에 빈 문자열을 넣어준다.
            // 클라이언트 웹브라우저에 출력할때 "null" 을 출력되지 않게 하기 위해서
            keyword = "";
            condition = "";
        }
        // CafeDto 객체를 생성해서
        CafeDto dto = new CafeDto();
        // 자세히 보여줄 글번호를 넣어준다.
        dto.setNum(num);
        // 만일 검색 키워드가 넘어온다면
        if (!keyword.equals("")) {
            // 검색 조건이 무엇이냐에 따라 분기 하기
            if (condition.equals("title_content")) {// 제목 + 내용 검색인 경우
                // 검색 키워드를 CafeDto 에 담아서 전달한다.
                dto.setTitle(keyword);
                dto.setContent(keyword);
            } else if (condition.equals("title")) { // 제목 검색인 경우
                dto.setTitle(keyword);
            } else if (condition.equals("writer")) { // 작성자 검색인 경우
                dto.setWriter(keyword);
            } // 다른 검색 조건을 추가 하고 싶다면 아래에 else if() 를 계속 추가 하면 된다.
        }

        // 글하나의 정보를 얻어온다.
        CafeDto resultDto = cafeDao.getData(dto);

        // 특수기호를 인코딩한 키워드를 미리 준비한다.
        String encodedK = URLEncoder.encode(keyword);

       /*
         [ 댓글 페이징 처리에 관련된 로직 ]
       */
        // 한 페이지에 몇개씩 표시할 것인지
        final int PAGE_ROW_COUNT = 10;
        // detail.jsp 페이지에서는 항상 1페이지의 댓글 내용만 출력한다.
        int pageNum = 1;
        // 보여줄 페이지의 시작 ROWNUM
        int startRowNum = 1 + (pageNum - 1) * PAGE_ROW_COUNT;
        // 보여줄 페이지의 끝 ROWNUM
        int endRowNum = pageNum * PAGE_ROW_COUNT;
        // 원글의 글번호를 이용해서 해당글에 달린 댓글 목록을 얻어온다.
        CafeCommentDto commentDto = new CafeCommentDto();
        commentDto.setRef_group(num);
        // 1페이지에 해당하는 startRowNum 과 endRowNum 을 dto 에 담아서
        commentDto.setStartRowNum(startRowNum);
        commentDto.setEndRowNum(endRowNum);
        // 1페이지에 해당하는 댓글 목록만 select 되도록 한다.
        List commentList = cafeCommentDao.getList(commentDto);

        // 원글의 글번호를 이용해서 댓글 전체의 갯수를 얻어낸다.
        int totalRow = cafeCommentDao.getCount(num);
        // 댓글 전체 페이지의 갯수
        int totalPageCount = (int) Math.ceil(totalRow / (double) PAGE_ROW_COUNT);

        // request scope 에 글 하나의 정보 담기
        request.setAttribute("dto", resultDto);
        request.setAttribute("condition", condition);
        request.setAttribute("keyword", keyword);
        request.setAttribute("encodedK", encodedK);
        request.setAttribute("totalRow", totalRow);
        request.setAttribute("commentList", commentList);
        request.setAttribute("totalPageCount", totalPageCount);
    }

    @Override
    public void saveContent(CafeDto dto) {
        // title, content, writer 정보가 들어있는 CafeDto 를 dao 에 전달해서 DB 에 저장되도록 한다.
        cafeDao.insert(dto);
    }

    @Override
    public void updateContent(CafeDto dto) {
        cafeDao.update(dto);
    }

    @Override
    public void deleteContent(int num, HttpServletRequest request) {
        // 세션에서 로그인된 아이디를 읽어와서
        String id = (String) request.getSession().getAttribute("id");
        // 글 작성자와 로그인된 아이디가 다르다면
        CafeDto dto = cafeDao.getData(num);
        // 예외를 발생시켜서 삭제가 안되도록 한다.
        if (!id.equals(dto.getWriter())) {
            throw new NotDeleteException("하지마라 ~");
        }
        cafeDao.delete(num);
    }

    // 글 수정 폼에 필요한 값을 HttpServletRequest 에 담아주는 메소드
    @Override
    public void getData(HttpServletRequest request) {
        // 수정할 글 정보
        int num = Integer.parseInt(request.getParameter("num"));
        // 수정할 글의 정보 얻어와서
        CafeDto dto = cafeDao.getData(num);
        // request 에 담아준다.
        request.setAttribute("dto", dto);
    }

    @Override
    public void saveComment(HttpServletRequest request) {
        // 폼 전송되는 파라미터 추출
        int ref_group = Integer.parseInt(request.getParameter("ref_group")); // 원글의 글번호
        String target_id = request.getParameter("target_id"); // 댓글 대상자의 아이디
        String content = request.getParameter("content"); // 댓글의 내용
        /*
            원글의 댓글은 comment_group 번호가 전송이 안되고
            댓글의 댓글은 comment_group 번호가 전송이 된다.
            따라서 null 여부를 조사하면 원글의 댓글인지 댓글의 댓글인지 판단할 수 있다.
         */
        String comment_group = request.getParameter("comment_group");

        // 댓글 작성자는 session 영역에서 얻어내기
        String writer = (String) request.getSession().getAttribute("id");
        // 댓글의 시퀀스 번호 미리 얻어내기
        int seq = cafeCommentDao.getSequence();

        // 저장할 댓글의 정보를 dto 에 담기
        CafeCommentDto dto = new CafeCommentDto();
        dto.setNum(seq);
        dto.setWriter(writer);
        dto.setTarget_id(target_id);
        dto.setContent(content);
        dto.setRef_group(ref_group);
        // 원글의 댓글인 경우
        if (comment_group == null) {
            // 댓글의 글 번호를 comment_group 번호로 사용한다.
            dto.setComment_group(seq);
        } else {
            // 전송된 comment_group 번호를 숫자로 바꿔서 dto 에 넣어준다.
            dto.setComment_group(Integer.parseInt(comment_group));
        }
        // 댓글 정보를 DB에 저장하기
        cafeCommentDao.insert(dto);
    }

    @Override
    public void deleteComment(HttpServletRequest request) {
        int num = Integer.parseInt(request.getParameter("num"));
        // 삭제할 댓글 정보를 읽어와서
        CafeCommentDto dto = cafeCommentDao.getData(num);
        String id = (String) request.getSession().getAttribute("id");
        // 글 작성자와 로그인된 아이디와 일치하지 않으면
        if (!dto.getWriter().equals(id)) {
            throw new NotDeleteException("남의 댓글 지우면 혼단다!");
        }
        // dao 를 이용해서 DB 에서 삭제하기
        cafeCommentDao.delete(num);
    }

    @Override
    public void updateComment(CafeCommentDto dto) {
        cafeCommentDao.update(dto);
    }

    @Override
    public void moreCommentList(HttpServletRequest request) {
        // 로그인된 아이디
        String id = (String) request.getSession().getAttribute("id");
        // ajax 요청 파라미터로 넘어오는 댓글의 페이지 번호를 읽어낸다.
        int pageNum = Integer.parseInt(request.getParameter("pageNum"));
        // ajax 요청 파라미터로 넘어오는 원글의 글 번호를 읽어낸다.
        int num = Integer.parseInt(request.getParameter("num"));
        /*
         [ 댓글 페이징 처리에 관련된 로직 ]
        */
        // 한 페이지에 몇개씩 표시할 것인지
        final int PAGE_ROW_COUNT = 10;

        // 보여줄 페이지의 시작 ROWNUM
        int startRowNum = 1 + (pageNum - 1) * PAGE_ROW_COUNT;
        // 보여줄 페이지의 끝 ROWNUM
        int endRowNum = pageNum * PAGE_ROW_COUNT;

        // 원글의 글번호를 이용해서 해당글에 달린 댓글 목록을 얻어온다.
        CafeCommentDto commentDto = new CafeCommentDto();
        commentDto.setRef_group(num);
        // 1페이지에 해당하는 startRowNum 과 endRowNum 을 dto 에 담아서
        commentDto.setStartRowNum(startRowNum);
        commentDto.setEndRowNum(endRowNum);

        // pageNum 에 해당하는 댓글 목록만 select 되도록 한다.
        List commentList = cafeCommentDao.getList(commentDto);
        // 원글의 글번호를 이용해서 댓글 전체의 갯수를 얻어낸다.
        int totalRow = cafeCommentDao.getCount(num);
        // 댓글 전체 페이지의 갯수
        int totalPageCount = (int) Math.ceil(totalRow / (double) PAGE_ROW_COUNT);

        // view page 에 필요한 값 request 에 담아주기
        request.setAttribute("commentList", commentList);
        request.setAttribute("num", num); // 원글의 글번호
        request.setAttribute("pageNum", pageNum); // 댓글의 페이지 번호
    }
}

Spring #1

Mon, 26 Jun 2023 05:33:12 GMT

Spring

스프링은 자바 기반의 웹 어플리케이션을 만들 수 있는 프레임워크다. spring.io 사이트에서 확인하면 '스프링 프레임워크는 현대 자바 기반의 엔터프라이즈 어플리케이션을 위한 프로그래밍 및 Configuration Model 제공한다.'라고 언급하고 있다.

Spring 구조

Spring Architect
Spring 프레임워크는 여러 모듈로 구성되어 있으며, 각각의 모듈은 특정한 기능과 역할을 수행한다. 가장 핵심적인 모듈은 다음과 같다

Core Container : Spring의 핵심 기능을 제공한다. Bean 관리, 의존성 주입(Dependency Injection), 이벤트 처리, 리소스 관리 등을 포함한다.

AOP (Aspect-Oriented Programming) : 관점 지향 프로그래밍을 지원하는 모듈로, 애플리케이션의 핵심 비즈니스 로직과 각각의 부가적인 기능을 분리하여 모듈화할 수 있다. 이를 통해 코드의 재사용성을 높이고 관심사의 분리를 도모한다.

Web : 웹 애플리케이션 개발에 필요한 기능을 제공한다. 웹 애플리케이션의 MVC (Model-View-Controller) 아키텍처를 지원하며, 요청 처리, 세션 관리, 데이터 바인딩, 검증, 보안 등을 처리한다.

Data Access/Integration : 데이터베이스 연동과 관련된 작업을 처리하기 위한 기능을 제공한다. JDBC, ORM 프레임워크 (예: Hibernate), 트랜잭션 처리 등을 지원하여 데이터베이스와의 상호작용을 단순화한다.

Test : 단위 테스트를 위한 기능을 제공한다. JUnit 등과 통합하여 테스트 코드 작성 및 실행을 지원한다.

Spring 주요 특징

스프링 프레임워크의 특징은 아래와 같다.

POJO(Plain Old Java Object) 방식 : POJO는 Java EE의 EJB 를 사용하면서 해당 플랫폼에 종속되어 있는 무거운 객체들을 만드는 것에 반발하며 나타난 용어다. 별도의 프레임워크 없이 Java EE를 사용할 때에 비해 특정 인터페이스를 직접 구현하거나 상속받을 필요가 없어 기존 라이브러리를 지원하기가 용이하고, 객체가 가볍다.
[필드, Getter, Setter 만 존재하는 POJO]

public class Person {
    private String name;
    private int age;
    >
    public String getName(){
        return name;
    }
    >
    public String getAge() {
        return age;
    }
    >
    public void setName(String name){
        this.name = name;
    }
       >
    public void setAge(int age){
        this.age = age;
    }
}

관점 지향 프로그래밍(Aspect Oriented Programming, AOP) : 로깅, 트랜잭션, 보안 등 여러 모듈에서 공통적으로 사용하는 기능을 분리하여 관리할 수 있다. AspectJ를 포함하여 사용할 수 있고, 스프링에서 지원하는 실행에 조합하는 방식도 지원한다.
[AOP 예 시]

class OrderApp{
    ...
    public void 주문하기() {
        //공통 관심 사항
        로깅 관련 코드
        보안 관련 코드
       >
       //핵심 관심 사항
       주문 관련 로직
      }
    >
    public void 주문_변경하기() {
        //공통 관심 사항
        로깅 관련 코드
        보안 관련 코드
        >
        //핵심 관심 사항
        주문 변경 관련 로직
    }
    >
    public void 메뉴_등록하기() {
        //공통 관심 사항
        로깅 관련 코드
        보안 관련 코드
        >
        //핵심 관심 사항
        메뉴 등록 관련 로직
    }
}

의존성 주입(Dependency Injection, DI) : 프로그래밍에서 구성요소 간의 의존 관계가 소스코드 내부가 아닌 외부에서 설정을 통해 정의되는 방식이다. 코드 재사용을 높여 소스코드를 다양한 곳에 사용할 수 있으며 모듈간의 결합도도 낮출 수 있다. 계층, 서비스 간에 의존성이 존재하는 경우 스프링 프레임워크가 서로 연결시켜준다.
제어 역전(Inversion of Control, IoC) : 전통적인 프로그래밍에서는 개발자가 작성한 프로그램이 외부 라이브러리의 코드를 호출해서 이용했다. 제어 역전은 이와 반대로 외부 라이브러리 코드가 개발자의 코드를 호출하게 된다. 즉, 제어권이 프레임워크에게 있어 필요에 따라 스프링 프레임워크가 사용자의 코드를 호출한다.
[DI + IoC example]

// (1) A 가 사용하는 메소드를 인터페이스 I의 추상 메소드로 정의한 다음 (추상화)
interface I {
    void example();
}
>
class A {
>
    // (3) 그 다음, 인터페이스 타입의 필드를 선언하고,
    private I i;
>    
    // (4) 생성자를 통해 외부로부터 인스턴스를 받아와 i를 초기화해준다. (다형성)
    public A (I i) {
        this.i = i;
    }
    >
    public void methodOfA() {
        // (5) 외부로부터 받아온 인스턴스의 메소드를 호출
        i.example();
    }
}
>
// (2) A 가 사용하는 메소드를 가진 객체들이 I 를 구현하도록 한다.
class B implements I {
>
    public void example() {
        ...
    }
}
>
class C implements I {
>
    public void example() {
        ...
    }
}

생명주기 관리 : 스프링 프레임워크는 Java 객체의 생성, 소멸을 직접 관리하며 필요한 객체만 사용할 수 있다.

jQuery

Mon, 26 Jun 2023 03:49:11 GMT

📖 jQuery

javaScript를 편리하게 사용할 수 있도록 해주는 Java Script Library이다. (HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것이다.)

📌 특징

DOM 엘리먼트 선택

DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원) 이벤트
CSS 조작
특수효과 및 애니메이션
AJAX 및 JSON, XML 파싱
JavaScript 플러그인을 통한 확장성
유틸리티 - 브라우저 종류와 버전, "each" 함수

🧨 jQuery vs Javascript

Javascript로 길고 복잡하게 써야 하는 것을 JQuery로 짧고 직관적으로 사용 가능

Javascript 사용

let divs = document.querySelectorAll("div");
>
for (let i = 0; i>divs.length ; i++){
     let tmp = divs[i];
     tmp.innerText = "hi";
}

jQuery 사용

$("div").text("hi");

📌 사용하기

https://www.w3schools.com/jquery/jquery_get_started.asp

제이쿼리 임포트 하기 위해 사이에 넣어준다.

📌 기본 구문

jQuery 기분 문법 - Selector (선택자)

$(‘a’) : page 내 모든

$(‘div a’) : page 내
하위에 있는

$('#test’) : id가 test인 태그

$(‘.btn’) : class가 btn인 모든 태그

$(‘tr:odd’) : 태그들 중 홀수번째들

$(‘tr:last tr:last’) : 문서내의 마지막

$(‘b:contains(‘hi’)) : hi를 content로 가진 b태그

$(‘div:has(‘ul’) :

태그

$(‘input:checkbox’) : input태그중 checkbox

$(‘td nth-child(2n)’) : 2의 배수 번째

Content/DOM 변경 및 조회 메소드

html()

선택요소의 html 내용을 가져옴. innerHTML과 동일
html(value)*
선택요소에 인수로 받은 value를 넣는다.
value내에 html태그가 있는 경우 태그로 들어간다.
text()*
선택요소 내의 html태그 요소를 제외한 내용을 가져옴.
innerText innerText와 동일.
text(value)*
선택요소 내에 인수로 받은 value를 넣는다.
value내의 html태그도 text로 들어간다.
val()*
input 태그의 value 값을 조회
val(value)*
인수로 받은 value를 input 태그의 value 값을 설정

사용 예시 1

// 위의 input 요소에 문자열을 입력하고 전송버튼을 누르면 입력한 문자열을 
//p 요소의 innerText 에 출력되도록 프로그래밍

사용 예시 2 (css 변경)


이벤트 리스너 함수 등록

사용 예시 3 (요소 추가)

이벤트 처리

Maven

Sat, 24 Jun 2023 13:44:50 GMT

Maven

1. Maven은 무엇인가?

Maven은 자바 프로젝트의 빌드(build)를 자동화 해주는 빌드 툴(build tool)이다.

즉, 자바 소스를 compile하고 package해서 deploy하는 일을 자동화 해주는 것이다.

2. Maven이 참조하는 설정 파일

Maven 전체를 보기보다 프로그래밍에 직접적인 연관이 있는 두 개의 설정파일을 알아보면 된다.

1) `settings.xml`

settings.xml은 maven tool 자체에 관련된 설정을 담당한다.

MAVEN_HOME/conf/ 아래에 있다. ( * MAVEN_HOME은 환경변수에 설정한 경로)

Maven 자체에 설정 값을 바꾸는 일은 일단 잘 없으므로 넘어가고 기획한대로 pom.xml을 살펴본다.

2) `pom.xml`

하나의 자바 프로젝트에 빌드 툴로 maven을 설정했다면, 프로젝트 최상위 디렉토리에 pom.xml이라는 파일이 생성되었을 것이다.

pom.xml은 POM(Project Object Model)을 설정하는 부분으로 프로젝트 내 빌드 옵션을 설정하는 부분이다.

pom.xml 분석



    4.0.0

    com.example
    demo
    0.0.1-SNAPSHOT
    jar

    demo
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.5.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

1) 프로젝트 정보

: 4.0.0이라고 써있는데 이것은 maven의 pom.xml의 모델 버전이다. 형식이 4.0.0 버전이라고 이해하면 된다.

: 프로젝트를 생성한 조직 또는 그룹명으로 보통, URL의 역순으로 지정한다.

: 프로젝트에서 생성되는 기본 아티팩트의 고유 이름이다.

메이븐에 의해 생성되는 일반적인 artifact는 -.이다. (ex demo-0.0.1-SNAPSHOT.jar)

: 애플리케이션의 버전. 접미사로 SNAPSHOT이 붙으면 아직 개발단계라는 의미이며, 메이븐에서 라이브러리를 관리하는 방식이 다르다고 한다.

: jar, war, ear, pom등 패키지 유형을 나타낸다.

: 프로젝트 명

: 프로젝트 설명

: 프로젝트를 찾을 수 있는 URL

2. 의존성 라이브러리 정보

의존성 라이브러리 정보를 적을 수 있다.

최소한 groupId, artifactId, version 정보가 필요하다.

스프링부트의 spring-boot-starter 같은 경우에는 부모 pom.xml에서 이미 버전 정보가 있어서 version은 따로 지정할 필요가 없다. 특히 스프링부트는 해당 스프링버전에 잘 맞는 버전으로 이미 설정되어 있기 때문에 오버라이드해서 문제가 생기는 부분은 순전히 개발자 탓이다.

그리고 A라는 라이브러리를 사용하는데 B, C, D가 의존성을 가진다면 A를 dependency에 추가하면 자동으로 필요한 B,C,D도 가져오는 기능이 있다.

dependency에 의 경우 compile, runtime, provided, test등이 올 수 있는데 해당 라이브러리가 언제 필요한지, 언제 제외되는지를 나타내는 것으로 따로 검색해보면 알 수 있다.

3. build 정보

build tool : maven의 핵심인 빌드와 관련된 정보를 설정할 수 있는 곳이다.

부분에서 설정할 수 있는 값들에 대해 설명하기 전에 "라이프 사이클(life-cycle"에 대해서 알 필요가 있다.

객체의 생명주기처럼 maven에는 라이프 사이클이 존재한다.

크게 default, clean, site 라이프 사이클로 나누고 세부적으로 페이즈(phase) 있다. 아래 그림 참조

메이븐의 모든 기능은 플러그인(plugin)을 기반으로 동작한다.

플러그인에서 실행할 수 있는 각각의 작업을 골(goal)이라하고 하나의 페이즈는 하나의 골과 연결되며, 하나의 플러그인에는 여러 개의 골이 있을 수 있다.

구조

Maven 프로젝트의 기본 디렉토리 정책

application-core

pom.xml
src
- main
  - java
    - com.package.dir
  - resources
- test
  - java
    - com.package.dir
  - resources

Vue

Tue, 20 Jun 2023 10:46:35 GMT

Vue.js란 무엇인가?

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리

데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음

Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공
하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름.

💡 MVVM 패턴이란?

Backend 로직과 Client 의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인하였다. 간단하게 생각해서 화면 앞단의 화면 동작 관련 로직과 뒷단의 DB 데이터 처리 및 서버 로직을 분리하고, 뒷단에서 넘어온 데이터를 Model 에 담아 View 로 넘겨준다.

Vue.js 시작하기

📌 Vue Instance 생성자

Vue를 사용할 때 필수로 생성이 필요한 코드 인스턴스 생성 시 Vue 개발자 도구에서 Root 컴포넌트로 인식

new Vue({
  // instance option properties
  template: "",
  el: "#app",
  data: {}
  methods: {}
  created: function() {}
});

>- `el`: app이라는 ID를 가진 태그를 찾아서 인스턴스를 붙여준다. 태그에 인스턴스를 붙여주면 view의 기능과 속성을 조작 가능
- `data`: 뷰의 반응성(Reactivity)이 반영된 데이터 속성
- `template` : 화면에 표시할 요소 (HTML, CSS 등)
- `methods` : 화면의 동작과 이벤트 로직을 제어하는 메서드
- `created` : 뷰의 라이프 사이클과 관련된 속성
- `watch` : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성


---

### 📌 Components
**화면의 영역을 영역별로 구분해서 코드로 관리**
>
- 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
- 코드의 재사용성이 올라가고 빠른 화면 제작 가능
- `전역 컴포넌트`는 기본적으로 모든 인스턴스에 등록이 되어 있음
- `지역 컴포넌트`는 인스턴스마다 새로 생성이 필요
- 다만 서비스를 구현할 때는 하나의 인스턴스에 컴포넌트를 붙여 나가는 형식으로 진행

> ** 예시 **
```js
component 사용예제

    친구 목록 입니다.
    
>
    동물 친구 목록 입니다.

📌 props

컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성

상위 컴포넌트의 템플릿

하위 컴포넌트의 컴포넌트

var childComponent = {
  props: ['프롭스 속성 명']
}

예 시

같은 레벨의 컴포넌트 간 통신

동일한 상위 컴포넌트를 가진 하위 컴포넌트들 간의 통신은 아래와 같이 해야 한다.

Child(하위) -> Parent(상위) -> Children(하위 2개)

📢 컴포넌트 간의 직접적인 통신은 불가능하도록 되어 있는게 Vue 의 기본 구조

📌 Event Bus

상위 ↔ 하위 관계가 아닌 컴포넌트 간의 통신을 위해 Event Bus를 활용할 수 있다.

Event Bus를 사용하기 위해 새로운 뷰 인스턴스를 아래와 같이 생성한다.

// 화면 개발을 위한 인스턴스와 다른 별도의 인스턴스를 생성하여 활용
var eventBus = new Vue();
>
new Vue({
  // ...
});

** 이벤트를 발생시킬 컴포넌트에서 $emit() 호출 **

eventBus.$emit("refresh", 10);

이벤트를 받을 컴포넌트에서 $on() 이벤트 수신

// 이벤트 버스 이벤트는 일반적으로 라이프 사이클 함수에서 수신
new Vue({
  created: function() {
    eventBus.$on("refresh", function(data) {
      console.log(data); // 10
    });
  }
});

만약, eventBus의 콜백 함수 안에서 해당 컴포넌트의 메서드를 참고하려면 vm 사용

new Vue({
  methods: {
    callAnyMethod() {
      // ...
    }
  },
  created() {
    var vm = this;
    eventBus.$on("refresh", function(data) {
      console.log(this); // 여기서의 this는 이벤트 버스용 인스턴스를 가리킴
      vm.callAnyMethod(); // vm은 현재 인스턴스를 가리킴
    });
  }
});

사용 예시 1


자식 component 에서 발생하는 이벤트

** 사용 예시 2**


event emit 예제

📌 Example

** 사용자 입력 폼 예시**

📖 Axios

뷰에서 권고하는 HTTP 통신 라이브러리이다. Promise 기반(JS 비동기 처리 패턴)이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다

Install Axios

사용 예시


  
    
    
      {{ users }}
    
  
>

** fetch 를 이용한 json 요청**


ajax 요청을 통해서 받아온 데이터 사용하기
페이지 전환 없이 서버에 요청하는 것을 ajax 라고 생각하면 된다.

    

    
        
        
            번호
            작성자
            제목
        
        
        
        
        
            {{tmp.num}}
            {{tmp.writer}}
            {{tmp.title}}

번호	작성자	제목
{{tmp.num}}	{{tmp.writer}}	{{tmp.title}}

Javascript #7

Fri, 16 Jun 2023 04:15:42 GMT

Fetch & Ajax

Fetch API

fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 프로그래밍 방식에 잘 맞는 형태이다. 그래서 then이나 catch 와 같은 체이닝으로 작성할 수 있다는 장점이 있다. 또한 fetch API는 JS 기본 기능 이기 때문에, 다른 작업을 하지 않아도 바로 사용할 수 있다.

fetch('ajax_intro_data.txt')
    .then( response => response.text() )
    .then( text => { document.getElementById("#t").innerHTML = text; } )
>
/* 'fetch('서버주소')' 는 웹 브라우저에게 '이 서버주소로 요청해줘' 라는 의미이고, 
뒤에 .then이 붙으면 '요청 끝나고나서 이 할일을 해줘!' 라는 것이다. */

fetch → json

fetch를 이용해서 json 형식으로 변환하는 순서는 다음과 같다.

fetch("URL", option)
   .then(res => res.text())
   .then(data => {
      console.log(data);
      const result = JSON.parse(data);
      console.log(result);
   });

fetch 에는 기본적으로 첫 번째 인자에 요청할 url이 들어간다.
기본적으로 http 메소드 중 GET으로 동작한다.
fetch를 통해 ajax를 호출 시 해당 주소에 요청을 보낸 다음, 응답 객체(Promise object Response)를 받는다.
그러면 첫 번째 then에서 그 응답을 받게되고, res.text() 메서드로 파싱한 text값을 리턴한다.
그러면 그 다음 then에서 리턴받은 text 값을 받고, 원하는 처리를 할 수 있게 된다.

💡**개발자 도구의 네트워크 탭**에 가보면 `fetch`를 통해 **얻어온 데이터**를 볼 수 있다. ![](https://velog.velcdn.com/images/hyeon_geun/post/a190087f-3441-4de3-895b-4da1e37b1bec/image.png)

fetch & ajax → json

사용 예시 [GET]

fetch('TARGET URL') // url 입력, GET메서드임
    .then(res => res.json())  //응답 결과를 json으로 파싱
    .then(data => { 
>    
            //***여기서 응답 결과로 실행할 동작을 정의하면 됨***
            // [ data.키값 ] 이런 형태로 value 추출 가능 
>            
            console.log(data); //응답 결과를 console 창에 출력
>             
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

[POST]

//POST 메서드로 전송할 데이터
let formData = new FormData(); 
formData.append('key', value); // key-value (키-값)의 형태로 데이터 추가함
>
//page 시작할 때 마다, db에 portfolio 데이터 요청
fetch('TARGET URL', { // url 입력 및 [options] 값 설정
    method: 'post', 
    body: formData  //전송할 데이터 body에 추가
    })
    .then(res => res.json()) //응답 결과를 json으로 파싱
    .then(data => {
>    
            //***여기서 응답 결과로 실행할 동작을 정의하면 됨***
            // [ data.키값 ] 이런 형태로 value 추출 가능 
>            
            console.log(data); //응답 결과를 console 창에 출력
>              
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

Java Web #3

Tue, 13 Jun 2023 03:52:34 GMT

JSTL

JSTL의 정식 명칭은 자바서버 페이지 표준 태그 라이브러리(JavaServer Pages Standard Tag Library)이고 줄여서 JSTL이라 부른다. 일반적으로 알고있는 JSTL이란 JSTL + EL의 조합을 말한다.

HTML 코드 내에 java 코드인 스크립틀릿 <%= student %>를 ${student}로, <%=if %>문을 , <%=for%>문을 로 대체하여 사용한다.

JSTL은 JSP 페이지 내에서 자바 코드를 바로 사용하지 않고 로직을 내장하는 효율적인 방법을 제공한다. 표준화된 태그 셋을 사용하여 자바 코드가 들락거리는 것보다 더 코드의 유지보수와 응용 소프트웨어 코드와 사용자 인터페이스 간의 관심사의 분리로 이어지게 한다.

JSTL은 라이브러리이기 때문에 사용하기전에 core를 header에 추가해주어야 한다.

<%@ taglib prefix="접두사" uri="URI" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

JSTL core의 태그

사용 예제(JSP 형식과 비교)*

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


   test_jstl/hello.jsp


   JSTL 의 core 라이브러리 사용해보기
   
   안녕 JSTL ${i}
   
   >
> ---------------------------------------------------------------------------
>
   JSTL 을 사용하지 않고 java code 를 활용해서 위와 같은 동작을 해 보세요
   <%for(int i=0; i<10; i++){%>
       안녕 JSTL <%=i%>
   <%}%>

<%-- 기본 사용 방법--%>

현근2
${username1}
                                        //현근1
${username2}
                                        //현근2
${pageScope.username1}
                                //현근1
${pageScope.username2}
                                //현근2

>
<%--보관소 지정(ServletRequest)--%>
현근3
${pageScope.username3}
                                //현근3
${requestScope.username3}


 >
<%--기존 값 덮어씀--%>
<% pageContext.setAttribute("username4", "현근4"); %>
기존 username4 : ${username4}
                        //기존 username4 : 현근4

변경 username4 : ${username4}
                        //변경 username4 : 현근5

💡 실행 결과

scope의 기본값은 page이다. scope를 생략하면 JspContext에 저장된다.
scope="request"와 같이 scope를 명시적으로 지정할 수도 있다.

을 이용한 객체의 프로퍼티 값 설정

**사용 예시**
```java
<%!
    public static class MyMember {
        int no;
        String name;
> 
        public int getNo() {
            return no;
        }
> 
        public void setNo(int no) {
            this.no = no;
        }
> 
        public String getName() {
            return name;
        }
> 
        public void setName(String name) {
            this.name = name;
        }
    }
%>
<%
    MyMember member = new MyMember();
    member.setNo(100);
    member.setName("김연아");
    pageContext.setAttribute("member", member);
%>
${member.name}
                                            //김연아

${member.name}
                                            //박지성

Inner class MyMember의 인스턴스 member를 생성하고 member의 name을 태그를 사용해서 변경하는 코드이다. 으로 객체의 프로퍼티 값을 설정할때는 setter()의 리턴 타입이 반드시 void여야 한다.

EL

EL의 정식 명칭은 표현 언어(Expression Language)라고 하며 줄여서 EL이라고 부른다.

사용법

<%= name %>
${name}

EL의 내장 객체 EL의 연산자 종류 및 표현법 사용 예제 1

<% @taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

 
  
   
   

  
>
  ${person.address.city}
>

사용 예제 2 (전체 코드)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String myName="김구라";
   /*
      page scope 에  "myName" 이라는 키값으로 myName 담기
      해당 jsp 페이지 에서만 사용할 수 있다.
   */
    pageContext.setAttribute("myName", myName);     //page scope
>
    String yourName="해골";
   /*
      request scope 에 "yourName" 이라는 키값으로 yourName 담기
      request scope 에 담은 값은 응답하기 전까지 사용할 수 있다.
      (다른 페이지로 forward 이동해도 사용할 수 있다)
      (다른 페이지로 redirect 이동하면 사용할 수 없다)
   */
    request.setAttribute("yourName", yourName);     //request scope
>
    String ourName="원숭이";
   /*
      session scope 에  "ourName" 이라는 키값으로 ourName 담기
      session scope 에 담은 값은 세션이 유지 되는 동안 사용할 수 있다.
      (다른 페이지로 forward, redirect 이동 해도 사용할 수 있다)
      (웹브라우저를 닫거나 세션을 초기화 하기 전까지 사용할 수 있다)
   */
    session.setAttribute("ourName", ourName);       //session scope
>
    String companyName="에이콘";
   /*
      application scope 에 "companyName" 이라는 키값으로 companyName 담기
      application scope 에 담은 내용은 서버를 끄기 전까지 사용할 수 있다.
      (웹브라우저를 닫아도 지워지지 않는다)
   */
    application.setAttribute("companyName", companyName);       //application scope
>
%>
    -------------------------------------------------------------------------------
         EL 로 page scope 에 저장된 값 추출
        내 이름은 ${pageScope.myName}
        내 이름은 ${myName}
>
         EL 로 request scope 에 저장된 값 추출
        너의 이름은 ${requestScope.yourName}
        너의 이름은 ${yourName}
        <%-- 위의 EL 은 아래의 코드를 대신할 수 있다. --%>
        <%
            String result = (String)request.getAttribute("yourName");
        %>
        너의 이름은 <%=result%>
>
         EL 로 session scope 에 저장된 값 추출
        우리 이름은 ${sessionScope.ourName}
        우리 이름은 ${ourName}
        <%-- 위의 EL 은 아래의 코드를 대신할 수 있다. --%>
        <%
            String result2 = (String)request.getAttribute("ourName");
        %>
        우리 이름은 <%=result2%>
>
         EL 로 application scope 에 저장된 값 추출
        학원 이름은 ${applicationScope.companyName}
        학원 이름은 ${companyName}

사용 예제 3

<%
    //CafeDto 객체를 생성해서 글 하나의 정보를 담고
    CafeDto dto = new CafeDto();
    dto.setNum(1);
    dto.setWriter("김구라");
    dto.setTitle("나는 구라다");
>
    //"dto" 라는 키값으로 request scope 에 담기
    request.setAttribute("dto", dto);
%>
-------------------------------------------------
    <%
        CafeDto result = (CafeDto)request.getAttribute("dto");
    %>
        글번호 : <%=result.getNum()%>
        작성자 : <%=result.getWriter()%>
        제목 : <%=result.getTitle()%>
>
        EL 을 이용해서 위의 작업하기
        글번호 : ${requestScope.dto.getNum()}
        작성자 : ${dto.getWriter()}
        <%-- 필드명만 적으면 자동으로 getter 메소드를 호출해준다. --%>
        제목 : ${dto.title}

사용 예제 4

요청 파라미터도 el 로 추출할수 있다.           --- test04.jsp
    
      
      
    
    

    test05.jsp
--------------------------------------------------
param.파라미터명 형식으로 추출할 수 있다        --- test05.jsp
전달된 파라미터 : ${param.msg}
전달된 파라미터 : <%=request.getParameter("msg")%>

[Java] @Annotation

Thu, 08 Jun 2023 11:10:15 GMT

@ 자바 어노테이션(Java Annotation)

에노테이션(@)은 주석이라는 의미를 가진다. 자바 소스 코드에 사이에 @ 기호를 앞에 붙여서 사용하는데, JDK 1.5 버전 이상에서 사용 가능하다.

🔎 어노테이션의 용도

컴파일러에게 코드 작성 문법 에러를 체크하도록 정보를 제공

소프트웨어 개발툴이 빌드나 배치시 코드를 자동으로 생성할 수 있도록 정보 제공
실행시(런타임시)특정 기능을 실행하도록 정보를 제공

📌 어노테이션 종류

자바 코드에 적용되는 대표적인 내장 어노테이션

@Override 선언한 메서드가 오버라이드 되었다는 것을 나타낸다. 만약 상위(부모) 클래스(또는 인터페이스)에서 해당 메서드를 찾을 수 없다면 컴파일 에러를 발생 시킨다.
```
class Parent{
 void parentMethod(){}
}
class Child extends Parent{
 void parentmethod(){} // 오버라이딩하려 했으나 실수로 이름을 잘못적음
 // 새로운 메서드가 만들어진 것
}
```

class Child extends Parent{ //메소드 선언부 앞에 오버라이딩을 하면 위의 문제를 방지할 수 있다. @Override void parentMethod(){ } }

- **@SuppressWarnings**
선언한 곳의 컴파일 경고를 무시하도록 한다.
```java
// unchecked 경고를 억제
@SuppressWarnings("unchecked") 
ArrayList list = new ArrayList(); // 지네릭 클래스는 원시타입 쓸 수 없지만, 지정해주지 않음
list.add(obj); // 여기서 경고 발생

@FunctionalInterface 함수형 인터페이스를 지정하는 어노테이션이다. 만약 메서드가 존재하지 않거나, 1개 이상의 메서드(default 메서드 제외)가 존재할 경우 컴파일 오류를 발생 시킨다.
```
@FunctionalInterface
public interface Runnable{
 public abstract void run(); // 추상메서드
}
```

🔔 어노테이션 생성하기

어노테이션 생성

@interface 이름{
    타입 요소 이름(); // 어노테이션의 요소를 선언
        ...
}

사용 예시

@interface DateTime{
    String yymmdd();
    String hhmmss();
}
>
@interface TestInfo{
    int count() default 1;
    String testedBy();
    TestType testType();
    DateTime testDate();
}
>
@TestInfo{
    testedBy="Hwang",
    testTools={"JUnit", "AutoTester"},
    testType=TestType.FIRST,
    testDate=@DateTime(yymmdd="230613", hhmmss="165418")
)// count를 생략했으므로 default인 "count=1"이 적용된다.
public class NewClass{...}

어노테이션 요소 특징

적용시 값을 지정하지 않으면, 사용될 수 있는 기본값을 지정할 수 있다.(위의 default)

요소가 하나이고 이름이 value일 때는 요소의 이름 생략 가능하다.
요소의 타입이 배열인 경우, 괄호{ }를 사용해야 한다. https://velog.io/@jkijki12/annotation

🔑 어노테이션 규칙

어노테이션에도 반드시 지켜주어야 하는 4가지 규칙이 있다.

요소의 타입은 기본형, String, enum, 어노테이션, Class만 허용된다.

괄호()안에 매개변수를 선언할 수 없다.
예외를 선언할 수 없다.
요소의 타입을 매개변수로 정의할 수 없다.(< T >)

Java Web #2

Thu, 08 Jun 2023 10:19:36 GMT

Session

웹 서버 쪽의 웹 컨테이너에 상태를 유지하기 위한 정보를 저장한다. 그리고 정보를 유지를 위해 javax.servlet.http의 HttpSession 인터페이스를 구현해서 사용한다.

** 🔔 세션의 주요 메소드**

세션값 설정

session.setAttribute("설정한 세션아이디", 세션에 넣을 값);
session.setAttribute("id", id)

예 시

<% -----login.jsp
>
  //1. 폼 전송되는 id, pwd 를 읽어와서
    String id = request.getParameter("id");
    String pwd = request.getParameter("pwd");
  //2. UsersDto 에 담기
    UsersDto dto = new UsersDto();
    dto.setId(id);
    dto.setPwd(pwd);
  //3. UsersDao 에 전달해서 유효한 정보인지 확인해서
    boolean isValid = UsersDao.getInstance().isValid(dto);
  /*
    4. 유효한 정보이면 로그인 처리를 하고 응답한다.
       유효한 정보가 아니면 아이디 혹은 비밀번호가 틀려요 라고 응답한다.
>
       [ 로그인 처리 ]
       session scope 에 "id" 라는 키값으로 로그인된 아이디를 저장하면 된다.
       여기서 session scope 란 HttpSession 객체의 setAttribute() 메소드를 이용해서
       값을 저장하는 영역을 말한다.
   */
    if(isValid){
        //session scope 에 id 라는 키값으로 로그인된 아이디 담기
        session.setAttribute("id", id);
    }
>
    //로그인 후 가야할 목적지 정보
    String url = request.getParameter("url");
    //로그인 실패를 대비해서 목적지 정보를 인코딩한 결과도 준비한다.
    String encodedUrl = URLEncoder.encode(url);
%>

세션에 저장된 값 가져오기

session.getAttribute("id");

예 시

<% -----signup.jsp
  //아이디
  String id = request.getParameter("id");
  //비밀번호
  String pwd = request.getParameter("pwd");
  //직업
  String job = request.getParameter("job");
  //성별
  String gender = request.getParameter("gender");
  //취미
  String[] hobby = request.getParameterValues("hobby");
  String hobbyResult = "";
  if (hobby != null){
    //반복문 돌면서
    for (int i = 0; i < hobby.length; i++){
      //i번째 방에 있는 선택된 취미를 불러온다.
      String tmp = hobby[i];
      hobbyResult += tmp;
      if (i != hobby.length-1) hobbyResult += "/";
    }
  }
  //문자열에서 특정문자("/")로 구분해서 String[] 을 얻어내기
  String [] result = hobbyResult.split("/");
>
  //문자열에 특정 문자가 포함되어 있는지 여부
  boolean isContain = hobbyResult.contains("xxx");
>
  // null 이면 체크를 안한 것이고 null 이 아니면 체크를 한 것이다.
  String allEmail = request.getParameter("allowEmail");
  String allMessage = request.getParameter("allowMessage");
  /*
     textarea 에 입력한 문자열은 개행, tab, 공백기호가 모두 포함되어 있다.
     해당 문자열을 DB 에 저장했다가 다시 불러와서 textarea 에 출력하고 싶으면
     textarea 의 innerText 에 출력하면 된다.
   */
  String comment = request.getParameter("comment");
%>

세션 값 삭제하기

removeAttribute(String name);
//invalidate로 모든 세션을 한 번에 삭제할 수 있다.
invalidate();

예 시

  <%
    //session scope 에 id 라는 키값으로 저장된 값 삭제하기
    session.removeAttribute("id");
  %>

Cookie는 쉽게 말해서 프로그램에서 흔적을 남기는 것이다. 클라이언트와 서버가 연결을 시도한 흔적을 남겼다가, 후에 또 연결을 시도할 시 과거의 접속을 이어나가기 위해 흔적을 사용하는 방법이다.(서버가 아닌 클라이언트 쪽에 저장) 보안에 취약하므로, 중요한 정보는 저장하지 않는다.

클라이언트의 웹브라우저에 특정 key 값으로 문자열을 저장할 수 있다.

저장할 수 있는 문자열은 Base64 인코딩 형식의 64가지 문자열을 저장할 수 있다. (Tomcat 8.5 는 자동으로 처리 되어서 인코딩이 필요 없다)
>

쿠키 생성*

//쿠키 객체 생성 new Cookie("key", value);
Cookie cook=new Cookie("savedMsg", msg);

쿠키 확인하기* 크롬에서 쿠키 확인하는 방법은 개발자도구(F12) - Application Tap - Cookies 에서 확인

사용 예시*

                --- cookie_form.jsp
   웹브라우저(client side)에 저장할 문자열

<% --- cookie_save.jsp //폼전송되는 문자열 읽어오기 String msg=request.getParameter("msg"); //모든 문자열을 다 저장하려면 tomcat 8 이하 버전에서는 인코딩을 해서 저장을 한다. String encodedMsg=URLEncoder.encode(msg, "utf-8"); //1. 쿠키 객체 생성 new Cookie("key", value); Cookie cook=new Cookie("savedMsg", encodedMsg); //2. 쿠키 유지시간 (초단위) cook.setMaxAge(60); //60초 테스트 //3. HttpServletResponse 객체에 담는다. response.addCookie(cook); //4. 응답할때 쿠키가 자동으로 응답되고 클라이언트의 웹브라우저에 저장이 된다. %>

웹 브라우저에 savedMsg 라는 키값으로 "<%=msg %>" 를 저장했습니다.

저장된 문자열 확인 해보기 ---------------------------------------------------------------------- <% //HttpServletRequest 객체를 이용해서 요청과 함께 전달된 쿠키 읽어내기 Cookie[] cooks=request.getCookies(); --- cookie_read.jsp //"savedMsg" 라는 키값으로 저장된 문자열을 저장할 변수 String savedMsg=null; if(cooks!=null){ //반복문 돌면서 쿠키 객체를 하나씩 참조 for(Cookie tmp:cooks){ //쿠키의 키값을 읽어온다. String key=tmp.getName(); if(key.equals("savedMsg")){//만일 우리가 찾는 키값이라면 //해당 키값으로 저장된 value 를 읽어내서 디코딩을 한다. savedMsg=URLDecoder.decode(tmp.getValue(),"utf-8"); } } } %>

savedMsg 라는 키값으로 저장된 문자열 : <%=savedMsg %>

다시 테스트 ```

Javascript #6

Tue, 06 Jun 2023 07:04:51 GMT

동기 & 비동기

동기

동기(Synchronouse)는 코드가 순차적으로 실행된다는 의미다. 현재 작업이 끝나야만 다음 코드를 실행한다.
코드를 하나씩 실행하기 때문에, 코드에 대한 실행 순서가 보장된다.
다만, 작업이 끝나기 이전에는 다음 작업이 멈춰있는데, 이를 블로킹(Blocking)이라고 한다.

비동기

비동기는 실행 중인 코드가 완료되지 않더라도, 다음 코드로 넘어간다.
비동기(보통, 시간이 걸리는)작업은 브라우저에 맡기고, 다음 코드로 넘어간다.
실행 순서가 보장되지 않지만, 블로킹을 막을 수 있다.
비동기란 현재 실행중인 작업을 멈추지 않고 다른 작업을 병렬적으로 수행하는 것을 의미한다. 그래서 여러 작업(task)이 있을 때 비동기적으로 수행하면 작업들을 동시에 한번에 수행할 수 있어 최종 작업 수행이 빠르게 처리되게 된다.
이러한 비동기 방식으로 작업을 처리하는 방법 중 하나가 바로 콜백(callback) 함수이다.

자바스크립트는 한 번에 한 가지 일만 처리하는 싱글 쓰레드다. 하지만, 사진을 불러오는 중에도 사용자의 입력을 처리하는 등 여러 작업을 하는 것 처럼 보이기 때문에 비동기 처리가 필요하다.

콜백 함수

콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 예를 들어 아래 코드와 같이 sayHello() 함수를 호출할 때 입력 매개변수로 문자열과 printing 함수 자체를 전달하는 것을 볼 수 있다. 그리고 sayHello() 함수가 실행되면 실행문 안에서 함수가 들은 두번째 매개변수인 callback 을 괄호 () 를 붙여 호출한다.

function sayHello(name, callback) {
    const words = '안녕하세요 내 이름은 ' + name + ' 입니다.';
>    
    callback(words); // 매개변수의 함수(콜백 함수) 호출
}
>
sayHello("현근", function printing(name) {
    console.log(name); // 안녕하세요 내 이름은 현근 입니다.
});

콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 된다. 또한 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름이 없는 '익명 함수' 형태로 넣어주게 된다.
** Callback 함수를 이용해서 Ajax 결과값 출력**

// fetch 메서드를 사용하여 서버로부터 JSON 데이터를 받아오고 콜백 함수로 화면에 출력
fetch("https://jsonplaceholder.typicode.com/users")
  .then(function (response) {
    // fetch 메서드가 성공하면 콜백 함수로 response 인자를 받음
    return response.json(); // response 객체의 json 메서드를 호출하여 JSON 데이터를 반환
  })
  .then(function (data) {
    // json 메서드가 성공하면 콜백 함수로 data 인자를 받음
    console.log(data);
  })

콜백 지옥 (Callback Hell)

콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

Promise

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다.

$.get('url 주소/products/1', function(response) {
  // ...
});

프로미스의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

사용 예시*

unction getData() {
  return new Promise({
    // ...
  });
}
>
// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });

** 순서 **

프로미스의 에러 처리 방법

에러 처리 방법에는 다음과 같이 2가지 방법이 있다.

then()의 두 번째 인자로 에러를 처리하는 방법

getData().then(
  handleSuccess,
  handleError
);

catch()를 이용하는 방법

getData().then().catch();

💡 가급적이면 catch()를 사용하자 !

Javascript #5

Thu, 01 Jun 2023 14:04:50 GMT

Scope

자바스크립트에서 Scope란 변수에 접근할 수 있는 범위라고 할 수 있다.

전역 스코프(Global Scope)

전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미

지역 스코프(Local Scope)

해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미

예시**

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

SetTimeout() & SetInterval()

setTimeout()

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 setTimeout() 함수를 사용한다.
```
setTimeout(() => console.log("2초 후에 실행됨"), 2000);
```
- setTimeout() 함수는 타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환하는데, 타임아웃 아이디는 setTimeout() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.
```
const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);
```

setInterval()

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 자바스크립트의 setInterval() 함수를 사용할 수 있다.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. ```javascript setInterval(() => console.log(new Date()), 2000);
-------console----------

Sun May 26 2023 12:29:06 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:08 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:10 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:12 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:14 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:16 GMT-0500 (Eastern Standard Time) Sun May 26 2023 12:29:18 GMT-0500 (Eastern Standard Time)
-- 0과 9 사이의 수를 무작위로 생성하여 2초마다 출력 --- setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);
-------console---------- 3 2 8 3 1
```
#### ❗ <주의>
`setTimeout()` 함수와 `setInterval()` 함수를 사용한 후에는 반드시 `clearTimeout()` 함수와 `clearInterval()` 함수를 사용해서 타이머를 청소해야 한다.
👉 메모리 누수(memory leak)로 이어질 수 있기 때문에 !

## Canvas
> **canvas** 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다.
```javascript
```
- 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다.
- beginPath(): 도형을 그리기 전에 지정해줌
  - closePath() : 도형의 시작점과 끝 점 사이에 직선을 그어 완성된 도형으로 만들어줌
  - fill() : 주어진 도형의 path를 채워줌 use with fillStyle
  - moveTo() : 선을 그리지 않고 좌표를 이동시킨다.
  - stroke() : 윤곽선을 이용하여 선을 그을 수 있게 해준다.
  - strokeStyle : 윤곽선의 스타일을 지정해준다.
    - lineTo(x, y) : 현재 위치에서 지정핸 위치까지 선을 그린다.

** 캔버스를 사용해서 게임 만들기 ** https://github.com/hyeongeunee/html-css-javascript/blob/master/javascript/Step09_example5.html

JSON

JSON은 JavaScript Object Notation의 약자다.

JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준이다.

JSON의 특징

JSON은 자바스크립트를 확장하여 만들어졌*다.

JSON은 자바스크립트 객체 표기법을 따른다.

JSON은 사람과 기계가 모두 읽기 편하도록 고안되었다.

JSON은 프로그래밍 언어와 운영체제에 독립적이다.

JSON 구조

JSON 데이터는 이름과 값의 쌍으로 이루어집니다.

JSON 데이터는 쉼표(,)로 나열됩니다.

객체(object)는 중괄호({})로 둘러쌓아 표현합니다.

배열(array)은 대괄호([])로 둘러쌓아 표현합니다.

"데이터이름": 값
"name": "식빵"

JSON 객체 JSON 객체는 중괄호({})로 둘러쌓아 표현한다. JSON 객체는 쉼표(,)를 사용하여 여러 프로퍼티를 포함할 수 있다.

{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}

Javascript ⇄ Json

JSON.stringify() JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환한다.

JSON.stringify(value)

JSON.parse() JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환한다.

JSON.parse(text)

toJSON() 자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환합니다.

var date = new Date();   // 자바스크립트 Date 객체
>
var str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환함.

hyeon_geun.log

[JS] Vanilla javascript 로 테트리스 만들기

🧸 Intro

🎲 Function

블록 생성 및 제거

블록의 위치

게임 시작 및 종료

GitHub [전체 코드]

💡 만들면서 배운 것

🔎 반복문 사용하기

🔎 Wrapper의 개념

🔎 얕은 복사에 대해서...

🤔 얕은 복사 (Shllow Copy)

🤔 깊은 복사 (Deep Copy)

React Lifecycle

🌱 React Lifecycle

🤔 Mount

🤔 Update

🤔 Unmount

참고

React #1

💡 React 생성

🤔 useState

🤔 useEffect

🤔 useContext

Maven & Gradle

🤔 Maven

📖 Gradle

Gradle 특징

💡 Gradle vs Maven

Spring Boot #2

📌 Component

Controller Component란?

🤔 Controller

@RestController

🤔 WebConfig

Spring Boot #1

📖 AOP

AOP 의 필요성

AOP(Aspect Oriented Programming)의 장점

📌 1. 의존성 추가

📌 2. @EnableAspectAutoProxy 적용

📌 3. 공통기능 정의와 공통기능 사용될 시점 정의(Advice or Aspect)

Advice 종류

🤔 정리

Spring #4

📖 인터셉터(Interceptor)

💡 Interceptor 의 장점

📌 Interceptor 의 메소드 종류

🤔 필터(Filter)와 인터셉터(Interceptor)의 차이 및 비교

Filter 와 Interceptor 의 사용 사례

Spring #3

MyBatis

MyBatis 관련 라이브러리

SQLSessionFactory

Mapper

Spring 프로젝트 생성(IntelliJ + Maven)

인텔리제이(IntelliJ)에서 스프링 MVC 프로젝트 생성

1. 프로젝트 생성

2. pom.xml 에 dependency 추가

pom.xml 전체 코드

Spring #2

🧷 Client - Web Server - WAS - DB

📌 Servlet

📖 Spring MVC

JSP, Java Server Pages

[Controller vs Service]

MVC 패턴 동작

📌 Front Controller

Spring MVC 구조

📌 Controller의 @RequestMapping

@Controller vs @RestController

Spring #1

Spring

Spring 구조

Spring 주요 특징

jQuery

📖 jQuery

📌 특징

🧨 jQuery vs Javascript

`pom.xml` 전체 코드

1) `settings.xml`

2) `pom.xml`