본문 바로가기

반응형

전체 글

(272)
Array Destructuring See the Pen 200918-13 by hwd3004 (@hwd3004) on CodePen. 어레이 디스트럭쳐링. 오브젝트 디스트럭쳐링과 비슷하다. See the Pen 200918-14 by hwd3004 (@hwd3004) on CodePen. 배열을 리턴하는 함수도 가능.
Object Destructuring 디스트럭처링은 오브젝트나 어레이, 그 외 요소들 안의 변수를 바깥으로 끄집어내서 사용할 수 있도록 하는 것. See the Pen 200918-10 by hwd3004 (@hwd3004) on CodePen. notifications - 유저알림 follow - 누군가 유저를 팔로우하면 notification을 보냄 alerts - 최근 소식같은게 있으면 알림을 보내주는 용도로 사용 unfollow - 누군가 언팔로우 했을때는 알림을 받고 싶지 않으니 false 만약 유저의 notifications에 alerts가 true로 되어있을 때, follow도 true로 되어있다면, 이메일을 보내주려한다. 누군가 이 유저를 follow했을 때 이런 부분들을 체크하도록 하는 것. 이런걸 체크할때 예전에는 이렇게 ..
Array.findIndex(), Array.fill() Array.findIndex() Array.fill()
Array.from() - 매우 중요 See the Pen 200918-7 by hwd3004 (@hwd3004) on CodePen. Array.of()는 어떤걸 array로 만들고 싶을때 사용함. Array.from()을 알아보기전에 See the Pen 200918-8 by hwd3004 (@hwd3004) on CodePen. console.log(buttons) 에서는 NodeList가 뜬다. array인거 같지만 array는 아닌 NodeList이다. console.log(btn) 에서는 HTMLCollection이란게 나온다. 이것도 array인거 같지만 array는 아니다. 이런걸 array-like obejct라고 부른다. 각각의 버튼들을 가져와서 이벤트리스너를 붙이려할때 forEach로 하려고 하면 forEach는 func..
string 메소드 - includes(), repeat(), startsWith(), endsWith() See the Pen 200918-5 by hwd3004 (@hwd3004) on CodePen. includes 찾고 싶은 문자가 있는지 확인 See the Pen 200918-6 by hwd3004 (@hwd3004) on CodePen. repeat 글자 반복 See the Pen 200918-7 by hwd3004 (@hwd3004) on CodePen. startsWith 문자열이 지정해준 값으로 시작하는지 확인 endsWith 문자열이 지정해준 값으로 끝나는지 확인
Cloning Styled Components 스타일 컴포넌트는 리액트를 위한 라이브러리같은 것. js에서 css를 쓸 수 있게 해주고, html을 얻을 수 있음. template literal을 이용하여 카피해서 만들수 있다. argument에 들고 싶은 element를 받고, 적용하고 싶은 css도 받은 다음에 css를 적용한 element를 리턴하는 function을 만드려한다. See the Pen 200916-4 by hwd3004 (@hwd3004) on CodePen. See the Pen 200918-1 by hwd3004 (@hwd3004) on CodePen. 괄호 제거 가능. 똑같이 함수가 적용되고, styled()한거랑 똑같이 됨. 하지만 argument를 바꾼 상태. string인 하나의 argument가 나오는데, 입력한 s..
HTML Fragments string 안에 표현식을 표현식을 넣을 수 있다는 점 말고 template literal을 유용하게 사용할 수 있는 경우는 자바스크립트 안에서 html을 쓸 수 있다는 점이다. See the Pen 200917-5 by hwd3004 (@hwd3004) on CodePen. 하다보면 구조는 복잡해질수 밖에 없다. className도 함께 만들어야한다면 h1.className = "title" 이런식으로 코드를 추가해야한다. HTML 태그가 많아진다면 더 많아질 것이다. 이를 돕는 template literal string이 있다. See the Pen 200916-1 by hwd3004 (@hwd3004) on CodePen. ${variable}로 변수를 넣을 수도 있다. template litera..
Default Values es6에서 function에 추가된 것. Default Values. 기본 값은 많은 사람들이 필요로 했던 것. 왜냐면 시간을 줄여주기 때문. 기본 값은 arrow function뿐만 아니라, 일반함수에 적용 가능. See the Pen 200917-1 by hwd3004 (@hwd3004) on CodePen. Hello aaa가 출력. 여기까지는 이상 없음. 그런데 유저가 자기 이름을 입력 안하면? See the Pen 200917-2 by hwd3004 (@hwd3004) on CodePen. Hello undefined가 뜸. return 'Hello ' + (aName || ' anon'); 을 하는 방법이 있지만 default value를 이용한 방법이 있음. See the Pen 200917..

반응형