오늘 정리
비동기화란? 웹페이지의 일부가 따로 업데이트되는 화면전환 가능(예 : 네이버 쇼핑, 인기검색어 등)
라우터는? 페이지를 연결해주어 이동시키는 중계의 역할을 한다. 여러 페이지로 이동하는 것을 함수화처리하여 사용할 수 있었다.
복습
- hashchange
- 해쉬 값이 변경되면 시작되는 이벤트 헨들러
- XMLHttpRequest
- 비동기화, 페이지의 일부 업데이트 가능, AJAX와 많이 사용
- 실습을 통해 open(api 연결)과 send사용(서버에 요청)
- substring
(시작인덱스[, 마지막인덱스(포함x)])/string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환 const str = 'Mozilla'; console.log(str.substring(1, 3)); // Expected output: "oz" console.log(str.substring(2)); // Expected output: "zilla" - Arrow function → for 짧은 함수 구문 작성
hello = function() {
return "Hello World!";
}hello = () => {
return "Hello World!";
}강의 내용
- 자바스크립트의 배열 (Array.prototype)
- push - 더하기
- join - 배열값들 합치기(기본값은 ,로 값들 나열 출력, “”로 작성하면 빈값으로 출력)
- 라우터 구현(함수형 처리) - 화면 중계
- 함수추가(라우터에서 재사용하기 위해)
- getData(url){array}
- 해커뉴스로부터 데이터를 가져오는 함수
- → JSON → array(뉴스 목록(#id)/내용)
- newsDetail(){}
- 함수 안에서 직접 그려서 리턴 필요 x
- 배열선언하여 ArrayList처럼 맨 뒤에 차례대로 화면에 그려질 태그 push해줌
- 배열에 있는 데이터를 꺼내서 join으로 문자열로 전환하고, innerHTML로 root태그에 삽입함
- Template literals(중 백킥)을 이용하여 읽어온 데이터를 직접 추가하였기에 리턴타입 설계 필요 없음.
- router(){}
-
목록을 눌렀을 때 해쉬 값 여부에 따라 목록, 내용보기로 이동?
![주소창의 해쉬태그를 넣어주어서 함수 호출 시 사용]
-
- Position
- static : 일반적 배치 시 사용
- relative : 하나만 이동할 때 지정하는 속성(다른 요소, 현재 레이아웃에 영향 x) 사용
- absolute : 가까운 요소에 대해 상대적으로 배치(현재 레이아웃에 영향 o) 사용
- 부모 요소의 포지션 설정 여부에 따라 위치의 기준이 달라질 수 있음.(아무 부모도 포지션 없다면 가장 상위 body 기준으로)
- fixed, sticky
- html / css 실습(홈페이지 구현)
- viewport? 현재 창에서 문서(document)를 볼 수 있는 부분
- css단위
- em : 부모 요소의 글꼴 크기를 의미(상위요소 대비 글자 크기 비율로 입력) -. 예 : 1.5인경우, 상위요소의 1.5배 크기
- rem : 루트 요소의 글꼴 크기
- px
- Font Awesome 활용(아이콘 등 활용 가능)
- https://fontawesome.com/kits/635aebd3bd/settings#name
- 필요한 아이콘 검색하여 코드 복사
- your kits 복사해서 사용 (예)
- 비디오 삽입(사용특성)
- loop(무한반복)/autoplay(자동재생)/mute (무음)
- height : 100vh 높이를 스크롤바 없이 화면 꽉 채워서 만듦
- overflow: hidden → 스크롤바 숨김
- display : flex → 세로로 입력된 요소를 가로로 펼침
- justify-content → flex와 같이 사용됨
- z-index
- 화면의 배치 순서 설정(숫자가 클수록 위에 배치)
- 비디오를 맨 아래에 위치, 나머지 것들을 그 위에 배치할 때 사용
- 화면 두 가지 출력(with 라우터)
- 목록보기 function getNewsData(){}
- 내용보기 function newsDetail(){}
- 사용자 선택 뉴스제목에서 해시값(id)가져옴. newsList[i].id
강의 마무리
- 라우터 기능 추가 예정
