안녕하세요. 제임스 입니다. 


이번에는 자바 스크립트를 이용한 개발 중 발생하는 오류 종류와 예외 처리 방법에 대해 알아 보겠습니다. 


프로그래밍 중 발생할 수 있는 오류에는 Syntax Errors, Runtime Errors 그리고 Logical Errors 등 세가지 정도가 있습니다. 


■ Syntax Errors 


Syntax Error 는 구문 오류로 Parsing error 라고도 불립니다. 

이는 컴파일 타임에 검출되며 Syntax Error 가 수정되지 않으면 프로그램은 컴파일이 되지 않습니다. 

<script type="text/javascript">
window.print("Syntax Error 예제";
</script>

위 코드는 소 괄호를 닫지 않아 Syntax Error 를 발생하게 됩니다. 


자바스크립트 상에서 Syntax 오류가 발생할 경우 해당 오류 코드가 포함된 동일 쓰레드 상에만 오류 처리가 되고 다른 쓰레드의 코드들은 오류가 없는것 처럼 처리되어 실행 됩니다. 



■ Runtime Errors


Runtime Error 는 exception 이라고도 불립니다. 

이는 컴파일 및 인터프리터 작업은 성공적으로 끝나고 프로그램이 실행중에 발생하는 오류 입니다. 

<script type="text/javascript">
window.runtimeErrorExample();
</script>

위 코드는 runtimeErrorExample 이라는 함수를 호출 하려고 했으나 이는 없는 함수를 호출 하려 하면서 Runtime Error 가 발생하게 됩니다. 



■ Logical Errors


Logical Error 는 원인을 파악하기 가장 어려운 케이스입니다. 구문 오류도 Runtime 오류도 아닙니다. 

이는 비지니스 로직 또는 요구 사항에 따라 개발이 되었지만 예상했던 응답값이 내려 오지 않았을 경우 발생 할 수 있습니다. 

이는 비지니스 로직 또는 요구사항에 대해 재검증 작업이 필요 하므로 가장 찾기 어려운 케이스가 되겠습니다. 



■ 예외 처리 

try ~ catch ~ finally 구문을 이용하면 위와 같은 오류가 발생 하였을 경우 원하는 처리가 가능합니다. 

<script type="text/javascript">
try {
// 실행할 코드
}
catch (e){
// 오류 발생시 실행할 코드
}
finally{
// 정상여부에 무관하게 항상 마지막에 호출 될 코드
// 없어도 되는 코드 구문
}
</script>

위 코드는 try ~ catch ~ finally 구문을 간단히 정리 했습니다. 


try 가 있으면 catch 는 무조건 따라와야 합니다. 실과 바늘 같은 관계죠.

그런데 finally 는 항상 특정 코드를 호출 해야 하는 경우가 아니라면 굳이 작성하지 않아도 됩니다. 


Runtime Error 설명중 사용한 코드에 try ~ catch ~ finally 를 적용해보겠습니다. 

<script type="text/javascript">
try {
// window 오브젝트에 없는 함수 호출 시도
// --> runtime error 발생
window.runtimeErrorExample();
}
catch (e){
// 오류 내용을 alert 으로 처리
alert("Error: " + e.description );
}
finally{
// 항상 호출 시킬 코드
alert("항상 호출 되는 finally !!!");
}
</script>

위와 같이 작성 했습니다. 


결과는 쉽게 예상 가능합니다. 


runtimeErrorExample() 이라는 함수가 없기 때문에 catch 구문에서 alert 를 호출하게 되면 내용은 아래와 같을 겁니다.

javascript runtime error : runtimeErrorExample is undefined


그리고 마지막으로 "항상 호출 되는 finally !!!" 라는 문구를 가진 alert 이 한번더 보여지게 됩니다. 



이번에는 오류 종류와 예외 처리 방법에 대해 간략하게 정리 했습니다. 

그럼 저는 이만 :)



▼ 도움이 되었다면 아래 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

[HTML 코딩] URL vs URI

HTML 2017. 9. 5. 02:01

안녕하세요. 제임스 입니다. 


이번에는 URI 및 URL 에 관한 내용 정리와 함께 URN 이 무엇인지에 대한 내용 같이 다뤄보고자 합니다. 



■ URI, URL and URN 의 차이점


※ URI 란? 

Uniform Resource Identifier 의 약자로 정보 리소스를 고유하게 식별하고 위치를 지정합니다. 

URI 는 URL 과 URN 두가지로 나눌 수 있습니다. 


※ URL 이란?

Uniform Resource Locator 의 약자로 리소스의 구체적인 위치정보를 지정합니다.

URL 은 리소스 또는 페이지의 정확한 위치를 알려주고 있습니다. 


ex) 

http://jamesdreaming.tistory.com/    > 제임스의 티스토리 메인화면

http://jamesdreaming.tistory.com/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/Android    > 안드로이드 카테고리 글 목록 조회 화면

http://jamesdreaming.tistory.com/37    > 제임스 티스토리 중 안드로이드 단말정보 가져오기 관련 포스팅


위와 같이 명확한 리소스 또는 페이지 정보를 제공해주는 것이 URL 이며 이는 우리가 가장 많이 사용하고 있는 URI 의 한 형태 입니다. 


※ URN 이란?

Uniform Resource Name 의 약자로 리소스 위치와 상관 없이 리소스의 이름값을 이용하여 접근하는 방식 입니다. 


예를 들어 

위 예시 중 안드로이드 단말정보 가져오기 관련 포스팅인 http://jamesdreaming.tistory.com/37 라는 URL 이 네이버나 구글 검색에 노출 되어 있는 상태라고 하겠습니다. 

이때 제가 URL 을 http://jamesdreaming.tistory.com/android/37 이라고 변경 했을 경우 포털 사이트를 통해 링크를 클릭하여 접근하고자 하는 시도가 있을 경우 페이지를 찾을 수 없어 404 : not found 오류가 발생하게 됩니다. 


이를 보완하기 위해 가장 이상적인 방법을 강구 했는데요. 바로 위치 정보와는 상관 없이, 위치 정보가 바뀌어도 리소를 찾을 수 있도록 해당 리소스의 위치정보가 아닌 실제 리소스 이름을 사용하는 방식입니다.  





위 이미지를 참조하여 간략하게 요약하면 아래와 같습니다. 

    • URI 에는 URL 과 URN 두가지가 있습니다. 
    • URL 은 URI 입니다. 
    • 반대로 URI 는 URL 이라고 할 수 없습니다. 


간단히 정리 했는데요. 


정말 한줄로 요약 하면 URI >= URL 정도 되겠습니다. 



참고 사이트 

http://www.ietf.org/rfc/rfc3986.txt

https://stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn



▼ 도움이 되었다면 아래 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

'HTML' 카테고리의 다른 글

doucument.execCommand() 사용하기  (1173) 2018.08.03
블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

안녕하세요. 제임스 입니다. 


무비메이커 작업 중 타임라인에서 세밀하게 시간 조절 하기가 힘들다는 이야기를 들었는데요. 

아주 쉽게 이문제를 해결 할 수 있습니다. 


무비메이커 우측 하단에 시간 간격 확대 및 축소 하는 키가 있습니다. 

이를 이용하여 왼쪽 (-) 방향으로 이동 시키니 타임라인의 길이가 짧아 졌습니다. 


반대로 우측(+) 방향으로 이동 시키니 타임라인의 길이가 매우 길어 졌습니다. 

+ 방향으로 움직여 주고 작업을 하시면 좀더 디테일한 시간 설정이 가능 합니다. 


▼ 도움이 되었다면 아래 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,


■ 자바스크립트 배열 초기화하기


안녕하세요. 제임스 입니다. 


이번에는 자바스크립트에서 배열 초기화 하는 방법에 대해 알아 보겠습니다. 


var arr = [1, 2, 3, 4, 5];

위와 같은 배열이 있을때 이 배열을 console log 로 찍어보면 아래와 같이 나옵니다. 

console.log('array = '+arr);

결과 값 : array = [1, 2, 3, 4, 5]


이제 이 값을 어떻게 초기화 하는가 하는 것에 대해 알아 보겠습니다. 


■ 첫번째 방법

Array.prototype.pop() 함수를 사용하여 for loop 을 돌리면서 배열안의 값들을 빼내는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
for (var i = arr.length; i > 0; i--){
arr.pop();
}
console.log('array = '+arr);

이렇게 했을때 결과 값은 아래와 같습니다. 

array = []


■ 두번째 방법

배열의 length 값을 0 으로 설정하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log('array = '+arr);

이경우도 결과 값은 아래와 같이 초기화 됩니다. 

array = []


■ 세번째 방법

세번째 방법은 배열을 빈 배열로 재선언 하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr = [];
console.log('array = '+arr);

이 경우도 결과 값은 처음 둘과 동일하게 아래와 같은 값을 보여 줍니다. 

array = []



이렇게만 보면 세가지 방법 모두 제대로 배열을 초기화 한것 처럼 보입니다. 

하지만 해당 배열을 다른 배열로 참조한 상태에서 위와 같은 방식으로 초기화 한다고 생각 해보면 문제가 발생하는 경우가 있습니다. 

바로 세번째 방식인데요. 

무엇이 문제 인지 지금부터 살펴 보겠습니다. 


■ 첫번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
for (var i = arr.length; i > 0; i--){
arr.pop();
}
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []



■ 두번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr.length = 0;
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우도 첫번째 방법과 동일하게 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []



■ 세번째 방법 (문제점 확인!!!)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr = [];
console.log('array = '+arr);
console.log('array2 = '+arr);

위와 같이 arr2 값을 arr을 참조 하도록 선언한 후 arr 만 재선언 할 경우 결과 값은 아래와 같습니다. 


array = []

array2 = [1, 2, 3, 4, 5]


이는 arr2 값을 이미 [1, 2, 3, 4, 5] 로 선언한 상태에서 arr 만 새로 빈배열로 선언함으로 기존 arr 배열은 초기화가 잘 되었으나 arr 을 참조했던 arr2 배열은 초기화 하지 못해 발생한 문제 입니다.  



개발 중 배열을 초기화 하는 경우가 있을때 참조하고 있는 배열도 모두 초기화를 해야 하는 경우라면 처음과 두번째 방식대로 배열 초기화를 진행하면 됩니다. 

그렇지 않고 참조를 한 배열이지만 어느 것이던 하나만 초기화를 해야 하는 경우라면 세번째 방법을 사용하면 됩니다. 


잘 숙지하시고 경우에 잘 맞게 배열 초기화 진행 해보세요 :)

블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



안녕하세요. 제임스 입니다. 


영상 편집을 위해 많이 사용하는 것 중 하나가 무비메이커 입니다. 국내에서는 가장 많은 사랑을 받는 프로그램이죠.

이 무비메이커로 영상 편집중 영상 자르기 방법에 대해 설명 드리겠습니다. 



■ 무비메이커 설치하기

무비메이커 설치를 하지 못하신 분은 아래 포스팅을 참조 하여 무료로 설치 하시고 덤으로 Trial Version 을 Full Version 으로 적용 및 한글 패치까지 하시고 이 포스팅을 계속 따라 오시면 되겠습니다. 

http://jamesdreaming.tistory.com/32



■ 동영상 자르기

무비메이커가 설치 되었다면 이제부터 본격적으로 동영상 자르는 방법에 대해 설명 드리겠습니다. 


1. 무비메이커 실행

먼저 무비메이커를 실행 시킵니다. 

위 포스팅을 따라 진행 하셨다면 Trial Version이 아니라 Full Version 인 상태로 아래 이미지와 같이 한글 패치까지 끝나셨을 겁니다 :)




2. 무비메이커에 자르기를 할 동영상 추가


비디오 및 사진추가 버튼을 클릭하여 원하는 동영상을 선택합니다. 


폴더에서 동영상을 선택하여 아래 이미지와 같이 끌어서 놓아(drag & drop) 주는 방법으로 영상을 선택 할 수도 있습니다. 



3. 영상분할 및 자르기

필요 없는 부분 끝까지 마우스를 이동하여 클릭 합니다. 

검정 막대가 생기면 마우스 우클릭으로 메뉴를 오픈합니다. 

위 이미지와 같이 분할을 클릭 하면 검정색 막대를 기준으로 영상 분할이 됩니다. 


마찬가지로 뒤에 필요 없는 부분도 위 이미지와 같이 분할 처리 합니다. 


위 이미지에서 스카이 블루로 하이라이트 된 영상 영역이 보이실겁니다. 바로 첫번째 영상으로 분할 된 부분입니다. 


마찬가지로 두번째 영역을 클릭 하면 실제로 사용할 불할된 영상 부만 하이라이트 된것을 확인 하실 수 있습니다. 



4. 사용하지 않는 분할영상 제거

현재 세등분 된 영상 중 사용할 두번째 영상 파트만 제외하고 마우스 우클릭 후 제거 항목을 클릭하여 이미지를 제거 합니다. 



위와 동일한 방식으로 끝부분에 남아 있는 사용하지 않을 동영상 부분을 제거 합니다. 



5. 작업한 동영상 저장하기

무비메이서 좌측 상단 파일 > 동영상 저장(M) > 고해상도 디스플레이용(H) 을 차례대로 클릭하여 저장할 폴더 위치 및 파일 명을 정하고 저장을 클릭 합니다.



위와 같이 저장이 진행 됩니다. 


동영상 저장이 완료 되면 위와 같이 바로 재생 하거나 폴더 열기를 하여 파일이 제대로 생성 되었는지 확인 하시면 됩니다. 



간단하게 무비메이커 동영상 자르는 방법에 대해 정리 했습니다. 

처음 만져 보시는 분들께 도움이 되었으면 합니다. 


▼ 도움이 되었다면 아래 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



안녕하세요. 제임스 입니다. 


어제 저녁까지 잘 쓰고 있던 티스토리 포토업로더가 갑자기 안됩니다. 

제가 주로 사용하는 브라우저는 크롬 브라우저 입니다. 

Daum 포토업로더는 Flash Player 10 에 최적화 되어 있습니다. 최신 버전의 Flash를 선치하신 후 다시 시도해주세요.

라고 나오며 사진업로드를 할 수 없는 상태가 되었습니다. 


그래서 해결책을 찾았습니다. 




자세히보기 를 클릭 해봐도 제대로된 가이드도 없습니다. 

도움이 전혀 되지 않네요. 


해결방법은 크롬 설정에서 플래시 관련 부분을 수정하는 겁니다. 


지금부터 설정 해보겠습니다. 


크롬 브라우저의 우측 상단 위와 같이 생긴 버튼을 클릭 합니다.

그러면 위와 같이 드롭다운 리스트가 나옵니다. 

아래쪽에 보이는 설정을 클릭합니다. 


가장 아래에 있는 고급을 클릭 합니다. 


콘텐츠 설정을 클릭 합니다. 


중간 쯤에 있는 Flash 를 선택하여 클릭합니다. 


사이트에서 Flash를 실행하도록 허용을 위와 같이 우측으로 이동시켜 활성화 시켜 줍니다. 


사이트에서 Flash 실행 여부를 차단 또는 허용 하는 설정을 여기서 할 수 있습니다. 

우리는 허용 부분의 추가버튼를 클릭하여 줍니다. 



나의 티스토리 블로그 주소를 입력 후 추가 버튼을 클릭합니다. 


그러면 위 이미지와 같이 허용 부분에 나의 티스토리 블로그 주소가 등록 된 것을 확인 할 수 있습니다. 


이제 다시 티스토리 블로그로 돌아가 사진올리기를 시도해봅니다. 


이전과 같이 잘 나옵니다. 


문제 해결이죠 :)


 잘 되던 것이 갑자기 이렇게 된 이유는 모르겠습니다. 

하지만 우리는 이 문제를 해결 할 수 있는 능력이 있죠!! :D


도움이 되는 포스팅이었으면 하네요. 


그럼 저는 20000!

블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,


■ 자바스크립트를 이용하여 다른 URL 로 화면 이동하기


자바스크립트로 다른 URL 호출하는 방법은 여러가지가 있습니다. 


자바스크립트에서는 window.location 또는 간단하게 location 오브젝트를 이용하여 현재 웹페이지의 정보를 가져오거나 수정하는데 사용합니다. 수정한다는 이야기는 현재 페이지에 보여지는 URL 을 변경 하는 것도 포함됩니다. 

그래서 우리는 다른 페이지로 이동 시킬때 

window.location 또는 location object 를 이용합니다. 


아래는 다른 URL 로 이동시키는 방법입니다.

window.location = "https://www.james_redirectUrl.com";

window.location.href = "https://www.james_redirectUrl.com";

window.location.assign("https://www.james_redirectUrl.com");

window.location.replace("https://www.james_redirectUrl.com");

self.location = "https://www.james_redirectUrl.com";

top.location = "https://www.james_redirectUrl.com";

window.location 은 단순히 location 만 사용해도 되므로 위 코드들 중 첫 네개는 아래와 같이 사용 가능합니다. 

location = "https://www.james_redirectUrl.com";

location.href = "https://www.james_redirectUrl.com";

location.assign("https://www.james_redirectUrl.com");

location.replace("https://www.james_redirectUrl.com");


위와 같은 방식으로 원하는 URL 로 화면 이동을 할 수 있지만 각각 조금씩 다른 부분이 있습니다. 


예를 들어 location.replace() 를 할 경우 history stack 에서 현재 페이지를 호출할 페이지로 바꿔 치기 하는 것으로 이 경우 back button 을 이용하거나 history.back() 함수 등을 이용하여 이전 화면으로 이동 할 수 없습니다. 


쉽게 설명 하자면 


화면 이동을 1 > 2 > 3 번 페이지로 이동 하여 현재 화면이 3번 인 상태 입니다. 

여기서 location.replace() 를 이용하여 4번 페이지로 이동 시켰습니다. 

그러면 history stack 에는 1 > 2 > 3 대신에 1 > 2 > 4 가 저장됩니다. 

여기서 history back 을 할 경우 3번 화면으로 이동 하는 것이 아니라 2번 화면으로 이동하게 됩니다. 


만약 location.href 를 사용하여 이동 하였다면

1 > 2 > 3 에서 4번 화면이 추가 되어 history stack 에는 1 > 2 > 3 > 4 가 저장되게 됩니다. 

물론 이상태에서 history back 을 할 경우 3번 화면이 나오게 됩니다. 


다른 화면이 아니라 현재 화면을 리로드 할 경우는 아래와 같이 사용하면 됩니다. 

window.location.reload();



이제 위 방법들을 이용하여 여러 상황에 따른 화면 이동 처리를 어떻게 하는지 보시겠습니다. 



■ 화면이 호출 되는 시점에 다른 화면 호출 하기

화면이 호출 되는 시점에 화면 전환해야 하는 경우가 종종 있습니다 .

이때는 웹페이지의 <head> 태그 안에 아래와 같은 스크립트를 추가 하면 됩니다. 

<script>
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
</script>

스크립트부가 로드 되는 시점에 바로 location.href 가 호출 됩니다. 

이 경우 사용자는 현재 호출되는 페이지를 볼수 없습니다. 화면을 랜더링 하기 전에 바로 다른 페이지로 이동 하기 때문입니다. 



■ 화면 진입 후 약간 대기 후 다른 화면 호출하기

<script>
setTimeout(function(){
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
}, 5000);
</script>

다른 화면이 호출 되는 시점을 스크립트부가 로드되고 5초가 지난서야 다른 화면을 호출 하는 예제 입니다. 



■ 화면 진입 후 조건이 맞을 경우에 화면 호출하기

<script>
var condition = true; // 사용자가 특정 조건에 맞게 설정 또는 데이터 로드값으로 처리
if(condition){
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
}
</script>

스크립트부가 로드 될때 condition 이라는 값이 true 일 경우 다른 화면을 호출 합니다. 

여기서 condition 은 개발자가 선언하여 사용하면 됩니다. 



■ 화면 진입 후 사용자에 의해 이벤트가 발생 한 경우 화면 호출하기

<script>
document.getElementsById("buttonEvent").onclick = function() {
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
};
</script>

id 값이 buttonEvent 인 컴포넌트가 클릭 된 경우 화면 이동처리하는 예제입니다. 



화면 이동 처리를 할 수 있는 방법들은 많이 있습니다. 

개발 시 원하는 케이스에 맞춰서 개발 할 수 있도록 하면 좋을 것 같습니다. 

블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

안녕하세요. 제임스 입니다. 


이번에는 안드로이드 DP 및 DPI 의 개념에 대해 정리 하겠습니다. 


■ Dimension Units (치수, 크기 단위) 

안드로이드 에서 유저 인터페이스를 xml 에서 생성하거나 또는 java 코드로 생성 할 수 있습니다. 이때 크기, 거리, 길이, 넓이, 높이, 마진, 패딩 등등을 표현하기 위해 여러가지 치수, 크기 단위를 사용할 수 있습니다. 


아래는 안드로이드에서 사용하는 기본 단위들입니다. 


px - 화면상의 실제 픽셀입니다. 단일 픽셀의 물리적 크기는 화면 밀도에 따라 달라집니다. 


in - 화면의 물리적 인치 단위 입니다. 단일 인치의 픽셀 수는 화면 밀도에 따라 달라지게 되는데 이는 픽셀수가 화면 밀도에 따라 달라지기 때문입니다. 


mm - in 과 마찬가지로 화면의 물리적 밀리미터 단위 입니다. 1 inch 는 25.4 mm 입니다. 


pt - Point 로 불리며 텍스트의 폰트 사이즈를 의미 합니다. 1 inch 는 72 pt 입니다. 


dp - 단일 dp 의 물리적 사이즈는 모든 화면 밀도에서 거의 동일 합니다. 1 inch 는 거의 160 dp 입니다. 


sp - 비율 독립 픽셀단위로 특별히 텍스트 크기를 위해 사용합니다. 단일 sp 의 물리적 사이즈는 모든 화면 밀도에서 겅의 동일 합니다. 1 inch 는 거의 160 sp 입니다. 


< 이미지 출처 : https://www.captechconsulting.com/blogs/understanding-density-independence-in-android >



■ DPI (Dots Per Inch) 란? 

안드로이드 리소스에서 사이즈 구분을 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi 등으로 하고 있습니다. 

여기서 dpi 라는 단위에 대해 설명 드리겠습니다. 

DPI (Dots per Inch) 즉, 인치당 들어가는 픽셀을 의미합니다. 


mdpi ---> 48 px

hdpi ---> 72 px

xhdpi ---> 96 px

xxhdpi ---> 144 px

xxxhdpi ---> 192 px 


이 됩니다. 


DPI <---> Pixel 간 변환은 아래 사이트에서 하실 수 있습니다. 

https://pixplicity.com/dp-px-converter/

아래 이미지와 같은 사이트로 DPI 와 PX 사이의 값 뿐만 아니라 다른 단위에 대한 값들도 자동 산정되니 개발 시 참조 하세요.



http://www.gargasz.info/android/

아래 사이트에서도 상기 사이트와 같이 converter 를 제공하고 있으며 dimension uint 에 관한 설명도 같이 보실 수 있습니다. 



■ Density (밀도) & DPI

밀도는 DPI 를 일정 단위로 나눈 것입니다. 

여석 가지 일반화된 밀도는 아래와 같습니다. 


~ 120dpi > ldpi (저밀도) 

~ 160dpi > mdpi (중간 밀도) - baseline

~ 240dpi > hdpi (고밀도) 

~ 320dpi > xhdpi (초고밀도)

~ 480dpi > xxhdpi (초초고밀도)

~ 640dpi > xxxhdpi (초초초고밀도)


MDPI 의 경우 1 sp = 1 px = 1dp 가 되어 기준점이 됩니다. 

이후 HDPI, XHDPI .... 로 올라 갈 수록 sp 대비 dp 비율이 증가 하게 되는 내용을 정리 한 이미지 입니다. 




위 이미지는 안드로이드에서 실제 크기와 밀도가 일반화된 크기와 밀도로 대략적으로 맵핑되는 방식을 보여주고 있습니다. 



다른 화면 크기에 맞게 UI 작업을 하다보면 각 디자인에 최소한의 공간 크기가 필요 합니다. 따라서 위 이미지에서 나타난 각 일반화된 화면 크기는 시스템이 정의하는 최소 해상도를 가지게 됩니다. 이 최소 크기의 단위는 dp 이며 이 경우 시스템이 화면 밀도의 변화를 걱정할 필요가 없습니다. 



현재 사용중인 단말의 DPI 는 아래와 같은 코드를 이용하여 구할 수 있습니다. 

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int deviceDpi = metrics.densityDpi;

deviceDpi 값이 바로 사용중인 단말의 DPI 값입니다. 




이번에는 안드로이드에서 사용하는 기본적인 치수 단위들과 DP 및 DPI 에 대해 정리 했습니다. 

도움이 되었으면 하는 바램과 함께... 저는 이만 잠자리로 :)


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

업무 관련 개발 작업 도중 이상하게 NullPointerException 을 자주 본 날입니다. 


이런 실수 잘 하지 않는데 너무 많이 봐서... 

그래서 이제 이런 실수 하지 말자고 제 스스로를 채찍질 하려고 글을 남깁니다. 




■ NullPointerException 발생 원인


NullPointerException 이 발생하는 원인은 사용할 객체를 생성 후 인스턴스를 생성하지 않고 null 오브젝트를 사용하려 할 경우 발생 합니다. 

TestObject a = null;
String b = a.getTestResult();
b.toString();

null 을 참조 하여 NullPointerException 이 발생하게 됩니다. 이는 아래와 같이 간단히 객체 생성으로 해결 할 수 있습니다. 

TestObject a = new TestObject();
String b = a.getTestResult();
b.toString();


위와 같이 제대로 선언까지 했는데도 불구하고 NullPointerException 이 발생한다면 참조하는 값인 s.getTestResult() 자체가 Null 인 경우입니다. 

위 코드를 기준으로 봤을때 a.getTestResult() 가 null 이므로 b 값도 null 이고 이 null 값을 toString() 함으로 인해 NullPointerException 이 발생하게 되는 겁니다. 



■ NullPointerException 방어 코드 

NullPointerException 은 자주 발생하면서도 얼마든지 예방이 가능합니다. 

방어 코드를 아래와 같이 넣어 줄수 있습니다. 

TestObject a = new TestObject();
String b = a.getTestResult();
if(b != null) {
b.toString();
}

위 코드와 같이 null 체크를 하는 겁니다. 

null 일 경우 toString 을 하지 않음으로 NullPointerException 을 피할 수 있습니다. 



저도 실수 몇 개로 몇번의 오류를 봤는지 모르겠습니다. ㅠㅠ

이런 실수 하지 않도록 정신 차리고 개발 해야 겠습니다 :)





블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,


안녕하세요. 제임스 입니다. 


앞번에 안드로이드 리소스에 관해 개념적인 부분을 설명 했는데요. 

내용 참 길고 어렵게 느껴 지시죠? 


이번에는 샘플 코드와 함께 한번 이전 내용을 요약해보겠습니다. 

이글을 읽고 나면 리소스를 어떻게 사용하는지에 대해 이해를 하실수 있으리라 믿습니다. 



■ 리소스 파일 작업



※ values 디렉토리




colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="reousrce_tut_color">#FF4081</color>
</resources>

<resources></resources> 태그 안에 <color></color> 로 묶어 원하는 컬러 값을 정의해주면 됩니다. 

컬러값은 인터넷등에서 색상표를 참조하여 원하는 색으로 설정 하시면 됩니다. 



dimens.xml

<resources>
<dimen name="one_pixel">1px</dimen>
<dimen name="double_density">2dp</dimen>
<dimen name="eleven_sp">11sp</dimen>
<dimen name="fab_margin">10dp</dimen>
<dimen name="thirty_density">30dp</dimen>
</resources>

colors 와 동일하게 <resources></resources> 태그 안에 정의를 하지만 <dimen></dimen> 이라는 태그를 이용하여 사이즈를 설정 한다고 생각하시면 됩니다. 단위는 px (Pixel), dp 또는 dip (Density-independent Pixels), sp (Scale-independent Pixels) 등을 사용하고 있습니다. 단위에 대한 내용은 별도로 정리 한번 하도록 하겠습니다. 



strings.xml

<resources>
<string name="app_name">Android Resources Tutorial</string>
<string name="resource_string_from_xml">리소스 string 값 XML 파일에서 설정</string>
<string name="resource_string_from_code">리소스 string 값 Java Code 에서 설정</string>
</resources>

문자열을 정의하는 리소스로 <string></string> 태그 안에 정의 하여 사용합니다. 



※ drawable 디렉토리



앱 내에서 사용할 이미지를 drawable 디렉토리 아래에 저장하면 됩니다. 



※ layout 디렉토리


위 values 디렉토리 내 xml 리소스에서 정의하고 있는 값들을 실제 화면 레이아웃에서 아래와 같이 사용 합니다.



activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tutorial.james.androidresourcestut.MainActivity"
android:orientation="vertical"
android:layout_gravity="center">

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/android_drawable"
android:layout_marginTop="@dimen/thirty_density"
android:layout_marginBottom="@dimen/eleven_sp"
android:layout_gravity="center_horizontal"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/textView_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/thirty_density"
android:layout_marginRight="@dimen/thirty_density"
android:textColor="@color/reousrce_tut_color"
android:text="@string/resource_string_from_xml" />

<Button
android:id="@+id/btn_set_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/thirty_density"
android:text="Java Code 로 텍스트 셋팅하기기"/>

<TextView
android:id="@+id/textView_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
/>

</LinearLayout>

</LinearLayout>

사용자 인터페이스를 구성하는 화면 레이아웃 파일입니다. 


<ImageView> 를 이용하여 drawable 디렉토리에 있는 이미지를 불러 옵니다. 

android:background="@drawable/android_drawable"


바로 아래에 <TextView> 를 이용하여 문자열을 보여 줍니다. 

여기서 좌우로 마진 30dp 로 설정하는데 이것을 dimen.xml 에 정의한 thirty_density 라는 값으로 정의 했습니다. 

android:layout_marginLeft="@dimen/thirty_density"
android:layout_marginRight="@dimen/thirty_density"

또한 문자열 색상을 colors.xml 에 정의한 resource_tut_color 라는 값으로 정의 했으며, 

문자열은 strings.xml 에 정의한 resource_string_from_xml 이라는 값으로 정의 했습니다. 

android:textColor="@color/reousrce_tut_color"
android:text="@string/resource_string_from_xml"


그 아래 <Button> 을 위치 시켜 자바코드에서 문자열을 표기 할때 리소스를 사용하는 방법을 보여 드릴겁니다 

버튼에도 문자열이 표기 할 수 있는데요 여기서는 strings.xml 에 정의 한 값이 아니라 직접 하드코딩으로 텍스트를 입력 했습니다. 

android:text="Java Code 로 텍스트 셋팅하기기"

위와 같이 사용 할 수는 있지만 지양하시길 권합니다. 유지 보수 측면에서 본다면 앱내 모든 문자열들을 stirngs.xml 파일 내에 저장하여 사용하는 것이 좋습니다. 또한 다중 언어를 지원하는 경우라면 거의 필수라고 생각 하시면 됩니다. 

다중 언어 지원에 대한 내용은 추후 별도로 다루도록 하겠습니다. 


그리고 마지막으로 <TextView> 를 하나 더 만들고 id 값을 부여하여 java code 에서 해당 id 값을 이용하여 텍스트 입력을 할 수 있도록 하였습니다. 

<TextView
android:id="@+id/textView_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
/>


※ Java 소스




자바소스 위치는 위 이미지와 같으며 여기서는 MainActivity.java 소스를 아래와 같이 작성 하였습니다.

package com.tutorial.james.androidresourcestut;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// activity_main 을 액티비티의 레이아웃으로 정의
setContentView(R.layout.activity_main);

// btn_set_text 라는 id 값에 클릭리스너를 추가
findViewById(R.id.btn_set_text).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 클릭 되었을 경우 ...
// textView_2 라는 id 값을 가진 TextView 의 텍스트를
// strings.xml 에 있는 resource_string_from_code 값으로 적용
((TextView)findViewById(R.id.textView_2)).setText(R.string.resource_string_from_code);
}
});

}

}

소스내에 주석을 간단히 작성했으니 참조하세요 :)


문자열을 TextView 에 set 할때는 위와 같이 setText(R.string.표시할문자열_ID값) 으로 호출 하면 됩니다. 

각 객체의 사용법에 대해서는 별도 내용으로 정리할 예정입니다. 



위와 같이 작성 후 앱을 빌드 합니다. 

Android Studio 단축키 Alt+Shift+X 를 이용하거나 아래 버튼을 클릭 합니다. 




■ 앱 실행 결과

최상단에 drawable 디렉토리에 있던 이미지가 노출되고 그 하단에 strings.xml 에 정의한 문자열 및 colors.xml 에 정의 한 색상이 적용되어 표시 됩니다. 

그 하단에 버튼이 노출되고 이 버튼을 클릭 시 아래와 같이 문자열이 나타나게 됩니다. 




리소스를 이용하여 간단한 앱을 만들어 봤습니다. 

개념만 설명 하던것과 달리 샘플을 보시면 좀더 쉽게 이해가 되실겁니다. 

도움이 되셧길 기도하면서 저는 다른 이야기를 준비하겠습니다. 


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,