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

The quick brown fox 이문장을 카멜표기법으로 작성하시오

-theQuickBrownFox

 

let fruit = [’apple’, ‘banana’, ‘cherry’];

위데이터를 활용해 banana를 출력하시오

console.log(fruit[1]);

 

bolean에서 거짓은 ?

false

 

let obj = {abc:123);

console.log(obj.xyz);

위코드를 통해 콘솔 출력될 값(데이터)는?

-undefined

 

값(데이터) 을 재할당할 수 없는 변수 선언 키워드는?

const

 

함수에서 값(데이터)을 반환하기 위해 사용하는 키워드는?

return

 

sum(2,4);

위 함수 호출에서 2,4를 무엇이라 하는가?

인수

 

function sum(a,b){

return a+b;

}

위 함수 선언의 a,b와 같이 함수 호출에서 전달받은 인수를 함수내부로 전달 하기위한 변수를 무엇이라하는가?

-매개변수(parameters)

 

이름이없는 함수를 무엇이라하는가?

-익명함수

 

hello이름의 함수 표현을 작성하고 호출하시오

const hello = fuction (){}

hello();

const user = {

getName:function(){}

}

위코드의 getName과 같이 함수가 할당된 객체 데이터(중괄호가 열고닫힘)의 속성(property)을 무엇이라하는가?

메소드(method) 메소드를 호출= 함수를 호출

메소드는 함수에 속해있음

 

조건이 참(true)인 조건문을 작성하시오!

if(true){}

<div class=”box”>Box!!</div>

 

위 HTML 요소의 내용(content)을 콘솔에 출력하시오

cont boxEl = document.querySelector(’.box’);

console.log(boxEl.textContent);

 

값을 재할당할 목적의 변수 선언 키워드는?

let

 

cont boxEl = document.querySelector(’.box’);

위 코드의 boxEl 요소에클릭이벤트를 추가해 클릭시 ‘hello’를 콘솔에 출력하시오

boxEl.addEventListener(’click’,function(){

console.log(’hello’);

});

 

<div>1</div>

<div>2</div>

위 2개의 div요소에 js로 class=”hello”를 추가하시오

const divEls = document.querySelectorAll(”div”);

divEls.forEach(function(divEl){

divEl.classList.add(’hello);

});

 

“HEROPY”.split(’’).reverse().join(’’);

위와 같이 메소드를 이어 작성하는 방법을 무엇이라 하는가?

-메소드 체이닝

• og:type: 페이지의 유형(E.g, website, video.movie)
• og:site_name: 속한 사이트의 이름
• og:title: 페이지의 이름(제목)
• og:description: 페이지의 간단한 설명
• og:image: 페이지의 대표 이미지 주소(URL)
• og:url: 페이지 주소(URL)

seo(검색 엔진 최적화, Search Engine Optimization)란,

구글이나 네이버 등에 자신의 웹사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 말합니다

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법

요소__일부분 언더바 기호로 요소의 일부분을 표시

ex) container__name container의일부분인 name

요소—상태 하이픈기호로 요소의 상태를 표시

ex)class=”btn btn—primary” 버튼은 버튼인데 일반버튼

class=”btn btn—primary”완료버튼

class=”btn btn—primary”에러버튼

 

01개요

    let fruit = [ 'apple', 'banana', 'cherry']
    console.log(fruit[0]);//apple 0부터 시작
    console.log(fruit[1]);//banana
    console.log(fruit[2]);//cherry

    console.log(new Date('2021-01-30').getDay()); //6 토요일
    console.log(new Date('2021-01-31').getDay()); //0 일요일
    console.log(new Date('2021-02-01').getDay()); //1 월요일

 

02데이터의 종류

//String(문자데이터)
    //따옴표를 사용합니다
    let myName= "cheongwoo";
    let email = 'thesecon@gmail.com';
    let hello = `hello ${myName}?!`
    // `` 백틱기호사이에 ${} 보간법(추가적인 데이터)

    console.log(myName);// cheongwoo
    console.log(email);//thesecon@gmail.com
    console.log(hello);// hello cheongwoo?!

    //Number(숫자데이터)
    //정수 및 부동소수점 숫자를 나타냅니다
    let number = 123;
    // 따옴표로 묶이면 문자데이터
    let opacity = 1.57;
    console.log(number);//123
    console.log(opacity);//1.57

    //Boolean(불린데이터)
    //true, false 두가지 값밖에 없는 논리 데이터
    let checked = true;
    let isShow = false;
    console.log(checked);//true
    console.log(isShow); //false

    // Undefined
    //값이 할당되지 않은 상태를 나타냅니다.
    let undef;
    let obj = {abc: 123};
            // 속성안에 숫자 123을 집어넣음

    console.log(undef); //undefined 
    console.log(obj.abc);//123
    // obj에 들어가서  abc 하나의 속성에 들어가서 값이 무엇입니까

    console.log(obj.xyz); //undefined 값이 없다

    //Null
    //어떤 값이 의도적으로 비어있음을 의미합니다
    let empty = null;
    //일부러 집어넣음(명시적)
    console.log(empty); //null

    //Object(객체 데이터)
    //여러 데이터를 Key:Value 형태로 저장합니다. { }
    let user = {
      //Key : Value,
      name:'HEROPY',
      age: 85,
      isValid:true
    };
    console.log(user.name); //HEROPY
    console.log(user.age); //85
    console.log(user.isValid); //true

    //Array (배열데이터)
    //여러 데이터를 순차적으로 저장합니다 대괄호사용
    let fruit = [ 'apple', 'banana', 'cherry']
    console.log(fruit[0]);//apple 
    console.log(fruit[1]);//banana
    console.log(fruit[2]);//cherry

 

03변수 예약어

 // let
    //재사용이 가능
    //변수 선언!
    //값(데이터)의 재할당 가능!
    let a = 2;
    let b = 5;
    console.log(a+b); //7
    console.log(a-b);//-3
    console.log(a*b);//10
    console.log(a/b);//0.4


    let c = 12;
    console.log(c); //12
    c= 999;
    console.log(c); //999
    
    //const
    //값(데이터의 재할당 불가)
    const d = 12;
    console.log(d); //12
    
    d=999;
    console.log(d); //TypeError: ~~ 

    //const를 주로 사용하고 재할당이 필요할겨우 let을 사용

    //예약어
    //특별한의미를 가지고있어 변수나 함수이름등으로 사용할수없는단어
    // Reserved Word

    let this = 'hello'; //syntaxError
    let if = 123;//syntaxError
    let break = true; //syntaxError 문법에러

 

04함수

//함수 선언
    function hellofunc(){
      //실행코드
      console.log(1234);
    }

    //함수호출
    hellofunc(); //1234

    function returnFunc(){
      return 123; //내보내지면 
    }
    let c= returnFunc(); 
    //추가적으로 할당해 사용이가능
    //호출은 실행이된다는것
    console.log(c); //123

    //함수 선언
    function sum(a,b){//a와 b는 매개변수(parameters)
      return a+b;
    }
    //재사용
    let a = sum(1,2); //1과2는 인수
    let b = sum(7,12);
    let d = sum(2,4);
    console.log(a,b,d); //3,19,6

    //기명(이름이 있는 )함수
    //함수선언
    function hello(){
      console.log('hello!');
    }

    //익명(이름이없는)함수
    //함수표현
    //데이터로 표현
    let world = function(){
      console.log('world');
    }

    //함수 호출!
    hello(); //hello!
    world(); //world

    //객체 데이터
    const heropy ={
      name:'HEROPY',
      age:85,
      //메소드(method)속성부분에 함수를 할당
      getName: function(){
        return this.name; //반환
        //this는 name을 반환한다
        //heropy안에있는 데이터 name을 가져온다
      }
    };

    const hisName = heropy.getName(); //호출(실행)
    console.log(hisName); //HEROPY
    //혹은
    console.log(heropy.getName); //HEROPY

 

05조건문

 let isShow = true;
    let checked = false;

    if(isShow){
      console.log('show!'); //show!
    } //참이기때문에 show가 출력
    
    if(checked){
      console.log('checked!');
    }//조건이 false이기때문에 출력x

    let thisshow = true;
    // let thisshow = false;
    if(thisshow){
      console.log('show2!'); //true일경우 출력
    } else{
      console.log('hide!'); //false일경우
    }

 

 

06DOMAPI

<body>
  <div class="box">Box!!</div>
</body>

let boxEl = document.querySelector('.box');
    //특정한 클래스(.box)를 찾아서 boxEl에 담음
    console.log(boxEl);//현재 null로 출력

 

06-2

//HTML 요소 (Element) 1개 검색/찾기
    const boxEl = document.querySelector('.box');

    //HTML 요소에 적용할 수있는 메소드!
    boxEl.addEventListener();

    //인수(Arguments)를 추가 가능!
    boxEl.addEventListener(1,2);

    //1- 이벤트(event, 상황)
    boxEl.addEventListener('click', 2);

    //2 - 핸들러(handler, 실행할 함수)
    boxEl.addEventListener('click',function(){
      console.log('click!');
    });

 

06-3

//HTML요소(Element) 검색/찾기 찾으면boxEl 에 넣기
    const boxEl = document.querySelector('.box');

    //요소의 클래스 정보 객체 활용
    boxEl.classList.add('active'); 
    //add라는 매소드 사용가능 
    //active라는 문자데이터 클래스를 추가
    // boxEl 클래스요소(classList)에 add(추가) active를 추가
    let isContains = boxEl.classList.contains('active');
    //boxEl이라는 클래스가 포함(contains)되어있니 active가 있는지 없는지 체크 
    console.log(isContains); //true
    
    boxEl.classList.remove('active');
    //boxEl이라는 클래스(classList)에 active라는 문자데이터를 remove(삭제)

    isContains = boxEl.classList.contains('active');
    //boxEl이라는 클래스(classList)에 active가 포함(contains)이 되어있는지 체크
    console.log(isContains); //false

 

06-4

 let boxEl = document.querySelector('.box');

    boxEl.addEventListener('click',function(){
      console.log('click');
      boxEl.classList.add('active');
      console.log(
        boxEl.classList.contains('active')
      );
      boxEl.classList.remove('active');
      console.log(
        boxEl.classList.contains('active')
      );
    });

 

07DOM

<body>
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
  <div class="box">Box4</div>

  <script>
    //HTML 요소 (Element) 1개 검색/찾기
     const boxEls = document.querySelectorAll('.box');
     //querySelectorAll All은 모든 클래스요소를 찾아서 반환하겠다(boxEls에 넣어서)

     console.log(boxEls);

    //찾은 요소들 반복해서 함수 실행!
    //forEach로 반복 
    //[ 익명 ]  함수를 인수로 추가! 배열데이터, 유사배열
    boxEls.forEach(function(){});

    //첫 번째 매개변수(boxEl) : 반복 중인 요소
    //두 번째 매개변수(index) : 반복 중인 번호
    boxEls.forEach(function(boxEl,index){});

    //출력
    boxEls.forEach(function(boxEl,index){
      boxEl.classList.add(`order-${index+1}`);
      // boxEl에 클래스리스트를 추가한다라는 뜻
      console.log(index,boxEl);
    });




  </script>
</body>

 

08메소드 체이닝

 const a = 'Hello~';
    //split : 문자를 인수 기준으로 쪼개서 배열로 반환

    // reverse : 배열을 뒤집기
    // join : 배열을 인수 기준으로 문자로 병합해 반환
    const b = a.split('').reverse().join(''); //메소드 체이닝
    console.log(a); //Hello~

    console.log(b); //~olleH

메소드체이닝