리액트 1주차

웹의 기본 동작방식

웹이 어떻게 우리에게 보여줄까?

 

웹은 요청과 응답으로 이루어져 있다

클라이언트가 서버에게 우리가 보기위한 어떤 데이터를 만들어 주는 친구

클라이언트 요청 서버는 요청한 정보를 응답

 

서버에서 클라이언트로 전달해주는 형식 - JSON

키에 대응하는 어떤 값이 키쌍( : )으로 이루어진  데이터 타입

 

서버리스란?

서버리스란? 서버를 내가 만들필요가 없다는 말 서버는 있다!

이미 누가 잘 만들어 놓은 서버를 빌려다가 쓰는 것

 

자바스크립트 ES6문법

 

let과 const는 블록 안에서 유효 (블록 스코프) / {}

var는 함수 단위로 유효 / function

 

• =
• =는 할당을 뜻합니다. 어떤 변수에 값을 할당할 때 써요.
• ==
• ==는 등차입니다. 유형을 비교하지 않는 등차예요. 변수 값을 기반으로 비교합니다. (ex. 0 == "0"은 true를 반환합니다.)
• ===
• ===도 등차입니다! 유형도 비교하는 등차예요. 엄격한 비교죠! (ex. 0 === "0"은 false를 반환합니다.) 숫자와 문자도 구별

 

삼항 연산자는 if문의 단축 형태입니다.

사용법: 조건 ? 참일 경우 : 거짓일 경우

 

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

 

내장 함수

파이썬의 for문과 비슷하다 어레이의 요소들을 변수로 지정해주고 변수에 조건을 씌워준다

 

Map

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ return array_item + 1; });

//array_num의 요소요소들을 변환해서 새로운 정렬로 만들기
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.

console.log(new_array); // 원본 배열은 그대로 있죠! console.log(array_num);

Filter

조건을 줘서 배열을 새로 만들어줌 

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

Concat

배열과 배열 배열과 값을 덧붙일 수도 있다

원본 배열들은 건들이지 않고 새로운 배열을 생성하는 것이다

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

근데 concat은 중복 단어를 처리해 주지 않는다.

이럴 때 ...new Set을 사용해주면 된다

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

 

from

배열을 만들때 자주 쓰는 것

 

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

# ["m","e","a","n","0"] // 하나하나 뽑아낸다

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});
# item은 hello문자열의 하나하나 idx 는 순서를 의미
# 문자는 필요없고 순서만 뽑고 싶다 [0,1,2,3,4]


console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);
# [0,1,2,3] length에 따라 정렬의 크기가 바뀜 //
# (item, idx)=>{ return idx;}라는 옵션이 없으면 [undefined,undefined,undefined,undefined]

 

filter 이용해보기

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
	let animal = animals[i];
	// indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
	// 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
	// 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
	if (animal.indexOf("고양이") !== -1) {
		cats.push(animal);
	}
}
console.log(cats);

위 코드를 filter를 이용해서 표현해보기 >>

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = animals.filter((animal)=>{
    return animal.indexOf("고양이") !== -1; // -1이면 고양이가 없단소리
})

두 배열을 합치기

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

const merge = dogs.concat(cats)