javascript17 Iterator 과 iterable, iterable 프로토콜에 대하여 📝 서론 이터레이터 이터러블 이터러블 프로토콜에 대해 js 개발자라면 굉장히 많이 들어보셨을 것 같습니다. 다양한 반복스러운 일(?) 들에 대해 조금 더 스마트하게 작성할 수 있는 방법들을 고민하다가 이터러블 프로토콜을 적용시켜 코드를 작성해야겠다! 라고 생각하며, 조금 살펴본 간단한 개념들에 대해 정리하겠습니다. TIL 정도의 분량입니다. 💁🏼♀️ 이터러블? 이터레이터? 이터러블 프로토콜? 그게 뭔데? 알고보면 간단한(사실 안간단) 개념인데 처음 접했을때는 왜이리 어렵고 복잡하게 느껴졌는지 모르겠습니다. 이터러블? 이터러블은? 이터레이터를 리턴하는 Symbol.iterator를 가진 값 입니다. const iterable = { [Symbol.iterator]() { } } 이터레이터? {value,.. 2021. 7. 25. lodash 유용하게쓰기 (응용해서 쓰기) 이번에 회사에서 업무를 진행하면서, 서버에서 내려준 데이터를 다양한 곳에서 사용할때 데이터 포멧팅이 필요한 경우가 많았습니다. 여러 배열과 객체를 내가 원하는 포멧으로 포멧팅을 진행하고자 할때 lodash를 유용하게 썼습니다. 다양하게 제공해주는 것들이 많아서 편했습니다. 문서도 너무 잘나와있다. 필요할때 메서드들을 찾아서 사용하면 됩니다. 여기선 메서드들에 대한 설명을 자세히 나열하진 않을 것이니 어떤 메서드인지 찾고 싶다면 아래 문서를 참조해주세요! [lodash 문서] Lodash Documentation Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chai.. 2021. 6. 25. 롤업과 웹팩의 차이점 (rollup vs webpack) 🤩 ui 라이브러리를 만들어 보자~ 최근 하고 있는 사이드 프로젝트에들어가는 ui-components 를 라이브러리화 시켜 npm 에 올려 두고 쓰려고 elpo-ui 라는 이름으로 개발을 준비 중입니다. 기존에 프로젝트들에는 늘 웹팩을 사용하여 번들링을 진행했는데, '앱은 웹팩으로 라이브러리는 롤업으로!' 라는 말이 생각나 그 이유가 무엇이며 둘의 차이점을 알아보고자 합니다. 롤업을 도입하기 전에 왜 롤업을 도입하려 하는지 도입 후 얻는 이점이 어떤 것들이 있는지, 그리고 그들의 특성을 이해하고 언제 롤업을, 언제 웹팩을 써야할지 구분하고자 이 글을 작성합니다. 🤩 웹팩과 롤업의 차이점을 알아보자! ✨ Webpack✨은 2012년도에 탄생한 짱짱 번들링도구 입니다. 특히나 spa개발에 있어 webpack.. 2021. 4. 22. Next.js 에 toast ui Editor 을 같이 사용하는 방법 (짱쉬움) next.js 에 tui Editor을 쓰고자 하시는 분들께 도움이 되길 바랍니다! 기본적으로 next.js를 쓴다는건 ssr을 하겠다는 이야기 인데 tui Editor에서는 ssr을 지원하지 않습니다. (딱히 지원할 이유도 없구요) 그렇기에 이둘을 같이 쓰게 되면 아래와 같이 window is not defined 라고 에러가 뜹니다. 이유는 window 객체는 client-side에서만 존재하는데 server-side에서 먼저 실행되기에 window 객체가 없다는 에러가 뜨는 것이지요. 즉 브라우저에서만 작동되기 때문입니다. With no SSR 자 그러면 에디터가 나오는 부분은 ssr을 하지 않아주도록 합시다. 공식문서를 보면 모듈에 브라우저에서만 작동하는 라이브러리가 들어있는 경우엔 서버측에 모듈.. 2021. 4. 6. WEB RTC (Web Real-Time Communication) 📋 목차 서론 WEB RTC가 뭔데? WEB RTC API Signaling STUN/ TURN SERVER 1:N 통신은 어떻게? 참고해보기 ✍🏻 서론 최근에 WEB RTC 기술에 관심이 많아지면서 간단한 개인 플젝을 해볼까 해서 조금씩 공부해보고 있습니다. 공부하면서 조금씩 정리해 두면 좋을 것 같아 적어둡니다. 👩🏻💻 WEB RTC가 뭔데? WEB RTC MDN 문서에는 아래와 같이 정의가 되어있습니다. WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소.. 2021. 3. 16. ResizeObserver 과 svg Element는 같이 동작하지 않는다. 👀 서론 요즘 D3에빠져 데이터 시각화에 관심이 많은 한사람 입니다. (리액트에서 D3를 이용하려다 보니 둘의 Dom control이 달라서 어떻게 해야 잘 쓸 수 있는지 고민이 많습니다..ㅋㅋ) D3랑관련 있는 이야기는 아니고, 그래프 그리다가 돔 크기에 따라 그래프가 유연하게 그려졌으면 좋겠어서 ResizeObserver 을 이용해서 하고 있습니다. ResizeObserver에 대한 설명은 아래 MDN참고 하세요! developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver - Web APIs | MDN ResizeObserver The ResizeObserver interface reports changes to the dimensi.. 2021. 3. 12. 이전 1 2 3 다음
