코드스테이츠 소프트웨어엔지지어링 부트캠프 +22일,카페 키오스크

우선 카페키오스크 만든것

스프린트리뷰때 크루님이 얘기해주신것들, 질문대답

DOM : 그냥 JS인데 면접대비로 정석대답 외워야함

HTML문서에 접근하기 위한 일종의 인터페이스, 문서 객체 모델인 DOM은 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방식을 제공한다. JS를 브라우저에서 DOM을 기준으로 읽는다.

NODE

<div>hello</div>

위 코드에서 태그는 <div>, </div> , 텍스트가 hello 이다.

Element는 태그+ 텍스트 라고 하셨다.

나는 노드가 태그+텍스트라고 알고있었는데 뭐지?? 라고 여쭤보니 '그것도 맞는말인데 흐음.. 이라고 하시며 설명해주셨다.'

요약하면 노드=엘리먼트(태그+텍스트)+등등등 이다. 등등등에는 화면에 보이지 않는 내용들도 많다고 하셨다.

ㅇㅋ 해결

innerHTML과 textContent 차이

1. 보안성

2. 태그를 먹느냐 안먹느냐

알고있던 내용인데 보안성에 대해서 크루님이 자세히 설명해주셨다.

innerHTML은 HTML요소를 JS로 직접 조작하는 기능을 갖고 있다.

<body>
    <button>스무디</button>
    <button>카페라떼</button>
    <p id = 'demo'></p>
    <p id = 'demo2'></p>
    

    <script>
      document.getElementById('demo').innerHTML = '<p>hello</p>'
    </script>
  </body>

이런 HTML이 있을때 <script>태그의 innerHTML을 아래처럼 바꿀 수 있는 것이다.

<body>
    <button>스무디</button>
    <button>카페라떼</button>
    <p id = 'demo'></p>
    <p id = 'demo2'></p>
    

    <script>
    //악성코드 연결가능
      document.getElementById('demo').innerHTML = '<script src ='악성코드 주소'></script>
    </script>
  </body>

이게 가능한 이유는 innerHTML은 단순text에 접근하는 것이 아니라 HTML요소에 접근하기 때문이다.

함수필요성

재사용 편함, 역할별로 나누기 편함

event.target

이벤트가 작동했던 곳의 정보가 들어있다.

<script> </script>를 head에 넣는것과 body에 넣는것의 차이

웹브라우저가 HTML 문서를 파싱(parsing, 해석)할때 <script>태그를 만나면 그 안에 있는 JS의 처리가 끝날 때 까지 HTML 파싱이 지연된다. 때문에 CSS,HTML 파싱을 완료시킨 후 JS가 파싱되도록 <script>를 </body>직전에 두는것이 권장되지만, 웹사이트가 JS에 대한 의존도가 지나치게 높은 경우에는 정상적인 콘텐츠가 화면에 나타나기까지 오래걸릴수도 있다.

그외

event공부하면서 전에 만들었던 forEach도 다시 보고 했다.

forEach 자체는 쉬운데 forEach를 addEventListener이랑 연결시키려니까 머리가 복잡해진다.

카페 무인주문기 화면 연습했다. 코플릿에서 했던 내용들이 그대로 사용된다!!

엄청나다 코플릿은 단순연습이 아니었구나!!

css만 대충했다 우선

가격도 얼마인지 나오게하고 싶은데 어떻게 해야할지 방법이 떠오르지 않는다.

쉽게 할 수 있긴한데, 일일이 바꾸는거 말고 html에서 숫자만 바꾸면 쵸ㅑ르르르연결되서 모든게 다 바뀌게 만들려니까 잘 떠오르지 않는다.

button에 value를 2개 적을수 있으면 괜찮을것같은데 그건 안되는거같다. 흠

 <div id = 'button'>
        <div class = 'menu' id = 'm0'>
          <button id = 'menu0' value ='과일스무디'></button>
          <label id = 'l0' for = 'menu0' value = 1900>과일스무디<br>1,900원</label>
        </div>
        <div class = 'menu' id = 'm1'>
          <button id = 'menu1' value = '카페라떼'></button>
          <label id = 'l1' for = 'menu1' value = 2300>카페라떼<br>2,300원</label>
        </div>
      </div>

버튼이 눌렸을때 label의 value를 조작하는 방법을 생각해봐야겠다

'TIL > 코드스테이츠 TIL' 카테고리의 다른 글

코드스테이츠 소프트웨어엔지지어링 부트캠프 +24일(외계어 리액트) (0)	2021.08.12
코드스테이츠 소프트웨어엔지지어링 부트캠프 +23일 (0)	2021.08.11
코드스테이츠 소프트웨어엔지지어링 부트캠프 +21일 (0)	2021.08.09
코드스테이츠 소프트웨어엔지지어링 부트캠프 +20일 (0)	2021.08.08
코드스테이츠 소프트웨어엔지지어링 부트캠프 +19일 (0)	2021.08.07