기록하고 기억하는 블로그

DBCP : Database Connection Pool

사용자가 DB에 접속이 몰리면 과부하 문제도 있고 연결 속도에 지장이 생길 수 있다

이를 해결하기 위해 미리 커넥션을 만들어 놓고 전달해주면 속도를 줄이며

최대 커넥션을 설정해 과부하를 막을 수 있도록 해준다

이를 커넥션 풀이라고 한다

[Connection Pool]
//미리 DB와 연결되어있는 Connection 객체를 일정 개수 이상 만들어 두고
//요청 시 만들어둔 Connection을 빌려주고
//요청 완료 시 다시 반환 받아오는 방법'

//항상 일정 개수 이상의 Connection 객체가 존재
//요청이 많을 경우 지정된 범위 내에서 추가적인 Connection 객체 생성할 수 있음
//Connection 개수에 제한이 있기 때문에 DB에 과도한 요청을 보내는 경우를 방지

이를 위해 이클립스에 미리 설정을 해놓는다

1. Server -> context.xml 에 세팅

      <Resource 
     name = "jdbc/oracle"
     auth = "Container"
     type = "javax.sql.DataSource"
     driverClassName="oracle.jdbc.OracleDriver"
     url = "jdbc:oracle:thin:@127.0.0.1:1521:xe"
     username = "username "
     password = "password !"
     maxTotal="200"
     maxIdle = "20"
     maxWaitMillis = "-1"/>
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 

      jdbc/oracle : NAME
      DataSource : DriverManager의 업그레이드판
       maxTotal : 최대 커넥션 개수 
      maxIdle  : 평소에 생성되어있는 커넥션의 최대 개수
      maxWaitMillis : 커넥션이 반환되는 최대 시간(-1이면 무제한)
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

2.  web.xml 에 세팅 (생략가능인듯?)

    <!--  DBCP 설정 자원 위치 -->
    <resource-ref>
    <description>Oracle Datasource</description>
    <res-ref-name>jdbc/oracle</res-ref-name>
    <res-type>javax.sql.DataSource</res-type>
    <res-auth>Container</res-auth>
   </resource-ref> 

3. JDBC 연결시 Context 사용 (템플릿 사용)

// Servers에 존재하는 context.xml 파일을 찾는 작업
     

  Context initContext = new InitialContext();
         Context envContext  = (Context)initContext.lookup("java:/comp/env");  
          // java:comp/env   응용 프로그램 환경 항목
         
         // context.xml 파일에서 name이 "jdbc/oracle"인 DataSource를 얻어옴
         // DataSource : DriverManager를 대체하는 객체로 
         // Connection 생성, Connectoin pool을 구현하는 객체
         DataSource ds = (DataSource)envContext.lookup("jdbc/oracle");
         
         conn = ds.getConnection(); // DataSource에 의해 미리 만들어진 Connection 중 하나를 얻어옴.
         conn.setAutoCommit(false);
         
         //-----------------------------------------------------------
    // JNDI(Java Naming and Directory Interface API)
         /*디렉터리 서비스에 접근하는데 사용하는 API
         어플리케이션은 JNDI를 사용하여 서버의 resource를 찾는다.
         특히 JDBC resource를 data source라고 부른다.
         
         Resource를 서버에 등록할 때 고유한 JNDI 이름을 붙이는데, JNDI 이름은 디렉터리 경로 형태를 가진다.
         예를 들어 data source의 JNDI 이름은 'jdbc/mydb' 형식으로 짓는다.
         
          서버에서 'jdbc/oracle'라는 DataSource를 찾으려면 
         'java:comp/env/jdbc/oracle'라는 JNDI 이름으로 찾아야 한다. 
         즉 lookup() 메소드에 'java:comp/env/jdbc/oracle'를 인자값으로 넘긴다.
         //--------------------------------------------------------------
         */

스크립팅 원소:

1) 선언문(declaration) <%! 자바코드 %>

2) 스트립틀릿(scriptlet) <% 자바코드 %>

3) 출력식, 표현식(expression) <%= 자바코드 %>

스크립팅 원소를 더 편하게 쓸수있는 라이브러리->JSTL

Servlet / JSP에는 기본적으로 내장되어있는 객체가 존재함. 

        총 4종류가 존재하며 각각 영향을 미칠 수 있는 범위가 다름. 

        1. page scope  현재 페이지(현재 Servlet 또는 현재 JSP 에서만 사용 가능)
        
        2. request scope 
        -> 요청 받은 Servlet/JSP + 요청 위임한 Servlet/ JSP 
        -> (2페이지 이상)
        
        3. session scope
        -> 사이트에 접속한 브라우저당 1개씩 생성됨 
            같은 브라우저끼리 공유가 됨
            브라우저 종료 또는 세션 만료시 소멸
            브라우저가 종료되지 않거나 세션이 만료되지 않으면 계속 유지
            클라이언트가 서버에 접속하면 세션을 1개 생성해서 저장하는 것임

        4. application scope 
            -> 하나의 웹 애플리케이션 당 1개 생성. 
            -> 서버 종료 전까지 웹 애플리케이션 어디서든 사용 가능

JSTL/EL

EL(Expression Language) : JSP의 표현식을 조금 더 효율적이고 간단하게 작성하는 언어

JSTL

JSP에서 사용하는 태그 라이브러리로 
JSP에서 자주 사용하거나 공통적으로 사용되는 코드를 쉽게 사용하기 위해
태그화하여 표준으로 제공함.

https://tomcat.apache.org/download-taglibs.cgi 접속
jar files -> impl, EL, Spec 다운로드
WEB-INF/lib 폴더에 추가

JSTL 사용을 위한 선언 방법

JSTL을 사용하고자 하는 JSP가 있을 경우
해당 JSP 최상단에 JSTL 라이브러리를 추가하는 지시자 taglib를 작성해야 한다.

EX) /<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>/

prefix : 접두사. 다른 태그와 구별할 수 있는 namespace;

uri (unifomr resource identifier): 네트워크 상에서 자원을 구변하는 식별자
자원을 구분하는 유일한 주소
(url: uniform resource locator -> 인터넷에서 특정 자원 위치 지정 )
->uri에 작성하는 주소는 네트워크 상의 주소가 아닌 다운로드 받은 라이브러리 상의 주소가 아닌
  다운로드 받은 라이브러리 내부 구분 주소

[  변수 선언 c: set 태그  ]

-변수를 선언하고 초기화를 진행하는 태그(초기화 무조건 수행)
-c:set 태그로 선언한 변수는 EL을 이용해서 출력할 수 있다.

특징 1: 별도의 변수 타입 지정을 하지 않는다.
특징 2: 변수의 범위(scope)를 지정할 수 있다.
(page request session application)
var : 변수명
value : 저장할 값
scope : 변수 범위 

ex) /<c:set var="num1" value="100" scope="session/>/

[  변수 삭제 (c:remove)  ]

지정한 변수를 특정 scope 또는 모든 scope에서 제거
ex) 
게시글 작성 -> 오류 발생 -> 다시 작성페이지 돌아옴 -> 이전 내용이 모두 삭제
이를 해결하기 위해 작성 완료 시 session에 글 내용을 임시 저장
->정상적으로 글 등록이 완료되면 임시 저장된 내용을 삭제

<c:remove var="num1" scope="session"/>

[  조건문 - if문 (c:if 태그)  ]

if문을 태그 형식으로 작성한 것.
별도의 else 구문이 존재하지 않음

test 속성 : 조건을 작성하는 속성 EL 형식으로만 작성 가능.

1. if(조건식) ==  <c:if test="조건식">

2. if else if else == c:choose -> c:when -> c:otherwise

3. for문 + 추가기능 == c:forEach

/<c:if test="${test1>test2}">
test1이 더 큽니다.
</c:if>/
별도의 else 구문이 없으므로 필요 시 반대 조건의 c:if를 작성해야 함 

[  조건문 - if~ else if~ else(c:choose , c:when, c:otherwise)  ]

c:choose 태그 내부에
c:when 태그를 이용하여 조건 작성(if, else if )
c:otherwise 태그를 이용해 조건을 만족하지 않는 경우 작성(else)

<%--choose문 안에 주석쓰면 오류남 --%>

/ <c:choose>
<c:when test="${param.aaa>10}">
10보다 큼
</c:when>

<c:when test="${param.aaa ==10}">
10과 같다
</c:when>

<c:otherwise>
10보다 작다
</c:otherwise>
</c:choose>/

[  c:forEach 태그  ]

- java의 for문 + 추가 기능을 가지고 있는 태그
- 속성

var: 현재 반복 횟수에 해당하는 변수 (==int i )
begin: 반복 시작 값
end:  반복 종료 값
step: 반복 시 마다 증가할 값 (--- 여기까지 쓰면 일반 for문), 미작성 시 기본값 1

items: 반복 접근할 객체 명(Collection 객체)(-- items 추가시 향상된 for문)
varStatus: 현재 반복에 해당되는 상태 정보

- 제공되는 값 
1) current : 현재 반복 횟수 또는 현재 접근중인 객체
2) index : 현재 객체가 몇번째 인덱스인지 반환 (0부터 시작)
3) count : 현재 반복문이 몇바퀴 반복 중인지 반환 (1부터 시작)
4) first : 첫 번째 반복일 경우 true 반환
5) last : 마지막 반복일 경우 true 반환

[  일반 for문 형식 사용  ]
/<c:forEach var="i" begin="1" end="6" step="1" >
<h${i}>안녕하세요 forEach 작성 테스트 중입니다 ${i}번째 시도</h${i}>
</c:forEach>/

[  향상된 for문처럼 사용  ]

/<c:forEach var="item" items="${paramValues.lang}" varStatus="vs">

~~내용~~

</c:forEach> /

HTML form태그가 전달하는 방식:

1) GET방식

- 요청 시 주소에 값(파라미터)을 담아서 전달하는 방식

- 장점 : 캐싱(북마크, 주소복사) 가능

- 단점 : 비밀번호도 주소에 노툴되는 문제 발생

           +주소창 길이는 제한됨(데이터 길이 제한)

==>쿼리스트링 사용 : 주소에 담긴 파라미터를 나타내는 문자열

==>요청 주소 뒤에 ?를 기점으로 시작. + name속성값=value 형태로 작성, 여러개면 &로 붙힘

2)POST방식

- 요청 시 HTTP Body에 값을 감아서 전달하는 방식

- 장점 : 값이 주소에 노출되지 않아 보안성이 높음.

          + 데이터 크기 제한 없음.

- 단점 : 캐싱 불가능. 문자 인코딩 처리가 필요

[하나의 프로젝트에서 같은 주소 요청을 처리하는 Servlet은 중복 존재할 수 없다]

== 요청 주소당 Servlet은 하나만 가능하고 이 하나에서 GET 과 POST를 둘 다 받게 할 수 있다.

(doget(), dopost() 작성)

JSP : HTML에 Java코드를 작성할 수 있는 파일. HTML을 쉽게 Java와 합쳐 작성할 수 있게 도와준 Servlet

---> 한마디로 발전된 Servlet으로 둘이 전혀 다른게 아님

JSP의 장점:

1) Servlet보다 쉽다

2) 디자인과 로직이 나눠있을 수 있음

3) 변수의 범위 설정 가능(scope)

Servelt 이란?

웹 프로그래밍에서 클라이언트의 요청을 처리하고 그 결과를 다시 응답하는 자바 프로그래밍 기술

== 자바로 구현된 CGI(특별한 라이브러리나 도구가 아닌 별로도 제작된 웹 서버와 프로그램간의 교환 방식)

==코딩으로 웹 브라우저용 출력화면(HTML) 을 만드는 방법

-주요 특징

1. 클라이언트의 요총에 대해 동적으로 작동하는 웹 애플리케이션 컴포넌트

== 미리 만들어둔 화면이 아닌 요청을 받을 때 마다 알맞은 화면을 만들어 응답

2. HTML로 응답

3. java thread를 이용하여(요청마다) 동작

4. MVC Model2 패턴에서 Controller로 이용

5. servelt 클래스를 상속받음

(단점 = servlet에서 작성한 html 코드 변경 시 재컴파일 해야함)

-작동 방식

1. 사용자가 HTTP Request를 Servlet Container로 전송

2. Request를 받은 Servlet Container 는 두 객체를 생성

(HttpServletRequest)  - 요청 관련 내용 객체 ,  (HttpServletResponse) - 응답 관련 내용 객체

3. web.xml (DD) 은 사용자가 요청한 URL 을 분석하여 어떤 서블릿 클래스에 요청 내용을 전달할 지 찾음

4. 해당 서블릿에서 init() 메서드를 호출 후 service() 메서드를 호출하여 클라이언트로부터 전송받은 방식에 따라

 GET / POST 여부로 메서드 호출

5. doGet / doPost 메서드는 동적 페이지 생성 후 HttpServletResponse객체에 응답을 보냄

6. 응답이 끝나면 destroy 메서드를 호출하여 HttpServletRequest HttpServletResponse 객체 소멸

<jQuery 선택자>

jQuery 선택자 : $("선택자") 의 형태로 선택자 작성 방법은 CSS를 따른다

ex) $("#id")

1) 태그 선택자

[JS] = document.getElementByTagName("태그명")

[jQuery] = $("태그명")

2) 클래스 선택자

[JS] = document.getElementByClassName("클래스명")

[jQuery] = $(".클래스명")

3) 아이디 선택자

[JS] = document.getElementBy("태그명")

[jQuery] = $("#아이디명")

%% JS와 다른 사용법  %%

// $(요소).on("이벤트", 이벤트 핸들러) : 지정된 요소에 이벤트 리스너를 추가
    // == JS 의 요소.addEventListener() 와 같은 동작
    // 단 요소 선택 방법에 차이가 있음.

 $("#input1").on("input", function(){
 	const input = $(this).val();
    //JS 는 this.value
    $(this).text("인풋");
    //JS는 this.innerText = "인풋";
    $(this).css("backgroundColor", "red");
    //JS는 this.style.background-color = "red";
    
    
 });

4) 자손, 후손 선택자

 $("선택자")

5) 입력 양식 필터 선택자

 $("input:타입명")  --> input 태그 전용 선택자 ( text, checkbox, file ) 

 $("input[type="타입명"]") --> 기본 속성 선택자

6) 순서에 따른 필터 선택자

odd / even : 홀수 짝수 

$("선택자 : odd")

first / last 첫, 마지막

$("선택자 : first")

<순환 탐색 메소드>

1. 조상 탐색 메소드

$("선택자").parent 

-선택된 요소의 바로 위 상위 요소(현재 요스를 감싸고 있는 요소)

$("선택자").parents([매개변수])

-모든 상위 요소 중 매개변수 반환 ( 없으면 전부)

$("선택자").parentUntil(매개변수)

-모든 상위요소 중 매개변수까지 (매개변수 필수)

2. 자손 탐색 메소드

$("선택자").child

-선택된 요소의 바로 위 상위 요소(현재 요스를 감싸고 있는 요소)

$("선택자").children([매개변수])

-모든 자손요소 중 매개변수 반환 ( 없으면 전부)

$("선택자").find(매개변수)

-모든 자손요소 중 매개변수  (매개변수 필수)

3. Sideways 탐색 메소드

$("선택자").siblings([매개변수])

-선택된 요소의 모든 형제(같은 레벨 위치)

$("선택자").next();

-선택된 요소의 다음 형제 요소 (1개)

$("선택자").nextAll();

-선택된 요소의 다음 모든 형제 요소를 반환

$("선택자").prev();

-선택된 요소의 이전 형제 요소 (1개) 를 반환

$("선택자").prevAll();

-선택된 요소의 이전 모든요소

$("선택자").prevUntil(매개변수)

-선택된 요소 이전 모든 요소 중 매매변수 요소 전까지

.is(매개변수) - 지정된 범위 내에 매개변수와 일치하는 요소가 있는지 확인

-있으면 true 없으면 false

jQuery? 

기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화 하기 위해 고안된 JS 라이브러리

적은양의 코드로 많은 기능을 제공한다

(다만 라이브러리를 사용하므로 속도가 느려질 수 있다)

<연결방법>

1. 다운로드 받아 직접 연결

2. CDN 을 이용한 연결 (링크로)

head나 body 끝부분에 <script src=""></script>태그를 통해서 연결한다

<HTML의 해석 순서와 window.onload, ready() 함수의 차이점>HTML 문서는 위에서 아래로 순서대로 해석된다(아랫쪽에 작성된 미해석 코드는 위쪽에서 사용이 불가능하다) -> 이를 가능하게 해주는 바로실행 함수 : window.onload( JS) , ready() (jQuery)-> 차이점 : window.onload는 페이지 내에서 딱 한번만 작성 가능( 중복 시 마지막 내용이 적용됨)->            ready() 함수는 여러번 작성 가능

[ready() 함수의 작성방법]

1. jQuery(document).ready(function(){ 코드; });

2. $(document).ready(function(){ 코드; });

3. $(function(){코드; });

-자바스크립트의 함수-

1) 익명함수 : 이름이 없는 함수이기 때문에 마음대로 호출이 불가능

2) 즉시 실행함수 : 익명함수의 한 종류로 정의되자마자 바로 실행

[쓰는 이유 : 호출부가 없으므로 일반 함수보다 속도적 우위 , 사용하려는 변수명이 전역변수인 경우 내부 지역변수 사용으로 문제 해결 가능]

3) 화살표 실행 : 익명 함수 표기법을 간단하게

[작성법1] : (매개변수) -> {함수 정의}

[작성법2] : 매개변수 하나인경우 e => {}

[작성법3] : 매개변수가 없을경우 무조건 () => {}

[작성법4] : 함수 정의 부분이 return + a 로만 작성된 경우 ()=>a

[작성법5] : 함수 정의 부분에 return + 객체(object) 인 경우 ()=>{ return object} 전부 작성

DOM : Document Object Model

->HTML(웹문서, 웹페이지 ) 문서를 객체 기반으로 표현한 것

        childNodes : 자식 노드 리스트

        parentNode : 부모 노드

        firstChild : 첫 번째 자식 노드

        lastChild : 마지막 자식 노드

        childNodes[index]: index 번째 노드

        previousSibling : 이전 형제 노드

        nextSibling : 다음 형제 노드

Node와 Element의 차이

    Node : 태그, 속성 , 주석, 내용 등을 모두 노드라고 표현함.

    Element : Node의 하위개념으로 요소 노드만들 가리킨다.

Element만 선택하는 방법

        children: 자식 요소만 선택

        parentElement : 부모 요소 선택

        firstElementChild: 첫 번째 자식 요소 반환(없으면 null)

        lastElementChild: 마지막 자식

자바스크립트의 객체

자바스크립트의 객체는 {}내에 Key Value가 모여있는 형태로 작성된다

        (Map 형식)

        {k:v , k:v , k:v}

-객체생성방법

        1) {} (객체 리터럴 표기법)을 이용한 생성 방법

        2) 생성자 함수 + new 연산자를 이용한 생성 방법

// {}객체 리터럴 표기법을 이용한 객체 생성

const brand ="투썸";

const product ={
        pName : "텀블러",
        brand : "스타벅스",
        color : ["white", "black","silver"],
        amount : 100,
        mix : function(add){alert(add+"를 자동으로 섞어줍니다.")},
        // 기능(메서드임)
        information : function(){console.log(brand);},
        //객체 안에서 brand를 호출하지만 객체 밖의 brand가 호출된다
        information2 : function(){console.log(this.brand);}
        // 객체 안의 brand는 this를 붙혀야 함
    };
    
    
     //생성자 함수
    //1. 생성자 함수 정의
    //**생성자 함수의 함수명은 반드시 대분자로 시작한다! */
    
     function Student(name, age, java, db, html, css){
        //매개변수로 전달받은 값을 생성되는 객체의 속성에 대입하기
        // 여기서 this == 생성될 객체 / this.name속성에 넣고 없으면 속성 생성
        this.name = name;
        this.age = Number(age);
        this.java = Number(java);
        this.db = Number(db);
        this.html = Number(html);
        this.css= Number(css);

        //평균 점수 반환(소수점 둘째 자리까지 표시)
        this.getAvg = function(){
            const sum =  this.java+ this.db  + this.html+  this.css
            const avg = sum/4;
            // 숫자.toFixed(자릿수) : 소수점 자리수를 지정하는 함수
            //지정된 자릿수 밑에서 반올림처리
            
            return avg.toFixed(2);
        }//this : 현재 객체가 가지고있는 속성의 값
        
    }

내장객체

date 객체 : 날짜 관련 객체

document.getElementById("btn1").addEventListener("click",function(){

    const date1 = new Date();

    //GMT
    const date2 = new Date("Mon Nov 08 2021 16:33:50");

    console.log(date1);
    console.log(date2);

    //UTC
    const date3 = new Date(2021, 11,8,9,0,0);
    console.log(date3);

    //Date객체에서 년 월 일 시 분 초 요일 얻어오기
    console.log("년도 : " + date1.getFullYear());
    // 월은 0~11로 표현되므로 1 더해줘야 표현됨
    console.log("월 : " + (date1.getMonth()+1));
    console.log("일 : " + date1.getDate());

    //일요일== 0 ~ 토요일==6
    const arr =["일","월","화","수","목","금","토",];
    //index로 요일 지정 가능
    
    console.log("요일 : " + date1.getDay());
    console.log("시 : " + date1.getHours() );
    console.log("분 : " + date1.getMinutes() );
    console.log("초 : " + date1.getSeconds());
})

windows 객체 : 브라우저 창 자체를 나타내는 객체

-window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다

-그래서 window라는 객체 호출부를 생략할 수 있다.

(window.alert() == alert())

-window.setTimeout(함수, 지연시간(ms))

지정된 지연 시간마다 함수가 반복 수행됨

-window.setInterval(함수, 지연시간)

지정된 지연 시간마다 함수가 반복 수행됨

->setInterval은 중복되서 사용될수 있기 때문에 여러번 호출되지 못하게 처리가 필요함

<script> 태그는 head태그 , body 태그 두 곳 다 선언 가능하다

-head 태그에 선언하는 경우 : 페이지 로딩 시에 실행되어야 하는 script -> 가벼운 것들(무거우면 렌더링 딜레이 발생)

-body 태그에 선언하는 경우 : 나머지 경우의 script 

JS의 이벤트

-이벤트(Event) : 동작 , 행위 ( 클릭, 마우스오버, 키다운 , 키업 ..)

-이벤트리스너(Event Listener) : 동작, 행위를 감지해 발생 시 연결된 기능을 수행

 ==> on+행위 로 부름 (onclick ~ , onmouseover~ )

-이벤트 핸들러(Event Handler) : 이벤트 리스너에 연결된 기능(함수) , 이벤트 발생 시 수행하고자 하는 내용

--이벤트의 작성--

1. 인라인 이벤트 모델 : HTML 태그에 직접 이벤트(이벤트 리스너 + 핸들러) 를 작성

-> on이벤트명 = 함수명();

  <button onclick="test1()">테스트</button>
--------------------------------------------------------
function test1(){

    alert("인라인 이벤트 모델 방식입니다.");

}

2. 고전 이벤트 모델 -> 요소가 가지고있는 이벤트 속성에 이벤트 핸들러를 연결하는 방법으로 인라인 모델과 다르게                                   script로만 작성 할 수 있음

  <button id="test2">고전이벤트모델</button>
  ----------------------------------------------------
  const btn1 = document.getElementById("test2");


    // 요소.이벤트리스너 = 이벤트 핸들러(함수)
    btn1.onclick=function(){
        alert("고전 이벤트 모델 방식입니다");
    }

3. 표준 이벤트 모델(addEventListener("이벤트명" , 이벤트 핸들러(함수)) )

-W3C 에서 공식적으로 지정한 이벤트 모델 표준

-고전 이벤트의 단점인 하나의 리스너에 하나의 핸들러만 설정할 수 있는 것을 보완

-IE9 버전부터만 사용 가능

<button id="input-btn">입력</button>
------------------------------------------------------
document.getElementById("input-btn").addEventListener("click" , function(){
    this.style.backgroundColor="orange";
})

변수 선언 위치에 따른 구분

'-자바의 인스턴스 변수, 클래스 변쉬, 지역변수와 다름

-자바스크립트 -  (변수 선언 : var const let)

*****

var 변수명 : 전역변수 -> 같은 문서 내 선언된 이후부터 어디서든 사용 가능

변수명 = var 변수명;

function 함수명(){

  var 변수명 : function 내에서 유효한 지역변수

  if(조건식){

     var 변수명 : if문 안에서 쓰였어도 var 변수명 ->  if문 지역변수가 아닌 function지역변수로 인식됨

     const , let은 if문 지역변수

     (var 변수는 변수명이 중복 가능하고 새로운 값으로 덮어씀, const let은 중복이 불가능하다)

  ]

} 

*****var 변수 형식은 전역 또는 function 지역변수만을 범위로 갖는다!

-자바스크립트의 자료형-

자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음.

-> 변수에 대입되는 값(리터럴)에 따라 변수의 자료형이 결정됨

-string(문자+문자열) , number(정수+실수) , boolean , object ,function(변수에  이름없는 함수 지정 가능) ,  undefined