효율적인 코드만들기
코드를 생성하다보면, 맞아도 효율적인것이 더욱 좋다고 생각되는데요. 짧은 코드를 만들때는 아무런 차이를 못느끼지만 데이터가 커지는 순간 속도의 차이가 생기기 마련이죠!!!
코린이인 저는 하면서 많은 부분을 교정해 나가고 있습니다.
오늘은 제가 짠 코드와 교정된 코드를 비교해 보겠습니다.
Ajax를 활용한 코딩이 였습니다.
수정 전 코드
<style>
.rate {
color: blue;
}
</style>
<script>
$(document).ready(function () {
usa_rate()
});
function usa_rate() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let usadoller = response[1]['rate']
let temp_html = `<span class="rate">달러-원 환율: ${usadoller}</span>`
$('#usa').append(temp_html)
</script>
<body>
<div id="usa"></div>
</body>교정 된 코드
<style>
.rate {
color: blue;
}
</style>
<script>
$(document).ready(function () {
p()
});
function p() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let nowrate = response[1]['rate']
$('#now-rate').text(nowrate)
}
})
}
</script>
<body>
<p class="rate">달러-원 환율: <span id="now-rate"></span></p>
</body>차이가 보이시나요. 처음에 저는 괜히 <div> 에 묶고 temp_html에서 <span>을 만들어 텍스트만 변경하는것이 아닌 큰 코드를 append 하는방식으로 하였습니다.
변경된 방식으로 하였을때는 이미 불러와 있는 "달러-원:"이라는 고정된 텍스트에 변화하는 환율 텍스트만 변경하는 방식이라면, 그전에는 매번 "달러-원:${usadoller} 을 로딩하므로서 효율이 떨어졌다고 생각합니다.
또한 변수의 naming 또한 직관적으로 알아보기엔 아직 부족하다고 많이 느끼게 되었습니다.
앞으로도 해답을 보기전에 미리 나만의 풀이법을 보고 비교하며, 효율적인 코드를 만들수 있는 날이 왔으면 좋겠습니다!!!
CodeAngler