웹에서는 기본적으로 마우스 휠을 이용하여 스크롤하지만,

모바일웹에서는 터치 드래그를 이용하여 스크롤을 한다.

이처럼 웹에서도 비슷하게 마우스 클릭 드래그를 이용하여 스크롤기능을 만들어보자.

텍스트나 이미지 등의 콘텐츠가 그것을 담는 div 태그보다 콘텐츠의 사이즈가 큰 경우,

해당 태그는 overflow 속성을 사용하기 때문에 스크롤이 생기게 된다.

이 때 해당 브라우저에서 자바스크립트의 스크롤을 하는 기능과 마우스의 여러 이벤트를 적절히 조합해서 클릭 드래그 기능을 구현 할 수 있다.

사용할 마우스의 이벤트로는 mousedown, mousemove, mouseup 3가지가 있다.

코드 부분을 간략하게 보자

var dragFlag = false;
var x, y, pre_x, pre_y;

$(function () {
    $('.content-right').mousedown(
        function (e) {
            dragFlag = true;
            var obj = $(this);
            x = obj.scrollLeft();
            y = obj.scrollTop();

            pre_x = e.screenX;
            pre_y = e.screenY;
        }
    );

    $('.content-right').mousemove(
        function (e) {
            if (dragFlag) {
                var obj = $(this);
                obj.scrollLeft(x+ 2.2*(pre_x-e.screenX));
                obj.scrollTop(y - e.screenY + pre_y);
                return false;
            }
        }
    );

    $('.content-right').mouseup(
        function () {
            dragFlag = false;
        }
    );
});

먼저, 클릭으로 인해 mousedown 이벤트가 발생하면  특정 boolean 값의 변수, dragFlag를 true로 변경하여,

드래그 상태임을 나타낸다.

두 번째로, mousemove 이벤트에서는 드래그 상태인지 아닌지를 판별하여 드래그 상태에서만

스크롤이 될 수 있도록 로직이 담겨있다. 

mousemove 이벤트가 발생하면서 드래그 상태라면, 즉 마우스를 꾹 누르고 있는 상태에서 마우스가 움직이면 스크롤을 진행하는 로직을 담는다.

마지막으로, mouseup 이벤트를 통해, 마우스 클릭 상태가 풀리면 드래그 상태를 false로 변경하여 더 이상 마우스를 움직여도 스크롤이 되지 않는다.

내 카톡 프로필

Spring 프로필 별로 다르게 설정되는 프로퍼티들이 있다.

예를 들어 Local, Develope 프로필 별로 DB 설정을 다르게 해주어야 한다거나, 프로젝트 내 변수값을 다르게 설정해야 하는 상황이 있다.

이럴 때 프로필 별 외부설정 파일에서 프로퍼티를 불러와야 하는데

각각 다른 프로퍼티 값을 가지고 있는 local.config, dev.config 라는 외부 프로퍼티 파일이 있다고 가정할 때

해당 두 가지 파일 중에, 프로젝트 실행 시 적용된 프로필에 맞는 파일을 선택하고 해당 파일 내 프로퍼티를 사용하는 방법을 알아보자.

1.PropertyPlaceholderConfigurer 빈 등록

  - dispatcher-servlet에서 해당 클래스를 빈으로 등록하고 불러오고 싶은 파일 경로를 주입해주자.

<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
    <property name="locations">
        <list>
            <value>/WEB-INF/config/${spring.profiles.active}.config</value>
        </list>
    </property>
</bean>

    => 말그대로 빈으로 등록함과 동시에 원하는 외부 프로퍼티 설정 파일 경로를 주입해주었다.

    => 현재 상황은 적용된 프로필에 해당하는 외부 설정 파일을 사용해야 하는 상황이다.

    => 현재 적용된 프로필 네임은 spring.profiles.active를 통해 불러올 수 있다.

    => 이렇게 하면 스프링 컨테이너에 파일이 등록돼서, 어느 곳에서나 해당 파일의 프로퍼티를 사용할 수 있다.

2. 파일 내 정의되어 있는 프로퍼티 사용

  - 이제 파일 내에 있는 프로퍼티를 사용해야할 차례이다. 파일 내에 app.file.path 라는 프로퍼티를 사용한다 가정하겠다.

# dev.config

app.file.path=C:\\image\\path\\

@Value("${app.file.path}")
    private String myVariable;

    => 첫 번째 코드가 dev.config 즉, 설정 프로퍼티 파일이고, 두 번째 코드가 해당 파일 내 app.file.path를 사용하는 코드.

    => 해당 파일이 빈으로 등록 되었기 때문에, @Value 어노테이션을 이용하여 컨테이너에서 해당 프로퍼티를 가져올 수 있다.

    => 현재 적용된 프로필이 dev 라면 myVariable 변수에는 "C:\\image\\path\\" 가 들어있을 것.

암스테르담의 기적

특정 화면을 로드할 때 해당 화면에 들어가는 컨텐츠(이미지, 텍스트)를 서버에서 가져와야 하는 경우가 있다.

이럴 때 보통 ajax 기법을 사용.

하지만, ajax 요청을 보낸 후 서버에서 데이터를 처리하는 작업량이 많을 경우,

요청에서 응답까지의 시간이 꽤 걸리는 일이 생긴다.

그렇게 사용자를 페이지에 노출되기 까지 흰색 바탕의 화면만 보고 있게 할수는 없으니

이때 ajax에서 제공해주는 ajaxStart, ajaxStop을 한번 사용해보자.

$(document).ajaxStart(function() {
  // 로딩화면을 보여줄 코드
});

$(document).ajaxStop(function() {
  // 로딩화면을 숨기는 코드
});

워낙 제공 코드가 가독성이 좋아서 이해하는데 어려움이 없었다.

1. ajaxStart

  - 문자그대로 ajax 요청이 시작하게 되면 실행할 코드를 넣어준다.

  - 로딩화면을 보여주어야 하니 $('#loadingImage').show(); 와 같은 코드가 우선일 것이다.

2. ajaxStop

  - ajax 요청이 중지되거나, 마무리 되면 실행할 코드를 넣어준다.

  - 로딩화면을 숨겨야 하니 마찬가지로 $('#loadingImage').show(); 와 같은 코드가 우선일 것.

이미지 인쇄기능을 만들어야 하는데 마스킹 기능을 포함하여 구현해야 함.

※ 마스킹: 이미지, 텍스트 등 원하는 부분을 가림.

일단 마스킹 기능은 이미지 뷰어 내에서 마스킹 추가 버튼을  누르면,

회색 배경의 조그만 박스 div가 생기고, 이것을 드래그 하여 가리고 싶은 부분에 드래그하여 올려놓을 수 있음.

이제 특정 부분이 가려진 채로 인쇄를 어떻게 해야할까 찾아보다가

이 상황에 딱 맞는 라이브러리인 html2canvas 라이브러리를 알게 됨

1. html2canvas

• JavaScript의 캡쳐 라이브러리.
• QuerySelector, jQuery 등으로 캡쳐하고 싶은 DOM 영역을 가져와서 해당 영역의 자식 영역까지 캡쳐가 가능함.
• 예를 들어, mainImageBox라는 ID값을 가진 박스에 이미지태그와 마스킹 박스가 존재하면 두 요소 모두 캡쳐가 가능.
• 결론적으로, 마스킹이 적용된 이미지 캡쳐가 가능하다는 얘기.
• 비동기 처리 방식이기 때문에 캡쳐 후, 다운로드 및 인쇄 기능을 구현할 때에 주의하며 코드를 작성해야 함.

본격적으로 코드를 작성해보자.

	html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300,}).then(canvas => {
		const image = new Image();
		image.src = canvas.toDataURL('image/png');

		printWindow = window.open('', '_blank');
		printWindow.document.open();

		printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
		printWindow.document.body.style.display = 'flex';
		printWindow.document.body.style.justifyContent = 'center';
		
	}).then(() => {
		printWindow.onafterprint = function() {
			printWindow.close();
		};
		printWindow.print();
	});

html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300}):

• 캡쳐가 이루어지고 있는 코드임. mainImageBox 라는 아이디 값의 DOM 요소의 캡쳐를 진행함.
• 두 번째 인자로 이미지에 대한 옵션을 지정해줄 수가 있음. scale은 이미지의 줌 배율이고 dpi는 해상도에 대한 옵션.

.then(canvas => {
const image = new Image();
image.src = canvas.toDataURL('image/png');

printWindow = window.open('', '_blank');
printWindow.document.open();

printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
printWindow.document.body.style.display = 'flex';
printWindow.document.body.style.justifyContent = 'center';

})

• 앞서 말했듯이 html2canvas는 비동기 방식, 즉 promise를 리턴하기 때문에 캡쳐가 완료된 canvas를 then으로 체인.
• Image 태그를 하나 생성해서 캡쳐가 진행된 canvas를 완전한 이미지로 변환.
• 프린트 방식은 새창을 열어서 인쇄될 이미지를 넣어주는 방식.

.then(() => {
printWindow.onafterprint = function() {
printWindow.close();
};
printWindow.print();
});

• 좀 더 안정적인 동기적 흐름을 위해 인쇄하는 코드 부분을 한번 더 then으로 체인.

웹에다가 이미지를 보여줘야 하는데 해당 이미지 파일의 확장자가 *.TIF로 되어있다.

그냥 구글 검색해서 나오는 이미지 변환 프로그램을 사용해서 진행하면 간단하겠지만, 한 두가지만 있는게 아니라 

보여주어야 할 모든 이미지가 해당 확장자로 되어있기 때문에 이미지 한개 씩 노가다를 할 수는 없는 상황 . .

웹에서 이미지를 출력하기까지의 방식은

1. 게시판 형태의 여러 글 항목들이 나열되어 있음.

2. 해당 게시글 조회를 누르면 미니 창이 뜸

3. 이미지 파일명들을 저장하고 있는 DB에 접근하면서 선택했던 게시글의 이미지 이름을 불러옴

4. 그 이미지 이름에 ".TIF" 문자열을 붙이고 img src 속성에다가 때래녛기

인데 TIF 형식의 파일은 이상하게 웹에 안보이더라 . .

알고보니 일반적인 브라우저는 구닥다리 확장자인 TIF 를 지원하지 않음

그래서 다 변환 때려버려야 됨.

그래서 내가 진행한 변환 방식이 몇가지가 있음

1. 클라이언트 내에서 일시적인 일회성 변환 (JavaScript)

  - 말그대로 HTML, JSP 코드 내에 있는 img 태그를 스크립트 코드 내에서 불러와서 TIF -> jpg로 바로 변환해주고  Base64

    인코딩 후 리턴

  - 리턴된 Base64 파일을 기존 img src 속성에 때려넣기

  1) 해당 방법은 JavaScript의 "canvas" 태그의 특성을 사용하면 된다. 

    => canvas 태그는 이미지를 그릴뿐만 아니라 변환까지 가능하다.

    => canvas 태그를 임시적으로 생성하여 거기다가 TIF 이미지를 넣고, 변환을 때려서 Base64 인코딩 ㄱㄱ 했지만 

JavaScript의 canvas 요소는 기본적으로 .tif 이미지를 직접 지원하지 않습니다. canvas 요소는 이미지를 그리는 용도로 사용되며, 주로 JPEG, PNG, GIF 등의 이미지 포맷을 지원합니다.
출처: ChatGPT

실패

2. 이미지 파일명을 서버로 보내서 Java 단에서 변환 처리

  - 말그대로 이미지의 파일명만 서버로 보내서 Java에서 해당 이미지가 있는 (경로 이름 + 파일명) 문자열 합치기를 해준 

    String을 가지고 변환 때려서 Base64 인코딩 후 JSON 리턴

  - Java에서 TIF 변환을 지원하는 "JAI" 라이브러리가 있어야 함

  1) JAI 라이브러리 설치 방법

    => JAI 라이브러리는 "Java Advanced Imaging" 의 약자로 오라클에서 제공하는 라이브러리 입니다.

    => https://www.oracle.com/java/technologies/java-archive-downloads-java-client-downloads.html에 접속하여

          jai-1_1_2_01-windows-i586-jar.zip를 다운받고 압축 풀고 jai_codec.jar  jai_core.jar 두 파일을 WEB-INF/lib에 넣어

         주세요

  2) JAI로 TIF -> JPG로 변환하는 코드

본격적으로 변환 코드를 작성함.

RenderedOp image = null;
String imagePath = "";
String convImagePath = "";

imagePath = "C:\\Users\\eclipse-workspace\\project\\src\\main\\webapp\\assets\\images\\" + param.get("img");
convImagePath = imagePath.replace("TIF", "jpg");

image = JAI.create("fileload", imagePath);
FileOutputStream fos = new FileOutputStream(convImagePath);
JAI.create("encode", image, fos, "JPEG", null);
fos.close();

ByteArrayOutputStream baos = new ByteArrayOutputStream();

File file = new File(convImagePath);
BufferedImage convImage = ImageIO.read(file);
ImageIO.write(convImage, "JPEG", baos);
String base64Image = Base64.getEncoder().encodeToString(baos.toByteArray());

1. image = JAI.create("fileload", imagePath)

  => imagePath 변수에 저장되어 있는 변환할 이미지 경로를 가지고 이미지로 로드함.

2. JAI.create("encode", image, fos, "JPEG", null)

  => 로드한 이미지를 JPEG 형식으로 fos 에다가 인코딩 하여 저장함

3. String base64Image = Base64.getEncoder().encodeToString(baos.toByteArray());

  => 이제 변환된 이미지 데이터를 JSON으로 넘겨주기 위해 Base64로 인코딩함

최종적으로 base64Image를 JSON으로 넘겨주고 클라이언트에서 받은 데이터 자체를 그냥 img src에 넣어주기만 하면 됨.

ResponseEntity 란?

  - 클라이언트로 부터 받은 요청에 대한 백엔드 내부적의 처리 상태가 원활했는지, 

    문제가 일어났는지에 대해 상태코드를 클라이언트에게 응답함과 동시에

    각 상태에 대해 JSON 형식으로 원하는 내용을 전송하기 편리하게 설계된 스프링의 기능. 

@GetMapping("/api/members/{id}")
	public ResponseEntity<Object> member(@PathVariable Long id,
			HttpServletResponse response) throws IOException {
		Member member = memberDao.selectById(id);
		if(member == null) {
			return ResponseEntity.status(HttpStatus.NOT_FOUND)
					.body(new ErrorResponse("no member"));
			
		}
		return ResponseEntity.status(HttpStatus.OK).body(member);
	}

먼저 해당 코드는 지정해준 RestMemberController 내 매핑 메소드임.

이 코드는 각 회원마다 가지고 있는 고유 ID 값에 대해 가변적으로 매핑하여 매핑된 해당 회원정보를 JSON 형태로 응답해주는 코드임.

현재 리턴타입을 ResponseEntity로 지정해주고 있는것을 볼 수 있음.

그리고 코드에서 핵심적인 부분이 어디냐 하면

이 부분인데 위에서 ResponseEntity에 대해 설명한 것을 보다시피

클라이언트로 부터 받은 요청에 대한 백엔드 내부적의 처리 상태가 원활했는지, 문제가 일어났는지에 대한 상태코드를 반환하고 있음.

매핑된 ID값을 이용하여 DB에서 해당되는 회원정보를 가져오는데 만약에 회원정보를 가져오지 못한다면

ResponseEntity.status(HttpStatus.NOT_FOUND)를 리턴한다.

※ NOT_FOUND: 상태코드 404

HttpStatus를 리턴하게 되면 클라이언트에서의 요청 처리상태 자체를 리턴할 수 있다.

동시에 body 메소드로 체이닝을 해서 Http Body에 내용을 담아준다. 지금 코드는 에러메시지를 담고있음.

지금 메소드가 속해있는 해당 컨트롤러는 RestController이기 때문에 Http Body에 담는 내용은 JSON으로 리턴됨.

IF문을 벗어나서 Member 객체(회원정보)를 잘 가져온다면 HttpStatus.OK 라는 처리 상태와 회원정보를 그대로 리턴해줌.

※ OK: 상태코드 200 

지금은 테스트를 위해서 JSON을 브라우저에서 받고 있지만,

자바스크립트 코드 내에서 요청을 실행하고 받은 JSON 데이터를 가지고 지지고 볶고 하면 된다.

'로그인 된 사용자만 이 페이지를 볼 수 있게 해야할텐데..?' 

라고 생각하면서 어떻게 구현해야할지 모르겠다면,

스프링에서 제공해주는 Interceptor라는 인터페이스를 사용하면 된다.

먼저, Interceptor 인터페이스를 사용하지 않았을 때의 일반적인 코드를 보자

@GetMapping
public String changePwdForm(HttpSession session) {
	if(session.getAttribute("loginInfo") == null) {
        return "redirect:/login";
	}
	return "edit/changePwdForm";
}

해당 코드는 비밀번호 변경 요청 매핑 코드임

비밀번호 변경이라는게 상식적으로 무조건 로그인을 했을 때만 들어와야함 

그래서 일반적으로는, if문으로 세션에 값이 있는지 확인을 거쳐야하는 코드를 저렇게 매핑부분에 작성을 해주는데...

아니 로그인을 한 사용자에게만 보여줘야 하는 뷰가 많다면 저렇게 일일이 작성한다는게 굉장히 번거로움,,

이러한 불편함을 극복하기 위해 스프링의 Interceptor를 사용할 필요가 있음

인터셉터를 사용하기 위해선 먼저 HandlerInterceptor 라는 인터페이스를 구현해야함

그리고 해당 인터페이스의 메소드는 preHandle, postHandle, afterCompletion 등 3가지가 있는디

preHandle(): 컨트롤러를 실행하기 전에 해당 컨트롤러를 실행할지 안할지 판단

postHandle(): 컨트롤러가 정상적으로 실행된 이후에 추가기능을 구현할 때 사용 (ex - Service 및 DAO 단을 거친 후에 값 확인을 통한 디버깅 기능 추가)

afterCompletion(): 뷰가 클라이언트에 응답을 전송한 뒤 실행 (ex - 컨트롤러의 모든 실행이 끝나고 실행시간을 기록하는 등과 같은 기능 추가)

이 3가지 중에서 목적에 가장 알맞는 preHandle() 메소드를 구현하면 됨

package interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.web.servlet.HandlerInterceptor;

public class AuthCheckInterceptor implements HandlerInterceptor {

	@Override  // 컨트롤러 실행 전
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		HttpSession session = request.getSession(false);
		if(session != null) {
			Object loginInfo = session.getAttribute("loginInfo");
			if(authInfo != null) {
				return true;
			}
		} 
		response.sendRedirect(request.getContextPath() + "/login");
		return false;
	}
}

다음과 같이 Interceptor 구현 클래스를 만들고 preHandle() 메소드를 구현했음

preHandle()은 보다시피 boolean 값을 리턴하고, True 값이면 해당 컨트롤러를 실행 or False 값이면 컨트롤러 미실행

보다시피 세션 객체에 로그인 정보가 있는지 없는지 확인하고 있으면 True를 리턴,

세션 객체가 null이면 로그인 페이지로 다시 Redriect 하고 False를 리턴한다.

이렇게 기능을 구현하는 클래스를 작성해주었으면

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {

	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		registry.addInterceptor(authCheckInterceptor()).addPathPatterns("/edit/**");
	}
	
	@Bean
	public AuthCheckInterceptor authCheckInterceptor() {
		return new AuthCheckInterceptor();
	}

스프링 설정 파일에서 해당 Interceptor를 빈으로 등록해주고, WebMvcConfigurer 인터페이스의 addInterceptors() 메소드를 이용하여 자신이 구현한 인터셉터를 등록해주고 해당 결과에 다시 메소드 체인을 걸어서,

addPathPatterns() 메소드를 이용하여 인터셉터를 적용시킬 파일 경로를 등록해주면 됨

※ 이 포스트에서 스프링 설정은 JavaConfig 방식을 이용함

스프링에서 검증과 관련된 여러 기능을 제공함.

회원가입 기능은 "비밀번호는 6자리 이상만 입력", "아이디는 필수 입력 사항" 등 입력 값에 대한 제한 기능을 꼭 만들어야 함.

보통 자바스크립트에서 Selector와 이벤트 처리를 적절히 조합해서 로직을 짜는 경우가 많은데,

그 와는 다른 방법이 있음

1. Validator 란?

객체를 검증하기 위한 메소드들을 모아놓은 인터페이스임.

스프링 제공 검증기능을 위해서는 해당 인터페이스를 구현한 클래스를 만들어야 함. 

요런식으로 브라우저에서 넘어온 파라미터에 대해 객체에 값이 들어왔을 때 하고싶은 검증을 상세하게 구현하면 됨.

Validator 는 보다시피 두가지의 메소드를 가지고 있는디

supports 메소드는 검증 대상 객체가 내가 원하는 객체가 맞는지 검사함.

이 하나의 메소드로 검증하고 싶은 객체가 많으면 인터페이스의  다형성도 이용해서 검사할 수 있음.

이제 validate 메소드로 검증 코드를 짜면 되는데, 해당 메소드는 두가지 파라미터를 가지고 있음.

target: 검증 대상 객체

errors: target을 검증하다가 원하는 시점에 rejectValue()로 프로퍼티 형식으로 에러를 추가할 수 있음.

그리고 이 errors를 어디서 사용하냐

컨트롤러에서 사용하는데

직접 Validator 구현 객체를 생성해서 검증하고 싶은 객체 넘겨주고 에러를 담아주기 위한 Errors 객체를 넘겨주고 가져와서 사용함

보다시피 조건문으로 검증 오류가 났을 때 추후 동작을 설계할 수 있음

개발일지 첫글인데,,,

음.. 배운것을 머릿속에서 정리하고 상기시킬수 있어서 복습효과가 뛰어난거 같음

낄낄 자주써야지