프론트엔드 8주 완성 with React : react 강의 5주차

getType.js

export default function getType(data){
  return Object.prototype.toString.call(data).slice(8,-1);
    //slice는 대괄호가 들어가게하는것이고 8은 앞에 대괄호를,-1은 뒤에 대괄호를 없앤다

}
/*default(기본적인) export(내보내기)해서 getType라는 함수를 밖으로 내보낼수있게 만듦 */

 

 

02데이터타입확인하기

import getType from './getType'

console.log(typeof 'hello world'); //string
console.log(typeof 123); //number
console.log(typeof true); //boolean
console.log(typeof undefined); //undefined 의도하지않은 빈값
console.log(typeof null); //object 의도한 빈값

//typeof 타입을 알려주는


console.log(getType(123)); // Number
console.log(getType(false)); // boolean
console.log(getType(null)); //null
console.log(getType({})); //object
console.log(getType([])); //array

 

03산술할당연산자

//산술 연산자 사칙연산

console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);//나머지

//할당 연산자
// const a = 2
let a = 2
// a= a + 1 
a += 1
console.log(a);

 

04비교논리연산자

//비교 연산자

// const a = 1
// const b = 1
//console.log(a === b);///true


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

console.log(isEqual(1, 1));//true
console.log(isEqual(2, '2')); //숫자데이터, 문자데이터라 false

const a = 1
const b = 1
console.log(a !== b); //불일치하는가? false
console.log(a < b); //false
console.log(a > b); //false
console.log(a >= b); //true
console.log(a <= b); //true
// 이퀄기호를 뒤로 갈수있도록 할것

const c = 1 === 1
const d = 'AB' === 'AB'
const e = false

console.log(c);
console.log(d);
console.log(e);

console.log('&& : ' ,c && d && e);
//&& 그리고(and) c d e가 '모두' true인가?
// 하나라도 false라면 false
console.log('|| :', c || d);
// || 또는(or) 하나라도 true라면 true
console.log('! : ', !e);
//! 부정연산자(not) true면 false를 false라면 true를 반환

 

05삼향연산자

//삼향 연산자

const a = 1 < 2//참
if(a){
  console.log('참');
}else{
  console.log('거짓');
}

console.log(a ? '참' : '거짓');
//a가 true면 앞부분을 실행하고 false면 뒷부분실행

 

06조건문if Else

//조건문 if else

import random from './getRandom'

console.log(random());

const a = random()
if (a === 0) {
  console.log('a is 0');
} else if (a === 2) {
  console.log('a is 2');
} else if (a === 4) {
  console.log('a is 4');
}else {
  console.log('rest...');
}

 

07조건문switch

//조건문 switch

import random from './getRandom'

console.log(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..');
    // if문같은경우에는 0 , 2, 4외에 나머지인경우에 rest가 출력되도록 else문을썻는데
    //switch문에서는 default를 작성하는데 특정한 값이 없고 
    //나머지인 경우에만 입력
}

/*break를 꼭 넣어줘야한다 그렇지않다면 계속 반복이됨
if문의 경우 if경우를 다 연산하고 난뒤 나머지까지 
*/
/*
if문보다 switch문이 더 짧아서 보기에는 좋아보일수 있으나
수직으로 더 길어진다는 단점이있다
하나의 특정한 데이터가 무엇인가로 딱 떨어지는 조건문을 만들때는
switch문이 더좋다

*/

 

08for

//반복문 for
//for (시작조건; 종료조건; 변화조건){}
//종료조건에 맞을경우 종료

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


for (let i = 0; i < 10; i+=1) {
  const li = document.createElement('li')
  //메모리상에 li를 태그를 만든다
  li.textContent = `list-${i + 1}`
  //li태그에 문자를 집어넣을것이다 
  if((i + 1)% 2 ===0){ 
    // if(i % 2 ===0){ 
    //홀수일경우에만 클릭이될수있게 
    //i가 +1이 되어 홀수가 된거임
    li.addEventListener('click',function(){
      console.log(li.textContent);
    })  
  }
  ulEl.appendChild(li)
  // ul태그에 li를 자식요소로 삽입하겟다
}

 

09변수 유효범위

// 변수 유효범위
//var let const
/*const, let은 블록레벨(변수가 선언되어져 있는 중괄호 범위)의 유효범위를 가진다*/
/*var는 함수레벨 의 유효범위*/
function scope(){
  if(true){
    // console.log(a) undefined 
    /*유효범위안에 존재는 하지만 
    할당되는 코드보다 먼저 출력이되서 */
    const a = 123 //여기안에서만 구동이되는 유효범위
    console.log(a)
  }
  // console.log(a) 범위안에 a가 없어 실행x
}
scope()

 

10 형변환

//형변환 (자료형)
//Truthy(참 같은 값)
//true, {}, [], 1, 2, 'false', -12, '3.14'...

// Falsy(거짓같은 값)
//false, '', null, undefined, 0, -0, NaN


const a = 1
const b = '1'

console.log(a === b); //일치연산자 false
console.log(a == b); //동등연산자 true 쓰지않아야함

if(true){
  console.log(123);
}//123
// false일경우 출력이안됨
// 'false'일 경우 출력

 

01함수복습

//함수 복습

function sum(x,y){
  // console.log(x + y);  
  return x + y //내보내기
}
//return 은 종료키워드이기도 하기때문에 마지막에 작성
//return은 조건을 만들어서 특정한 내용을 실행할 것인지의여부

function sm(c,d){
  if(c < 2){
    return
  }
  return c + d
}
console.log('sm :',sm(2,3));
console.log('sm :',sm(7,3));

// sum(1,3)
// sum(4,12)
const a = sum(1,3)
const b = sum(4,12)


console.log(a);
console.log(sum(1,3)); 
console.log(b);
console.log(sum(4,12)); 
console.log(a+b);
console.log(sum(1,3) + sum(4,12));
/* 변수가 단일로 사용 될경우에는 값을 직접넣는것이좋고
  여러번 사용이 될 경우에는 변수로 만들어 사용하는것이 좋다
*/ 

/*const sum = function(x, y){
  return x + y
}함수표현 익명함수*/

/*const sum = function sum(x, y){
  return x + y
} 기명함수*/

function su(){
  console.log(arguments);
  return arguments[0] + arguments[1]
}
/*함수에서는 따로함수를 지정하지않고 arguments를
  지정할 수 있는데 배열형태로 들어가고 6은 0번째 배열 4는 1번째 배열
  Arguments(2) [6, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
*/

console.log('su :',su(6,4));

 

02화살표함수

//살표 함수
//() => {} vs function() {}

const double = function(x){
  return x * 2
 }

 console.log('double', double(7));
 
//  const doubleArrow = (x) => {
//    return x * 2
//   }

// const doubleArrow = x => x * 2 
//매개변수가하나라면 소괄호도 생략가능
// const doubleArrow = x => {return x * 2}
//return을 사용하게되면 일반적으로 사용하는 함수와동일 

// const doubleArrow = (x,y) => x * 2

  console.log('doubleArrow', doubleArrow(7));

  /*화살표함수는 축약형으로 만들수있는데
    const doubleArrow = (x) => {
    console.log(123)
   return x * 2
  }
  위와같이 return코드 위쪽에 다른 코드가 있으면 사용하지못하지만
  단순한 실행문이라면 중괄호와 return을 생략가능
  
  const doubleArrow = x =>{
    name: 'HEROPY'
  }이와같은 객체데이터형식은 중괄호를 사용하기 때문에
  축약형인 화살표함수에서는 사용할수없다
  const doubleArrow = x =>({
    name: 'HEROPY'
  })
  사용하려면 소괄호 사용해야함

  */

 

03IIFE

//즉시 실행 함수
//IIFE

const a = 7
function double(){
  console.log(a * 2)
}
double();
//즉시실행함수를 사용할때는 위쪽에서 반드시 ;(세미콜론)을
// 사용해야한다

(function(){console.log(a*2)})(); //바로실행가능
(function(){console.log(a*2)}()); //바로실행가능
/*(x)() 
  (x()) x분에 함수를 작성 2번째방법을 권장
*/

 

04호이스팅

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

const a = 7
double();

const double = function(){
  console.log(a * 2);
}//함수선언부가 가장 최상단으로 올라가서 데이터화

 

05타이머함수

//타이머 하무
/*
setTimeout(함수, 시간) : 일정 시간 후 함수 실행
setInterval(함수, 시간) : 시간 간격마다 함수 실행
clearTimeout() :  설정된 Timeout 함수를 종료
clearInterval() : 설정된 Interval 함수를 종료
*/

// const timer = setTimeout(function(){
//   console.log('HEROPY');
// }, 3000); //3초뒤 HEROPY출력

// const h1El = document.querySelector('h1');
// h1El.addEventListener('click', function(){
//   clearTimeout(timer)
// })//h1태그를 클릭하면 종료할수있다

const timer = setInterval(function(){
  console.log('HEROPY');
}, 3000); //3초뒤 계속 HEROPY출력

const h1El = document.querySelector('h1');
h1El.addEventListener('click', function(){
  clearInterval(timer)
})

 

06콜백함수

//콜백
//함수의 인수로 사용되는 함수

//setTimeout(함수, 시간)

function timeout(callback){//매개변수 callback을만들고
  setTimeout(()=>{
    console.log('heropy');
    callback() /*특별한 실행위치를 보장해주는 방법으로 콜백함수를 활용 */
  },3000)
}
timeout(()=>{
  console.log('Done');
}); //콜백함수

 

07생성자함수

const heropy = {//객체데이터
  firstName: 'heropy', //property 속성
  lastName : 'park',//property 속성
  geyFullName: function(){ //메소드
    return `${this.firstName} ${this.lastName}`
  }/*this : 현재코드 기준으로해서는 
  이 this가 소속되어있는 geyFullName의 함수가 객체데이터 heropy를 지칭한다 
  현재 코드에서 this = heropy 와 동일 하지만 heropy는 언제든지 바뀔수있는 변수이기때문에
  this를 사용해서 객체데이터를 지칭 */
}//속성과 메소드를 통틀어 맴버라고함
console.log(heropy.geyFullName()); //heropy park

const amy = {
  firstName: 'Amy', 
  lastName : 'Clarke',
  geyFullName: function(){ 
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(amy.geyFullName()); 

const neo = {
  firstName: 'Neo', 
  lastName : 'Smith',
  geyFullName: function(){
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(neo.geyFullName());

function User(first, last){
  this.firstName = first
  this.lastName = last
}
//파스칼케이스(함수의 맨앞의 글자는 대문자로)
//파스칼케이스를 사용한 함수는 new라는 키워드처럼 생성자함수

user.prototype.getFullName = function(){
  return `${this.firstName} ${this.lastName}`
}//fullname이 출력
/*prototype(자바스크립트에서는 프로토타입기반의 프로그래밍언어라고도함)
  firstName과 lastName은 user라는 생성자함수가 실행될때마다
  다른 내용이 들어갈수가 있기때문에 통일해서 메모리를 관리하기에는 어렵지만
   getFullName의 경우 로직이 완전히 같기 때문에 내용을 통일화해서
   안의 내용을 좀 더 효율적으로 관리할수있게함
   user라는 함수의 prototype라는 속성부분에 getFullName을 할당해주면 hero, amy2, neo등 여러개를 
  만들어도 위의 함수는 한번만 실행이된다.
  
   
*/

const hero =new user('Hero', 'lee')
/*hero 라는 변수에 user라는 함수(첫번째인수, 두번째인수) 인수를 전달해서 실행 
  this.firstName = first
  this.lastName = last 가있는 함수 
*/
const amy2 = new user('Amy','Clarke')
const neo2 = new user('Neo','Smith')
/*user부분의 this로 만들어둔 first와 last만 속성으로 존재하고 
  new user라는 생성자함수를 통해서는 hero라는 객체부분에 그내용을 지칭하는 
  new라는 키워드를 통해서 생성자함수를 실행한 결과를 반환해서 할당된 ->클래스라함
  그변수를 hero , amy2, neo2 -<인스턴스
*/ 

console.log(hero.getFullName); //getFullName을 참조
console.log(amy2.getFullName);
console.log(neo2.getFullName);
//user {firstName: 'Hero', lastName: 'lee'}
/*new라는 키워드를 통해서 user라는 함수를 실행하고 
  이때 user는 생성자함수라고 하고 이때 하나의 객체데이터가 생성이된다
  const hero = {} hero라는 할당연산자에 {}를 사용해서 복잡하게 처리해야하는것인데
  이렇게 특정한 기호만을 가지고 어떤 데이터를 만드는 방식을 리터럴 방식이라고한다.
  "" 나 [] 따옴표나 대괄호등의 기호
*/
/*메모리의 효율적인 관리를 위해서 자바스크립트에 클래스를 만들고

*/

 

08this

//this
//일반(normal) 함수는 호출 위치에서 따라 this 정의
//화살표 함수는 자신의 선언된  함수 범위에서 this 정의

function User(name){
  this.name = name
}

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

const heropy = new User('heropy')

// const heropy = {
//   name :'heropy',
//   normal: function(){
//     console.log(this.name);
//   },
//   arrow:()=>{
//     console.log(this.name);
//   }
// }
/*일반함수는 heropy 객체데이터 안에서 normal을 실행하기때문에
여기서 this는 heropy가된다.

화살표함수는 선언된 함수범위이기 때문에
arrow안에 name이 없기때문에 undefined

*/

heropy.normal() //함수 호출
heropy.arrow()

const amy = {
  name: 'amy',
  normal:heropy.normal,
  arrow: heropy.arrow
}
amy.normal() //amy
amy.arrow() //undefined

 

09ES6class

// function User(first, last){
//   this.firstName = first
//   this.lastName = last
// }

// user.prototype.getFullName = function(){
//   return `${this.firstName} ${this.lastName}`
// }

class User {
  constructor(first, last){

  }//constructor: function() 과동일
  getFullName(){
    return `${this.firstName} ${this.lastName}`
  }
}

/*constructor라는 내부함수*/

const hero =new user('Hero', 'lee')
const amy2 = new user('Amy','Clarke')
const neo2 = new user('Neo','Smith')

console.log(heropy.geyFullName()); 
console.log(amy.geyFullName()); 
console.log(neo.geyFullName());

 

10상속확장

/*class를 사용한다는것은
미리 만들어둔 어떤 정보에 추가적으로 살을 붙여가면서 새로운기능(ex)Bicycle)을
확장이라는 개념으로 관리를 해줄수있다.
*/
class Vehicle{
  constructor(name,wheel){
    this.name = name
    this.wheel = wheel 
  }
}
const myVehicle = new Vehicle('운송수단',2)
/*myVehicle이라는 변수를 만들어서 new라는 키워드를만들고 안에 Vegicle이라는 생성자함수를 만들어서
클래스를 실행한다. 클래스안에 두가지 인수를 넣어서 채워주는데
첫번째로 인수로 name자리에 '운송수단' 이들어가고 wheel부분에 2가들어감

*/
console.log(myVehicle);

class Bicycle extends Vehicle{
  constructor(name,wheel){
   super(name, wheel)
  } 
}
/*extends(확장) - 상속
Bicycle이라는 클래스는 Vehicle을 상속한다
Vehicle은 운송수단으로 Bicycle이라는 새로운 클래스로 상속을 해서
기본적인 내용을 사용하겠다. 그로인해 super()라는 함수를 사용하는데
super라는 함수는 extends 뒤쪽에있는 Vehicle(확장된클래스)
-> super라는 자리에서 Vehicle이 실행이된다는말
super의 매개변수는 Vehicle의 name과 wheel로 들어간다
다른 어딘가에서 Bicycle이 실행이 될때 name과 wheel이 실행이되는 부분에서
new Vehicle('운송수단',2) 이와같이 인수를 넣어주면 name과 wheel로 받아서
다시 super로 넘겨주게되는것
*/

const myBicycle = new Bicycle('삼천리',2)
const daugtersBicycle = new Bicycle('세발',3)
console.log(myBicycle);
console.log(daugtersBicycle);
class Car extends Vehicle{
  constructor(name,wheel,license){
    super(name, wheel)
    this.name = name
    this.license = license
  }
}

const myCar = new Car('벤츠',4,true)
const daughtersCar = new Car('포르쉐',4,false)
console.log(myCar);
console.log(daughtersCar);
/*license와같이 Vehicle을 상속받고 추가적인 살을 붙이는 것으로
license를 붙인것
*/

 

기본 자료형

• 수(Number)
• 문자열(String): 0개 이상의 유니코드 문자들의 연속. 문자열은 큰 따옴표(")로 구분하며 역슬래시 이스케이프 문법을 지원한다.
• 참/거짓(Boolean): true 또는 false 값
• 배열(Array): 0 이상의 임의의 종류의 값으로 이루어진 순서가 있는 리스트. 대괄호로 나타내며 요소는 쉼표로 구분한다.
• 객체(Object): 순서가 없는 이름/값 쌍의 집합으로, 이름(키)이 문자열이다.
• [null]: 빈 값으로, null을 사용한다.

 

Window.localStorage

읽기 전용 속성을 사용하면 Document출처의 Storage객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage  데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)