쪽빛하늘

반응형 모바일 개발을 하다가 화면에서 화살표 외 컨텐츠 내용 부분을
스와이프 할 경우 좌우로 움직일 수 있도록 하는 부분에 대한 내용이 필요해서 정리.

<div>
  <div class="pop_bg"></div>
  <div class="pop_wrapn"></div>
</div>

위에 div영역도 상세한 내용은 제외하고, 간단히 아래 js에서 사용하는 부분에 대해 구조만 확인할 수 있도록 작성했다.

var fn_open = function() {
	// 팝업열기
};

var fn_close = function() {
	// 팝업 닫기
};

var fn_getPrev = function() {
	// 이전 내용
};

var fn_getNext = function() {
	// 다음 내용
};

$(document).ready(function(){
	$('.pop_area').on('touchstart', function() {
    	// 처음 터치한 영역의 X,Y 좌표
		startX = event.touches[0].pageX;
		startY = event.touches[0].pageY;
		console.log('startX :: ' + startX);
		console.log('startY :: ' + startY);
	});

	$('.pop_area').on('touchend', function() {
    	// 마지막 터치한 영역의 X,Y 좌표
		endX = event.changedTouches[0].pageX;
		endY = event.changedTouches[0].pageY;
		console.log('endX :: ' + endX);
		console.log('endY :: ' + endY);

		if (startX > endX) {
        	// 오른쪽에서 왼쪽으로 스와이프
			fn_getNext();
		} else if (startX < endX) {
        	// 왼쪽에서 오른쪽으로 스와이프
			fn_getPrev();
		} else {
        	// X 좌표 시작과 끝이 같을 때
        }

		console.log(Number(startY) - Number(endY));
		if (startY < endY && (Number(endY) - Number(startY)) > 50) {
        	// 위에서 아래로 스와이프
            // 범위가 너무 작을 경우 좌우로 움직이면서 Y값이 달라질 수 있으므로
            // 임의로 50의 값을 줌
			fn_close();
		}
	});

	$('.pop_bg').on('touchmove', function() {
    	// 팝업 화면 외 배경에서 행동이 일었을 경우
		fn_close();
	});
});

위의 내용만 보면 간단하긴 한데, 그래도 한 번 정리해두는 편이 좋을 것 같아서 각 함수 안에 소스는 지우고 올린다.

모바일의 경우 애니메이션 효과를 주는 경우가 많기 때문에 스와이프도 당연히 될거라고 생각하는 경우가 많아서
두가지가 함께 진행이 되는 경우가 많은 것 같다.

개발을 하다보면 한 번씩 문자가 깨지는 경우가 발생한다.

생각보다 빈번하게 발생하는 문제이기에 보통 자주 발생하는 문제점을 확인해도 해결이 되지 않는 경우가 있다.

특히 같은 코드로 실운영 환경에서는 문제가 없는데, 로컬에서만 문제가 생기는 경우가 있다.

이 경우 서버단에서 문제가 발생한 것은 아닌지 확인을 해야한다.

tomcat의 Server.xml의 커넥터 설정으로 인한 문제일 확률이 있다.

기본적으로 커넥터 부분에 작성이 되어있는 내용은 아래와 같다.

여기에 URIEncoding만 추가해주면 간단히 문제를 해결할 수 있다.

위의 커넥터 뿐만 아니라 아래에 커넥터 부분이 하나 더 있는데,

이 부분이다.

나는 위의 커넥터 부분에만 URIEncoding을 넣었을 때 문제가 해결되지 않았었고 아래의 커넥터 부분에도 URIEncoding을 넣었었다.

이 부분은 프로젝트마다 차이가 있는지 정확히는 모르겠다.

그래서 해당 커넥터도 아래와 같이 수정.

요즘에는 몇 번 같은 문제를 해결하고 난 뒤부터는 큰 문제가 없어보이면 server.xml에서 인코딩을 먼저 확인해본다.

touch는 파일의 날짜시간정보를 변경하는 명령어로 옵션 없이 사용하면 서버의 현재 시간으로 파일의 최근사용한 시간과 최근변경 시간을 변경한다.

만약 파일이 존재하지 않는 경우 빈 파일이 생성된다.

사용 예시는 아래와 같다.

  touch [옵션] 파일명

  touch -t 201804091800.45 test.txt

  touch -c test.txt

ping은 외부 호스트 서버가 네트워크상으로 접근이 가능한지 간단히 확인해 볼 수 있는 명령어이다.

ICMP(Internet Control Message Protocol)을 이용하여 외부 호스트에 신호를 보내며, 신호를 받은 호스트는 다시 응답을 주면서 서로 네트워크가 연결되어있는지 확인한다.

현재 ping을 이용해 공격대상을 찾는 해커들로인해 ICMP을 제한하거나 특정 IP만 응답을 하도록 서버 관리를 하는 경우가 있어서 ping 명령어 만으로 네트워크 단절 여부를 확실히 알기 어렵다.

사용 기본 예시는 아래와 같다.

  ping [옵션] <도메인명 or IP주소>

대표적인 옵션으로는 아래 두 옵션이 있다.

서버에서 파일이 인코딩 문제로 파일이 깨지는 경우 해결하는 방법이다.

  iconv -f <변경전인코딩> -t <변경후인코딩> <파일명>

temp.txt 이름의 파일이 euc-kr 형식일때 이 파일을 utf-8 형식으로 바꾸는 방법은 아래와 같다.

  iconv -f euc-kr -t utf-8 temp.txt

참고로 지원하는 인코딩 목록을 확인하기 위해서는

  iconv -l

명령어로 확인할 수 있다.

서버에서 파일명이 깨지는 경우 인코딩 변경으로 문제를 해결할 수 있는 명령어이다.

폴더로 들어가서 처리를 할 경우 아래와 같이 명령어를 선택하면 해당 폴더에 있는 euc-kr 인코딩이 utf-8 인코딩 방식으로 바뀐다.

convmv -f euc-kr -t utf-8 ./*.* --notest

참고로 현재 위치에서 하위 디렉토리까지 포함하여 인코딩 방식을 변경하기 위해서는 -r 옵션을 추가하면 된다.

convmv -f euc-kr -t utf-8 ./*.* -r --notest

이클립스 서버를 실행하면서 확인한 오류.

The specified JRE installation does not exist

문구의 경우 등록된 프로젝트의 서버의 JRE 경로가 잘못 잡힌 경우일 확률이 높다.

(기존 개발 프로젝트 환경에서 포맷을 하면서 JRE, JDK를 새로 설치하면서 발생한 문제)

Window > Preferences > Server > Runtime Environment 에서

서버를 선택하여 우측의 Edit 버튼을 누른다.

여기서 경로를 재설정 해주면 정상적으로 서버 실행이 가능하다.

IE8에서 빈 텍스트 노드가 생성되어 공간을 차지하면서 점(.)이 보여지는 버그가 생겼다.

빈 텍스트 노드가 생기는 이전 객체에 div를 이용하여 style을 줘서 해결했다.

만일 input 뒤에 빈텍스트 노드가 생겼다면 아래와 같이 해결했다.

IE8과 chrome에서 px로 사이즈를 잡아서 배치를 하면 일치하지 않는 경우가 존재한다.

나의 경우 chrome에서는 top:10px; 가 적당한데, IE8에서는 top:3px; 가 적당한 값이었다.

적정선에서 타협할 수 있는 차이면 괜찮겠지만 너무 눈에 딱 보이는 부분이라 따로 적용을 할 수 밖에 없었다.

class명이 .basic-btn 일 경우 아래와 같이 적용하면 IE8의 top은 3px, 그 외의 브라우저에는 10px로 적용할 수 있다.

원하는 속성 뒤에 '\0/ !important'를 붙여주면 간단히 해결 할 수 있다.

script에서 작성한 내용 중

$('#id').val().trim(); 

해당 부분이 IE8에서 작동이 되지 않는 것을 확인했다 문제는 다름아닌 trim()

IE8 이하 버전에서는 trim()이 사용이 되지 않는다.

trim()을 사용하기 위한 방법을 찾아보니 두가지 방법이 나왔다.

첫번째 방법은 javascript를 이용하여 사용하는 방법으로 아래와 같이 함수형식으로 사용하는 것이다.

두번째 방법은 jQuery를 이용한 방법으로, 기존 소스에서 jQuery를 사용하고 있었기에 개인적으로 아래와 같은 방법을 이용하여 변경하였다.