Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS (v)
06. 미니프로젝트-3W 

08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

---

JS(Java Script)

• 프로토타입 기반 객체지향 언어
• 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있음
• 프로그램 코드가 직접 html문서에 삽입되어, 브라우저에서 html파일을 읽을 때 같이 해석되고 실행
• 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리 가능
• 타입 체크가 철저하지 않아 변수들의 타입에 있어서 차이를 두지 않음

스크립트 언어

• 어플레이케이션이 실행되는 동안 라인 단위로 해석되어 실행되는 언어로 별도의 컴파일 과정이 없음
• HTML문서 내에서 스크립트 언어는 <script>와 사이에 작성

출력

분류	명령어
브라우저 출력	document.write("브라우저 출력");
경고창 출력	alert("경고창 출력");
콘솔창 출력	console.log("콘솔창 출력");
확인	confirm("확인창출력");

변수 선언

• var 키워드

• 변수의 중복 선언 가능
• 유일하게 함수블록 내부에서 지역변수가 존재

• let 키워드

• 같은 블록에서는 이미 선언한 변수를 중복 선언 불가
• 블록{}, 제어문 블록{}에서도 지역변수가 존재

<script>
        var num = 10;
        var num = 30;

        console.log(num);

        let a= '홍길동';
        a='이순신';
</script>

데이터 타입

기본타입

• 숫자(number)

• 정수, 실수 구분 없음

• 문자열(string)

• 문자, 문자열 구분이 없음
• 쌍따옴표로 묶어도 되고, 홀따옴표로 묶어도 됨

• 불린(boolean)

• true/false
• 비교 결과가 0, null, ""(빈 문자열), false, undefined, NaN으로 판명되면 false, 나머진 true
• 동등 비교를 할 경우 타입도 같이 비교해 주는 === 사용을 권장

• undefined

• 변수는 선언헀으나 초기화를 하지 않은 경우 자동 저장
• 불린형은 false로 반환, 숫자는 NaN, 문자열은 undefined로 반환됨

• null

• 값은 저장했으나 존재하지 않을 떄 나타남

<script>
    var a = 10;
    var b = '문자열';
    var c = false;
    var d; // 초기화 되지 않은 경우 >> undefined
    var e = document.getElementById('1q32e1'); // 값이 존재하지 않는 경우 >> null

    console.log(a,b,c,d,e);
    console.log(a+d); // 숫자 + 연산할 수 없는 값이 더해지면 >> NaN

    // 타입확인
    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);
</script>

참조타입

• 배열

[]

• 객체

{}

연산자

• 기본 연산자들은 Java연산자와 동일
• 추가된 연산자

• === 와 !== : 타입도 비교하는 연산자

<script>    
    // 연산자
    var num1 = "10";
    var num2 = 10;
    
    console.log(num1==num2);
    console.log(num1===num2);
    console.log(num1!=num2);
    console.log(num1!==num2);
</script>

배열

• 자바스크립트의 배열은 []로 묶어주기만 하면 됨
• 저장은 자바와 다르게 타입과 상관없음

<script>
    // 많이 사용하는 방법
    // 다른 타입의 값도 저장
    var arr =[1,2,3,'홍길동','이순신'];
    console.log('배열의 길이',arr.length);
    console.log(arr)

    arr[0]=100;
    console.log(arr[0]);
    console.log('---------------------------');

    // 배열선언하는 두번번째 방법
    var arr = new Array();
    console.log(arr)

    var arr = new Array(10);
    console.log(arr); // 크기가 10인 배열

    var arr = new Array(1,2,3,4,5); // 크기값 5, 초기값 지정 
    console.log(arr);

    // 배열의 다양한 함수들
    // 뒤에 추가하기
    arr.push('홍길동');
    console.log(arr);

    // 뒤에서 제거하기
    arr.pop();
    console.log(arr);

    // 앞에서 추가하기
    arr.unshift(100);
    console.log(arr);

    // 앞에서 제거하기
    arr.shift();
    console.log(arr);

    // 중간에서 추가하기
    arr.splice(1,1) // 1번 인덱스 1개 삭제
    console.log(arr);
    arr.splice(1,0,100,200,300); // 1번 인덱스에서 0개 삭제, 100,200,300 추가
    console.log(arr);

    // 정렬
    arr.sort(); // 사전순 정렬
    console.log(arr);

    // 거꾸로
    arr.reverse();
    console.log(arr);
    
    arr.forEach(function(item,index){
        console.log(item,index);
    });
    
</script>

조건문, 반복문

• Java와 동일

<script>
    var a= parseInt(Math.random()*101);
    console.log(a);
    // 조건문
    if(a>=60){
        console.log('A학점입니다.');
    }else if(a>=50){
        console.log('B학점입니다.');
    }else{
        console.log('C학점입니다.');
    }
    // 반복문
    var i=1;
    while(i<=10){
        console.log(i);
        
        if(i==3) break;
        i++;
    }
    for(var i=1;i<=10;i++){
        console.log(i);
    }
    console.log(i); // i가 전역변수로 존재
</script>

• Java와 다른점

<script>
     // 향상된 for문
     var arr=[10,20,30,40,50];
     for(var i in arr){
         console.log(i); //인덱스값을 뽑아줌
     }
     for(var i of arr){ // ES6
         console.log(i); // 값을 뽑아줌
     }
</script>

함수

• 선언적 함수

• 반환 유형은 적지 않으며 매개변수도 적지 않을 수 있음
• 매개 변수는 데이터 타입을 적지 않음
• 리턴은 적어도 되며 적지 않아도 상관없음
• 선언적 함수는 함수 선언 이전에 호출 하여도 에러를 발생시키지 않음
• 함수를 변수에 저장할 수도 있음

• 익명함수

• 익명함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 하도록 만들어줌

<script>
     // 선언적 함수는 선언부보다 위에서 호출이 가능함
     var result = func1(10,20,30);
     console.log(result);
     // 함수를 변수에 저장
     var a = func1;
     console.log(a(30,40,50));
     // 선언적 함수
     function func1(a,b,c){
         // return은 반환값이 있으면 적고 없으면 적지 않음
         // return없는 함수는 undefined 반환
         return a+b+c;
     }
     
     // 익명함수
     var func2 = function(){
         console.log('익명함수 실행됨');
     }
     
     func2();
</script>

• 즉시실행 함수

• 함수를 정의하고 바로 실행
• 페이지 시작시 호출할 함수 기술

<script>
    (function(a,b){
         console.log('즉시실행함수','args',a,b);
         some1();
         some2();
     })(10,20);
     
    // 페이지 시작시에 동작시켜야할 함수들을 묶을 때 사용할 수 있음
     function some1(){
         console.log('some1함수')
     }
     function some2(){
         console.log('some2함수');
         
     }
</script>

• 화살표 함수

• ES6에 추가된 함수 내용으로 =>를 이용하는 함수

<script>
    // 1. 매개변수가 1개면 () 생략가능
    // 2. 코드가 한줄이면 {} 생략하고 return 생략가능
    // 3. object를 반환할 때는 () 묶어야함
    var func = function(a){
        return 10;
    }
    var func = a =>{
        return 10;
    }
    var func = a => 10;
</script>

매개변수

• 함수가 필요한 값을 전달하는 매개체
• 아무것도 적지 않을 수 있고, 여러개 받을 수도 있으며 ,로 연결하면 됨
• 자바스크립트의 매개 변수는 함수를 호출하는데 영향을 끼치지 않음

리턴

• 메서드가 실행 결과를 돌려주는 반환 값
• 자바스크립트의 return뒤에 함수 실행 후 돌려줄 값을 적음
• return false를 만나면 함수는 강제종료

객체(JSON)

• Object객체 -> JSON 문자열

JSON.stringify(data)

• JSON 문자열 -> Object객체

JSON.parse(문자열)

• 이 경우 키, 값이 전부 " " 로 묶여야 함

<script>
     var data=[
         {id:'abc',title:'java',age:20},
         {id:'aaa',title:'jsp',age:30},
         {id:'bbb',title:'css',age:40}
     ];
     console.log(data);
     
     //obj -> 제이슨 형변환
     
     var str = JSON.stringify(data);
     console.log(str);
     
     // 제이슨 -> obj 형변환
     var obj = JSON.parse(str);
     console.log(obj);
     // parse함수 사용시 엄격한 규칙이 있음
     // 키, 값을 반드시 ""로 묶어야함
     JSON.parse('{"name":"홍길동"}')
</script>