1. 함수하나당 하나의 기능만 수행 지금 기존의 함수를 보면은 displayAll에서 carrotcount가 들어가 있고 startGame 함수에서도 게임을 시작하는것 뿐만 아니라 일시중지, 다시시작하는 기능까지 들어있다. 또한 data.json을 이용해서 다량의 아이콘을 만들었는데 그럴필요없이 for문을 사용하면 된다. 참!! 본격적으로 리팩토링...
export로 sound.js 리팩토링
1. export하기 일단 먼저 제일 쉬운거 부터 하는게 맞다. 탄력이 붙기 때문이다. 그래서 sound관련해서 모두 모아준다음에 export를 해서 불러오면 자유자재로 원할때마다 사용가능하다. 그럼 일단 export부터 알아보자. 예시로, 캐나다 달러를 미국달러로 환산하는 프로그램을 만들고 export하려고 한다. 그래서 currency-func...
주먹구구식으로 나름 혼자 구현해보기
1. top_ui 기능 구현 function displayAll() { init().then((items) => { //아이콘 초기화 playField.innerHTML = ""; // json안에 있는 data를 전달해주긴 했지만 그걸 사용하지는 않았음. const carrotItems = items.map(c...
당근게임 시작!
1. 당근게임 시작! 이 게임을 통해서 나는 또다시 한걸음, 아니 두세걸음 성장했다. 이 프로젝트는 겉으로 보기에 보잘것 없이 보이지만 내가 이 프로젝트를 하기 전과 후의 모습사이에 매우 상이한 차이가 존재한다. 우선 코드리뷰의 필요성을 절실히 느꼈고, 끈기와 겸손을 배웠다. 그외에 리팩토링하는 법, 그리고 로직을 구성하는 능력도 조금 오른것 같다....
007의 성능을 개선
1. 개선 방법 그럼 무언가가 바뀔때 가장 좋은 방법은, 수정하고 나서 operation 과정중에 composition만 하면 되게끔 하는 방법이다. 그러나 top,left를 바꾸면 layout부터 다시 시작해야한다. css property 중에 수정하고 나서 operation 과정중에 어디서 부터 수정해야하는지 알려주는 사이트가 있다. 효율적인 ...
좌표찾아 007
1. 좌표찾아 007을 통해 알아보는 좋은 코드작성 법 이 프로젝트를 통해 브라우저의 좌표에 대해 알아보고 그 좌표를 화면에 나타내보도록 하겠다. 더 나아가 브라우저가 이 코드를 조금더 덜 부담스럽게 받아들 일 수 있는 방법까지 알아보고 실제로 그걸 확인할 수 있는 방법도 설명하고자 한다. <body> <div class="ta...
쇼핑몰 미니게임 강화!
1. displayList 함수 구현 items을 출력할 함수를 만들어 보자 // update the list with given items function displayList(items) { const list = document.querySelector(".list"); list.innerHTML = items.map((item) =&...
쇼핑몰 미니게임 시작!
1. 쇼핑몰 미니게임 만들기 우연히 엘리님의 강의를 듣게되었는데 사소하게 보이지만 정말 중요하다고 생각했던것을 알려주고 계셨고 관심이 있어서 강의를 하나 들었다. 간단한 미니게임을 만드는 과제를 받았다. 색깔을 누를때마다 거기에 해당하는 색깔대로 list가 출력되도록 하는 웹앱이어서 쉽게 만들 수 있다고 생각했다. 그러나 막상시작하려니 뭘 할지 막막...
to do list - progress바 추가
progress 태그를 이용한 진행상황 보고 챌린지를 진행했던 다른사람들의 작품을 참고하다가 또 발견한 기능이. 리스트를 추가할때마다 그리고 완료할때마다 몇개나 남았는지 시각적으로 알려주는 기능이다. 살펴보니 progress tag를 html에 사용하였고 js 기능을 추가하면 될 것 같았다. 적당한 위치를 보다가 todo input 밑이 좋을 것 ...
to do list - 날씨 토글 기능 활성화
1. weather.js 추가(API를 이용한 WEATHER 정보 추가) openweathermap 사이트에서 정보를 가져온다. 우선 기존 weather.js 에서 몇가지 코드를 추가해줄것이다. html 에서 js_weather 아래에 추가해준 틀은 도시, 날씨아이콘, 온도, 체감온도이다. json을 log 해보면 현재 위도, 경도를 통해 검색한 ...