js 선행이다!!!
스벅 클로닝 하기 전에 기본적으로 Js를 훑고 가는 것 같은 느낌적인 느낌?
아 근데 css 증말 ㅋㅋㅋㅋㅋㅋ
뭔가 애매쓰
쌤이 잘 가르쳐주시네
생각보다 강의가 고퀄이다..
국비지원이라서 엄청 졸리고 막 2017년 이 때 했었던 강의 다시 꺼내고 또 꺼내고 우리고 또 우리는 사골국물같은

마치 학부때 ocu같은 느낌적인 느낌이 아닐까 싶었는데
강의 자료도 깔끔하고 쌤 강의력도 괜찮은듯!
그리고 중요한 부분은 계속 반복해주니까
나도 모르게 익숙해지게 만든다고 해야하나
사실 코딩이 익숙해지는게 진짜 중요한 것 같은데
강요가 아니라 자연스러운 반복으로 귀에 잘 들어오게 해주시는 타입인거 같다
꼼꼼하게 설명도 잘 해주시고

사실 한번도 제대로 된 유료인강 들어본 적은 없지만
유튜브에서 얼레벌레 틀어놓고 멍때리는 것 보다 훨씬 나은 것 같다
이 정도 퀄의 강의면 솔직히 감사감사하고 들어야 겠다는 생각이 드는 밤이군..

거의 8시간 째 앉아 있는거 같다
이정도만 하고 오늘은 그만
머리아파 둥둥~!
내일봐용!!

React 3주차[JS 선행]

보간법

let myName = "DEB";
let email = 'geckomarley@gmail.com';
let hello = Hello ${myName}?!;


보간법을 사용할 때는 백틱 1옆에 KRW(₩)을 찍어줘야함

JavaScript는 null과 undefined의 개념을 따로 분리해서 쓴다

null은 값 자체가 "의도적으로" 없다 ::
undefined는 말 그대로 정의가 안 되어 있는 것.

OBJECT(객체 데이터)

여러 데이터를 key : value 형태로 저장

let user = {
name = 'AMAZING',
age = 99,
isValid = true
};

.으로 value에 접근함. (C의 구조체 개념인듯?)

ARRAY(배열 데이터) :: 대괄호로 묶어서 사용함

let fruits = ['apple','banana','cherry'];

변수 let 과 const의 사용
재할당을 안 필요할 땐 const 위주로 쓰고
재할당이 필요할 땐 let으로 변수를 수정해서

함수의 선언과 표현

  • 선언 : 이름이 있는 함수 function hello(){};
  • 표현 : 이름이 없는 함수 let world = function(){};

메소드(Method) : 객체데이터 내부에 있는 함수데이터

DOM API

Script Defer 옵션 =>> html소스를 읽은 후 js파일을 실행

const boxEL = document.queryselector(.'box'); 
	//html 요소 1개 검색/찾기
    
  boxEL.addEventLister();
 	html 요소에 적용할 수 있는 메소드
  boxEL.addEventlister(1,2);
 	인수(아규먼트) 추가 가능
  boxEL.addEventListner('click',2);
 	이벤트(event, 상황)
  boxEL.addEventListner('click',function(){console.log('Click!');
 });
 	핸들러(Handler, 실행할 함수)
const boxEl = document.queryselector(.'box');

//요소의 클래스 정보 객체를 활용
boxEl.classList.add('active');
let isContains = boxEl.classlist.contains('active')
console.log(isContains); // true

boxEl.classlist.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false
//html box요소 모두 찾기
const boxEls = document.queryselectorAll(.'box);

//찾은 요소들을 반복해서 함수를 실행
//익명 함수를 인수로 추가!
boxEls.forEach(function () {});

//첫번째 매개변수 : 반복문 안의 box요소
//두번째 매개변수 : 반복문 안의 인덱스값
boxEls.forEach(function (boxEl, index) {});

boxEls.forEach(function (boxEl, index) {
boxEls.classlist.add(`order-${index+1}`);
console.log(index,boxEl);
});

Getter & Setter
Getter :: 값을 얻는 용도
Setter :: 값을 지정하는 용도

profile
Keep on Keepin' on

0개의 댓글