자바스크립트27 string 배열에서 중복이 있는지 확인하기 / 중복 제거하여 리턴하기 string 배열에서 중복이 있는지 확인을 해야하는 작업이 필요해서 서치를 하다가 남겨두면 좋을 것 같아서 남겨보고자 한다. const arry = ['hello', 'world', 'hello', 'bears', 'go', 'to', 'home']; const findDuplicates = (arr) => { return arr.filter((item, index) => arr.indexOf(item) !== index); } const duplicates = findDuplicates(arry); console.log(duplicates); // Output: ['hello'] indexOf의 특징을 사용하는 것인데, indexOf는 배열에서 첫 번째로 찾아지는 데이터의 index의 값을 리턴하는데 .. 2021. 10. 25. [기타] 디자인을 위한 참고할만한 사이트! 이전에 요소의 애니메이션에 대한 건 GSAP를 사용했는데 검색을 하다 보니 anime.js라는 라이브러리를 알게 되었다. 나중에 참고하면 좋을 것 같아서 기록해두기! https://animejs.com/documentation/ anime.js Javascript animation engine animejs.com 아래 GSAP도 사이트 기록해두기 https://greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter.. 2021. 8. 12. [자바스크립트] IntersectionObserver 일단 MDN 먼저 깔고 시작하기 https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver/IntersectionObserver IntersectionObserver.IntersectionObserver() - Web API | MDN IntersectionObserver() 생성자는 새로운 IntersectionObserver 객체를 생성하고 반환합니다. developer.mozilla.org IntersectionObserver는 내 화면에 선택한 대상이 들어오는지를 확인하는 옵져버이다! 스타에서도 옵져버는 계속 감시하는 애니까... 비슷한 의미로 보면된다. 옵져버할 대상의 엘리먼트를 지정하고 이 요소가화면에 보여졌을 때, 콜백함수가 호출되.. 2021. 7. 7. [기타] 매일 보면 좋을 자바스크립트 관련 사이트 최근에 자바스크립트 공부도 하면서 영어공부도 할겸.. 여기저기 찾아보다가 좋은 사이트를 발견했다. https://javascript.plainenglish.io JavaScript in Plain English New JavaScript and Web Development content every day. Follow to join our +2M monthly readers. javascript.plainenglish.io 영어로 자바스크립트 관련 글들을 모아놓은거고 매일 업데이트가 된다! 꾸준히 읽으면 영어도 자스도 공부할 수 있을 것같,..........겠지?.... medium기반이라서 일단 미디엄을 정기구독해야하지만 확실히 좋은 글들도 많고 새로운 내용들도 접할 수 있고 알던 내용들도 영어로 다시.. 2021. 7. 7. [ES2021] 새로운 기능들 하루만 자고 일어나도 새롭게 변화하는 프론트엔드.. 매우 다이나믹하고... 나는 아직도 이전꺼도 배우는 중인데 벌써 ES2021이 나와버렸다...! 몇 안되는 개발자 인맥 중에서 먼저 알려주신 분 덕분에 ..! 뭔가 전체적으로 보면 축약이 된 것같다. &&= 등등과 같이... 점점 알아보기 위해서 공부를 해야한다는 느낌을 받았다! https://h3manth.com/ES2021/ ES2021 features list ES2021 as approved by the Ecma General Assembly h3manth.com 링크는 위와 같고! 당장 쓰지는 못하더라도 일단은 알아두고 기억해둬야겠다! 2021. 6. 29. [Javascript] 실행컨텍스트 자바스크립트에서 실행가능한 코드가 발생하기 위해 필요한 환경 ** 실행가능한 코드 = 전역코드, 함수코드, Eval코드 자바스크립트 엔진이 코드를 실행하기 위해 실행에 필요한 정보를 수집함. ** 실행에 필요한 정보 : 변수 선언, 함수 선언, 스코프, this 실행 컨텍스트들은 물리적으로 stack의 형태로 관리됨. 실행 컨텍스트가 담긴 stack은 함수가 호출될때 마다 쌓이고 끝나면 사라짐 실행컨텍스트의 구조 변수 객체 객체에는 변수, 함수가 있고, 함수 실행 컨텍스트에는 인자(파라미터)도 포함됨 함수일 때 는 활성객체, 전역일 때는 전역객체를 가리킴(요것들이 변수 객체라고 보면됨) 실행에서 필요한 정보를 담음 스코프체인 실행컨텍스트의 해당되는 전역/함수가 참조할 수 있는 변수, 함수 선언 등의 정보.. 2021. 6. 2. [Javascript] Closure(클로저) 기초적인 공부를 하면서 Closure클로저는 매우 많이 나오지만 정확히 왜 써야 하는지 항상 의문이었다. 그런김에 클로저에 대해 정리하고 왜 쓰는지 공부를 해보았다. 클로저는 야구에서는 마무리 투ㅅ.... 사실 클로저는 닫는다는 의미가 있다. 그렇다면 자바스크립트에서는 무엇을 닫아버리는 것일까? 결론부터 보면 클로저는 외부에서부터 데이터를 보호할 수 있다. 자바의 private 키워드와 비슷한 역할을 할 수 있다고 보면된다. 즉, 은닉을 할 수 있다는 건데.. 그렇다면 클로저는 어떻게 생겼길래 그러는 것인지 확인을 해보아야겠다. function outer(name) { let firstName = name; return function() { console.log(firstName); } } const .. 2021. 6. 1. [Javascript] var, let, const var는 이전부터 Javscript에서 사용하는 변수 선언 키워드 이다. let과 const는 ES6 이후에 나온 변수 선언의 키워드 이다. var와 let, const의 차이는 스코프에 차이가 있다. var는 함수스코프로 함수에 따라 독립적인 변수를 갖게 된다. 하지만 let과 const는 블럭 스코프로 함수를 포함하여 모든 블럭에서 독립적인 변수를 갖게 된다. 또, var와 let은 값의 할당이 다양하지만, const는 변경할 수 없는 상수로 설정된다. 이 외에도.. var는 전역에서 설정하게 되면 window.변수이름 으로 사용할 수 있지만, let과 const는 전역객체에 할당되지 않는다.(약간 가상의 블럭에 쌓여있다고 생각이 든다!) 이 포스트에서는 무엇을 이야기해볼까.. Javascript는 .. 2021. 5. 31. [Javascript] 이벤트 루프(Event Loop) 이벤트 루프에 알기 전에 먼저, 자바스크립트 엔진의 구조를 먼저 보아야한다. 자바스크립트 엔진의 구조는 힙(heap)과 콜스택(callStack)으로 이루어져 있다. 힙은 메모리를 저장하는 공간이고 콜스텍은 함수가 실행이 되면 해당 함수에 대한 호출이 stack에 쌓여지고 처리하는 역할을 한다. 일단 자바스크립트는 싱글 스레드의 형식이다. 즉, 한 번에 하나밖에 처리를 하지 못한다. 이 처리도 콜스택에 쌓이고 위에서부터 하나씩 처리해야 다음 처리가 가능하다. 그러면 setTimeout과 setInterval, ajax와 같은 처리들을 어떻게 하는 것일까? 얘네들은 알아서 시간에 맞춰서 실행되고 그러던데..? 이건 브라우저나 NodeJS에서 제공하는 이벤트 큐와 콜스택을 확인해주는 이벤트 루프가 있어서 가.. 2021. 5. 28. 이전 1 2 3 다음
