0차0차 0차0차

정해진 목표가 없는 공부 방법은 끝을 못 볼 것 같아 체계적인 공부 방법을 잡아야겠다고 생각이 들었다.바로 지피티 형님께 하루 1시간 20일(주5일) 플랜 요청을 했다.플랜 요청할 때 다음과 같은 목표들을 제시했다.1) 실무에 바로 사용할 수 있을 것2) 포트폴리오로 사용할 수 있을 정도의 실력이 될 것3) 요청사항이 들어와도 충분히 잘 쳐낼 수 있을 것 📆 4주 플랜(주 5일 · 하루 1시간)1주차 – 기본기 탄탄 + 타임라인 감각* Day1은 Draggable 플러그인 학습으로 Day1은 생략된 상태이다.Day2A: 히어로 섹션 와이프 인/아웃, 텍스트 from/to, 페이드-슬라이드.B: gsap.to/from/fromTo 스니펫 5종(좌/우/상/하, opacity, scale).Done 기준: ..

다시 초심을 잡아서 꾸준히 공부하는 기록을 남기고자 다시 돌아왔다.퍼블리셔로 일하면서 GSAP 애니메이션을 자유롭게 이용해 화면을 구현한다면 더할 나위 없는 장점이 될 것이라고 느꼈다.그리고 생각보다 애니매이션을 추가로 홈페이지가 더 다채로운 화면으로 또 UI/UX 적으로 크게 긍정적인 영향을 미치는 것을 볼 수 있었다. 공식 홈페이지 바로가기 먼저 GSAP는 애니메이션 라이브러리이다. 그래서 스크롤 이벤트, 도형의 움직임 등 구현할 수 있는 애니메이션이 매우 다양하다.GSAP 사이트로 들어가면 script 불러오는 방식이랑 문서가 있지만 전부 영어고 제대로 해석된 자료들이 없어 시간이 오래 걸렸지만, 이젠 내 친구 챗지피한테 물어보면서 독학할 수 있었다.사랑한다 지피티야❤️근데 물론 지피티에 100% ..

JavaScript match( ) 메서드에 대해서 match( ) 메서드는 무엇일까? 문자열이 정규식과 매치되는 부분을 검색한다. str.match(regexp) regexp는 정규식 개체이다. RegExp가 아닌 객체 obj가 전달되면, new RegExp(obj)를 사용하여 암묵적으로 RegExp로 변환된다. 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열 : [ “” ]이 있는 Array가 반환된다. 여기서 RegExp란? 패턴을 사용해 텍스트를 판별할 때 사용한다. 리터럴 표기법과 생성자이다. 리터럴 표기법의 매개변수는 두 빗금으로 감싸야하며 따옴표를 사용하지 않는다. 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다. 결과 값은 문자열이 정규식과 일치하면, 일치하..

JavaScripte e.currentTarget에 대해서 e.currentTarget은 무엇일까? e.currentTarget은 Javascript의 이벤트 처리기 함수이 며 현재 이벤트가 발생한 요소를 가리킨다. 근데 e.target과 차이점이 있다. e.target를 사용하면 클릭한 그 요소만을 가져오고 e.currentTarget를 사용하면 클릭한 그 요소의 부모 태그까지 가져온다. 예시) click document.querySelector(".parent").addEventListener('click',function(e){ console.log(e.target); console.log(e.currentTarget); }) //click // //click // 이렇게 e.target는 해당 요..

JavaScript sort() 메서드에 대해서 sort() 메서드는 무엇일까? sort( ) 메서드는 배열의 요소를 정렬한다. 원본 배열의 요소 순서를 변경하므로, 배열 자체가 변경된다. 이 메서드는 기본적으로 문자열을 변환한 후 유니코드 순서로 정렬된다. 따라서 숫자를 정렬할 때는 정렬 기준을 정의해주어야 한다. arr.sort([ compareFunction ]) 기본적으로 오름차순으로 정렬된다. const fruits = ['banana','orange','apple','grape']; fruits.sort(); console.log(fruits); //['apple', 'banana', 'grape', 'orange'] 만약 내림차순으로 정렬하고 싶다면 const numbers = [5,2,8,..

JavaScript toLocaleString() 메서드에 대해서 toLocaleString() 메서드는 무엇일까? toLocaleString( ) 메서드는 배열의 요소를 나타내는 문자열을 반환한다. 요소는 toLocaleString 메서드를 사용해 문자열로 변환되고 이 문자열은 locale 고유 문자열(쉼표)에 의해 분리된다. 숫자, 날짜 및 시간 값의 형식을 지정된 로케일(지역화)에 맞게 변환해 준다. 이 함수는 로케일별로 숫자 및 날짜 형식을 다르게 나타내는 다국어 애플리케이션에서 유용하게 사용된다. arr.toLocaleString([locales [, options]]); locales와 options은 선택적 매개변수이다. locales : 로케일을 지정하는 문자열 또는 문자배열 지정된 로케일..

JavaScript concat() 메서드에 대해서 concat() 메서드는 무엇일까? concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. ⇒ 기존 배열을 변경하지 않고 추가된 새로운 배열을 반환한다. array.concat([ value1[, value2[, … [, valueN]]] ]) 배열 또는 값 만약 value1 ~ valueN 인자를 생략하면 기존 배열의 얕은 복사본을 반환함 valueN에 concat() 의 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니라면 인수 자체가 붙는다. 중첩 배열 내부로 재귀하지 않는다. 반환값은 새로운 aaray 객체이다. concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열..

JavaScript join() 메서드에 대해서 join() 메서드는 무엇일까? join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. arr.join([separator]) separator : 배열의 각 요소를 구분할 문자열을 지정한다. 이 구분자는 필요한 경우 문자열로 반환된다. 생략하면 배열의 요소들이 쉼표로 구분된다. 만약 separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결된다. 배열의 모든 요소들을 연결한 하나의 문자열을 반환한다. 만약 arr.length가 0이라면 빈 문자열을 반환한다. 혹은 요소가 undefined 또는 null일 때 빈문자열로 반환한다. 예시) const elements = ['FIre','Air','Water']; conso..