TIL | 서버 사이드 vs 클라이언트 사이드, htmlFor 태그, JavaScript( join(), includes(), some() ... )

23.07.13

1. 서버 사이드 vs 클라이언트 사이드

promise 객체
상태: 대기(pending), 성공(fulfilled), 실패(rejected)

// promiseObj는 promise 객체
const promiseObj = new Promise((resolve, reject) => {});

서버 사이드 데이터 (상태) = BackEnd <-> 클라이언트 사이드 데이터 = FrontEnd
(ex. Todo, user data) (ex. 다크모드 여부)

아래 2가지가 서버 사이드 데이터를 관리하기 좋은 툴

1. Reducer Thunk

• server -> 데이터 수신
• 내부 state 갱신(서버)

2. Redux Query

• 쿼리에 기준
• invalid -> in(not) + valid = 더이상 유효하지 않게 처리해주는 것

2. htmlFor

react에서는 input 태그에 연결시킬 label 태그에 for 속성 대신 htmlFor 속성을 써줌

<Label htmlFor="titleTextarea">Title:</Label>

---

3. JavaScript 배열 메서드

3-1. join()

join() : 배열의 모든 요소를 연결해 하나의 문자열로 만듦
join() mdn 문서

const elements = ['Fire', 'Air', 'Water'];

// 아무 인자 없이 join할 경우
console.log(elements.join()); // "Fire,Air,Water"
// 빈 값으로 join할 경우
console.log(elements.join('')); // "FireAirWater"
// -을 넣고 join할 경우
console.log(elements.join('-')); // "Fire-Air-Water"

var a = ['바람', '비', '불'];

var myVar1 = a.join();      // '바람,비,불'
var myVar2 = a.join(', ');  // '바람, 비, 불'
var myVar3 = a.join(' + '); // '바람 + 비 + 불'
var myVar4 = a.join('');    // '바람비불'

3-2. includes()

includes() : 배열이 특정 요소를 포함하고 있는지 판별
includes() mdn 문서

const array1 = [1, 2, 3];
console.log(array1.includes(2)); // true // 2를 포함하고 있으니

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true // cat이 포함되니
console.log(pets.includes('at')); // false // at은 포함되지 않고있으니

=> 즉 부분 요소에서 부분 문자열은 해당하지 않고 배열 내 전체 문자열끼리 비교함

3-3. some()

some( ) : 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하면 true를 반환하고 아니라면 false를 반환 (이 메서드는 배열을 변경하지 않음)
some() mdn 문서

const array = [1, 2, 3, 4, 5];

// array 배열 안에 요소가 하나라도 짝수라면 console.log에는 ture가 찍힐 것 !
const even = (element) => element % 2 === 0;

console.log(array.some(even)); // true !