1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> </script> </head> <body> <h2>현재 Life</h2> <div id="result"></div> <button id="up" onclick="upClick()">Up</button> <button id="down" onclick="downClick()">Down</button> </body> <script> /*현재 리팩토링 중... 일단 긴 문자들을 변수에 할당하여 보기에 깔끔하게 했다. 외부의 큰 if문을 switch 문으로 바꿨다. 그렇게 많이 변한 것 같지는 않다.*/ switch (typeof(Storage) !== "undefined") { case true: let gameLife = () => {return localStorage.getItem("life")} let result = () => {return document.getElementById("result")} if (!localStorage) { localStorage.setItem("life", 3); result().innerHTML = gameLife() } else { result().innerHTML = gameLife() } function upClick() { if (Number(gameLife()) < 5) { localStorage.setItem("life", Number(gameLife()) + 1) result().innerHTML = gameLife() } else { alert('5 이상은 할 수 없습니다.') } } //클릭하면 숫자 1씩 감소 // function downClick() { if (Number(gameLife()) > 0) { localStorage.setItem("life", Number(gameLife()) - 1) result().innerHTML = gameLife() } else { alert('0 이하는 할 수 없습니다.') } } break case false: result().innerHTML = "Sorry, your browser does not support Web Storage..."; break } </script> </html> | cs |
1. 긴 문자가 있는 것들은 변수에 할당함.
ex)
let gameLife = () => {return localStorage.getItem("life")}
let result = () => {return document.getElementById("result")}
보면 굳이 변수에 함수를 할당해서 return을 이용해서 반환하고 있는데, 아니 나도 단순 변수에 할당해서 하고 싶었는데 이상하게 적용이 안되었다... 왜 그랬을까?! 그래서 꾸역꾸역 생각하다가 저런식으로 바꿈. 그 와중에 ES6에서 나온 화살표 함수 써본다. ES6에서 추가된 여러가지 기능들은 진짜 편하다. 나중에 관련 책 정리할 생각인데 정말 할 게 많구나!!!
2. 외부의 if 문을 switch 문으로 바꿨음. 근데 case 끝에 break 문이 있어야 작동이 되더라. 아니면 그냥 무작정 끝까지 감. 책 볼때 잠깐 이런 내용이 나왔었던 것 같다.
이전 코드랑 별 차이 없는 것 같지만...그래도 한 것에 의의를 두자
'JavaScript > 실습 과정' 카테고리의 다른 글
| [React] Nodebird 5.1 백엔드 서버 만들기 정리 (0) | 2020.02.14 |
|---|---|
| 태그의 class가 바뀌는 것을 catch하여 css 나 기타 내용을 변경하는 경우 (0) | 2018.03.01 |
| jQuery 구문 몇 개 정리 (0) | 2018.02.26 |
| 연화인 문제에 대해서 고찰 (0) | 2018.02.24 |
| 로컬 스토리지 이용하여 Life 구현하기 (0) | 2018.02.23 |