You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
📚 $.getScript() 동적 스크립트 로딩 사용법
제이쿼리 $.getScript() $.getScript() 메소드는 예전에 ajax통신을 위한 api로 쓰이던 메소드다. 요즘은 fetch() 나 $.ajax() 를 사용하기에 잘 안쓰이는 편이지만, 간단한 코드로 원격지 또는 로컬의 javascript 파일을 동적으로 읽어들여 실행하는 역할로서 가끔 쓰이기도 한다. 다른 도메인의 자바스크립트도 읽어들일 수 있다. $.getScript(url, callback); // url : 읽어들이는 페이지의 위치 // callback : 통신 성공시의 콜백 함수 예를들어 이런식으로 단축하여 사용할 수 있다. 바닐라 자바스크립트에선 따로 제이쿼리에서는 하나의 메소드만 사용하면 되는 걸 알 수 있다. (콜백 뿐만 아니라 프로미스도 지원한다.) $.getScript("..
📚 AOS 스크롤 애니메이션 라이브러리 - Animate On Scroll
AOS (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊게 몰라도 쉽게 사용할 수 있다는 장점이 있다. 시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고 라고 평가 받는다. AOS 설치 AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS 사용방법 See the Pen aos-sample by barzz12 (@inpaSkyrim) on CodePen. data-aos 옵션 속성 옵션 설명 data-aos 사용..
📚 Lodash 배열 검색 · 정렬 함수 모음
Lodash - 배열 검색 & 정렬 함수 정리 _.sortBy() 키값을 기준으로 정렬 // data 가 아래와 같은 경우 const data = [ { date: '2020-01-01', count: 10 }, { date: '2020-01-02', count: 30 }, { date: '2020-01-03', count: 5 }, ] // count 필드 기준으로 정렬하고 싶다. -> 아래와같이 사용하면 된다 sortBy(data, 'count'); /* [ {date: "2020-01-03", count: 5} {date: "2020-01-01", count: 10} {date: "2020-01-02", count: 30} ] */ 키값 두개로 정렬하기 // date를 먼저 기준으로 정렬하고 dat..
📚 Lodash 배열 ⮂ 객체 변환 함수 모음
Lodash - 배열 ⮂ 객체 변환 함수 정리 _.values() / _.keys() object.values() / object.keys() 와 같다고 보면 된다. 키/밸류값들을 따로 묶어 배열로 변환. 문자열이 인수일경우, split('')효과도 있음. _.values({ a: 1, b: 2, c: [3, 4] }); // => [ 1, 2, [3, 4] ] _.values('hi'); // => ['h', 'i'] _.groupBy() 컬렉션을 객체로 변환. 키값은 무언가 의미있는 기준이 되는 것을 설정해 적용함 두번째 인수로는 무엇을 기준으로 의미있는 key로 사용할까 정함. _.groupBy([6.1, 4.2, 6.3], Math.floor); // 정수로 변환해서 그것을 키:밸류로 의미있게 짬..
📚 Lodash 객체 조작 함수 모음
Lodash - 객체 조작 함수 정리 _.pick() 객체의 필요한 속성만 뽑을 때 쓴다. var user = { name: 'socratone', password: '12345678' }; // 클라이언트에게 보내주기 위해 user 객체에서 비밀번호를 뺀다. _.pick(user, ['name']); // { name: 'socratone' } _.get() 객체에서 키 경로를 주어서 값을 가져온다. var object = { 'a': [{ 'b': { 'c': 3 } }] }; _.get(object, 'a[0].b.c'); // => 3 var object = { a: 1, b: 2, c: 3, e: { f: 5 } }; _.get(object, 'a'); // => 1 _.get(object,..
📚 Lodash 배열 조작 함수 모음
Lodash - 배열 조작 함수 정리 _.size() length와 같다고 보면된다. 하지만 배열 뿐만 아니라 문자열, 객체도 같은 메소드로 length를 구할수 있다. _.size([1, 2, 3]) // => 3 _.size({ 'a': 1, 'b': 2 }) // => 2 _.size('apple') // => 5 _.constant() 반환 값을 반환해주는 함수이다. 단독으로는 거의 사용하지 않고, 다른 Lodash 함수들과 같이 사용한다. _.constant(0); // => 0 _.constant({ a: 1 }); // => { a: 1 } _.times() 콜백함수 조건에 맞게 반복횟수만큼의 데이터를 배열로 반환한다. 초기화를 시킬 때 유용하다. _.times(3, _.constan..
📚 Lodash 고차 함수 모음
Lodash - 고차 함수 정리 _.forEach() 배열, 객체 순회 lodash _(obj).forEach(function(n) { console.log(n); }) _.forEach(obj, function(val, key) { console.log(val, key); }); // 간단한 별칭으로도 쓸 수 있다. _.each(obj, (value, index, list) => {}); // 배열은 인자마다 순회합니다. _([1, 2]).forEach(function(n) { console.log(n); }) // 1 // 2 // object는 한개의 value와 키를 순회합니다. _.forEach({ 'a': 1, 'b': 2 }, function(val, key) { console.log(val..
📚 Lodash 객체 래핑 & 체이닝 방법
로대쉬 객체 래핑 _(값) 괄호안의 값을 lodash로 래핑된 객체로 싼다. let rap_val = _({ "f":3, "g":15 }) 제이쿼리 원리랑 비슷하다고 보면 된다. 태그를 제이쿼리로 감싼다고 할때, $('li') 이런식으로 한다. 이 문법의 의미는 HTMLCOLLECTION 배열의 li를 제이쿼리용 객체로 변환한다는 의미. Lodash도 똑같이 접근 하면 된다. 그저 $ 대신 _ 를 쓰는 차이점밖에 없다. _.prototype.value() lodash로 래핑된 값들을 푼다. 보통 체이닝 한 후에 값을 얻을때 사용 // Defining values let values = { "f":3, "g":15 }; // _()로 묶으면 Lodash 전용으로 래핑된다. let rap_val = _..
📚 Lodash 지연 평가(Lazy Evaluation) 원리
지연 평가란? 컴퓨터 프로그래밍에서 지연 평가(Lazy Evaluation)는 함수형 프로그래밍에서 자주 사용되는 개념이다. 지연 평가는 단어 그대로 계산이 필요한 시점까지 계산을 미루는 것을 의미한다. 즉, 지연 평가는 값을 계산하는 시점을 늦추어서 불필요한 계산을 방지하고 시스템의 성능을 향상시킬 수 있게 된다. 이를 통해, 메모리 사용량이 감소하고 프로그램의 반응성이 향상된다. 지연 평가 동작 원리 #1 지연 평가(Lazy Evaluation)와 엄격한 평가(strict evaluation)의 동작 방식과 비교를 통해 지연 평가의 동작 방식을 알아보자. 다음 코드와 같이, 0~5로 이루어진 배열에서 각 원소에 대해 10을 곱한 뒤 홀수만 고르고 숫자를 문자로 바꾸고 첫2개만 추출하는 로직을 자바스..
📚 Lodash 소개 & ES6 자바스크립트와 비교
Lodash 라이브러리 Lodash(로대쉬)는 JavaScript의 인기있는 라이브러리 중 하나로 제이쿼리, 리액트와 같이 전세계적으로 가장 많이 사용되는 라이브러리이다. Jquery가 자바스크립트 DOM을 간편하게 다루기 위해 탄생했듯이, Lodash는 주로 array, collection, date 같은 데이터의 구조를 간편하게 함수형으로 다룰 수 있게 하기 위해서 탄생했다. 예를들어 바닐라 자바스크립트의 배열 안의 객체들의 값을 핸들링 할때 (배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 코드 몇줄만으로 유기적으로 다룰수가 있어서 매우 유용하다. 특히 Frontend 환경에서 서버(DB)에서 받은 데이터를 정렬하고 볶아넣을때 많이 쓰이는 편이다. Lodash 라는 단어를 보면 알듯이, 로대쉬..
🎨 SweetAlert2 - 이쁜 alert 모달창 설치 & 사용법
SweetAlert2 자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다. Alert는 사용자에게 알림을 주고자 할 때 정말 자구 사용하는 컴포넌트 입니다. 다음과 같이 자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다. 하지만 우리는 이런 알림창보다 더 예쁜 알림 창을 원하죠. SweetAlert2 라이브러리는기존의 alert 창보다 다양한 디자인과 색감으로 디자인이 된 alert 창 입니다. 또한 한 종류만 있는게 아니라 alert, confirm, prompt 입력창 역시 지원하며, 여러 주제에 따라 다양한 이쁜 알람창을 따로 css작업없이 고퀄리티의 애니메이션 창을 구성할수 있습니다. 이번 시간에는 SweetAlert2 라이브러리의 기본 사용법..
📚 머티리얼 디자인(Material Design) 사이트 정리
머티리얼 디자인이란? 머티리얼 디자인(Material Design)은 모바일, 데스크톱 등 다양한 디바이스들을 아우르는 하나의 일관된 구글의 디자인 가이드라인이다. 2014년, 구글이 스마트폰에 적용하면서 널리 퍼지기 시작했다. 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식 채택했는데, 현대적인 출판물 디자인 원칙이 반영되어 다른 부가요소보다 컨텐츠 자체가 강조된다. 디자인 특징 머티리얼 디자인은 다음과 같은 슬로건을 내세운다. "Build beautiful products, faster." "Material is a design system – backed by open-source code – that helps teams build high-quality digital exp..
