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

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

HTML/CSS/JS로 만드는 스타벅스 웹사이트

1_JavaScript 

개요

• 표기법
• [HTML, CSS에서 사용] dash-case(kebab-case) 예: the-brown-fox
• [HTML, CSS에서 사용] snake_case 예: the_brown_fox
• [JS 에서 많이 사용] camelCase 예: theBrownFox
• [JS 에서 사용] PascalCase 예: TheBrownFox (맨앞도 대문자)

• Zero-based Numbering
• 특수한 경우를 제외하고 0부터 숫자를 시작한다.
• 주석(Comments) 
• 단축키: Ctrl+/

// 한 줄 메모

/* 한 줄 메모

/** 

* 여러 줄 메모

* 주르륵

*/

 

데이터종류 

• 데이터 타입
• String (문자 데이터)
• 따옴표를 사용
• 예: let myName = "Jenny"; ("" 대괄호 또는 ''소괄호)
• let hello = `Hello ${myName}?!` (보관법) 
• console.log(hello); // Hello Jenny?!

• Number (숫자 데이터)
• 정수 및 부동소수점 숫자를 나타냅니다.
• 예: let number = 123; //정수
• 예: let opacity = 1.57; //부동소수점
• Boolean (불린 데이터)
• //true, false 두 가지 값밖에 없는 논리 데이터
• 예: let checked = true; //참
• 예: let isShow = false; //거짓
• Undefined
• //값이 할당되지 않은 상태
• let undef;
• let obj = { abc: 123 }; //객체데이터라고 함. abc는 속성, 123은 값
• console.log(undef); //undefined
• console.log(obj.abc); //123
• console.log(obj.xyz) //undefined
• Null
• //어떤 값이 의도적으로 비어있음을 의미
• let empty = null;
• console.log(empty); //null
• Object (객체 데이터)
• //여러 데이터를 Key:Value 형태로 저장합니다. { }
• let user = {
•   // Key: Value,
•   name: 'Jenny',
•   age: 20,
•   isValid: true
• };
• console.log(user.name); //Jenny
• console.log(user.age); //20
• console.log(user.isValid); //true
• Array (배열 데이터)
• //여러 데이터를 순차적으로 저장 [ ]
• let fruits = ['Apple', 'Banana', 'Cherry'];
• console.log(fruits[0]); //'Apple'
• console.log(fruits[1]); //'Banana'
• console.log(fruits[2]); //'Cherry'

변수, 예약어

• 변수
• 데이터를 저장하고 참조(사용)하는 데이터의 이름
• var(잘 안씀), let, const
• 재사용이 가능
• 변수 선언
• 값(데이터)의 재할당 가능 : 변수 let
• 값(데이터)의 재할당 불가 : 변수 const (재할당시, TypeError가 뜸)
• 예약어 (Reserved Word)
• 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

함수 (function)

• 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) 
• 함수 선언
• function helloFunc() { //실행코드 console.log(1234);}
• 함수 호출
• helloFunc(); //1234
• 반환
• return을 사용해서 함수 밖으로 값을 내보내라. 
• function returnFunc() { return 123; }
• let a = returnFunc();
• console.log(a); //123
• 
  
  

조건문 

• 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if, else

DOM API

Documnet Object Model,  (도큐멘트=Html, 오브젝트모델= Div, span, input)

Application programming interface (웹사이트가 동작하도록하는 프로그래밍 언어, 명령들)

자바스크립트에서 HTML을 제어하는 명령들

메소드 체이닝 

BEM (block element modifier)

- HTML클래스 속성의 작명법

방법1. 요소__일부분 : underscore(lodash)기호로 요소의 일부분을 표시 

방법2. 요소--상태 : Hyphen(Dash)기호로 요소의 상태를 표시

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