Enviar pesquisa
Carregar
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
โข
3 gostaram
โข
1,144 visualizaรงรตes
sys4u
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 14
Recomendados
์ผ์ฐจ ํฐ์น2 ์์ํ๊ธฐ | Devon 2012
์ผ์ฐจ ํฐ์น2 ์์ํ๊ธฐ | Devon 2012
Daum DNA
ย
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
sys4u
ย
From Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&C
sys4u
ย
iOS Human Interface Guidlines #7_SYS4U
iOS Human Interface Guidlines #7_SYS4U
sys4u
ย
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
sys4u
ย
iOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4U
sys4u
ย
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4U
sys4u
ย
iOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4U
sys4u
ย
Recomendados
์ผ์ฐจ ํฐ์น2 ์์ํ๊ธฐ | Devon 2012
์ผ์ฐจ ํฐ์น2 ์์ํ๊ธฐ | Devon 2012
Daum DNA
ย
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
sys4u
ย
From Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&C
sys4u
ย
iOS Human Interface Guidlines #7_SYS4U
iOS Human Interface Guidlines #7_SYS4U
sys4u
ย
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
sys4u
ย
iOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4U
sys4u
ย
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4U
sys4u
ย
iOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4U
sys4u
ย
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
sys4u
ย
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
sys4u
ย
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
sys4u
ย
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
sys4u
ย
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
sys4u
ย
iOS Human Interface Guidlines #8_SYS4U
iOS Human Interface Guidlines #8_SYS4U
sys4u
ย
iOS Human Interface Guidlines #5_SYS4U
iOS Human Interface Guidlines #5_SYS4U
sys4u
ย
iOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4U
sys4u
ย
30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U
sys4u
ย
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
sys4u
ย
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4U
sys4u
ย
2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C
sys4u
ย
Java reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&C
sys4u
ย
Implementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4U
sys4u
ย
Aspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&C
sys4u
ย
NAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&C
sys4u
ย
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4u
sys4u
ย
About Color_SYS4U
About Color_SYS4U
sys4u
ย
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
SangHyeok Hong
ย
๋ฐํ์๊ณ
๋ฐํ์๊ณ
์ถฉ์ผ ์ด
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
jaypi Ko
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
jaypi Ko
ย
Mais conteรบdo relacionado
Destaque
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
sys4u
ย
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
sys4u
ย
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
sys4u
ย
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
sys4u
ย
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
sys4u
ย
iOS Human Interface Guidlines #8_SYS4U
iOS Human Interface Guidlines #8_SYS4U
sys4u
ย
iOS Human Interface Guidlines #5_SYS4U
iOS Human Interface Guidlines #5_SYS4U
sys4u
ย
iOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4U
sys4u
ย
30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U
sys4u
ย
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
sys4u
ย
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4U
sys4u
ย
2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C
sys4u
ย
Java reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&C
sys4u
ย
Implementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4U
sys4u
ย
Aspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&C
sys4u
ย
NAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&C
sys4u
ย
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4u
sys4u
ย
About Color_SYS4U
About Color_SYS4U
sys4u
ย
Destaque
(18)
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
JQuery๋ฅผ ์ด์ฉํ์ฌ ์น ์์ ฏ ์์ฑํ๊ธฐ_(์ฃผ)์์คํฌ์ ์์ด์ค์จ
ย
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
ย
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
ย
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
ย
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
ย
iOS Human Interface Guidlines #8_SYS4U
iOS Human Interface Guidlines #8_SYS4U
ย
iOS Human Interface Guidlines #5_SYS4U
iOS Human Interface Guidlines #5_SYS4U
ย
iOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4U
ย
30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U
ย
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
ย
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4U
ย
2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C
ย
Java reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&C
ย
Implementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4U
ย
Aspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&C
ย
NAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&C
ย
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4u
ย
About Color_SYS4U
About Color_SYS4U
ย
Semelhante a JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
SangHyeok Hong
ย
๋ฐํ์๊ณ
๋ฐํ์๊ณ
์ถฉ์ผ ์ด
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
jaypi Ko
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
jaypi Ko
ย
๋น๋๊ด๋ฆฌ ๋ฐ ๋๋ฒ๊น (2010๋ ์๋ฃ)
๋น๋๊ด๋ฆฌ ๋ฐ ๋๋ฒ๊น (2010๋ ์๋ฃ)
YEONG-CHEON YOU
ย
์คํ๋๋ก ๋งต ํ๊ตญ์ด ์ฌ์ฉ์ ์ง์นจ์
์คํ๋๋ก ๋งต ํ๊ตญ์ด ์ฌ์ฉ์ ์ง์นจ์
Byeong-Hyeok Yu
ย
About Visual C++ 10
About Visual C++ 10
ํฅ๋ฐฐ ์ต
ย
Light Tutorial Django
Light Tutorial Django
Kwangyoun Jung
ย
ใแแ ตแแ ฆแจแแ ตแแ ณ แแ ตแแ ฅแแ ตแผใ - ๋๋ฒ๊น ์ง์ฅ์์ ํ์ถํ๋ 66๊ฐ์ง ์ ๋ต๊ณผ ๊ธฐ๋ฒ
ใแแ ตแแ ฆแจแแ ตแแ ณ แแ ตแแ ฅแแ ตแผใ - ๋๋ฒ๊น ์ง์ฅ์์ ํ์ถํ๋ 66๊ฐ์ง ์ ๋ต๊ณผ ๊ธฐ๋ฒ
๋ณต์ฐ ์ด
ย
๊น์ฑํ - ๋ฐ์ด๋ ๋๋ฒ๊ฑฐ๊ฐ ๋๋ ๋ฐฉ๋ฒ
๊น์ฑํ - ๋ฐ์ด๋ ๋๋ฒ๊ฑฐ๊ฐ ๋๋ ๋ฐฉ๋ฒ
์ฑํ ๊น
ย
์ค์ฉ์ฃผ์ ํ๋ก๊ทธ๋๋จธ๋ฅผ ์ํ ๊ฐ๋ฐํ๊ฒฝ ๋ง๋ค๊ธฐ
์ค์ฉ์ฃผ์ ํ๋ก๊ทธ๋๋จธ๋ฅผ ์ํ ๊ฐ๋ฐํ๊ฒฝ ๋ง๋ค๊ธฐ
Mickey SJ Lee
ย
(์คํ๋งํ๋ ์์ํฌ ๊ฐ์ข)์คํ๋ง๋ถํธ๊ฐ์ ๋ฐ HelloWorld ๋ฐ๋ผํ๊ธฐ
(์คํ๋งํ๋ ์์ํฌ ๊ฐ์ข)์คํ๋ง๋ถํธ๊ฐ์ ๋ฐ HelloWorld ๋ฐ๋ผํ๊ธฐ
ํํฌ๋ฆฌ์๋(๊ตฌ๋ก๋์งํธ๋จ์ง์ญ3๋ฒ์ถ๊ตฌ 2๋ถ๊ฑฐ๋ฆฌ)
ย
์จ๋ผ์ธ ๊ฒ์ ์ฒ์๋ถํฐ ๋๊น์ง ๋์ ์ธ์ด๋ก ๋ง๋ค๊ธฐ
์จ๋ผ์ธ ๊ฒ์ ์ฒ์๋ถํฐ ๋๊น์ง ๋์ ์ธ์ด๋ก ๋ง๋ค๊ธฐ
Seungjae Lee
ย
แแ ฐแธ Front-End แแ ตแฏแแ ฎ แแ ตแแ ฃแแ ต
แแ ฐแธ Front-End แแ ตแฏแแ ฎ แแ ตแแ ฃแแ ต
JinKwon Lee
ย
[NEXT] Android ๊ฐ๋ฐ ๊ฒฝํ ํ๋ก์ ํธ 4์ผ์ฐจ (Networking)
[NEXT] Android ๊ฐ๋ฐ ๊ฒฝํ ํ๋ก์ ํธ 4์ผ์ฐจ (Networking)
YoungSu Son
ย
์ฒญ๊ฐ๋ ํน๊ฐ - ํ๋ก์ ํธ ์ ๋๋ก ํด๋ณด๊ธฐ
์ฒญ๊ฐ๋ ํน๊ฐ - ํ๋ก์ ํธ ์ ๋๋ก ํด๋ณด๊ธฐ
Chris Ohk
ย
ํผ๋ธ๋ฆฌ์ , ํ๋ก ํธ์๋๊ฐ๋ฐ์ ์์ํ๋ค
ํผ๋ธ๋ฆฌ์ , ํ๋ก ํธ์๋๊ฐ๋ฐ์ ์์ํ๋ค
์ ์ ์
ย
๋น์ ์ ๋๋ฒ๊น ์ ๋์ฝ๋์ฝ๋
๋น์ ์ ๋๋ฒ๊น ์ ๋์ฝ๋์ฝ๋
Lusain Kim
ย
LucideWorks Banana ์๊ฐ
LucideWorks Banana ์๊ฐ
SuHyun Jeon
ย
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
Park Jonggun
ย
Semelhante a JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
(20)
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
[NDC 2018] ํ ๋ผ ์ฝ์ ํฌํ ๊ธฐ - ํ์ธ๋ ์ฝ์ ์ด์์ ์ํ ๋ ๋๋ง ์ต์ ํ ์ฌ์
ย
๋ฐํ์๊ณ
๋ฐํ์๊ณ
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
ย
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
C์ธ์ด ๋ค์ด๊ฐ๊ธฐ
ย
๋น๋๊ด๋ฆฌ ๋ฐ ๋๋ฒ๊น (2010๋ ์๋ฃ)
๋น๋๊ด๋ฆฌ ๋ฐ ๋๋ฒ๊น (2010๋ ์๋ฃ)
ย
์คํ๋๋ก ๋งต ํ๊ตญ์ด ์ฌ์ฉ์ ์ง์นจ์
์คํ๋๋ก ๋งต ํ๊ตญ์ด ์ฌ์ฉ์ ์ง์นจ์
ย
About Visual C++ 10
About Visual C++ 10
ย
Light Tutorial Django
Light Tutorial Django
ย
ใแแ ตแแ ฆแจแแ ตแแ ณ แแ ตแแ ฅแแ ตแผใ - ๋๋ฒ๊น ์ง์ฅ์์ ํ์ถํ๋ 66๊ฐ์ง ์ ๋ต๊ณผ ๊ธฐ๋ฒ
ใแแ ตแแ ฆแจแแ ตแแ ณ แแ ตแแ ฅแแ ตแผใ - ๋๋ฒ๊น ์ง์ฅ์์ ํ์ถํ๋ 66๊ฐ์ง ์ ๋ต๊ณผ ๊ธฐ๋ฒ
ย
๊น์ฑํ - ๋ฐ์ด๋ ๋๋ฒ๊ฑฐ๊ฐ ๋๋ ๋ฐฉ๋ฒ
๊น์ฑํ - ๋ฐ์ด๋ ๋๋ฒ๊ฑฐ๊ฐ ๋๋ ๋ฐฉ๋ฒ
ย
์ค์ฉ์ฃผ์ ํ๋ก๊ทธ๋๋จธ๋ฅผ ์ํ ๊ฐ๋ฐํ๊ฒฝ ๋ง๋ค๊ธฐ
์ค์ฉ์ฃผ์ ํ๋ก๊ทธ๋๋จธ๋ฅผ ์ํ ๊ฐ๋ฐํ๊ฒฝ ๋ง๋ค๊ธฐ
ย
(์คํ๋งํ๋ ์์ํฌ ๊ฐ์ข)์คํ๋ง๋ถํธ๊ฐ์ ๋ฐ HelloWorld ๋ฐ๋ผํ๊ธฐ
(์คํ๋งํ๋ ์์ํฌ ๊ฐ์ข)์คํ๋ง๋ถํธ๊ฐ์ ๋ฐ HelloWorld ๋ฐ๋ผํ๊ธฐ
ย
์จ๋ผ์ธ ๊ฒ์ ์ฒ์๋ถํฐ ๋๊น์ง ๋์ ์ธ์ด๋ก ๋ง๋ค๊ธฐ
์จ๋ผ์ธ ๊ฒ์ ์ฒ์๋ถํฐ ๋๊น์ง ๋์ ์ธ์ด๋ก ๋ง๋ค๊ธฐ
ย
แแ ฐแธ Front-End แแ ตแฏแแ ฎ แแ ตแแ ฃแแ ต
แแ ฐแธ Front-End แแ ตแฏแแ ฎ แแ ตแแ ฃแแ ต
ย
[NEXT] Android ๊ฐ๋ฐ ๊ฒฝํ ํ๋ก์ ํธ 4์ผ์ฐจ (Networking)
[NEXT] Android ๊ฐ๋ฐ ๊ฒฝํ ํ๋ก์ ํธ 4์ผ์ฐจ (Networking)
ย
์ฒญ๊ฐ๋ ํน๊ฐ - ํ๋ก์ ํธ ์ ๋๋ก ํด๋ณด๊ธฐ
์ฒญ๊ฐ๋ ํน๊ฐ - ํ๋ก์ ํธ ์ ๋๋ก ํด๋ณด๊ธฐ
ย
ํผ๋ธ๋ฆฌ์ , ํ๋ก ํธ์๋๊ฐ๋ฐ์ ์์ํ๋ค
ํผ๋ธ๋ฆฌ์ , ํ๋ก ํธ์๋๊ฐ๋ฐ์ ์์ํ๋ค
ย
๋น์ ์ ๋๋ฒ๊น ์ ๋์ฝ๋์ฝ๋
๋น์ ์ ๋๋ฒ๊น ์ ๋์ฝ๋์ฝ๋
ย
LucideWorks Banana ์๊ฐ
LucideWorks Banana ์๊ฐ
ย
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
ย
Mais de sys4u
Html5_SYS4U
Html5_SYS4U
sys4u
ย
Web Accessibility_SYS4U
Web Accessibility_SYS4U
sys4u
ย
iOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4U
sys4u
ย
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4U
sys4u
ย
UX Layout Design_SYS4U
UX Layout Design_SYS4U
sys4u
ย
Advanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4U
sys4u
ย
Proxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4U
sys4u
ย
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
sys4u
ย
Promotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&C
sys4u
ย
Mais de sys4u
(9)
Html5_SYS4U
Html5_SYS4U
ย
Web Accessibility_SYS4U
Web Accessibility_SYS4U
ย
iOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4U
ย
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4U
ย
UX Layout Design_SYS4U
UX Layout Design_SYS4U
ย
Advanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4U
ย
Proxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4U
ย
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
ย
Promotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&C
ย
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
1.
ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์
์ด์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋กํ์ผ๋ง ํ๊ธฐ ์ ์: Zack Grossbart ์์ฑ์ผ: 2012 ๋ 6 ์ 12 ์ผ ๋์: ์ด๊ธ ๊ฐ๋ฐ์ ๋ฒ์ญ: ๊นํ์ ๋ฒ์ญ์ผ: 2013 ๋ 2 ์ 18 ์ผ ์๋ฌธ์ฃผ์: http://coding.smashingmagazine.com/2012/06/12/javascript-profiling-chrome- developer-tools/ ์น ์ฌ์ดํธ๊ฐ ์ ์์ ์ผ๋ก ๋์ํ๊ณ ์๋ค๋ฉด, ์ด์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ฐจ๋ก๋ค. ์น ์ฌ์ดํธ์ ์ฑ ๋ฅ์ด๋ผ๋ ๊ฒ์ ๋ ๊ฐ์ง ์์๋ก ์ด๋ฃจ์ด์ ธ ์๋๋ฐ, ํ๋๋ ํ์ด์ง ๋ก๋ฉ ์๋์ด๊ณ ๋ค๋ฅธ ํ ๋๋ ํ์ด์ง ๋ด ์ฝ๋์ ์คํ ์๋๊ฐ ๊ทธ๊ฒ์ด๋ค. ๋ฏธ๋๋ง์ด์ 1๋ CDN2 ๋ฑ ์๋ง์ ์ธ๋ถ ์๋น ์ค๋ค์ ์ด์ฉํ๋ฉด ๋ก๋ฉ ์๋๋ฅผ ํฅ์์ํฌ ์ ์์ง๋ง, ์ฝ๋๊ฐ ๋น ๋ฅด๊ฒ ์คํ๋๋๋ก ํ๋ ๊ฒ์ ์จ์ ํ ์ฐ๋ฆฌ ๊ฐ๋ฐ์๋ค์ ๋ชซ์ด๋ค. ์ฝ๋์์ ์์ฃผ ์์ ๋ณ๊ฒฝ์ด ์ฑ๋ฅ์ ์์ฒญ๋ ์ํฅ์ ์ค ์ ์๋ค. ์ฌ๊ธฐ ์ ๊ธฐ์ ์ฐ์ฌ๋์ด ์ ๋ ๊ณ ์ ๋ช ๊ฐ์ ์ฝ๋ ๋ผ์ธ๋ค ๋๋ฌธ์ ์น ์ฌ์ดํธ๊ฐ ๋น์ ์๋๋ก ์๋ตํ ์๋, ํน์ ์์ ๋ค์ด๋ ๊ฒ์ฒ๋ผ ์๋ต์ ํ์ง ์์ ์๋ ์๋ค. ์ด ๋ฌธ์๋ ํฌ๋กฌ ๊ฐ๋ฐ์ ํด(Chrome Developer Tools)์ ์ด์ฉํ์ฌ ์ด๋ฐ ๋ฌธ์ ๊ฐ ์๋ ์ฝ๋๋ฅผ ๋ฐ๊ฒฌํ๋ ๋์ธ ๊ฐ์ง ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช ํ ๊ฒ์ด๋ค. ๊ธฐ์ค์ ์ ํ๊ธฐ ๋จผ์ ์์ ์ ๋ ฌ๊ธฐ(Color Sorter)๋ผ๋ ๊ฐ๋จํ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ดํด๋ณด๊ธฐ๋ก ํ์. ์ด ํ๋ฉด์ ๋ธ๋ผ์ฐ์ ์์ ์ด์ด๋ณด๋ฉด ์๋ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ด ๋ฌด์ง๊ฐ ์์ ์๋ค์ด ๊ฒฉ์๋ก ์ ๋ ฌ๋์ด ๋ณด์ฌ์ง 1 Minimizer. Javascript ๋ฑ์ ์ฝ๋ ๋ด์ ๊ณต๋ฐฑ๋ฌธ์๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋ ๋ณ์/ํ์ ์ด๋ฆ์ ์งง๊ฒ ๋ง๋๋ ๋ฑ, ๋คํธ์ํฌ๋ฅผ ํตํด ๋ค์ด๋ก๋ํด์ผ ํ๋ ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ฌ์ฃผ๋ ํ๋ก๊ทธ๋จ์ ๋งํ๋ค. 2 Content Delivery Network. ๋ฒ์ญํด์ ์ปจํ ์ธ ์ ์ก ๋คํธ์ํฌ๋ผ๊ณ ํ๋ค. ์ฌ์ฉ์ด ๋น๋ฒํ ์ปจํ ์ธ ๋ฅผ ์๋ฒ์ ์ ์ฅํ ๋ค, ๋ณ๋ชฉ์ง์ ์ ํผํด ๊ณ ์ ์๋น์คํ๋ ์์คํ ์ ๋งํ๋ค.
2.
๊ฒ์ด๋ค. ์ฌ์ฉ์๋ ๊ฐ๊ฐ์
์์ ๋๋๊ทธ-์ค๋-๋๋กญํ์ฌ ์ด๋ฆฌ์ ๋ฆฌ ์ฎ๊ธธ ์ ์๋ค. ๊ฐ๊ฐ์ ์ ๋ค์ CSS๋ก ์คํ์ผ์ด ์ ์ฉ๋ div ํ๊ทธ์ด๋ค. (๋ฌด์ง๊ฐ ์์ div๋ โMaking Annoying Rainbows in JavaScript.โ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค์๋ค.) ์น ํ์ด์ง ์์ฒด๋ ๋งค์ฐ ๋น ๋ฅด๊ฒ ๋ก๋ฉ๋์ง๋ง, ์ ์ฒด๊ฐ ๋ค ๊ทธ๋ ค์ง๊ธฐ ์ ์ ๋ช ๋ฒ ๊น๋นก์ด๋ ๊ฒ ์ ๋ณผ ์ ์์ ๊ฒ์ด๋ค. ๋ฐ๋ก ํ๋กํ์ผ๋ง์ ํ ์๊ฐ์ธ ๊ฒ์ด๋ค. ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํ ์์ ์ ํ ๋์๋ ํญ์ ์ด ํ๋ก๊ทธ๋จ์ด ์ผ๋ง๋ ๋๋ฆฐ์ง, ํน์ ์ผ ๋ง๋ ๋นจ๋ผ์ผ ํ๋์ง ๋ฑ์ ์ ์ํ ๊ธฐ์ค์ (baseline)์ ๋ง๋ค๊ณ ์์ํด์ผ ํ๋ค. ๊ธฐ์ค์ ์ด ์ ์ด์ผ ์ฑ๋ฅ ํฅ์์ ์ํด ์ํํ ์์ ์ด ์ผ๋ง๋ ํจ๊ณผ์ ์ด์๋์ง, ๊ทธ๋ฆฌ๊ณ ๊ทธ์ ๋ฐ๋ฅธ ํธ๋ ์ด ๋์คํ 3 ๋ ๋ฌด์์ด๊ณ ์ผ๋ง๋ ๋๋์ง๋ฅผ ์ ์ ์๋ค. ์ด ๋ฌธ์์์๋ ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์ ์ด์ฉ ํด์ ์ด ์์ ์ ์งํํ ๊ฒ์ด๋ค. 3 Tradeoff. Tradeoff๋ ์ด๋ค ์ผ์ ๋ชฉ์ ์ ์ด๋ฃจ๊ธฐ ์ํ ํด๊ฒฐ์ฑ ์ผ๋ก ์ธํด ๋ฐ์ํ๋ ๋ฐ๋๊ธ๋ถ์ ๋น์ฉ ์ ๋งํ๋ค. (๋ฐ๋์ ๊ทธ๋ฐ ๊ฒ์ ์๋์ง๋ง) ์ดํ๋ฆฌ์ผ์ด์ ์ ์๋๋ฅผ ํฅ์์ํค๊ธฐ ์ํด ๋ ๋ง์ ๋ฉ๋ชจ๋ฆฌ ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ด tradeoff์ ์์ด๋ค.
3.
ํ๋กํ์ผ๋ฌ4๋ ํฌ๋กฌ ๊ฐ๋ฐ์
ํด์ ํ ๋ถ๋ถ์ผ๋ก, ํฌ๋กฌ์ด ์ค์น๋์ด ์๋ค๋ฉด ์ธ์ ๋ ์ฌ์ฉํ ์ ์๋ค. ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์ ๋ ์น 5 ์์ด์ฝ์ ํด๋ฆญํ ๋ค ๋๊ตฌ(Tools) ๋ฉ๋ด ํ์์ ๊ฐ๋ฐ์ ๋๊ตฌ (Developer Tools) ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๋ฉด ์คํ๋๋ค. 6 Firebug 7 ์๋ ํ๋กํ์ผ๋ง ๊ธฐ๋ฅ์ด ์๊ธด ํ ์ง๋ง, ํฌ๋กฌ์ด๋ ์ฌํ๋ฆฌ ๊ฐ์ ์นํท ๋ธ๋ผ์ฐ์ ๋ค์ด ์ฝ๋๋ฅผ ํ๋กํ์ผ๋ง ํ๊ฑฐ๋ ํ์๋ผ์ธ์ ๋ณด์ฌ์ฃผ๋๋ฐ ๊ฐ์ฅ ์ข๋ค. ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์ ์คํผ๋ ํธ๋ ์ด์(Speed Tracer 8 )๋ผ๊ณ ํ๋ ๋ฉ์ง ์ด๋ฒคํธ ํธ๋ ์ด์ค ๋๊ตฌ๋ฅผ ์ ๊ณตํ๊ธฐ๋ ํ๋ค. ๊ธฐ์ค์ ์ ์ ํ๊ธฐ ์ํด ์ผ๋จ ํ์๋ผ์ธ์ ํ์ธํ๊ธฐ๋ก ํ์. ํ์๋ผ์ธ์ ์ ์ฅํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค. (1) ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์ ์ด์ฉํ์ฌ โTimelineโ ํญ์ ์ด์ด๋๊ณ ์น ํ์ด์ง์ ์ ์ํ๋ค. (2) ์ข์ธก ํ๋จ์ ์์ ๊ฒ์ ์ ์์ ํด๋ฆญํ๋ฉด ํ์๋ผ์ธ ์ ์ฅ์ด ์์๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฒ์ ์ ์์ด ๋ถ์ ์์ผ๋ก ๋ณํ๋ค. (3) ํ๋ฉด ์์์ ํ๋กํ์ผ๋ง์ ์ํํ๊ณ ์ ํ๋ ๋์์ ์คํํ๋ค. (4) (3)์์ ๋ถ์ ์์ผ๋ก ๋ณํ ์์ ์์ ํด๋ฆญํ์ฌ ์ ์ฅ์ ์ข ๋ฃํ๋ค. ํ์๋ผ์ธ ์ ์ฅ ๊ธฐ๋ฅ์ ํ์ด์ง ๋ก๋ฉ์ด ์์๋๊ธฐ ์ ๊น์ง๋ ์์๋์ง ์๋๋ค. (ํฌ๋กฌ์ด ๊ทธ ์ ๋๋ ๋๋ํ๋ค.) ํ๊ท ์ ๋ด๋ณด๊ธฐ ์ํด ์ด ์ธ ๋ฒ์ ์คํํด ๋ณด์๋๋ฐ, ํ์์ ์ปดํจํฐ์์๋ ์ฒซ ๋ฒ์งธ ์๋์์ ๊ฐ์ฅ ๋ฆ๊ฒ ์คํ๋์๋ค. 4 ์ปดํจํฐ ์ฌ์ด์ธ์ค์์ ํ๋กํ์ผ๋ง์ด๋ผ ํจ์, ํ๋ก๊ทธ๋จ ๋ณต์ก๋, ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋, ์ํ ์๊ฐ ๋ฑ ํ๋ก ๊ทธ๋จ์ ์คํ ์ํฉ์ ๋ํด ๋์ ์ผ๋ก ๋ถ์ํ๋ ํ์๋ฅผ ๋งํ๋ค. ํ๋กํ์ผ๋ง์ ํ๋ ๋ชฉ์ ์ ๊ถ๊ทน์ ์ผ ๋ก ํ๋ก๊ทธ๋จ์ ์ต์ ํํ๊ธฐ ์ํด ๋ฌธ์ ๊ฐ ์๋ ๋ถ๋ถ์ ์ฐพ์๋ด๊ธฐ ์ํจ์ด๋ค. ํ๋กํ์ผ๋ง์ ํ ์ ์ ๋๋ก ๋์์ฃผ๋ ํ๋ก๊ทธ๋จ์ ํ๋กํ์ผ๋ฌ๋ผ๊ณ ๋ถ๋ฅธ๋ค. 5 ์์ ๋ฒ์ ์ ํฌ๋กฌ์๋ ํ๋ฉด ์ฐ์๋จ์ ๋ ์น ๋ชจ์์ ์์ด์ฝ์ด ์์์ง๋ง, ํ์ฌ๋ ไธ์ ๋ชจ์์ ์์ด ์ฝ์ผ๋ก ๋ณ๊ฒฝ๋์๋ค. 6 ํฌ๋กฌ ๊ฐ๋ฐ์ ํด์ CTRL+SHIFT+I๋ฅผ ์ด์ฉํ์ฌ ์ด ์๋ ์๋ค. 7 http://getfirebug.com 8 https://developers.google.com/web-toolkit/speedtracer/
4.
๊ธฐ์ค์ ์ ์ก๊ธฐ ์ํด
ํ์๋ผ์ธ์ ์ด์ฉํ์ฌ ์ธก์ ํด ๋ณธ ๊ฒฐ๊ณผ, ๊ทธ๋ฌ๋๊น ํ์ด์ง์ ๋ํ ์ต์ด ์์ฒญ์ผ๋ก๋ถํฐ ํ๋ฉด์ ๋ชจ๋ ๊ตฌ์ฑ์์๊ฐ ๋ธ๋ผ์ฐ์ ์ ๊ทธ๋ ค์ง๊ธฐ๊น์ง์ ์๊ฐ์ ์ธก์ ํด ๋ณด๋, ํ๊ท 1.25์ด๊ฐ ์์๋์๋ค. ์์ฃผ ๋๋ฆฐ ๊ฒ์ ์๋์์ง๋ง, ์ ๋ณด์ ์์ด ๊ทธ๋ฆฌ ๋ง์ง ์๋ค๋ ๊ฒ์ ์๊ฐํ๋ฉด ๊ด์ฐฎ๋ค๊ณ ํ ์ ์๋ ์์ค์ด๋ค. ์ด์ ์คํ ์๋๋ฅผ ์ข ๋ ๋น ๋ฅด๊ฒ ํ๊ณ ์ถ์ง๋ง, ๊ทธ๋ฌ๋ ค๋ฉด ์ ํํ ์ด๋ค ์ด์ ๋๋ฌธ์ ๋๋ ค์ง ๋์ง๋ฅผ ์์์ผ ํ๋ค. ์ด์ ํ๋กํ์ผ๋ฌ์ ๋์์ ๋ฐ์ ์ฐจ๋ก์ด๋ค. ํ๋กํ์ผ ํด๋ณด๊ธฐ ํ์๋ผ์ธ์ ๋ณด๋ฉด ์ฝ๋๊ฐ ์คํ๋๋๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ ์๋ ์์ง๋ง, ์ด๋ค ์ด์ ๋ก ๊ทธ ์ ๋์ ์๊ฐ์ด ์์๋๋์ง๋ฅผ ์ ์๋ ์๋ค. ์ฝ๋๋ฅผ ์กฐ๊ธ์ฉ ๋ฐ๊ฟ๊ฐ๋ฉด์ ํ์๋ผ์ธ์ ๊ณ์ ์ธก ์ ํด ๋ณผ ์๋ ์์ง๋ง, ๊ทธ๊ฒ์ ๊ทธ์ ๋๋ ค ๋ง์ถ๋ ์ ๋๋ผ๊ณ ๋ฐ์ ํ ์ ์๋ค. โProfilesโ ํญ์ ์ด์ฉํ๋ฉด ์ค์ ๋ก ์ด๋ค ์ผ์ด ์ผ์ด๋๋์ง๋ฅผ ๋๋์ด ํ์ธํด ๋ณผ ์ ์๊ฒ ๋๋ค. ํ๋กํ์ผ๋ฌ๋ฅผ ์ด์ฉํ๋ฉด ์ด๋ค ๊ธฐ๋ฅ์ด ๊ฐ์ฅ ์๊ฐ์ ๋ง์ด ์๋นํ๋์ง๋ฅผ ์ ์ ์๋ค. ์ด์ ํ๋กํ์ผ ๊ธฐ์ค์ ์ ์ก๊ธฐ ์ํด โProfilesโ ํญ์ ์ด์ฉํ๊ธฐ๋ก ํด ๋ณด์. ํ๋กํ์ผ๋ฌ ํญ์์ ๋ค
5.
์ ์ธ ๊ฐ์ง
ํ๋กํ์ผ๋ง ์ ํ์ ์ ํํ ์ ์๋ค. 1. JavaScript CPU profile: JavaScript ๊ฐ CPU ์๊ฐ์ ์ผ๋ง๋ ์๋นํ๋์ง์ ๋ํ ํ๋กํ์ผ๋ง ์ ๋ณด ์์ง 2. CSS selector profile: CSS ์ ๋ ํฐ๊ฐ ์คํ๋๋๋ฐ CPU ์๊ฐ์ ์ผ๋ง๋ ์๋นํ๋์ง์ ๋ํ ํ๋กํ์ผ๋ง ์ ๋ณด ์์ง 3. Heap snapshot: JavaScript ๊ฐ์ฒด์ ์ํด ์๋น๋๋ ๋ฉ๋ชจ๋ฆฌ์ ๋ํ ํ๋กํ์ผ๋ง ์ ๋ณด ์์ง ์ง๊ธ ์ด ์๊ฐ์๋ JavaScript์ ์๊ฐ์ ์ฑ๋ฅ์ ๋์ด๋ ๊ฒ์ด ๋ชฉ์ ์ด๋ฏ๋ก, JavaScript CPU profile ์ ์ฌ์ฉํ ๊ฒ์ด๋ค. ํ์๋ผ์ธ์ ์ ์ฅํ๋ ๊ฒ๊ณผ ์ ์ฌํ ๋ฐฉ๋ฒ์ผ๋ก, โProfilesโ ํญ์์ ํ๋กํ์ผ์ ์์ํ๊ณ , ํ์ด์ง๋ฅผ ๊ฐฑ์ ํ ๋ค, ํ๋กํ์ผ์ ์ข ๋ฃํ๋ฉด ๋๋ค. ํ๋กํ์ผ๋ง ๊ฒฐ๊ณผ๋ฅผ ์ป๊ณ ์ ๋ฑ ๋๋ผ๋ ์ ์, ๋ญ๊ฐ ๊ต์ฅํ ๋ง๋ค๋ ๊ฒ์ด๋ค. ์ฐ๋ฆฌ๊ฐ ๋ง๋ ์ ์ ์ ๋ ฌ๊ธฐ๋ jQuery์ jQuery UI๋ฅผ ์ด์ฉํ๊ณ ์๋๋ฐ, ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค ์์๋ ํ๋ฌ๊ทธ์ธ์ ๊ด๋ฆฌํ๋ค๊ฑฐ๋ ์ ๊ทํํ์์ ํ์ฑํ๋ ๋ฑ ์๋ง์ ์์ ์ ์ํํ๋ ์ฝ๋๋ค์ด ํฌํจ๋์ด ์ ๋ค. ๋ฌผ๋ก ์ฐ๋ฆฌ๊ฐ ์์ฑํ ์ฝ๋์ธ decimalToHex ํ์ ๊ณผ makeColorSorter ํ์ ์ด ๋ชฉ๋ก์ ์ ์ผ ์์ชฝ์ ํฌํจ๋์ด ์๋ ๊ฒ๋ ๋ณผ ์ ์๋ค. ์ด ๋ ํ์ ๋ค์ด ํฉ์ณ์ 13.2%์ CPU ์๊ฐ์
6.
์๋นํ๋๋ฐ, ์ด ๋ถ๋ถ์ด
์ฝ๋์ ์ฑ๋ฅ์ ํฅ์์ํค๋ ์์ ์ ์ํ ์ข์ ์์์ ์ด ๋ ์ ์ ์ ๊ฒ์ด๋ค.9 ํ์ ์ ์์ ์๋ ๊ฒ์์ ์ผ๊ฐํ์ ํด๋ฆญํ๋ฉด ํด๋น ํ์ ์ ๋ํ ์ฝ ์คํ์ ํ์ธํ ์ ์ ๋ค. decimalToHex ์์ ์ผ๊ฐํ์ ํด๋ฆญํด๋ณด๋, makeColorSorter๊ฐ decimalToHex๋ฅผ ํธ์ถํ ์ผ๋ฉฐ, makeColorSorter๋ $(document).ready๊ฐ ํธ์ถํ ๊ฒ์ผ๋ก ํ์๋๋ค. ์ค์ ์ฝ๋๋ ๋ค ์๊ณผ ๊ฐ๋ค. $(document).ready(function() { makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121); makeSortable(); }); ์ด ํ์ ๋ค์ด ์ด๋์์ ํธ์ถ๋์๋์ง๋ฅผ ํ์ธํด๋ณด๋, ์์์ ์ ๋ ฌํ ์ ์๋๋ก ํ๋ ๊ธฐ๋ฅ10 ์ด ์ฑ๋ฅ์ ์ข๋จน๋ ์ฃผ๋ ์์ธ์ด ์๋๋ผ๋ ๊ฒ์ ์๊ฒ ๋์๋ค. ๋ณดํต์ ์ ๋ ฌ ๊ฐ๋ฅํ ์์๋ค ์ ์ถ๊ฐํ๋ ๋ฐ์ ๋ ๋ง์ ์๊ฐ์ ์๋นํ์ง๋ง, ์ด ์ฝ๋์์๋ DOM 11 ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ ๋ ๋ฐ ๋ ๋ง์ ์๊ฐ์ ์๋นํ๊ณ ์๋ค๋ ์๊ธฐ๋ค. ์ด์ ๋ฒ์ธ์ ์ฐพ์์ผ๋ ํ๋์ ์์ํ๋ ค ํ๋ค. ํ์ง๋ง ๊ทธ ์ด์ ์, ์์ผ๋ก ์์ ํ ๋ด์ฉ์ด ๋ค๋ฅธ ์ฝ๋์ ์ํฅ์ ๋ฐ๊ฑฐ๋ ๋ผ์น์ง ์๋๋ก ๊ณ ๋ฆฝํ๊ณ ์ถ๋ค. ํ์ด์ง๊ฐ ๋ก๋ฉ๋๊ธฐ ์ํด ์๋ง ์ ์ผ๋ค์ด ์ผ์ด๋๋๋ฐ, ํ๋์ ํ๊ณ ํ๋กํ์ผ๋ง์ ํ๋ ๊ณผ์ ์์ ์ด๋ค์ ๋ํด ์ ๊ฒฝ ์ฐ๊ณ ์ถ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค. ๋ฌธ์ ์ง์ ๊ณ ๋ฆฝ์ํค๊ธฐ ๋ํ๋จผํธ(document)๊ฐ ์ค๋น(ready) ๋์์ ๋ ์์ ์ ๋ ฌ๊ธฐ๋ฅผ ๋ก๋ฉํ๋ ๋์ ์, ๋ฒํผ ํ๋ ๋ฅผ ํด๋ฆญํ ๋ค์์ผ ์์ ์ ๋ ฌ๊ธฐ๊ฐ ๋ก๋ฉ๋๋๋ก ํ๋ ๋ ๋ฒ์งธ ๋ฒ์ ์ ๋ง๋ค๋ ค ํ๋ค. ์ด๋ ๊ฒ ํจ์ผ๋ก์จ, ์ฐ๋ฆฌ์ ๊ด์ฌ์ฌ๊ฐ ๋ํ๋จผํธ์ ๋ก๋ฉ์ผ๋ก๋ถํฐ ๊ณ ๋ฆฝ(isolate)๋ ์ ์๊ฒ ๋๊ณ , ์ข ๋ 9 ๋จ์ํ CPU ์ ์ ์จ์ด ๋๋ค๋ ์ด์ ๋ง์ผ๋ก ํ๋์ด ๋์์ด ๋๋ ๊ฒ์ ์๋์ง๋ง, ์ข์ ์์์ ์ด ๋ ์๋ ์๋ค. 10 ์ฌ๊ธฐ์๋ makeSortable() ํ์ 11 Document Object Model. DOM์ W3C์์ ๊ฐ๋ฐํ ๊ท๊ฒฉ์ผ๋ก, HTML์ด๋ XML ๋ฌธ์์ ์ ๋ณด๋ฅผ ๊ฐ์ฒดํํ์ฌ ๊ด๋ฆฌํ ์ ์๋๋ก ์ค๊ณ๋์ด ์๋ค. DOM์ ๋ํ ์์ธํ ์ค๋ช ์ http://en.wikipedia.org/wiki/Document_Object_Model๋ฅผ ์ฐธ์กฐํ๊ธฐ ๋ฐ๋๋ค.
7.
์ฝ๊ฒ ํ๋กํ์ผ๋ง์ ํ
์ ์๊ฒ ๋๋ค. ๋์ค์ ์ฑ๋ฅ ํ๋์ด ๋๋๊ณ ๋๋ฉด ์ด ๋ถ๋ถ๋ง ์์ ๋ฐฉ์์ผ๋ก ๋๋ ค๋๊ธฐ๋ง ํ๋ฉด ๋๋ค. ์๋์ ๋ฒํผ์ ํด๋ฆญํด์ ์์ ์ ๋ ฌ๊ธฐ๊ฐ ๋์ํ๋๋ก โclickMeโ ๋ฒํผ๊ณผ testColorSorter() ํ ์ ์ ์์ฑํ๊ธฐ๋ก ํ์. function testColorSorter() { makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121); makeSortable(); } <button id="clickMe" onclick="testColorSorter();">Click me</button> ์ฝ๋๋ฅผ ์์ ํ ๋ค ํ๋กํ์ผ๋ง์ ๋ค์ ํด ๋ณด์ง ์์ผ๋ฉด, ์์ธกํ์ง ๋ชปํ ๋ฐฉํฅ์ผ๋ก ์ฑ๋ฅ ๋ฌธ ์ ๊ฐ ๋ฐ๋์ด ์ง ์๋ ์๋ค. ๋ฌผ๋ก ์ด ์ ๋ ์์ ์ ๋ณ ๋ฌธ์ ์์ด ๋ณด์ด์ง๋ง, ๊ทธ๋๋ ๋ญ๊ฐ ์ ๋ชป ๋ฐ๊พผ ๊ฒ์ด ์๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ ํ ๋ฒ ํ๋กํ์ผ๋ง์ ํด ๋ณด์. ์์์ ํด ๋ณธ ๋ฐฉ ๋ฒ์ผ๋ก ํ๋กํ์ผ ์ ์ฅ ๋ฒํผ์ ์ด์ฉํ์ฌ ์๋ก์ด ํ๋กํ์ผ์ ์ ์ฅํด ๋ณด์๋ค.
8.
๋ฑ ๋ณด๋, ๋ค์
ํ๋กํ์ผ๋ง์ ํด ๋ณธ ๊ฒฐ๊ณผ๋ decimalToHex๊ฐ 4.23%๋ก ๊ฐ์ฅ ์ค๋ ์๊ฐ์ ์๋นํ ๊ฒ์ผ๋ก ๋ํ๋ฌ๋ค. ์ด์ ๋ค์ ํ ๋ฒ ํ์๋ผ์ธ์ ํ์ธํ์ฌ ์๋ก์ด ๊ธฐ์ค์ ์ ํ์ธํด ๋ณด๋๋ก ํ์. ๋ฒํผ์ ํด๋ฆญํ๊ธฐ ์ ์ ๋ช ๊ฐ์ง ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ธด ํ์ง๋ง, ์ง๊ธ ์ฐ๋ฆฌ๊ฐ ๊ด์ฌ์ ๊ฐ์ ธ์ผ ํ ๋ถ๋ถ์ ๋ฒํผ์ด ํด๋ฆญ๋ ํ๋ถํฐ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ์์ ์ ๋ ฌ๊ธฐ๊ฐ ๊ทธ๋ ค์ง๊ธฐ๊น์ง ์ด๋ ์ ๋ ์๊ฐ์ด ์์๋๋์ง ์ด๋ค. ๋ง์ฐ์ค ๋ฒํผ์ 390ms์ ํด๋ฆญ๋์๊ณ , ๊ทธ ๋ค๋ก ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ์์ ์ 726ms์ ์คํ์ด ์์๋ ๊ฒ์ ์ ์ ์๋ค. 726 โ 390์ 336์ด๋ฏ๋ก ์๋ก์ด ๊ธฐ์ค์ ์ 336ms๊ฐ ๋๋ค. ๋ฌผ๋ก ์ด ๊ฐ์, ์ฒ์์ ํ๋ ๊ฒ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ํ์๋ผ์ธ์ ์ธ ๋ฒ ์ธก์ ํ ์ฌ ํ๊ท ์ ๋ธ ๊ฒฐ๊ณผ์ด๋ค. ์ด์ ์ด๋ค ์ฝ๋๊ฐ ๋ฌธ์ ๊ฐ ์๊ณ , ๊ทธ ์ฝ๋๊ฐ ์ผ๋ง๋ CPU ์๊ฐ์ ์๋นํ๋์ง ์๊ฒ ๋์๋ค. ์ด์ ๋ถํฐ ์๋ชป๋ ๋ถ๋ถ์ ์์ ํ๊ธฐ๋ก ํด ๋ณด์.
9.
์๋ ๊ฐ์ ํ๊ธฐ
ํ๋กํ์ผ๋ฌ๋ ์ด๋ค ํ์ ์ด ๋ฌธ์ ๊ฐ ์๋์ง๋ฅผ ์๋ ค์ค ๋ฟ์ด๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๊ทธ ํ์ ์ด ์ ๋ฌธ์ ๊ฐ ์๋์ง๋ ์ฐ๋ฆฌ๊ฐ ์ง์ ์์๋ณด๊ณ ๋ช ํํ๊ฒ ์ดํดํด์ผ ํ๋ค. function decimalToHex(d) { var hex = Number(d).toString(16); hex = "00".substr(0, 2 - hex.length) + hex; console.log('converting ' + d + ' to ' + hex); return hex; } ์์ ์ ๋ ฌ๊ธฐ ๋ด์ ํฌํจ๋ ํ๋ํ๋์ ์๋ค์ 16์ง์๋ก ๋(์๋ฅผ ๋ค์ด #86F01B๋ #2456FE) ๋ฐฐ๊ฒฝ์ ์ ๋ณด๋ฅผ ์ด์ฉํ์ฌ ์์์ด ํ์๋๋ค. ์ด ๊ฐ์ ์์์ ๋ ์๋ฆฌ์ฉ Red, Green, Blue ๊ฐ์ ํํํ๊ธฐ ์ํ ๊ฒ์ด๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ฐฐ๊ฒฝ์์ #2456FE์ธ๋ฐ, ์ด ๊ฐ์ 10์ง์๋ก R = 36, G = 85, B = 254์ด๋ค. ๋ฌผ๋ก ๊ฐ๊ฐ์ ๊ฐ์ 0๋ถํฐ 255 ์ฌ์ด์ ์ ์์ด๋ค. ์ฝ๋๋ฅผ ๋ณด๋ decimalToHex ํ์ ์ 10์ง์ ์์๊ฐ์ ๋ฐ์ ํ๋ฉด์ ์ถ๋ ฅํ๊ธฐ ์ํ 16์ง์ ์์๊ฐ์ผ๋ก ๋ณํํด์ฃผ๋ ์์ ์ ์ํํ๋ค. ๊ธฐ๋ฅ ์์ฒด๋ ๋งค์ฐ ๊ฐ๋จํ๋ฐ, ์ผ๋จ ์ฝ์์ ๋ก๊ทธ ๋ฅผ ์ถ๋ ฅํ๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๋ฉด ์์ฝ๊ฒ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ ๊ฒ ๊ฐ๋ค. ๋ก๊ทธ ์ฝ๋๋ฅผ ์ ๊ฑฐํ ๋ค ์กฐ๊ธ ๋ ์์ธํ ๋ณด๋, 16์ง์์ ๊ธธ์ด๊ฐ 2์๋ฆฌ๊ฐ ์ ๋ ๊ฒฝ์ฐ โ0โ์ ์ผ์ชฝ์ ๋ง๋ถ์ด๋ ์์ 12์ ์ํํ๋ ๋ถ๋ถ์ด ๋ณด์ธ๋ค. 13 ์ด ๊ธฐ๋ฅ ์์ฒด๋ฅผ ์์จ ์๋ ์๋ ์ด ์ ๋, CSS๊ฐ ์์ ์ฒ๋ฆฌ๋ฅผ ํ๊ธฐ ์ํด 16์ง์ ๊ฐ์ ํญ์ ๋ ์๋ฆฌ๋ก ์ด๋ฃจ์ด์ ธ์ผ ํ๊ธฐ ๋๋ฌธ ์ด๋ค. ์ฆ, 10์ง์๋ก 0๋ถํฐ 15๊น์ง์ ์๋ 16์ง์๋ก ํ ์๋ฆฌ ์(๋๋ ๋ฌธ์)๋ก ํ์๋๋๋ฐ, ์ด ๊ฒฝ์ฐ ์์ 0์ ๋ถ์ฌ์ค์ผ ํ๋ค๋ ๋ง์ด๋ค. ์ด ์ฝ๋๋ฅผ ์ผํญ์ฐ์ฐ์๋ฅผ ์ด์ฉํ์ฌ ์ฝ๊ฐ ์์ ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์ป์ ์ ์๋ค. function decimalToHex(d) { var hex = Number(d).toString(16); return hex.length === 1 ? '0' + hex : hex; } 12 ์ผ๋ฐ์ ์ผ๋ก ์ด๋ฐ ์์ ์ ํจ๋ฉ(padding)์ด๋ผ๊ณ ํ๋ค. ์ผ์ชฝ์ ๋ง๋ถ์ด๋ ๊ฒ์ LPAD, ์ค๋ฅธ์ชฝ์ ๋ง ๋ถ์ด๋ ๊ฒ์ RPAD๋ผ๊ณ ํ๋ค. 13 โhex = "00".substr(0, 2 - hex.length) + hex;โ ์ฝ๋๋ฅผ ๋งํ๋ค. ๋ถ๋ช ํ ์ฑ๋ฅ์ด ๋จ์ด์ง๋ ๋ฐฉ๋ฒ์ด์ง๋ง, if๋ฌธ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๋ณด๋ค ์ฐธ์ ํ๊ธด ํ๋ค.
10.
์ธ ๋ฒ์งธ ๋ฒ์
14 ์ ํ์ํ ๊ฒฝ์ฐ์๋ง ํจ๋ฉ์ ์ํํ๊ณ , ์ธ๋ฐ์์ด substr์ ์คํํ์ง ์๋๋ก ๋ณ๊ฒฝํ ๊ฒ์ด๋ค. ์ด ๋ฒ์ ์ ์ด์ฉํ์ฌ ๋ค์ ํ๋กํ์ผ๋ง์ ์ํํด๋ณด๋ ์ด์ ์คํ ์๊ฐ์ด 137ms๋ก ์ค์ด๋ ๊ฒ์ ํ์ธํ ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ ์ด์ decimalToHex ํ์ ์ด ์ ์ฒด ์๊ฐ ์ค 0.04%๋ง์ ์ฐจ์งํ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค. โ ๋ชฉ๋ก์ ์๋์ชฝ์ผ๋ก ๋ด๋ ค๊ฐ ๊ฒ์ด๋ค. ์ด์ jQuery์ e.extend.merge๊ฐ ๋ชฉ๋ก์ ๊ฐ์ฅ ์์ ์๊ณ ๊ฐ์ฅ ์ค๋ ์๊ฐ์ ์๋นํ๋ ๊ฒ ์ ์ ์ ์๋ค. ํ์ง๋ง ์ด ํ์ ์ด ์ ํํ ์ด๋ค ์์ ์ ์ํํ๋์ง ์๊ธฐ ์ด๋ ค์ด๋ฐ, ๊ทธ ์ด 14 ๋ค์๊ณผ ๊ฐ์ด ๋ฐ๊พธ๋ ๊ฒ๊ณผ ์ด ์ฝ๋๋ ์ด๋ค ๊ฒ์ด ๋ ๋น ๋ฅผ๊น? return d < 16 ? '0' + hex : hex;
11.
์ ๋ jQuery๊ฐ ์ต์ํ(minimized)๋์ด
์๊ธฐ ๋๋ฌธ์ด๋ค. 15 jQuery์ ๊ฐ๋ฐ์ ๋ฒ์ ์ ์ด์ฉํ ์ฌ ํ์ธํด ๋ณผ ์๋ ์์ง๋ง, ์๊ฐํด๋ณด๋ makeColorSorter ํ์ ์ด e.extend.merge ํ์ ์ ํธ์ถํ๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด์ makeColorSorter๋ฅผ ํ๋ ํด๋ณด๊ธฐ๋ก ํ์. ์ปจํ ์ธ ๋ณ๊ฒฝ์ ์ต์ํํ๊ธฐ ์์ ์ ๋ ฌ๊ธฐ์ ๋ฌด์ง๊ฐ๋น ์์๋ค์ ์ฌ์ธ(sine) ๊ณก์ ์ ์ด์ฉํ์ฌ ๋ง๋ค์ด์ก๋ค. ์ฝ๋๋ ์์ ์คํํธ๋ผ์ ์ค์ฌ์ ์ ํ์ธํ๊ณ ๊ทธ ์ง์ ๋ถํฐ ์ง์ ๋ ๋๋น๊น์ง ์ด๋ค ํํ(wave)๋ฅผ ์์ฑํ ๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์์์ด ๋ฌด์ง๊ฐ๋น์ผ๋ก ๋ง๋ค์ด์ง๋ ๊ฒ์ด๋ค. ๋ฌผ๋ก Red, Green, Blue์ ์ฃผํ ์(frequency)๋ฅผ ๋ณ๊ฒฝํจ์ผ๋ก์จ ๋ฌด์ง๊ฐ๋น ์์์ ๋ฐ๊ฟ ์๋ ์๋ค. function makeColorSorter(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) { for (var i = 0; i < len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); console.log('red: ' + decimalToHex(red)); console.log('green: ' + decimalToHex(green)); console.log('blue: ' + decimalToHex(blue)); var div = $('<div class="colorBlock"></div>'); div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue)); $('#colors').append(div); } } ํ๋์ ์์ํ์ผ๋ฉด, ๋น์ฐํ ๋ก๊ทธ ์ฝ๋๋ฅผ ๋จผ์ ์ ๊ฑฐํ๋ค. ์ด๋ฐ ๋ฅ์ ๋ก๊ทธ ์ฝ๋๋ ๋ถํ์ํ ๋ฐ, ์๊ฐํด๋ณด๋ฉด decimalToHex ํ์ ์์๋ ๋์ผํ ๋ก๊ทธ๋ฅผ ์ถ๋ ฅํ์ผ๋ ๋ ๋ฒ ์ด์ ์ธ๋ฐ์ 15 ๊ทธ๋ฆฌ๊ณ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋์ ๋์์ด๋ผ๊ณ ๋ณด๊ธฐ ์ด๋ ต๋ค.
12.
๋ ๋ก๊ทธ ๋ถํ๋ฅผ
์ค ๊ฒ์ด๋ค. ์ฝ๋๋ฅผ ๋ณด๋ ๋ญ๊ฐ DOM์ ๋ง์ ์์ ์ ํ๋ ๊ฒ ๊ฐ๋ค. ๋งค for๋ฌธ์ ์ํํ๋ฉด์ colors๋ผ๋ ๊ฐ์ฒด์ ์๋ก์ด div ํ๊ทธ๋ฅผ ์ ๋ ฅํ๋ ๊ฒ์ด ๋ณด์ธ๋ค. ์ด๊ฒ์ด e.extend.merge๋ฅผ ๊ทธ๋ ๊ฒ ๋ง์ด ํธ์ถํ๋ ๋ฒ์ธ์ผ๊น? ํ๋กํ์ผ๋ฌ๋ฅผ ์ด์ฉํ๋ฉด ๊ฐ๋จํ ์คํ์ผ๋ก ์ด๊ฒ์ ํ์ธํ ์ ์๋ค. ์๋์ฒ๋ผ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ์ฌ, div ํ๊ทธ๊ฐ for๋ฌธ ์์์ #colors์ ์ถ๊ฐ๋๋ ๊ฒ์ด ์๋๋ผ, ์ผ ๋จ colors๋ผ๋ ๋ฌธ์์ด์ ์ถ๊ฐํ๊ณ , ์ต์ข ์ ์ผ๋ก colors ๋ฌธ์์ด์ #colors์ ํ ๋ฒ๋ง ์ถ๊ฐํ ๋๋ก ๋ณ๊ฒฝํด๋ณด์. function makeColorSorter(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) { var colors = ""; for (var i = 0; i < len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); colors += '<div class="colorBlock" style="background-color: #' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue) + '"></div>'; } $('#colors').append(colors); } ์ฝ๋๋ฅผ ์์ฃผ ์กฐ๊ธ๋ง ๋ณ๊ฒฝํ์์ง๋ง, DOM์ ๋ํ ๋ณ๊ฒฝ์ ๋จ ํ ๋ฒ์ผ๋ก ์ ํ๋๋ค. ๋ณ๊ฒฝ๋ ์ฝ๋๋ฅผ ์ด์ฉํ์ฌ ํ์๋ผ์ธ์ ํ์ธํด๋ณด๋ ์ด์ ์คํ์๋๊ฐ 31ms๋ก ์ค์ด๋ ๊ฒ์ ํ์ธํ ์ ์๋ค. DOM์ ํ ๋ฒ๋ง ์์ ํ๋ ๋ค ๋ฒ์งธ ๋ฒ์ ์ ์ด์ฉํ๋๋ ์ฝ 87%์ ์ฑ๋ฅ ํฅ์์ด ์์๋ ๊ฒ์ด๋ค. ๋ค์ ํ ๋ฒ ํ๋กํ์ผ๋ฌ๋ก ํ์ธํด๋ณด๋ฉด e.extend.merge ํ์ ์ด ๋ชฉ๋ก์์ ๋ณด์ด์ง ์์ ๋งํผ ๋นจ๋ผ์ก์์ ํ์ธํ ์ ์๋ค. ๋ค์ ์๊ฐํด๋ณด๋ decimalToHex ํ์ ์ ์ฌ์ฉํ ํ์๋ ์๋ ๊ฒ ๊ฐ๋ค. CSS 16์ง์ ์์ ์ฝ ๋ ๋์ 10์ง์๋ฅผ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ด๊ณ , ์ด๊ฒ์ ์ด์ฉํ๋ฉด ๊ตณ์ด 10์ง์๋ฅผ 16์ง์๋ก ๋ณ๊ฒฝํ ํ์๋ ์๊ธฐ ๋๋ฌธ์ด๋ค. decimalToHex ํ์ ์ ์ ๊ฑฐํ makeColorSorter ํ์ ์ ๋ค ์๊ณผ ๊ฐ๋ค.
13.
function makeColorSorter(frequency1, frequency2,
frequency3, phase1, phase2, phase3, center, width, len) { var colors = ""; for (var i = 0; i < len; ++i) { var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center); var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center); var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center); colors += '<div class="colorBlock" style="background-color: rgb(' + red + ',' + green + ',' + blue + ')"></div>'; } $('#colors').append(colors); } ๋ค์ฏ ๋ฒ์งธ ๋ฒ์ ์ ์ด์ฉํ๋ฉด ์ ์๋ 28๋ผ์ธ์ ์ด์ฉํ๋ ์ฝ๋๊ฐ 26ms๊ฐ ๊ฑธ๋ฆฌ๋ 18๋ผ์ธ ์ฝ ๋๋ก ๋ณ๊ฒฝ๋ ๊ฒ์ ํ์ธํ ์ ์์ ๊ฒ์ด๋ค. ๊ฒฐ๋ก 16 ๋ฌผ๋ก ์ค์ ์ดํ๋ฆฌ์ผ์ด์ ์ ์์ ์ ๋ ฌ๊ธฐ๋ณด๋ค ํจ์ฌ ๋ณต์กํ ๊ฒ์ด์ง๋ง, ํ๋กํ์ผ๋ง๊ณผ ํ๋์ ์ํํ๋ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ์ ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค. 1. ๊ธฐ์ค์ ์ธ์ฐ๊ธฐ: ํ๋์ ์ด๋์๋ถํฐ ์์ํ ์ง๋ฅผ ์ ์ ์๋ค. 2. ๋ฌธ์ ์ ๋ถ๋ฆฌํ๊ธฐ: ํ๋์ ๋์์ด ๋๋ ์ฝ๋์๋ง ์ง์คํ ์ ์๊ฒ ๋๋ค. 3. ํ๋ํ๊ธฐ: ์ฝ๋๋ฅผ ์์ ํด ๊ฐ๋ฉด์ ์ง์์ ์ผ๋ก ํ์๋ผ์ธ๊ณผ ํ๋กํ์ผ์ ํ์ธํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํจ๋ค. ์ฑ๋ฅ ํ๋์ ์ํ ๋ช ๊ฐ์ง ๊ท์น์ด ์๋๋ฐ ๋ค์๊ณผ ๊ฐ๋ค. 16 ์ด ๋ฌธ์๋ JavaScript๋ฅผ ํ๋ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช ํ๊ณ ์์ง๋ง, ํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ๊ท ์น์ ๋ชจ๋ ์ธ์ด์ ์ ์ฉ๋ ์ ์๋ค. ๋์ผํ ๋ฐฉ๋ฒ์ด Java, ํน์ C# ์ธ์ด๋ก ๋ง๋ค์ด์ง ์ดํ๋ฆฌ์ผ์ด์ ์ ํ๋ํ๊ธฐ ์ํด ์ ์ฉ๋ ์ ์๋ค.
14.
1.
๊ฐ์ฅ ๋๋ฆฐ ๊ฒ๋ถํฐ: ์ฒ์๋ถํฐ ๊ฐ์ฅ ํ์คํ ํ๋์ ํจ๊ณผ๋ฅผ ํ์ธํ ์ ์๋ค. 2. ๊ฐ์ธ ํ๊ฒฝ์ ํต์ ํ๋ผ: ์ปดํจํฐ๋ฅผ ๋ฐ๊พธ์๊ฑฐ๋ ์ฝ๋์ ๋ญ๊ฐ ๋ณ๊ฒฝ์ ํ์๋ค๋ฉด ๊ธฐ์ค์ ์ ๋ค์ ์ธ์์ผ ํ๋ค. 3. ๋ฐ๋ณตํด์ ๋ถ์ํ๋ผ: ๋ช๋ช ๋ณ์น๋ค์ด ์ธก์ ๊ฒฐ๊ณผ๋ฅผ ์๊ณกํ๋ ๊ฒ์ ๋ง์์ผ ํ๋ค. ๋๊ตฌ๋ ์์ ์ ์น ์ฌ์ดํธ๊ฐ ๋น ๋ฅด๊ฒ ๋์ํ๊ธธ ๋ฐ๋๋ค. ๋ฐ๋๋ก ์น ์ฌ์ดํธ์ ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ ๋ ํ๋ คํ๊ฒ ๋ง๋ค๊ธฐ๋ ํ๋๋ฐ, ์ด๋ฐ ์์ ๋ค์ ๋์ฒด๋ก ์น ์ฌ์ดํธ๊ฐ ๋๋ ค์ง๊ฒ ๋ง๋ ๋ค. ๊ทธ๋์ ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ๊ทธ๋งํผ์ ์๊ฐ์ ์ธ๋ ฅ์ ๋น์ฉ์ ๋ค์ฌ์ผ ํ๋ ๊ฒ์ด๋ค. ํ๋กํ์ผ๋ง๊ณผ ํ๋์ ์ด์ฉํ ์์ ์ ๋ ฌ๊ธฐ ์ต์ข ๋ฒ์ ์ ์คํ ์๊ฐ์ 92%์ ์ฑ๋ฅ ํฅ์์ ์ด๋ฃจ์ด ๋๋ค. ์ฌ๋ฌ๋ถ์ ์น ์ฌ์ดํธ๋ ์ผ๋ง๋ ๋นจ๋ผ์ง ์ ์์๊น?