{22년}[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 3주차 학습일지

SANGHYUN KIM·2022년 5월 21일

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

{22년}[패스트캠퍼스] React 강의

목록 보기

3/8

3주차 강의 복습 및 정리

이번 주차는 스타벅스 사이트를 클론 코딩 전에 JavaScript에 관한 것을 간단히 배우고 바로 클론코딩으로 넘어갔다.

1. 표기법

HTML&CSS
- dash-case(kebab-case): the-quick-brown-fox
- snake_case: the_quick_brown_fox
JavaScript
- camelCase: theQuickBrwonFox
- PascalCase: TheQuickBrownFox

2. 데이터 종류

String(문자열): 큰 따옴표("") or 작은 따옴표('') or 백틱(``) 안에 할당되어 있는 데이터
Number(숫자 데이터): 정수, 소주점 등등
Boolean(불린 데이터): true or false
Undefined(값이 할당X): 출력 시 "undefined"
Null(의도적으로 비어있음): 출력 시 "null"
Object: 객체이며 어떤 데이터를 {key:value}형태로 저장
Array: 배열 데이터 let fruits = ['Apple', "Banana']

3. 변수 예약어

let은 재사용 및 재할당 가능, const재할당 불가능
예약어는 이미 의미를 가지고 있는 것들(함수 이름, 변수 등등)

4. 함수

특정 동작(기능)을 수행하는 일부 코드의 집합

//기명(이름이 있는) 함수
//나중에 호이스팅(hoisting)에서 한 번 더 확인할 예정
//함수 선언!

function hello() {
	console.log('hi');
}

//익명(이름이 없는) 함수 annonymous function
//함수 표현!

let world = function () {
	console.log('world')
}

객체 내부에 함수가 있으면 메소드(method)

const obj = {
	name: 'NAME',
	age: 85,
	// 메소드(method): 객체 내부 속성에 함수가 있을 경우
	getName: function () {
		return this.name; // 객체 안에 있는 name을 찾아서 반환하는 구조
	}
}

// 아래 모두 같은 값 출력
const naming = obj.getName();
console.log(obj.getName());

메소드 체이닝

const a = 'Hello~'
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a); //Hello~
conslog.log(b); //~olleH

5. 조건문

let isShow = true

if (isShow) {
	console.log('Show!);
} else {
	console.log('false');
}

6. DOM API(Doucment Object Model Application Programming Interface)

DOM: html의 들어있는 객체 모델(div, span, input) + API: 사이트가 동작하기 위해서 입력하는 프로그래밍 명형 = JS에서 HTML을 제어하는 명령들

6.1 addEventListner

// HTML 요소(Element) 가장 먼저 찾아지는 1개 검색/찾기
const boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드; 
// 첫 번째는 이벤트(Event, 상황), 두 번째는 핸들러(Handler, 실행할 함수)
boxEl.addEventListner('click', function () {
	console.log('Click!')
});

6.2 classList

// HTML 요소(Element) 가장 먼저 찾아지는 1개 검색/찾기
const boxEl = document.querySelector('.box');

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active'); //boxEl 쪽에 새로운 class를 삽입
let isContains = boxEl.classList.contains('active'); //active라는 class가 있는지 확인
console.log(isContains); // true

boxEl.classList.remove('active'); //boxEl에서 class를 제거
let isContains = boxEl.classList.contains('active'); //active라는 class가 있는지 확인
console.log(isContains); // false

6.3 forEach

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');

// 찾은 요소를 반복해서 (익명)함수 실행
// 첫 번째는 반복 중인 요소(boxEl), 두 번째는 반복 중인 번호(index)
boxEls.forEach(boxEl, index {
	boxEl.classList.add(`order-${index + 1}`);
	console.log(index, boxEl);
});

6.4 textContent

// HTML 요소(Element) 가장 먼저 찾아지는 1개 검색/찾기
const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // <bo>태그에 있는 문자열을 콘솔창에 출력

//Setter, 값을 지정하는 용도
boxEl.textContent = 'NAME';
console.log(boxEl.textContent); //NAME

7. BEM

HTML 클래스의 작명법으로 중복될 수 있는 이름들의 소속(?) 또는 종속이라는 것을 표시하는 명명법

요소__일부분 (underscore): 기호로 요소의 일부분을 표시

<li class="item">
      <div class="item__name">MENU</div>
      <div class="item__contents">
        <div class="contents__menu">

요소—상태 (hyphen): 기호로 요소의 상태를 표시

<div class="inner">
  <div class="title">
    <img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
    <a href="javascript:void(0)" class="btn--brown">자세히 보기</a>