꾸매코딩

최종 결과 타이머의 시작, 정지, 리셋 기능을 만들었고 정상 작동 중이다. 현재 상황 어제 React Hook 사용이 익숙하지 않다는 것을 뼈저리게 느끼고 Hook 공식 문서를 읽으며 이해하고자 노력했다. 공식문서를 읽는 횟수가 늘어날수록 점점 이해하는 것이 느껴지기 시작했고 읽기 전보다는 조금 더 성장했다고 느껴진다. 지금까지 타이머와 타이머의 시작 버튼을 눌렀을 때 시작되는 것까지 만들었기 때문에 오늘 정지와 리셋 버튼을 만들려고 시도해보았다. 추가적으로 시작 버튼이 중복으로 눌릴 경우 setInterval이 반복해서 작동하는 오류를 수정하려 했다. 설명 updateTimer 함수가 화면에 보이는 타이머의 시간을 변경하는 함수이다. 블로그를 참고하여 시작, 정지, 리셋 기능이 가능한 1초에 1씩 증가..

1. JSON (JavaScript Object Notation) 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다. 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작다. 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 ..

1. innerText vs innerHTML 단순히 text를 가져올때는 큰 차이가 없다. 의 를 가져올 때 차이가 발생한다. innerText → Text만 innerHTML → Tag + Text [index.html] Hello world [index.js] const span = document.querySelector(".span"); console.log(`span.innerText = ${span.innerText}`); //span.innerText = Hello world console.log(`span.innerHTML = ${span.innerHTML}`); //span.innerHTML = Hello world [출력 결과] innerText는 불러온 Object에 Text 값만 ..

강의에 대한 내용보다는, 강의에서 나온 내용 중 추가로 찾아보고 궁금했던 내용을 정리를 하려고 한다. 1. DOM(Document Object Model) 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. - DOM은 웹 브라우저가 HTML을 인식하는 방식이다. → DOM은 HTML 문서에 대한 인터페이스이다. 1. JavaScript는 HTML에 있는 모든 요소를 Object(객체)로 만든다. 2...