Julyee Blog: [패스트캠퍼스] react 강의 학습일지

React&Redux로 시작하는 웹프로그래밍_5주차

JavaScript Essentials_JS

개요(ECMAScript) 및 프로젝트 초기화

ECMA 스크립트 / ES6 / 에크마 / js / 자바스크립트

프로젝트 초기화

1. 폴더 생성

2. 터미널: npm init -y

3. npm i parcel-bundler -D

4. package.json 파일에 scripts부분에 dev, build 명시

 "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

5. index.html 만들기 > main.js 연결하기

<script src="./main.js"></script>

6. main.js 만들기

7. 터미널 npm run dev 브라우저에서 열기

데이터 타입 확인

console.log(typeof 'Hello World');
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
console.log(getType(123));
console.log(getType(false));
console.log(getType(null));
console.log(getType({}));
console.log(getType([]));

OR

//getType.js
export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

//main.js
import getType from './getType.js';
console.log(getType(123));
console.log(getType(false));
console.log(getType(null));
console.log(getType({}));
console.log(getType([]));

산술, 할당 연산자

//산술 연산자 (arithmetic operator)
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);

//할당 연산자 (assignment operator)
let a = 2;
// a = a + 1;
a += 1;
a -= 1;
a *= 1;
a /= 1;
a %= 1;
console.log(a);

비교, 논리 연산자

//비교 연산자 (comparison operator)
const a = 1;
const b = 3;

console.log(a === b); //일치연산자, a와 b를 비교해서 일치하는지 비교함

function isEqual(x, y) {
return x === y;
}

console.log(isEqual(1, 1));
console.log(isEqual(2, '2'));

console.log(a !== b); //불일치 연산자, 서로가 다른지 확인해주는 연산자

console.log(a < b);
console.log(a > b);
console.log(a <= b); //비교연산자, 작거나 같다
console.log(a >= b); //비교연산자, 크거나 같다

//논리 연산자 (logical operator)
const a = 1 === 1;
const b = 'AB' === 'AB';
const c = true;

console.log(a);
console.log(b);
console.log(c);

console.log('&&: ', a && b && c); //&&(And연산자) false가 하나 이상이면 false가 리턴되고 전부 true일때 true가 리턴됨
console.log('||: ', a || b || c); //||(OR연산자) true가 하나 이상이면 모두 true가 리턴되고 전부 false일때 false가 리턴됨
console.log('!: ', !a); //!(NOT 부정연산자) 반대되는 값이 리턴됨

삼항 연산자

//삼항 연산자 (ternary operator)
const a = 1 < 2;

if (a) {
  console.log('참');
} else {
  console.log('거짓');
};

console.log(a ? '참' : '거짓');
//a가 true면 첫번째 '참'을 리턴해라, false면 두번째 '거짓'을 리턴해라

조건문 If Else

getRandom.js
export default function random() {
return Math.floor(Math.random() * 10);
}

main.js
//조건문 (if statement)
import random from './getRandom.js'

//console.log(random());

const a = random();

if (a === 0) {
console.log('a is 0');
} else if (a === 2) { //if 조건이 true이면 실행 아니면 다음 행
console.log('a is 2');
} else {
console.log('rest...');
}

조건문 Switch

//조건문 (switch statement)
//어떠한 변수가 특정한 값으로 딱 떨어지면 if보단 switch가 직관적일 수 있음

import random from './getRandom.js'

const a = random();

switch (a) {
case 0:
console.log('a is 0');
break; //하나의 케이스를 마무리함
case 2:
console.log('a is 2');
break;
case 4:
console.log('a is 4');
break;
default: //위 값이 없을때 마지막에 실행
console.log('rest...');
}

반복문 For

//반복문 (For statement)
//구조: for (시작조건; 종료조건; 변화조건) {}
for (let i = 0; i < 3; i += 1) {
console.log(i);
}

//반복문으로 HTML 제어하기
1. index.html에 <ul></ul> 추가
2. 연결된 .js에 아래 코드 입력

const ulEl = document.querySelector('ul');

//console.log(ulEl);

for (let i = 0; i < 10; i += 1) {
const li = document.createElement('li');
//메모리 상에 li테그를 만들어서 li변수에 넣음, 출력은 안됨
li.textContent = `list-${i + 1}`;
if ((i + 1) % 2 === 0) { //짝수찾기
li.addEventListener('click', function() {
console.log(li.textContent);
});
}
ulEl.appendChild(li);
}

변수 유효범위

// 변수가 동작할 수 있는 유효범위 (Variable Scope)
// var, let, const (var은 권장하지 않음)

//let, const 블록 범위의 유효 범위를 갖는다.
function Scope() {
//console.log(a); //a는 undefined 로 뜸 값이 지정되지 않았다.
if(true) {
//console.log(a); //a는 undefined 로 뜸 값이 지정되지 않았다.
const a = 123;
console.log(a); //블록 레벨에서 유요한 값을 갖는다.
}
//console.log(a); //유효범위를 넘음
};
Scope();

// var: 함수 범위의 유효 범위를 갖는다. 메모리 누수로 발전할 수 있어 권장하지 않음.
function Scope() {

if(true) {
var a = 123;
}
console.log(a);
};
Scope();

형 변환

//형 변환 (Type conversion)

const a = 1;
const b = '1';

console.log(a == b); //동등연산자: 형변환 후 데이터 타입을 비교해 준다. 
서로 다른 값이 같다고 나올 수 있기때문에 자바스크립트에서는 잘 사용하지 않는다.


//truthy (참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14' ...

//Falsy (거짓 같은 값) - 기억하기**
// false, '', null, undefined, 0, -0, NaN (Not a number)

if (true) {
  console.log(123);
}//실행됨


if (false) {
  console.log(123);
}//실행되지 않음

if ('false') { //truthy값으로 문자데이터는 true와 같은 값으로 아래 코드가 실행됨
  console.log(123);
}

* NaN = 1 + undefined(숫자로 판단할 수 없는 값) 
숫자 데이터긴 한데 숫자가 아닐때, NaN으로 표기

함수

// 함수
1
function 함수명(매개변수,매개변수) {
}

2
function (매개변수,매개변수) {} 함수명이 없는 익명함수

호출방법
함수명(인수, 인수);

3
function 함수명() { //매개변수가 없는 함수
  console.log(arguments) //함수 안에서 arguments값을 사용가능
  return argumnets[0] + arguments[1]
}
호출방법
console.log(함수명(인수,인수))



function sum(x, y) {
  console.log(x+y);
};

sum(1,3);


function sum2(x, y) {
  return x+y;
};

const a =sum2(1,3); //함수의 결과가 반복적으로 사용될때는 변수에 넣어쓰기
console.log(a);

console.log(sum2(1,2)); // 함수의 결과가 한번만 필요할때 바로 쓰기

화살표 함수

//화살표 함수 - 함수의 축약형

//일반함수
const couble = function (x) {
  return x * 2;
};

//화살표 함수 사용법
const doubleArrow = x => x * 2;

//화살표 함수의 정의
const doubleArrow = (x) => {
  return x * 2;
};

- 문자, 숫자, 불린, null, undefined, [배열], ({객체데이터}) 출력가능


IIFE (즉시 실행 함수)// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)
// 함수를 만들어 바로 실행시킬때 사용

// 포멧: (함수)();
(function () {
  console.log(a * 2);
})();

// 포멧 (함수()); *권장
(function () {
  console.log(a * 2);
}());


호이스팅
// 호이스팅
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7;

double();

//함수 선언을 하단에서 해도 위의 double();이 실행되는 현상
//복잡한 로직에서 많이 사용되고, 함수명을 보고 유추할수 있음
function double() {
  console.log(a * 2);
};

//double 함수가 하단부에서 만들어졌기때문에 위의 double();이 실행되지 않음
const double = function() {
  console.log(a * 2);
};
타이머 함수
//타이머 함수
//setTimeout(함수, 시간): 일정 시간 후 함수 실행
//setInterval(함수, 시간): 시간 간격마다 함수 실행
//clearTimeout(): 설정된 Timeout 함수를 종료
//clearInterval(): 설정된 Interval 함수를 종료


setTimeout(function () {
  console.log('3초후 실행');
}, 3000); //3000ms = 3초

//IIFE 로 작성
setTimeout(() => {
  console.log('3초후 실행');
}, 3000);


//set으로 시작, clear로 종료
const timer = setInterval(() => {
  console.log('3초마다 실행!');
});

const h1El = doucument.querySelector('h1'); //h1누르면 타이머해제
h1El.addEventListener('click', () => {
  clearInterval(timer);
});



콜백//콜백
//함수의 인수로 사용되는 함수

//setTimeout(함수, 시간); 
function timeout() {
  setTimeout(() => {
    console.log('3초후 실행');
  }, 3000);
};
timeout();
console.log('끝');

//위 코드의 문제점: 끝이 먼저 출력되고 3초후 실행이 실행됨.
//이때 콜백함수로 만들어주면 3초후 실행 -> 끝으로 나옴

function timeout(cb) { //cb는 callback의 약어
  setTimeout(() => {
    console.log('3초후 실행');
    cb(); //실행위치를 보장함
  }, 3000);
};
timeout(() => {
  console.log('끝');
});

JS 클래스메모리의 효율성을 위해 클래스를 사용함생성자 함수(prototype) == 클래스//생성자 함수(prototype)
- 함수명은 '파스칼 케이스'로 만들기. (e.g. User)
- 키워드: new
- prototype을 사용하면, 메모리에 딱 한번만 생성되기때문에 메모리 효율성이 좋다.prototype을




*리터럴 방식특정 문자를 이용해 데이터로 만들어 내는것을 리터럴 방식을 통해 손쉽게 해당하는 데이터를 생성한다.

this// //this ***중요***
// //알반(Normal)함수는 '호출 위치'에 따라 this 정의
// //화살표(Arrow)함수는 자신이 선언된 함수 범위에서 this 정의!

const jen = {  
  name: 'Jen',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name) 
  }
}

jen.normal() // Jen이 출력, 호출위치가 testname
jen.arrow() // undefined 출력, 호출위치는 아무 상관없고 선언된 함수 범위가 없어서 undefined가 나옴


const bob = {
  name: 'Bob',
  normal: jen.normal, //호출하고 있지 않고, bob의 normal에 할당만함
  arrow: jen.arrow
}

bob.normal() //bob이 출력됨
bob.arrow() //undefined가 출력됨


//파스칼형식 - 생성자 함수 포멧

function User(name) {
  this.name = name
}
User.prototype.normal = function() {
  console.log(this.name)
}
User.prototype.arrow = () => { 
  console.log(this.name)  
}

const jen = new User('Jen')
new라는 키워드를 통해 User라는 생성자 함수를 Jen이라는 인수와 함께
실행해서 jen이라는 인스턴스(=변수)를 만들어줌
생성자 함수를 실행면 객체데이터가 만들어지고 호출이 가능한 상태가 됨

jen.normal() //jen출력
jen.arrow()  //undefined 출력



const timer = {
  name: 'Jen',
  timeout: function() {
    setTimeout (function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() //여기서 일반함수는 undefined를 출력한다. 실행하는 위치
Jen을 출력하려면, 여기서는 화살표 함수를 써야한다.


const timer = {
  name: 'Jen',
  timeout: function() {
    setTimeout (() => { //화살표함수가 만들어진 범위
      console.log(this.name) //여기서 this = timer임. 
    }, 2000)
  }
}


ES6 Classes

// - 키워드: class
// class 키워드를 사용해 새로운 생성자(prototype)을 만든다.

function User(first, last){
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

-->위 코드를 직관적이고 유연한 문법으로 정리하는 방법
   class 사용, constructor 내부함수 사용해야함
class User {
  constructor(first, last) {
    this.firsName = first
    this.lastName = last
  }
  getFullName() { // prototype을 사용하는것과 같은 의미
    return `${this.firstName} ${this.lastName}`
  }
}

const jen = new User('Jen', 'Lee')
const bob = new User('Bob', 'Park')
const leo = new User('Leo', 'Smith')

console.log(jen)
console.log(bob.getFullName())
console.log(leo.getFullName())


상속(확장)

// //상속(확장)
// - 키워드: extend
// - 키워드: super

class Vehicle  {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

//확장 혹은 상속: 미리 만들어져있는 기능에 추가하는 기능

class Bicycle extends Vehicle {
  constructor(name, wheel) {
    super(name, wheel)  //여기서 vehicle이 실행됨
  }
}
const myBicyle = new Bicycle('삼천리, 2')
const sonsBycycle= = ('세발, 3')
console.log(myBicylce)
console.log(consBicylce)


class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car('벤츠', 4, true)
const sosCar = new Car('현대',4, false)

console.log(myCar)
console.log(sonsCar)

JS 데이터

// 문자
// String: "", '', ``
// 구글검색: string mdn

//indexOf()

// Number

// Boolean: true, false

// undefined

// null

// Array: []

// Object: {}

// 숫자와 수학

// 배열

JS 데이터 실습

구글검색: localstorage mdn

링크: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

storage - google 개발자 도구 화면

Julyee Blog

2022년 7월 13일 수요일

[패스트캠퍼스] react 강의 학습일지 - 5주차, JS

JavaScript Essentials_JS

개요(ECMAScript) 및 프로젝트 초기화

데이터 타입 확인

console.log(typeof 'Hello World');
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
console.log(getType(123));
console.log(getType(false));
console.log(getType(null));
console.log(getType({}));
console.log(getType([]));

OR

산술, 할당 연산자

//산술 연산자 (arithmetic operator)
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);

//할당 연산자 (assignment operator)
let a = 2;
// a = a + 1;
a += 1;
a -= 1;
a *= 1;
a /= 1;
a %= 1;
console.log(a);

비교, 논리 연산자

삼항 연산자

조건문 If Else

조건문 Switch

반복문 For

변수 유효범위

형 변환

함수

IIFE (즉시 실행 함수)

// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)
// 함수를 만들어 바로 실행시킬때 사용

// 포멧: (함수)();
(function () {
console.log(a * 2);
})();

// 포멧 (함수()); 권장
(function () {
console.log(a 2);
}());

콜백

JS 클래스

메모리의 효율성을 위해 클래스를 사용함

생성자 함수(prototype) == 클래스

*리터럴 방식

this

상속(확장)

JS 데이터

JS 데이터 실습

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의

댓글 없음:

댓글 쓰기

2022년 7월 13일 수요일

[패스트캠퍼스] react 강의 학습일지 - 5주차, JS

JavaScript Essentials_JS

개요(ECMAScript) 및 프로젝트 초기화

데이터 타입 확인

console.log(typeof 'Hello World');console.log(typeof 123);console.log(typeof true);console.log(typeof undefined);console.log(typeof null);console.log(typeof {});console.log(typeof []);

function getType(data) { return Object.prototype.toString.call(data).slice(8, -1);}console.log(getType(123));console.log(getType(false));console.log(getType(null));console.log(getType({}));console.log(getType([]));

OR

산술, 할당 연산자

//산술 연산자 (arithmetic operator)console.log(1 + 2);console.log(5 - 7);console.log(3 * 4);console.log(10 / 2);console.log(7 % 5);//할당 연산자 (assignment operator)let a = 2;// a = a + 1;a += 1;a -= 1;a *= 1;a /= 1;a %= 1;console.log(a);

비교, 논리 연산자

삼항 연산자

조건문 If Else

조건문 Switch

반복문 For

변수 유효범위

형 변환

함수

IIFE (즉시 실행 함수)

// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)// 함수를 만들어 바로 실행시킬때 사용// 포멧: (함수)();(function () { console.log(a * 2);})();// 포멧 (함수()); *권장(function () { console.log(a * 2);}());

콜백

JS 클래스

메모리의 효율성을 위해 클래스를 사용함

생성자 함수(prototype) == 클래스

*리터럴 방식

this

상속(확장)

JS 데이터

JS 데이터 실습

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의

댓글 없음:

댓글 쓰기

console.log(typeof 'Hello World');
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
console.log(getType(123));
console.log(getType(false));
console.log(getType(null));
console.log(getType({}));
console.log(getType([]));

//산술 연산자 (arithmetic operator)
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);

//할당 연산자 (assignment operator)
let a = 2;
// a = a + 1;
a += 1;
a -= 1;
a *= 1;
a /= 1;
a %= 1;
console.log(a);

// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)
// 함수를 만들어 바로 실행시킬때 사용

// 포멧: (함수)();
(function () {
console.log(a * 2);
})();

// 포멧 (함수()); 권장
(function () {
console.log(a 2);
}());