2022. 2. 4. 16:23ㆍJavaScript/김민태의 프론트엔드 아카데미 1
오늘은 HTML문서 웹사이트를 개발자도구로 수정하는 두 가지 방법을 정리한다.
첫번째는 Edit as HTML을 활용해 직접 ul, li 태그로 목록을 만드는 것이다.
두번째는 console 창에서 수정할 문단의 태그를 getElementById로 불러와 ul, li 태그를 삽입하는 방식이다.
아래의 소제목중 '2) 개발자도구 활용' 부터 보면 된다.
1) 기본 작업
(1) 실습할 HTML 문서를 만든다.
단, 이미 실습할 웹사이트나 HTML이 있으면 이 단계를 생략하고 거기서 바로 개발자도구 열면 된다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> HackerNews Client Application</title>
</head>
<body>
<noscript>You need to enable JS to run this app</noscript>
<div id = "root">
</div>
<script src="app.js" type="module"></script>
</body>
</html>
<!doctype html>
문서의 타입을 지정한다.
▶ 우리가 짠 코드를 컴퓨터가 인식할 수 있는 언어로 바꾸는 인코딩 방식을 지정한다.
viewport에 대한 설명 참조 : https://aboooks.tistory.com/352
▶ HTML을 열면 나오는 탭의 사이트명을 위와 같이 지정해주었다.
</html>
(2) HTML 문서를 연다.
터미널창에서 parcel을 이용해 HTML 문서를 실행한다.
parcel 파일명.html의 형식을 이용하면 된다.
parcel index.html
크롬창에 localhost:1234 치면 내가 만든 빈 페이지가 나온다.
2) 개발자도구 활용
(1) 개발자도구를 연다.
server running at 다음에 뜨는 주소를 크롬창에 입력하면 빈 사이트 페이지가 뜬다. 해당 사이트에서 마우스 우클릭-검사를 누르거나, f12를 통해 개발자도구를 연다.
참고사항
<script> 태그 안에서 참조되는 소스파일 app.js는 파일명 app과 확장자명 js 사이에 숫자와 문자로 이뤄진 문자열이 있다. 이는 시행될때마다 계속 업데이트되는 가변지점이다.
3) Unorderlists 만드는 두 가지 방법
(1) HTML 에서 직접 생성
아까 만들어둔 HTML 속 div 태그 안에 직접 unorderlists를 만든다. 마우스 우클릭을 통해 Edit as HTML을 활용한다.
HTML에 접근할 수 있으므로, ul과 li 태그를 활용해 화면에 first, second를 나타내주었다.
참고사항
개발자도구의 ELEMENT 탭을 누르고 ESC 키를 누르면, 아래와 같이 콘솔창이 밑으로 내려와 보기 편하다.
(2) getElementById
콘솔창에서 조정할 수도 있다.
Dom API 와 관련된 개념으로, Java Script에서 HTML의 특정 태그를 선택하고 수정, 삽입하는 것과 같다.
우리는 HTML 문서에서 unorderlists를 만들 곳을 div 태그로 감싸고, id로 root 라는 이름을 지정해준 상태다. 따라서 콘솔창에서 HTML 문서의 root라는 요소를 id를 통해 불러오면 된다. 만일 다른 HTML 문서를 사용하는 사람이라면 'root' 부분만 원하는 문단의 태그 이름으로 바꿔주면 된다.
document.getElementById('root');
이렇게 부른 상태에서 innerHTML을 활용해 원하는 태그를 삽입하면 된다.
document.getElementById('root').innerHTML = '<원하는 태그>'
이때, 필요한 태그들을 직접 콘솔창에 일일이 쳐야한다는 점이 조금 불편하다. 이를 js 파일로 만들어서 html에서 연동시켜 프로그램을 실행하는 방법을 다음시간에 알아보겠다.
참고사항
console.log('넣을 문장'); 하면 콘솔창에 바로 해당 문장이 출력된다.
▶ 이번 강의
3-1. Hacker News 클라이언트 앱
어플리케이션 직접 만들어보면서 입력 데이터를 가공하고 출력하는 프로그래밍이 어떻게 진행되는지 체험하는 것이 목적이고, CSS와 관련된 디자인적인 부분과 비동기화는 제외하고 실습한다.
3-2. 코드 12줄
네트워크 너머의 서버에서 데이터를 받아 Unordered-list로 가공하고, Parcel js로 실행시켜 데이터를 출력하는 프로그램을 직접 만들어본다.
(마치 root를 직접 설정해 변화시킬 지점 선택한것처럼) ajax에 담는다.
(https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest)
▶ 다음 강의
3-3. 두개의 화면 웹앱, 3-4. 문자열 활용 HTML, 3-5. 라우터 화면 처리기
가져갈 것
>> 코드
직접 html에서 편집을 원할 때면
수정 대상 마우스 우클릭, edit as HTML
콘솔이나 JS에서 편집을 원할 때면
document.getElementById('수정대상인 태그').innerHTML = '<원하는 태그>'
예를들어
document.getElementById('root').innerHTML = '<ul><li>하나</li></ul>'
unorderlist 형성은
<ul></ul> 리스트로 감싼 코드 안에<li>내용1</li>
<li>내용2</li>
위의 목록들을 원하는 만큼 삽입
>> 터미널 창
실행 시
parcel 파일명.html
출처
패스트캠퍼스
김민태의 프론트엔드 아카데미
[대단원] 3. Javascript Starter Kit - Hacker News Client
해당 포스팅은 김민태 선생님의 강의를 복습하기 위한 용도입니다.
'JavaScript > 김민태의 프론트엔드 아카데미 1' 카테고리의 다른 글
| [자바스크립트] async, awaight로 비동기코드를 동기코드처럼 작성하기 (JS, JAVASCRIPT) (0) | 2022.04.09 |
|---|---|
| 프로그래밍언어 공부법, 학습전략 (0) | 2022.02.21 |
| Node Js 와 NPM (0) | 2022.02.21 |
| JavaScript 마크다운, 템플릿 활용 (0) | 2022.02.13 |
| Javascript 그리고 Typescript (0) | 2022.01.31 |