JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap() flatMap는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 유용한 메서드입니다. 이것은 API연결시 데이터가 2중배열, 3중배열으로 값들이 들어올때 유용하게 가공할수 있는 메소드 입니다. 👉🏻예시1) const alphabets = ['a', 'b', 'c']; const fruits = ['apple', 'banana', 'cherry']; const flatMappedWord = alphabets.flatMap((alphabet, index) => [alphabet, fruits[index]]); console.log(flatMappedWord) // [ 'a', 'apple', 'b', 'banana', 'c', 'che..

🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기(Promise 동작원리) 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. ♻️ fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중에 Promise객체 상태가 -> fulfilled 상태가 되었을 때 then함수에다가 콜백을 등록할 수 있습니다. 그리고 실제로 Promise객체 상태가 -> fulfilled 상태가 되면 등록한 콜백이 실행이 되는 것이고, 그 작업 성공 결과가 콜백의 파라미터(response)로 넘어오는 것입니다. 🙋🏽‍♀️ Promise 객체는 왜 등장했을까? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는..

이벤트 기획전 페이지 안녕하세요 TriplexLab 입니다. 오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다. 참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다. 자세한 내용은 아래 링크를 확인 해주시면 됩니다. 스크롤 방향 감지하기 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo.. triplexlab.tistory.com jquery 이벤트 연결하기(event binding) 안녕하세요 TriplexLab 입니다 :..

Javascript 말줄임 처리하기 안녕하세요 TriplexLab 입니다 :) 오늘은 간단하게 javascript로 말줄임 처리하는 방법에 대해서 살펴보겠습니다. ✍️ Javascript 말줄임 처리 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum d..

lodash 라이브러리 정리 안녕하세요 TriplexLab입니다 :) 오늘은 lodash 라이브러리에 대해서 정리해보겠습니다.(lodash 사용법) lodash 같은 경우에는 FE개발자들이 정말 자주 하는 작업들을 쉽고, 단순하게 작업을 도와주는 역할을 합니다. 예를 들어서 JSON형태의 데이터들을 받아서 화면에 뿌려주는데, 그냥 뿌려주는 것이 아니라, 필요한 데이터만 필터링한다던가, 혹은 다른 연산을 하고, 뿌려준다던가 작업 등등을 할때 유요한 라이브러리입니다. 이 라이브러리를 몰랐을 때는 제가 필요한 함수(기능)를 직접 만들어서 사용했는데... 이제 그럴 필요가 없어졌네요ㅠ 제가 만든 거보다 그 이상으로 많은 함수들을 재공해 주니깐요ㅎㅎ Array _.findIndex (function() { con..

ECMAScript [ES6-11] 최신 문법 정리 안녕하세요 TriplexLab입니다. 오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다. 👉Shorthand Property Names( 객체 초기자 ) /** * Shorthand Property Names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const TripexLab1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩옛날 옛적에 사용했던 방법 const TripexLab2 ..

React / ES6 / Webpack 프로덕션 빌드 최적화 안녕하세요 TriplexLab 입니다. 오늘은 요즘 프론트앤드 개발에 필수인 ES6, Webpack, React 의 환경 설정에 대해서 알아보도록 하겠습니다. 많은 분들이 저에게 React, Webpack 빌드 최적화에 대해서 많이들 물어보셔서 이번 기회에 정리합니다. package.json 파일은 현재 프로젝트에서 사용하는 라이브러리(의존성 모듈)의 버전들을 관리하는 파일입니다. 한번 설정해놓으면 다른 프로젝트 할때마다 기존 package.json 파일들을 참고 하는것 같습니다. 왜냐하면 버전이 달라서 빌드할때 에러가 날 경우가 있습니다. 그럴때 참고하는것이 좋은것 같습니다. //package.json { "name": "React", "ve..