열코의 프로그래밍 일기

웹뷰를 사용하여 안드로이드와 ios 앱을 동시에 만들면

스크롤 방식이 ios와 android가 다르다는점을 알 수 있습니다.

먼저 android는 모멘텀 스크롤 방식으로

스크롤을 손가락으로 튕구면 멈추지 않고 힘의 크기에 비례하여 계속해서 스크롤 됩니다.

이를 모멘텀 스크롤 방식이라합니다.

반면에 ios는 스크롤을 하면 손가락이 떼어지는(touchend) 순간 스크롤은 멈추게됩니다.

이를 해결하기 위해 스크롤 되는(overflow) element에 다음과 같은 css를 추가하면 해결됩니다.

-webkit-overflow-scrolling : touch;

auto는 기존 멈추는 방식(default)이며 touch 옵션을 사용하면 안드로이드처럼 

모멘텀 스크롤을 사용할 수 있게됩니다.

또한 안드로이드에서 ios처럼 멈추게 하고싶다면

스크롤되는 element의 자식들 모두에게 z-index : 0; css를 추가합니다.

만약 스크롤 되는 element의 id가 scroll이라면

#scroll * {

z-index: 0;

}

을 추가하면 모든 자식에게 한번에 css를 적용시킬수있습니다.

* date 변수 format을 변경하는 방법

- timestamp를 date로 변경하는 등 date변수를 불러오면 다음과 같이 format이 이상하다.

ex) Thu May 09 2019 10:23:18 GMT+0900 (한국 표준시)

- 간단한 함수를 통해 다음과 같이 변경해보려고 한다.]

ex) 2019-05-09 10:23:18

- 먼저 timestamp 변수를 date변수로 변경하는 방법이다.

var sysdate = new Date(timestamp); 

여기서 timestamp는 timestamp형식의 변수를 의미한다.

이상태에서 sysdate를 출력해보면 맨위의 한국 표준시 어쩌고 하는 이상한 format이 적용된다.

이를 변경하기위해 아래 함수를 정의하여 사용한다.

function date_to_str(format)

{

    var year = format.getFullYear();

    var month = format.getMonth() + 1;

    if(month<10) month = '0' + month;

    var date = format.getDate();

    if(date<10) date = '0' + date;

    var hour = format.getHours();

    if(hour<10) hour = '0' + hour;

    var min = format.getMinutes();

    if(min<10) min = '0' + min;

    var sec = format.getSeconds();

    if(sec10) sec = '0' + sec;

    return year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + sec;

}

위 함수를 정의하여 다음과 같이 사용한다.

sysdate = date_to_str(sysdate);

완료

--------------------------------------------------------------------------------------

여기서 date format을 자신이 원하는 format으로 변경하고싶다면

date_to_str 함수에 마지막 return 값을 수정하면된다.

ex) 연도와 날짜까지만 출력하고 싶다면 date 뒤를 지우면된다.

기본적인 배열은 일반 변수들이 나열된 모양이다.

이런 일반적인 배열에서 인덱스를 통해 배열의 값을 구할수있다.

반대로 배열의 값을 아는경우에 해당 배열의 몇번째 인덱스인지 indexOf함수를 사용하여 다음처럼 구할수있다.

하지만 자바스크립트에서 배열의 원소들이 객체(object)라면 어떻게 될까?

아래의 예를 살펴보자.

위와 같은 객체배열이 존재한다고 가정하자.

객체 배열에서 객체안의 변수를 구하려면 다음과 같이 사용한다.

그렇다면 반대로 "강호동"이라는 문자열을 가지고 2라는 인덱스를 구하려면 어떻게해야할까?

(실제로 프로그래밍도중 해당 지식이 필요하여 찾아서 정리한것이다..)

답은 findIndex() 함수를 사용하면 된다. 예를 통해 살펴보자.

여기서 index의 값으로 2를 반환받는다.

i라는 변수명은 아무거나 적어도 작동하는것을 보였다. 하지만 다른 변수이름과 중복되면 왠지모를 찝찝함이 생기므로

obj나 안쓰는 다른 변수명을 사용하자.

그럼이제 저 index를 사용하여 해당 배열에 접근할수있겠지?

질문이나 오타는 댓글로 남겨주길.

자바스크립트는 런타임 스크립트 언어라 실행을 해야 오류를 발견할 수 있다.

요즘엔 크롬 개발자도구 (F12) 등 가볍고 좋은 기능이 많이 있어서 오류찾기가 수월하다.

일단 이 오류에 대해 알아보자.

SyntaxError 라는 뜻은 쉽게 말해 문법오류라는 뜻이다.

문법에 맞게 작성되지 않은 경우 나타나는 오류인데 이는 비교적 해결하기가 쉽다.

에러가 난 줄 수나 위치, 틀린 문법 등을 바로 알려주기 때문이다.

해당 파일 이름을 클릭하면 실제로 코드를 보여주며 빨간색 밑줄 쳐져있는 부분이 보일것이다.

실제로 가장 자주 나타나는 ) 나 '' 오류는 해당 줄에서 괄호, 따옴표를 열기 또는 닫기를 제대로 해주지 않아서이다.

따라서 해결방법은 간단하다.

오류가 난 코드의 행으로 이동하여 자신이 무엇을 잘 못 표기했는지(오타), 괄호나 따옴표 등이 열리고 닫힌것이 정확한지만 찾아내면 끝이다.

이런 오류를 방지하기 위해서는 들여쓰기(탭)을 사용하여 코드 가독성을 높이고

띄어쓰기를 해서 문자와 변수, 괄호 사이에 가독성을 높인다.

예를들어 필자는 이런식으로 사용한다.

띄어쓰기와 문법 사이에 공간을 두어 가독성을 높인다.

또한 폰트도 개발자의 코드 가독성에 영향을 주는데,

보통 기본적인 프로그래밍 폰트는 consolas이며 윈도우 내장 폰트이다.

간혹 폰트를 바꾸는 경우가있는데 필자의 경우는 기본 폰트(consolas)가 가장 가독성이 좋았다.

(소문자 l (엘)과 대문자 I(아이)와 숫자 1(일)이 햇갈려서는 안된다.)

물론 개발자마다 다른 취향이 있으니 이는 자신이 사용해보고 가장 최적화된 폰트를 사용하기 바란다.

그럼 이만

좌우로 스크롤되는 리스트가 있다.

리스트에는 각각의 아이템들이 있으며 스크롤 할때 멈춘위치에서 가까운 아이템에 딱 맞춰서 이동하는 코드가 필요해서 만들어봤다.

코드는 아래와 같고 설명은 밑에 적어두겠다.

8번줄) .스크롤 element라고 적힌곳에 스크롤이되는 div같은 element의 클래스나 id명을 적어준다.

window라면 그냥 $(window)로 수정하도록.

scroll(function() 은 리스트가 스크롤 될 때 발생하는 이벤트이다.

.스크롤 안의 아이템은 스크롤 내에 존재하는 아이템 element이다.

+8은 패딩값때문에 줬다.

current_left는 스크롤바가 길기 때문에 현재 스크롤 위치를 구하기 위해 item의 width만큼 나눈 나머지값이 된다.

current는 나머지값이 아니라 나눈값인데,

아이템이 넘어갈때마다 1씩 증가하는 셈이된다. (나중에 인덱스로 활용하기 위해 사용했다.)

16번줄) 스크롤이 멈췄을때 콜백함수인데 이건 구글링해서 찾은것이다. 그대로 복사하면 된다.

20번줄) 100이라는 값은 스크롤이 멈추고난 후 시간을 잰것이다 100이면 0.1초

24번줄) 이제 콜백함수를 호출하면 스크롤이 멈췄을때 발생하게 된다.

25번줄) 0.4라는 수치는 해당 아이템의 길이를 일정수치이상 넘어갔을때 작동하도록 만들었다.

이는 자신이 직접 실행해보고 맞춰서 바꾸면 된다.

26번줄) animate는 스크롤이 이동되는것을 애니메이션처럼 보여주기위함이다.

좌우 스크롤이 아닌 상하 스크롤이라면 scrollLeft를 scrollTop으로 바꿔주자.

current+1은 다음 아이템으로 넘어가는것이며 current는 현재 아이템으로 돌아가는 뜻이다.

500의 값은 변경되는 속도인데 이게 크면 클수록 느려진다. 0.5초만에 돌아간다는 뜻이다.

질문이나 오류사항은 댓글로 남겨주길.