개요
자사 서비스 어드민 페이지 유지 보수 및 기능 개발을 맡게 되었다. 이에 따라 처음으로 프론트 리액트 공부를 하게 되었고, 내용을 정리하여 한다.
본문
<!DOCTYPE html>
<html>
<span>Total clicks: 0</span>
<body>
<button id="btn">Click me</button>
</body>
<script>
let count = 0
const button = document.getElementById("btn")
const span = document.querySelector("span")
function handleClick() {
count++
span.innerText = `Total clicks: ${count}`
}
button.addEventListener("click", handleClick)
</script>
</html>span
특정 텍스트를 감싸는 인라인 컨테이너이다. javascript로 특정 span의 텍스트 내용을 변경할 수 있다.
템플릿 리터럴(``)
자바스크립트에서 문자열로 나타낼 수 있으며 변수를 문자열과 같이 넣을 수 있어 편리하다. java나 C 같은 언어에서는 문자열에서 '+' 같은 연산자를 사용해야 하는데 자바스크립트는 이것도 지원하지만 더 편리하게 이를 사용할 수 있다. ${variable name}을 내부에 적으면 된다. 여기에선 count 변수의 값을 넣어주고 있다.
document
로드된 HTML 문서는 document라는 객체가 된다. 이 객체를 통해 HTML 요소에 접근할 수 있다. 해당 객체로 다음과 같은 일을 할 수 있다.
- 요소 생성, 탐색, 변경
- 이벤트 처리
- 문서 정보 액세스 document.title, document.URL, document.head, document.body
결론
노마드 코더의 프론트 엔드 강의를 보며 학습하였다. 앞으로 자사 서비스 admin 페이지를 유지-보수 및 개발을 할 예정이니 계속 퇴근 후 프론트 공부를 조금씩 할 예정이다.
