본문 바로가기
언어/HTML & CSS

[JS] 자바스크립트 기초- 스코프, 호이스팅, AJax , JSON, Fetch 란 ?

by 저여저 2024. 2. 25.

 ㅇ스코프란 ? (Scope)

ㅡ 유효범위, 동일한 식별자 충돌 방지

ㅡ 변순 함수 선언 위치에 따라 스코프를 가진다.

 

ㅇ 스코프의 종류

1) 전역 스코프 ( global scope  . 전역 변수? 최상위 변수)

: 어디서든 참조 가능하다

ㅡ let , const : 가장 바깥 단에서 재선언 할당이 안됨 . var는 다 가능함 

2) 지역 스코프 ( local scope , 함수 또는 블록 안에 선언 된 스코프이다.)

: 함수 내 정의 가능하고, 함수내에서만 참조 가능하다.

 

3) 함수 레벨 스코프 (함수 안에 선언한 변수 , 지역변수 이다 )

ㅡ 함수 외부에서 해당 변수 호출시 오류난다 .

4) 블록 레벨 스코프 ( 블록 { ...}  내에서 접근 가능한 변수)

ㅡ let , const : 가장 바깥 단에서 재선언 할당이 안됨 .

 

< 호이스팅 Hoisting >

ㅡ선언한 코드를 내부적으로 최상단으로 끌어올리는 것

 ㅡ var 와 함수선언이 대상이다. ( let, const 는 최상단으로 못올라감)

ㅡ 선언된 var 는 최상단으로 올라간다는 의미+ 선언된 함수는 최상단으로 올라간다는 의미이다.

ㅡ Untified 값 출력

 

      document.write(sum(10, 20));

      function sum(num1, num2) {
        return num1 + num2;
      }
>>함수 호이스

 

< TDZ : Temporal Dead Zone>

ㅡ 일시적 사각지대 ( let, const ) 

ㅡ 변수는 있지만 초기화 또는 할당 안된다 Error발생함.

 

< IIFE : Immediately Invoked Function Expression>

ㅡ 즉시 실행 되는 함수 표현식 약자이다 . 함수이름 없음.

ㅡ 표현 내부 변수는 외부로 부터 접근 불가함

ㅡ IIFE 변수 할당시 자체 저장은 안되고,  즉시 실행된 함수 결과만 저장가능하다.

ㅡ 결과 값을 출력할때 변수에 담아주면된다 .

ㅡ 사용 이유 ?

불필요한 변수 및 함수 생성 필요 없음. 메모리 줄임

scope충돌 안함 , 한번만 호출하는 코드의 경우 사용한다 .

ex) 초기 설정 로직에 사용가능함 .

 

ㅡ 표현식 ? 함수리터럴을 ()감싼 형태이다.

(function() { // 문 } ) ();

ㅡ 예제 -즉시 실행함수

      (function (num1,num2) {
        return num1+num2;
      }) (10,20);

 

자바스크립트의 비동기 처리 방식 !!

<HTTP통신 >

HyoerText Transfer Protocol 통신규약

ㅡ Https 는 http를 ssl로 암호환 것

ㅡ 동작 원리

1. 사용자에 의한 이벤트 발생

2. 서버의 웹 서버로 요청

3. 데이터베이스에서 데이터 조회

4. 요청결과 응답생성

5. 웹 페이지 로드

 

<Ajax : Asynchronous JavaScript and XML>

ㅡ 전체 새로고침이 아닌 일부만 로드하는 방법이다. 비동기 처리 

ㅡ 사용하는 이유 ?  자원,시간 낭비 없음 / 속도향상/ 코딩 양 줄음/ 다양한 UI구현 가능하다.

ㅡ 동작 원리 7가지

1.사용자에 의한 이벤트 발생

2.javascript Ajax호출

3. 서버의 웹 서버로 요청처리함

4. 데이터베이스에서 데이터 조회

5. 요청결과 응답생성

6. javascript Ajax를 통해 데이터 응답 받음

7. 웹페이지 일부만 다시 로드한다.

 

< XMLHttpRequest 객체 >

ㅡ Ajax의 핵심이다.

ㅡ 서버와 데이터 주고 받을 때 사용한다 . W3C표준으로 정의 (주요 웹브라우저에 내장)

 ㅡ IE5 ,IE6 옛날버전은 ActiveObject 이용해서 비동기처리 해야한다.

ㅇ 사용방법 ? ( jQuery ajax 를 많이 사용한다.)

ㅡ IE7이상, 크롬, 파폭, 사파리, 오페라

var 변수명 = new XMLHttpRequest();

ㅡ IE5 ,IE6

var 변수명 = new ActiveObjext("Microsoft.XMLHTTP");

로 사용한다 .

ㅡ jQuery ajax 라이브러리로 사용한다. ( 다운로드 해서 사용하거나 ) 

또는 .ajaxSend() 검색 후  경로 넣어서 사용한다.

>> <head> 태그 안에 <script src =" 경로"></script> </head>넣어준다.

 

<Fetch> 비동기 처리방식이다.

ㅡ Promise기반으로 구성/ 비동기방식/ JS의 기본 기능이다.

      fetch(url, option)
        .then((res) => rex.text())
        .then((text) => console.log(text));

요청할url을 적는다

option

- http메서드headers,body정의

-생략가능 / default  Get방식이다.

 

< JSON : JacaScript Object Notation >  

 ㅡ 자바스크립트 객체 문법(객체 리터럴)이다. 구조화된 데이터 표현을 위한 표준 형식

ㅡ 데이터 전송시 사용한다. 서로 다른 프로그램에서도 데이터 주고받을 때 이용하는 방식이다.

ㅡ 문자열 형태, 따옴표 표시 " "

ㅡ JSON 은 ` ` 백틱으로 구분한다 . ( ` `  없으면 js)

ㅇ JSON 형식 은 ?  다양한 데이터 형식 가능  

ㅇJSON 내장 객체

1. json객체를 >>  자바스크립트 객체로 변환시킬때 사용

JSON.parse();

      var jsonData =` {
        name: "홍길동",
        age: 20,
        gender: "남",
        school: null,
        music: "pop",
      } `;
      var jsonData = JSON.parse(jsonData);
      console.log(jsData);

2. 자바스크립트 객체를 >> json객체로 변환시킬때사용

JSON.stringify();

        var jsonData = {
            name: "홍길동",
            age: 20,
            gender: "남",
            school: null,
            music: "pop",
        } ;
        var jsData = JSON.stringfy(jsonData);
        console.log(jsData);

 

 

 

 

 

 

 

 

'언어 > HTML & CSS' 카테고리의 다른 글

[IT] animation 최적화 기법 과 반응형 작업에 미디어 쿼리를 최소화로 잡는 방법  (1) 2024.02.25
[IT] CSS - box-shadow 그림자 넣기 (border 테두리 활용, 예제)  (0) 2024.02.07
[IT] HTML - noopener, noreferrer 사용법 정리  (0) 2024.02.06
[IT] HTML - hidden 속성이란 ? (css 글자수 넘어가면 말줄임표 )  (0) 2024.01.31
[IT] CSS - 애니메이션의 모든 것 ! (html에서 자바스크립트 활용)  (0) 2024.01.29

관련글

티스토리툴바