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


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


프로그래밍 중 발생할 수 있는 오류에는 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 등의 프로그래밍 언어를 소개 합니다.

,


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


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


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


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 등의 프로그래밍 언어를 소개 합니다.

,


■ 자바스크립트를 이용하여 다른 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 등의 프로그래밍 언어를 소개 합니다.

,

Front End 개발 중 자주 대면하게 되는 문제점중 하나가 한글 인코딩 문제이다.

한글을 그대로 파싱 할 경우 오류가 발생하게 되는데 이를 해결하는 방법은 아래와 같다.


http://www.mywebpage.com/한글.jsp


위와 같이 한글이 포함된 URL 이 있다고 가정했을 경우 URL 인코딩을 하게 되면 


http://www.mywebpage.com/%ED%95%9C%EA%B8%80.jsp

위와 같이 이스케이프 처리 되며 이를 받는 쪽에서는 decode 처리 하여 처음 원했던 URL 을 획득할 수 있다. 



인터넷에서 URL 처리는 ASCII 캐릭터 셋으로만 처리되는데 한글을 ASCII 코드로 변환할 필요가 있음으로 URL 인코딩을 하게 된다.




처리 방법은 아래와 같다.


▶ 한글 인코딩 > encodeURI() 함수 사용

var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp");

// 결과 값 >>> http://www.mywebpage.com/%ED%95%9C%EA%B8%80.jsp


▶ 인코딩 된 한글 디코딩 > decodeURI() 함수 사용

var decodeStr = decodeURI(encodeStr);

// 결과 값 >>> http://www.mywebpage.com/한글.jsp



encodeURI() 및 decodeURI() 는 한글만 처리 해주고 있지만 URL 전체를 처리하고자 할 경우 

encodeURIComponent() 및 decodeURIComponent() 를 사용하면 된다.


▶ URL 전체 인코딩 > encodeURIComponent() 함수 사용

var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp");

// 결과 값 >>> http%3A%2F%2Fwww.mywebpage.com%2F%ED%95%9C%EA%B8%80.jsp


▶ 인코딩 된 URL 전체 디코딩 > decodeURIComponent() 함수 사용

var decodeStr = decodeURI(encodeStr);

// 결과 값 >>> http://www.mywebpage.com/한글.jsp



사용 목적에 따라 encodeURI() / decodeURI() 또는 encodeURIComponent() / decodeURIComponent() 를 사용하면 된다. 



HTML5 에서의 default character set 은 UTF-8 이며, 아래는 ASCII 코드 표 이다.

( Reference : http://www.w3schools.com/tags/ref_urlencode.asp )

CharacterFrom Windows-1252From UTF-8
space%20%20
!%21%21
"%22%22
#%23%23
$%24%24
%%25%25
&%26%26
'%27%27
(%28%28
)%29%29
*%2A%2A
+%2B%2B
,%2C%2C
-%2D%2D
.%2E%2E
/%2F%2F
0%30%30
1%31%31
2%32%32
3%33%33
4%34%34
5%35%35
6%36%36
7%37%37
8%38%38
9%39%39
:%3A%3A
;%3B%3B
<%3C%3C
=%3D%3D
>%3E%3E
?%3F%3F
@%40%40
A%41%41
B%42%42
C%43%43
D%44%44
E%45%45
F%46%46
G%47%47
H%48%48
I%49%49
J%4A%4A
K%4B%4B
L%4C%4C
M%4D%4D
N%4E%4E
O%4F%4F
P%50%50
Q%51%51
R%52%52
S%53%53
T%54%54
U%55%55
V%56%56
W%57%57
X%58%58
Y%59%59
Z%5A%5A
[%5B%5B
\%5C%5C
]%5D%5D
^%5E%5E
_%5F%5F
`%60%60
a%61%61
b%62%62
c%63%63
d%64%64
e%65%65
f%66%66
g%67%67
h%68%68
i%69%69
j%6A%6A
k%6B%6B
l%6C%6C
m%6D%6D
n%6E%6E
o%6F%6F
p%70%70
q%71%71
r%72%72
s%73%73
t%74%74
u%75%75
v%76%76
w%77%77
x%78%78
y%79%79
z%7A%7A
{%7B%7B
|%7C%7C
}%7D%7D
~%7E%7E
 %7F%7F
`%80%E2%82%AC
%81%81
%82%E2%80%9A
ƒ%83%C6%92
%84%E2%80%9E
%85%E2%80%A6
%86%E2%80%A0
%87%E2%80%A1
ˆ%88%CB%86
%89%E2%80%B0
Š%8A%C5%A0
%8B%E2%80%B9
Œ%8C%C5%92
%8D%C5%8D
Ž%8E%C5%BD
%8F%8F
%90%C2%90
%91%E2%80%98
%92%E2%80%99
%93%E2%80%9C
%94%E2%80%9D
%95%E2%80%A2
%96%E2%80%93
%97%E2%80%94
˜%98%CB%9C
%99%E2%84
š%9A%C5%A1
%9B%E2%80
œ%9C%C5%93
%9D%9D
ž%9E%C5%BE
Ÿ%9F%C5%B8
 %A0%C2%A0
¡%A1%C2%A1
¢%A2%C2%A2
£%A3%C2%A3
¤%A4%C2%A4
¥%A5%C2%A5
¦%A6%C2%A6
§%A7%C2%A7
¨%A8%C2%A8
©%A9%C2%A9
ª%AA%C2%AA
«%AB%C2%AB
¬%AC%C2%AC
%AD%C2%AD
®%AE%C2%AE
¯%AF%C2%AF
°%B0%C2%B0
±%B1%C2%B1
²%B2%C2%B2
³%B3%C2%B3
´%B4%C2%B4
µ%B5%C2%B5
%B6%C2%B6
·%B7%C2%B7
¸%B8%C2%B8
¹%B9%C2%B9
º%BA%C2%BA
»%BB%C2%BB
¼%BC%C2%BC
½%BD%C2%BD
¾%BE%C2%BE
¿%BF%C2%BF
À%C0%C3%80
Á%C1%C3%81
Â%C2%C3%82
Ã%C3%C3%83
Ä%C4%C3%84
Å%C5%C3%85
Æ%C6%C3%86
Ç%C7%C3%87
È%C8%C3%88
É%C9%C3%89
Ê%CA%C3%8A
Ë%CB%C3%8B
Ì%CC%C3%8C
Í%CD%C3%8D
Î%CE%C3%8E
Ï%CF%C3%8F
Ð%D0%C3%90
Ñ%D1%C3%91
Ò%D2%C3%92
Ó%D3%C3%93
Ô%D4%C3%94
Õ%D5%C3%95
Ö%D6%C3%96
×%D7%C3%97
Ø%D8%C3%98
Ù%D9%C3%99
Ú%DA%C3%9A
Û%DB%C3%9B
Ü%DC%C3%9C
Ý%DD%C3%9D
Þ%DE%C3%9E
ß%DF%C3%9F
à%E0%C3%A0
á%E1%C3%A1
â%E2%C3%A2
ã%E3%C3%A3
ä%E4%C3%A4
å%E5%C3%A5
æ%E6%C3%A6
ç%E7%C3%A7
è%E8%C3%A8
é%E9%C3%A9
ê%EA%C3%AA
ë%EB%C3%AB
ì%EC%C3%AC
í%ED%C3%AD
î%EE%C3%AE
ï%EF%C3%AF
ð%F0%C3%B0
ñ%F1%C3%B1
ò%F2%C3%B2
ó%F3%C3%B3
ô%F4%C3%B4
õ%F5%C3%B5
ö%F6%C3%B6
÷%F7%C3%B7
ø%F8%C3%B8
ù%F9%C3%B9
ú%FA%C3%BA
û%FB%C3%BB
ü%FC%C3%BC
ý%FD%C3%BD
þ%FE%C3%BE
ÿ%FF%C3%BF


블로그 이미지

쉬운코딩이최고

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

,