ES6 (17) 썸네일형 리스트형 Renaming See the Pen 200918-15 by hwd3004 (@hwd3004) on CodePen. api로부터 데이터를 받아왔다고 가정하고, 받아온 데이터의 이름이 chosen_color인데, 이걸 chosenColor로 하고 싶어서 Renaming을 한다. See the Pen 200918-16 by hwd3004 (@hwd3004) on CodePen. 디스트럭처링 한 코드. See the Pen 200918-17 by hwd3004 (@hwd3004) on CodePen. ({color: {chosen_color: chosenColor = 'light'}} = settings) 새 변수를 생성하는 대신에 let 변수인 chosenColor를 업데이트함. 데이터를 업데이트해야된다면 let를 이용해서.. 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.. 이전 1 2 3 다음