[2023.11.03] 개발자 교육 30일 차 : 강의-html, css, JavaScript [구디 아카데미]

오늘 정리

defer는 왜 사용하나? 자바와 달리 html은 순차적으로 진행된다. 임포트된 javascript가 DOM Tree가 완성된 후 진행될 수 있도록 지연시켜주기 위해 사용한다.

복습

• 이번 주 돌아보기
  • 개념 복기
    • 자바는 http 프로토콜 지원x → web지원x → 서블릿(http프로토콜 지원 API 有-request,response)
      • 서버가 주체적으로 처리하고(요청), 클라이언트는 다운로드를 시키고자(응답) 서버에서 동작하는 애플릿 서블릿 生 → web지원 가능해짐
      • System.out.println(”
        ”) → JSP(Java Server Page)로 더 쉽게 구현
      • java의 web지원을 위해 통신을 통해 브라우저 에서 자바클래스 호출이 가능했음.(동기/비동기)
        • XMLHttpRequest() : 브라우저의 동기/비동기처리 지원 내장객체(객체 생성하기)
        • 동기적일 땐 그 요청 결과가 도착할 때 까지 대기함.(비효율적)
        • 비동기 효율적
      • ES6(모듈화의 특징) : js의 소스를 쪼개어 관리, 화살표 함수
      • 실습
        • 비동기처리 실습(board)
          

      

          - 구상
              - boardSellAcount.html : 화면제공 목적 x
                  - 데이터셋 -20을 가져오기 위한 페이지(백엔드 처리)
          - 주의 : html은 자바와 달리 순차지향적이기에 외부 자바스크립트 파일 참조 시 DOM Tree그리기 전 DOM API를 사용하게 되면서 시점의 문제가 발생
              - 1.defer 사용하여 맨 위 배치 (DOM 구성 완료 후 사용하도록 지연)  → js 다운로드 후 실행되어 지연 가능성 있음.
              - 2.body 아래에 맨 뒤에 스크립트 위치 작성 → 지연가능성은 낮아짐
              - 3.별도의 js 구현을 원하는 위치에 script로 추가하여 사용 → 위치선정 중요
          - 콜백함수(CallBack Function) → 비동기 처리시  가중치
              - 조건 만족 시 ‘시스템이’ 호출해주는 함수
              - 원하는 곳에서 실행될 수 있도록 코딩하는 것 필요
          - 이벤트 처리 헨들러
              - 이벤트(onclick 등)
              - [e.target](http://e.target) → 이벤트가 진행되는 타겟을 확인할 수 있음.
              
            
              
              ```
              window.addEventListener('load',(event)=>{
                          const btnMargin = document.querySelector("#btnMargin")
                          btnMargin.addEventListener('click',(e)=>{
                              console.log(e.target);
                              getBoardSold();
                          })
                      })
              ```
              
      - CORS란? (Cross Origin Resource Sharing) - 교차 출처 리소스 공유
          - 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한
          - cross-origin 요청을 하려면 서버의 동의가 필요
          - 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절
      - 로그인창 실습(loginform) → css

      

      강의 내용

      • 파일경로
        • 절대경로 : 전체를 모두 적음
        • 상대경로 : 내 위치에서의 이동으로 적음
          • ./ → 현재 내가 바라보는 경로
          • ../ → 현재 내가 바라보는 경로의 하나

      강의 마무리

      • 다음주 본격적인 자바스크립트 강의 시작