1. 고차함수
틀린코드
function 레스덴백(number) {
if(number < 100){
return true;
}else{
return false;
}
}
function 레스덴백(obj, property) {
return obj[property].filter((el) => typeof el === 'number' && lessThan100(el));
}
const obj = { what: 'sike' };
debugger
getElementsLessThan100AtProperty(obj, 'what');: 여기서 filter는 배열에서만 사용이 가능한데, obj[property]가 배열인지 아닌지 확인도 안된상태에서 filter메소드를 사용하게되버리면 에러가 날 수 있을 뿐만아니라, 위에서 볼 수 있듯이 filter로 element, 즉 배열의 각 요소가 number type일 경우에만 걸러서 배열에 재할당하려는 의도의 코드가 제대로 작동되지 않을 수 있다.(type이 number가 아닌 경우) 그래서 올바르게 작동되는 코드는 이러하다
function 레스덴백(number) {
return number < 100;
}
function 겟엘리먼츠레스덴100앳프로펄티(obj, property) {
let maybeArr = obj[property];
if(Array.isArray(maybeArr)){
return maybeArr.filter((el) => typeof el === 'number' && lessThan100(el));
}
return [];
}2. arr.reduce
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
return accumulator + currentValue;
}, Initial value);
// 출처 MDN1) [].reduce((acc,cur)=>acc,0).length;
빈배열을 reduce해서 length을 쓴다면 undefiend가 나옴
2) return arr.reduce((a, b) => a.length < b.length ? b : a,0).length;
이 코드가 안되는 이유는 만약 빈 배열인 경우 초기값을 0으로 뒀을때 그대로 반환값이 0이 되게 되는데 이때 number타입에 length를 쓸 수 없기때문에 undefined가 나온다.
3)
var i = "str";
i.length;
--> 3
이 되지만,
var j;
j.length;
Uncaught TypeError: Cannot read property 'length' of undefined at <anonymous>:1:3
에러가 난다.
변수에 데이터가 있는지 없는지 체크가 필요하다. undefined 인 경우였다.
출처: https://junibong.tistory.com/72 [주니봉]
.
.
.
.
.
3.
let 변수선언의 기원 : "Let there be light(빛이 있으라)" (창세기 1:3)
스택오버플로우에서 본 답변
There are other languages where let is used as a keyword before a variable declaration, such as BASIC and LISP (or Scheme), and I presume it was taken from there. It's not an abbreviation; it's the normal English word "let", used to introduce a command, as in "Let there be light;" in mathematics it is common to announce a symbol this way, as in "Let x be the unknown number of years we are trying to calculate."
4.
호이스팅 : var변수선언과 함수 선언문에서만 호이스팅이 일어남, 할당은 호이스팅이 안됨 그저 선언만...
5.
조건부 렌더링이란
: 리액트에서는 삼항연산자를 사용하여 조건문을 걸고 그 조건에 따라 렌더링하는 것을 말한다.
그렇다면 렌더링이란?
: 본인은 클라이언트가 요청한 html파일을 서버가 제공하는 과정이라고 정말 간단..하게 이해했다.
6. State in React
React에서 state의 값을 변경하기 위해선 useState라는 'state 갱신 함수'를 사용하는 데,, 이를 쓰는 법을 간단히 코드로 얘기해보면,,
const objUser =[
{id : 1,
name : 'juhong',
city:'seoul},
{id: 2,
name: 'caelin'
city:'seoul'}];
const [user, setUser] = useState(objUser);
// 여기서 useState()란 특별한 함수가 있다. 하나의 칸을 컴포넌트가 어떤 상태를 가지고 있는 지 state란 개념을 react에서 코드로 표현하고싶어서 생긴 개념이다.
const anotherUser = {id:3, name : '홍길동', city:'한양'};
objUser.push(anotherUser); // react에서는 주소값이 바뀌지 않고 값을 대체하는 얇은 복사는 권장하지 않는 편이다.
// 만약 'objUser.push(anotherUser);'를 user에 추가하고 싶어서 짠 코드라면 바람직하지않다.. (크기가 작은 코드면 아주 조금 괜찮을 지 몰라도..)
// 그 이유는 state는 말그대로 '상태'라는 뜻을 가지고 있는데, state의 구성된 로직을 간단히 얘기하자면 '현재 값과 다른 값이 state 갱신 함수에 들어왔나 현재값과 함수에 인자로 들어온 값을 비교 후
//다르다면 대체한다. 즉 현재 상태와 인자값의 상태를 확인 후 다르면 그 인자값으로 대체하고 아니면 그대로 둔다.'
// 그럴때에 엄청나게 많은 정보들이 있다고 해보자, state가 구성된 로직(알고리즘)상 많은 정보들의 값들을 하나하나 다 비교해야하는데, React는 그것이 비효율적이라고 생각해 '주소값이 같으면 그냥 같은 // 녀석으로 보겠다'라고 한다. 즉 React에서 얇은복사로 state의 값을 바꾸지 말라고 하였다.
// 사실 이건 React에서의 state의 값을 갱신할때에 얇은 복사를 하지 말자라는 얘기에 왜라는 의문을 품었지만 이해하기 너무 어려워 이정도로만 합리화해서 이해했다...
//그래서 깊은 복사를 하여 state 갱신 함수를 사용하여 state를 갱신하는 코드는 다음과 같다.
const newObj = [...user, anotherUser]; // 스프레드 문법은 깊은 복사를 한다.
setUser(newObj); // state 갱신 함수의 인자에 objUser, user와 주소 값이 다른 새로운 데이터를 넣어준다.
// state는 immutable하게 사용해야한다. 완전히 새로운 녀석을 만들어야 한다.
// React는 같은 주소를 가지고 값을 변경해도 같은 값이라고 생각하고 바뀌지 않는다.
웹 메모장주소
data:text/html, <html contenteditable>
==> 난 공부하면서 나중에 복습하기위해 메모장에 코드랑 부연설명같은 것들을 많이 적어놓곤 하는데 그럴때마다 메모장이 지저분하고, 여러 메모장이 펼쳐져있어서 가독성이 떨어져 읽기가 힘들었다. 그래서 최종 블로깅할때는 웹 메모장을 사용하여 정리하려고한다..
