캠프 9주 5일차 TIL

규파팡 2023. 5. 14. 21:40

오늘

javascript에서 변수선언 및 각각의 html태그 및 id, class 선택하는 방법에 대해서 공부했다. 혼자서 사이트를 만들어보려 했고 주말에 할 예정이다(할 수 있겠지?)

우선 html에서 js를 불러주려면 html에서는 동기식으로 html부터 다읽고 script를 실행하기 때문에 오류가 난다.

예를 들어서

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script src="index.py"></script>
</head>
<body>
    <h1>이렇게 작성하면 h1을읽기전에 스크립트가 읽히므로 오류가나게된다.</h1>
</body>
</html>

위 내용처럼 h1태그보다 먼저 작성된 js는 오류가 난다. 물론 태그관련한 내용이 아니면 정상적으로 출력이 된다.

console.log('hello world!!!')

그런데 이제 h1태그에 js작업을 해주고 싶을 때 작성을 하면 오류가 발생한다.

이때 해결방법으로 HTML문서의 모든 리소스(이미지, 스타일 시트, 스크립트 등)가 화면에 로드된 후에 실행되는 함수인 onload함수가 있다. 원래는 그냥 쓰래서 썼는데 궁금해서 알아보니 위와 같은 기능이 있었다. 작성을 해보면

window.onload=function(){
	//코드작성
}

// 이 방식은 직관적이기에 편하다. 하지만 익숙해지면 arrow function이 더 편하다고 한다.
// 아직은 윗방식이 더 편하지만 여기는 나중도 생각해야 하기에 아래에 추가로 작성해보자면

window.onload = () => {
	//코드작성
}

// 기능은 둘이 같다.

이렇게 작성이 되고 이제 작성하고 싶은 js를 작성해서 적용해 주면 된다. 위방법 말고 그냥 html을 다 읽고 불러오는 식으로 body태그 바로 위에 작성해도 된다.

그러면 js에서 onload밖으로 빼도 오류는 안 나온다.

console.log('hello world!!!')
let title = document.querySelector('h1')
title.addEventListener('click', function () {
    console.log('-----------')
})

window.onload = () => {
	//코드있던부분.
}

그러면서 추가로 배운 건 이제 각각의 tag, id, class를 선택할 수 있는

getElementById, ByClassName, ByTagName 등등 3가지 이외에도 더 많다. 이 3가지는 직관적이라 바로바로사용이 가능하다.

console.log('hello world!!!')
let title = document.querySelector('h1')
let uls = document.getElementById('test_ul')
let quls1 = document.querySelector('#test_ul')
let lis1 = document.querySelector('.test_li')
let quls2 = document.querySelectorAll('#test_ul li')
let lis2 = document.querySelectorAll('.test_li')
console.log(uls)
console.log(quls1)
console.log(lis1)
console.log(quls2)
console.log(lis2)

추가로 querySelector, querySelectorAll도 있다. 이두가지는 다양하게 사용이 가능하다우선 위에 출력 결과부터확인!

문법은 다르지만 출력되는 형식은 같다. querySelector도 같이 적었지만 복수의 클래스의 경우에는 All을 사용하지 않으면 가장 첫 번째 tag만 선택된다. 그래서 lis1은 눌러보면 첫 번째 li만 출력되어 있다.

이럴 때 test_li를 다 출력 해주고 싶으면 All만 붙여주면 가능하다. 나중에 인덱스추가로 부분 부분출력도 가능해진다 단체로 선언해 두고 [0,1,2] 순으로 특정 순서만 선택해서 사용도가능하다 for문사용해서 다수의 클래스를 다 사용할 수도 있다. 다시 말해서 쓰기 나름.

오늘의 규파팡이 느낀 점!

팀프로젝트에서 게시글 부분을 담당하고 오픈 api작업을 맡아서 프론트 쪽은 아예 손도 안 댔는데 아무래도 지급받은 강의를 듣고 이번프로젝트 프론트 부분을 혼자 작업해야겠다 이젠 fetch도기억이 잘 안나기에...ㅎㅎㅎ