[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/5

3주차.Chapter 01

JavaScript 선행 학습

*** Javascript는 CSS/HTML처럼 눈에 보이는 것을 제어하는 게 아니고 눈에 보이지 않는 데이터를 제어하기 때문에 머릿속으로 데이터의 흐름과 코드의 논리를 이해해야 한다. ***

 

 

표기법

dash-case(kebab-case), snake_case, camelCase, ParcelCase

 

dash-case(kebab-case)는,

단어 중간에 '-(대시)'  기호로 표기하는 법.

띄어쓰기를 '-'가 대신함.

케밥 꼬치에 꽂혀있는 것 같아 보여서 'kebab-case'라고도 부름.

예. the-quick-brown-fox-jumps-over-the-lazy-dog (한 단어)

HTML, CSS에서 자주 사용

 

snake_case

단어 중간에 '_(언더바)'  기호로 표기하는 법.

예. the_quick_brown_fox_jumps_over_the_lazy_dog (한 단어)
HTML, CSS에서 자주 사용

 

camelCase

띄어쓰기 없이 붙여 쓰고, 새로운 단어가 나올 때 대문자로 표기하는 법.

예. theQuickBrownFoxJumpsOverTheLazyDog (한 단어)

JS에서 자주 사용

PascalCase

대문자로 시작! + camelCase

예. TheQuickBrownFoxJumpsOverTheLazyDog (한 단어)

JS에서 자주 사용

---

 

Zero-based Numbering

숫자를 0부터 세기 시작

예시.

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'

 

fruits의 0 번째는 'Apple'이다.

---

 

주석

ctrl + /

// 주석 메모 한줄

/* 
주석 
메모 
여러줄
*/

 

---

 

데이터 종류

String, Number, Boolean, Undefined, Null, Object, Array

 

String (문자 데이터)

따옴표를 사용한다.

let myName = "Heropy";
let email = 'thesecon@gmail.com';
let hello = `Hello ${myName}?!`;
//백틱 (``) 안에서는 내가 쓴 문자 + 다른 데이터를 섞어서 사용할 수 있다.

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

myName에는 'Heropy'라는 문자 데이터가

email은 'thesecon@gmail.com',

hello에는 'Hello Heropy'가 담겨 있다.

 

Number(숫자 데이터)

정수 및 부동소수점 숫자를 나타냄

let number = 123;
let opacity = 1.57;

console.log(number); //123
console.log(opacity); //1.57

//결과 값이 같아 보이지만 number는 숫자, string은 문자 데이터
let number = 123;
let string = '123';

console.log(number); //123
console.log(string); //123

 

Boolean(불린 데이터)

true, false 만 갖고 있는 논리 데이터 (참 or 거짓)

(스위치를 껐다, 켰다 등과 같은 상황에서 사용됨)

let checked = true;
let unchecked = false;

console.log(checked); //true
console.log(unchecked); //false

 

Undefined

값이 할당되지 않은 상태

//변수는 적었지만 값을 넣어주지 않았을 때
let undef;
let obj = { abc: 123 };

console.log(undef); //undefined
console.log(obj.abc); //123
console.log(obj.xyz); //undefined

 

Null

어떤 값이 의도적으로 비어있음

let empty = null;

console.log(empty); //null

//존재하지 않는 요소를 불러올 경우에도 null

 

Object(객체 데이터)

여러 데이터를 Key : Value 형태로 저장

{ key:value, key:value }

// { key:value, 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 fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
consol.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

 

 

03

변수

var, let, const

데이터를 저장 사용하는 이름

 

let

값 재할당 가능

재선언 불가능

let a = 2;
let b = 5;

console.log(a + b)
console.log(a - b);

let a = 90; //재선언 불가능
a = 90; //값 재할당 가능

 

const

값 재할당 불가능

재선언 불가능

const a = 12;
console.log(a); //12

a = 999; //값 재할당 불가능
const a = 333; //재선언 불가능

 

예약어

변수나 함수 이름 등으로 사용할 수 없는 단어

(이미 자바스크립트에서 사용 중)

//예약어 예시

let this = 'Hello';
let if = 123;
let break = true;

 

 

함수

function

동작/기능을 수행하는 코드 묶음

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

//함수 호출
함수이름(); //1234

 

return

함수에서 데이터 값을 반환하기

//함수에서 데이터 값을 반환하기
function returnFun() {
	return 123;
};

let a = returnFunc();
console.log(a); //123

 

 

매개변수

매개변수 = 인수

매개변수와 같은 자리에 들어간 인수가 매개변수의 값이 된다.

(매개변수는 변수이름과 같고 인수는 값)

//a와 b는 매개변수(Parameters)
function sum(a, b) {
	return a + b;
};

//1과 2는 인수(Arguments)
let a = sum(1, 2); //3, a=1, b=2
let b = sum(7, 12); //19, a=7, b=12
let c = sum(2, 4); //6, a=2, b=4

//sum(1,2) 예
function sum(1, 2) {
	return 1 + 2;
};

let a = 3;

 

기명(이름이 있는) 함수

함수를 선언한다.

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

 

익명(이름이 없는) 함수

함수를 표현한다.

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

hello();
world();

 

메소드(Method)

객체 데이터 내부에 속성으로 함수를 할당

const heropy = {
    name: 'HEROPY',
    age: 85,
    
    //메소드(Method):객체의 속성으로 함수가 들어가 있음
    //함수 표현
    getName: function() {
    	return this.name;
        //this : 해당 객체 데이터 heropy
    }
};

const hisNmae = heropy.getName();
console.log(hisName); //HEROPY
console.log(heropy.getName()); //HEROPY

 

 

조건문

if, else

조건을 걸어서, 그 결과에 따라 다른 코드가 실행되게 분리

let isShow = true;
let checked = false;

//조건문
// isShow가 '참'이기 때문에 아래 조건문이 실행됨
if (isShow) {
	console.log('Show!'); //Show!
}

// checked가 '거짓'이기 때문에 아래 조건문은 실행되지 않음
if (checked) {
	console.log('Checked');
};

let isShow = true;
if (isShow) {
	//isShow가 '참(true)'이기 때문에 해당 코드 실행 'Show'
	console.log('Show!');
} else {
	//그렇지 않으면(isShow가 거짓이면) 해당 코드 실행 'Hide'
	console.log('Hide?');
}

let hide = false;
if (hide) {
	//hide가 '거짓(false)'이기 때문에 코드 실행하지 않음
    console.log('hide');
} else {
	console.log('show');
}

()안에 조건문이 '참(true)'일 때만 코드가 실행되고, 거짓이면 뛰어 넘어 다음 코드를 실행한다.