JavaScript

JavaScript

• 문법이 철저하지 않음
• 변수 선언할때 타입을 따로 설정 안해도 됨
• 오류가 생겨도 찾기 쉽지 않음

Node

• npm : node 패키지들을 사용할 수 있도록 관리해주는 도구

React

• npx : npm 5.2 + 버전의 패키지 실행도구
• 프로젝트 세팅

npx create-react-app [이름]
cd [이름]
npm start

JS

• script 쓸때 defer 쓰면 페이지가 모두 로드되고 이후에 외부 스크립트 실행
• async 실행순서 보장 안됨
• var, let, const
  • var : 유효범위 구분x. (지역, 전역 변수를 구분 할 수 없음)
  • let : 특정 영역에서 지역변수로 사용할 수 있음.
  • const : 값이 변경되지 않는 상수.

 

02. JavaScript_commnad

1. if 조건문
2. if(조건식) { 실행문; }let month = prompt("월 입력 :", ""); if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){ console.log(`${month}월은 31일 까지 있습니다.`) } else if(month==2){ console.log(`${month}월은 28일 까지 있습니다.`) } else if(month==4||month==6||month==9||month==11){ console.log(`${month}월은 30일 까지 있습니다.`) } else{ console.log(`${month}월이 맞는지 확인하세요.`) }
3. switch 문
4. switch(변수명){ case 변수값 : 실행문 break; case 변수값 : 실행문 break; default : 기타 실행문; }switch(month){ case '1': case '3': case '5': case '7': case '8': case '10': case '12': console.log(`${month}월은 31일까지 있습니다.`) break; case '2': console.log(`${month}월은 28까지 있습니다.`) break; case '4': case '6': case '9': case '11': console.log(`${month}월은 30일까지 있습니다.`) break; default: console.log(`${month}월이 맞는지 확인하세요.`) }
5. 반복문
   1. while 문
   2. 초기값; while(조건식){ 참일때 실행문; 증감식; }let index = 1; let sum = 0; while(index < 11){ sum += index; // sum = sum + index; index++; // index = index + 1; } console.log(`1~10 합 : ${sum}`);
   3. do while 문
   4. 초기값; do{ 실행문; 증감식; }while(조건식);let index = 1; let sum = 0; do{ sum += index; index++; } while(index < 11); console.log(`1~10 합 : ${sum}`);
   5. for 문

      let sum = 0;
      for(index = 1; index < 11; index++){
          sum += index;
      }
      console.log(`1~10 합 : ${sum}`);

   6. for(초기값; 조건식; 증감식){ 실행문; } for(데이터 in|of 리스트 데이터){ 실행문; }
6. 기타 (return - 함수종료(반환), break - 반복문 종료, continue - 뒤에 skip하고 반복문)
7. let sum = 0; for(index = 1; index< 11; index++){ if(index%2==0) continue; sum += index; } console.log(`1~10 홀수 합 : ${sum}`); //nested for문 for(i1 = 1; i1 < 10; i1++){ for(i2 = 1; i2 < 10; i2++){ console.log(`${i1} * ${i2} = ${i1*i2}`); } }

 

03. JavaScript_variable

• variables
  • var : 유효범위 구분 없음
  • let : 유효범위 구분 위해 사용
  • const : 상수 선언. 값 변경 없이 read Only로 사용

var x; 
x = 6;
const constVariable = 10;
let globalVariable = 5;
{
   let localVariable = 5;
   var y = 5;
   console.log("localVariable", localVariable);
   console.log("globalVariable", globalVariable);
   console.log("var x", x);
   console.log("var x", x);
   console.log("const", constVariable);
}
//constVariable = 100; 상수는 값 할당 안됨
//console.log("localVarialbe", localVariable; 지역변수로 선언되어있음
console.log("globalVariable", globalVariable);
console.log("var x", x);
console.log("var y", y);
document.getElementById("data").innerHTML = "<h3>variable x= "+x+"</h3>";

• data type
  • primitive (int, float, char, boolean)
  • reference (Class, Array)

let intV = 10;
let floatV = 10.5;
let stringV = "10";
let booleanV = true;
console.log("data type")

 

04. JavaScript_Operator

1. 산술 연산자 (+, -, *, /, %)
2. let x = 10; let y = 20; ​ console.log(`${x} + ${y} = ${x+y}`); console.log(`${x} - ${y} = ${x-y}`); console.log(`${x} * ${y} = ${x*y}`); console.log(`${x} / ${y} = ${x/y}`); console.log(`${y} % ${x} = ${x%y}`);
3. 대입 연산자 (=)
4. const z = x+y; console.log(z);
5. 비교 연산자 (>, <, >=, <=, !=, ===, !==)
6. console.log(`${x} > ${y} = ${x>y}`); console.log(`${x} < ${y} = ${x<y}`); console.log(`${x} >= ${y} = ${x>=y}`); console.log(`${x} <= ${y} = ${x<=y}`); console.log(`${x} == ${y} = ${x==y}`); console.log(`${x} != ${y} = ${x!=y}`);
7. 논리 연산자 (&&, ||, ^, ~)
8. if((x<y) && x!=0) { console.log(`${x} < ${y} and ${x} is not 0`); }
9. 비트 연산자(&, |, ~, >>, <<)
10. x=4; console.log(`${x} >> 2 = ${x>>2}`); console.log(`${x} << 2 = ${x<<2}`);
11. 삼항 연산자 : 조건 ? 참 : 거짓
12. x == y ? console.log(`${x} == ${y}`) : console.log(`${x} != ${y}`);

 

05. JavaScript_Function

• javascript는 일급 함수
• 함수 정의 함수 호출해서 사용
• 정의
• function(p1, p2, ...){ 내용; return data; }
• 호출

  let functionV = function(p1,p2,...){
  내용;
  return data;
  }
  functionV : 함수객체
  arraw function : (p1, p2, ...) => {
   내용;
   return data;
  }

  //함수 정의
  function add(x, y){
     return x+y;
  }
  ​
  //함수 사용
  let sum = add(10,20);
  console.log("add(10,20 = ", sum);
  ​
  //익명 함수
  let substarct = function(x, y){
     return x - y;
  }
  console.log("substract(20,10) = ", substarct(20,10), typeof substarct);
  ​
  //arrow function
  let divide = (x, y) => console.log(`divide(${x},${y}) = `, x/y);
  divide(20,10);
  ​
  //함수 선언 및 실행
  let multiply = ((x,y)=>{console.log(`multiply(${x}*${y} = `, x*y)})(20,10);
  ​
  //클로져
  //함수에서 다른 함수 리턴
  function makeAdder(x){
     let y = 1; //makeAdder function local variable
     return function(z){
         y = 100; // 외부함수 local variable 사용
         return x+y+z;
    }
  }
  ​
  let add5 = makeAdder(5);
  let add10 = makeAdder(10);
  console.log(add5(2), add5);
  console.log(add10(2), add10);
  ​
  //클로져
  function multi(n){
     return function(){
         return n *= n;
    }
  }
  ​
  let multi5 = multi(5);
  let multi10 = multi(10);
  console.log(multi5, multi5());
  console.log(multi10, multi10());
  ​
  //재귀함수
  function factorial(n){
     if(n === 1){
         console.log('호출 끝');
         return 1;
    }
     else{
         console.log('호출' + n);
         return n*factorial(n-1);
    }
  }
  console.log("10!", factorial(10));

  
  
  
• let data = 함수명 (p1, p2, ...)