코딩캠프/AI 웹개발 취업캠프

[AI 웹개발 취업캠프] 23.07.27 과제

고랑E 2023. 7. 28. 13:10
728x90

 

주제.1

html 문서 앞에 <script> 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element를 가져와졌는지 이유에 대해서 알아보기.

HTML은 인터프리터 언어이기 때문에 위에서부터 아래로 순서대로 실행된다.

참고 코드

<!DOCTYPE html>
<html lang=“ko”>
<head>
    <meta charset=“UTF-8">
    <title>JavaScript DOM Element</title>
    <script>
        //HTML 태그 이름을 이용한 선택
        console.log(‘aaa’)
        var selectedItem = document.getElementsByTagName(“li”);     // 모든 <li> 요소를 선택함.
        console.log(selectedItem)
        console.log(selectedItem.length)
        for (var i = 0; i < selectedItem.length; i++) {
            selectedItem.item(i).style.color = “red”;   // 선택된 모든 요소의 텍스트 색상을 변경함.
            console.log(selectedItem.item(i));
        }
    </script>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
    <ul>
        <li>첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
        <li>네 번째 아이템이에요!</li>
        <li>다섯 번째 아이템이에요!</li>
    </ul>
    <script>
        var selectedItem = document.getElementsByTagName(“li”);     // 모든 <li> 요소를 선택함.
        for (var i = 0; i < selectedItem.length; i++) {
            selectedItem.item(i).style.color = “red”;   // 선택된 모든 요소의 텍스트 색상을 변경함.
        }
    </script>
</body>
</html>

참고 코드를 보면 head 다음에 js 코드가 작성되어 있다.

하지만 코드를 실행하고 개발자 도구를 열어보면

이것 처럼 <li> 요소가 <body> 안에 있는데 불어와져 있는걸 볼 수 있다..

왜일까??

브레이크 포인트를 걸어놓고 확인해 보자

새로 고침을 해보면 js 코드에서 브레이크를 걸어놔서 body가 안나온다

 

분명이 11번째 줄 지났을때 개발자 도구에서는 <body>에 있는 요소들이 출력이 안된다

하지만 getElementsByTagName 메소드는 HTMLCollection 이다.

아래 참고 링크 처럼 HTMLCollection 는 실시간으로 반영된다.

 

querySelector vs getElementsByClassName (NodeList vs HTMLCollection)

For this blog entry, I wanted to talk about DOM traversal, but quickly got derailed by some funky Jav...

dev.to

 

핵심 포인트는

 

이것 처럼 body 부분 로딩이 완료 되었을때 실시간 반영되어서 selectedItem 을 가져와서 개발자 도구에 실시간 반영된다.

주제.2 택1

  1. Web-API를 이용하여 본인의 웹사이트의 기능을 구현한 후 코드와 작동되는 화면을 영상 또는 스크린샷을 찍어서 첨부하기
  2. 내가 구현해야할 기능들을 명세하고 명세한 내용에 web API에 어느 기능들을 사용해야하는지 미리 자료조사하여 어떻게 구현할지 글로 표현하여 작성하여 제줄하기

2번 선택

위 사진처럼 URL 입력 후 [단축 하기] 버튼 눌렀을때

기능 명세

하단에 성공 유/무, 관련 데이터(단축 주소, 에러메세지, 등..), 버튼 눌렀을때 해당 URL 으로 이동

자료 조사

  1. 단축 URL API 찾기
  2. 입력칸에 value 가져오기
  3. 찾은 api로 데이터 보내고 결과 데이터 받기
  4. 받은 데이터 보여주기
  5. [단축 주소로 가기] 버튼 눌렀을때 새 탭 or 창으로 띄우기

1. 단축 URL API 찾기

https://lrl.kr/ 에서 제공 해주는 단축 URL API 사용

2. 입력칸에 value 가져오기

document.getElementById('(입력받을 input 폼 id)').value 으로 입력 url 가져옴

3. 찾은 api로 데이터 보내고 결과 데이터 받기

ES6에서 추가된 내장 API 인 Fetch API 사용

4. 받은 데이터 보여주기

DOM API 사용 하여 받아온 데이터를 DOM 제어해서 화면에 보여줌

5. [단축 주소로 가기] 버튼 눌렀을때 새 탭 or 창으로 띄우기

버튼 window.open() 메소드 사용해서 새 탭 이나 새 창으로 단축된 URL 띄우기

 

Window: open() method - Web APIs | MDN

The open() method of the Window interface loads a specified resource into a new or existing browsing context (that is, a tab, a window, or an iframe) under a specified name.

developer.mozilla.org

 

 

 

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.

저작자표시 비영리 변경금지