윈도우랑 브라우저는 같은거임
window. 해가지고 브라우저를ㄹ 핸들링 하는 거임
////지난 주 배운 거 점검
브라우저의 원래 시작은 뷰어였다. HTMl형태의 문자열을 DOM에 가져와서 돔처리해줌 그 후 document에 맞는 형식으로 처리해줌
이를 DOM 트리라고 부름
css에서 보여질 애랑 안보여질 애랑 구분을 시작함
보여지는 애는 랜더트리
HTML 이랑 DOM트리는 1대1로 만들어짐(완전히 1:1의구조는 아님)
tag=> <> =>객체를 의미한다.
DOM트리가 변경되면 랜더트리가 변경되는데 이렇게 하면 다시 그려줘여함 이를 리플로우,리페인트라고(화면갱신) 한다
HTML은 데이터(model)
css는 스타일(view)
js는 동작을 담당함(controller)
이걸 다합쳐서 MVC구조라고 말함 이거 서버에서도 이렇게 말함 브라우저에서도 MVC 구조다 라고 말함
HTML은 브라우저가 받는 데이터다.
브라우저내에서의 자스 ->일반적인 태그h1,
style태그
script태그
js파일은항상 두번실행한다. 문 읽고 그다음에 실행한다.
script파일은 문서 아래쪽에 있는 게 좋다 그 이유는 DOM처리에 용이하기 때문
문서의 위쪽에 있을 경우 DOM처리가 끝나면 이벤트처리해달라고 함
이벤트에는 종류가 있는데 이벤트핸들러,이벤트리스너,처리기 이들의 의미는~를 해주세요. 등록하고(콜백함수등록)->이벤트 루프해줌
요즘 브라우저는 single thread 라고 부르기에는 무리가있음
이벤트 발생주체(get메서드 사용), 어떤 이벤트를 발생할 것인가(click 등), 어떻게 처리할 것인가(콜백함수 등) 를 등록
https://www.w3schools.com/ 가서 보기
버튼의 속성에는 이런 걸 쓸 수 있다.
react의 경우 이벤트의 처리방법이 좀 다르게 생김 onclick
우리가 저번주에 썻던 것은 w3c 표준 이벤트 모델이다.
HTML5가 처음 생겼을 떄 자동차회사에서 네비게이션을 만들기 위해 관심을 많이 쏟음
어떤 device는 처리할 수 없는 게 있을 수 있음 즉 한꺼번에 만들어봤자 어떤 device에서 처리가 안되면 의미가 없음
onclick 이렇게 쓰는 거는 넘 옛날방식
btn.addEventListener이벤트 루프가 사용한다.
DOM level2방식을 사용함 HTML에 써주면 그것도 같이 나옴
무한스크롤
변수는 상자
for루프는 카운팅 횟수
배열을 제어할 때 continue 와 break를 사용함
배열은 간접적으로 메모리를 쓰고있음
배열에서 저스
원래위치 +(곱하기 할 위치)
arr[i]에서 i는 식
루프에 대해서 너무 부담스럽게 생각안해도됨
계속쓸거면 변수를 for루프 밖에 선언
항상 성공하는 걸 먼저짜는 게 좋음
중복된 숫자가 나오면 다시 돌려야하는거임
콜백함수를 내가 직접 호출하지 않는 것이라고 이해하면됨 외부에서 호출하는 방식
{}가 있으면 리턴문을 써주면됨
태그와 같은 게 만들어지면 리페인트 해줘야하기 떄문에 아주 비효율적임
innerHTML을 이용해서 내가원하는 태그의 내용물을 가지고올수도있고 바꿔치기할 수도 있고
개선된방식 ---> 태그를 한꺼번에 만들어서 한번에 내용을 집어넣으면 됨
DOM처리는 한번에 끝낼 수 잇으면 한번에 끝내는 게 좋음
이제 옆으로 떨어지면 좋겠음
flex를 이용하면 옆으로도 떨어지게 되고 밑으로도 떨어지게도 가능하게 하면됨
마진은 바깥쪽의 경계를 말함
오후에는 mp3파일을 만들어볼거
오늘의 과제 카카오 api에 가입해두기
404코드는 서버에서 원하는 리소스를 찾을 수 없을 때 발생하는 코드
200대 코드는 ok코드
docs의 form의 input그룹
클래스가 스타일을 의미한다.
document.getElementsById는 잘쓰지않고 다른ㅂ 방법을 사용함
브라우저에서 js를 사용하면 DOM핸들링을 많이함
옛날에는 하기위해서 byid많이 사용함 최근에는 getQueryselector(CSS문법) 를 많이 사용함
태그하는법
1. id속성 부여 ->비추(왜냐하면 아이디는 유니크해야하는데 HTML 과 동일한 id를 해도 문제를 잡아내지 못함
2. name속성 부여 ->비추(여러개 사용가능하지만 값을 하나밖에 줄 수 없음)
3.class 속성부여->추천(여러개 사용가능하고 값도 여러개 줄 수있음)
id중복은 웹스톰에서만 잡아줌
id로 찾을때는 css는 #, class로 찾을때는 .
return false방법을 사용해서 거기서 끝내버림(폼(양식지)체크라고 말함)내가 입력한 정보들을 싹 보내주는 것이 폼태그라고 말함
<form></form>를 만들면 인풋태그가 들어감 <input name ='이메일형식'>
이런식으로 이거는 옛날임
jsp하게되면
화면을 어떻게 구성해야하는가?
여러가지를 뿌릴때 사용하는 태그 table 태그랑 li태그가 있음
ul - unordered list 임
옛날에는 table을 사용하는데 요즘에는 div태그를 사용하게됨
table을 사용하게 되면 크기를 고정해야하는 문제가 있음
table로 레이아웃을 잡는 건 더이상 안함
ul 태그안에 li를 집어넣음
https://studiomeal.com/archives/197
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ndb796&logNo=220703223472
css스타일 중에 display를 사용하면 화면에 보일지 안보일지 알려줄 수 있음
todo리스트를 다루기를 할 거임 ****
요즘 유행하는 single page 어쩌구 사용ㅎ하는중 오늘은
왜 태그에 의미를 두려고했을까? https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ndb796&logNo=220703223472
HTML5에 시멘틱태그가 등장하는데 등장이유는 검색엔진 떄문에 등장햇다. 검색엔진에게서 가장 중요한부분은 section이랑 article이다.
그 이유는 검색엔진들이 정보를 크롤링해올때 위치가 중요하기 때문
HTML은 데이터다
요즘 유행하는 건 싱글페이지 어플리케이션 줄여서 SPA라고 부름
우리가 익숙한건 멀티페이지 어플리케이션 ->이런과정을 그림을 그려서 구현하는데 그걸 와이어프레임이라고 부름(wireframe)이러한 줄( 전선)을 와이어로부름
mockup툴로 그리는데 이 걸로 그린다.
와이어프레임
최근에는 쿠팡 url화면전환
로딩걸리는 건 AJax사용
danawa에서 쓰는 방법은 모바일에서 용이하게 쓰기위해서
데이터를 처리하고 가공하는 걸 먼저함(데이터의 구조를 만들고 기능설계하고 구현해야함)
이후 화면에 적용(이벤트 처리)
목록
등록
조회
싱글페이지 단점은 처음에 데이터를 많이받아와야하는 거임
영화데이터를 뭐뭐뭐 넣을거냐(제목, 장르, 번호, 포스터)
이런 데이터들은 식별자를 가지는 경우가 많음
파라미터로 4개 넣거나 객체리터럴로 받을것인가
객체의 프로퍼티를 붙엿다 뗏다 할 수 있음
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." />
</div>
</div>js 어플리케이션 (주객전도) - js 주인공/ HTML은 뷰어의역할 ("화면 다시그려")*
웹앱
JS가 메인 MVVM
배열이 바뀌면 -> 화면이 바뀐다.
데이터에서 JS 주인공 , 화면을 바꿔
영화추가되면 -3초후에 화면 변경
setTimeout()
커스텀데이터 속성이란?
modal창 컨트롤 이거 컨트롤 하려면 제이쿼리 사용해야함
onclick건다.
로컬스토리지의 개념
정리- 오늘 css적용한 거 리뷰, 영화 프로그램 리뷰
display flex를 줘서 밑으로 떨어지게 바꿈 스타일링을 바꿧음
