전체 글

1. 배열 // at() // 대상 배열 인덱싱 // 음수 값을 사용하면 뒤에서부터 인덱싱함 const arr = ['a', 'b', 'c'] console.log(arr[0]) // a console.log(arr.at(0)) // a console.log(arr[arr.length-1]) // c console.log(arr.at(-1)) // c // concat() // 대상 배열과 주어진 배열을 병합해 새로운 배열 반환 const arr1 = ['A', 'B', 'C'] const arr2 = ['D', 'E', 'F'] const arr3 = arr1.concat(arr2) // 전개연산자 const arr4 = [...arr1, ...arr2] console.log(arr1) console...

1. 문자 const str = 'Hello world!' // .includes() // 대상 문자에 주어진 문자가 포함되어 있는지 확인 // 찾기 시작할 문자 인덱스 설정 가능 console.log(str.includes('Hello', 1)) // false // .indexOf() // 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스 반환 // 일치하는 문자가 없으면 -1 반환 console.log(str.indexOf('Hello')) // 0 // .padEnd() // 대상 문자의 길이를 확인해서 지정된 길이보다 작으면, // 주어진 문자를 지정된 길이까지 끝에 붙여 새로운 문자 반환 console.log(str.padEnd(20, '0')) // Hello world!00000000 c..

1. prototype 속성 - 배열 데이터에서 사용할 수 있는 각각의 속성이나 메소드들은 기본적으로 prototype 속성에 연결되어 있음 ex ) Array.prototype.include - 결국 prototype은 new 키워드를 통해서 만든 생성자 함수에서 반환된 결과인 하나의 배열 데이터(=인스턴스)에서 사용할수 있는 별도의 속성이나 메소드를 등록하는 개체! --> js 데이터는 결과적으로 생성자 함수에서 반환된 하나의 인스턴스 예제1 // const fruits = ['Apple', 'Banana', 'Cherry']; const fruits = new Array('Apple', 'Banana', 'Cherry'); console.log(fruits); console.log(fruits[1]..

1. 호이스팅 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 - 함수 선언문은 호이스팅 가능 // 함수 선언문 hello() function hello() { console.log('hello~') } - 할당 연산자는 호이스팅 불가능 - 할당연산자를 사용하면 기명 함수나 익명 함수에 상관없이 무조건 함수 표현식이고, function 키워드로 시작해서 이름이 있다면(=기명함수) 함수 선언문임 // 할당 연산자 const world = function hello(){ console.log('hello~') } world() 2. return 키워드 - 함수 내부에서 함수 밖으로 데이터를 반환하는 것 뿐만 아니라, 함수의 동작을 멈추는 역할도 함 - return 뒤 코드는 동작 안함 3. 함수 구조 분..

1. 데이터 1) Literal(리터럴) 어떠한 기호를 통해서 데이터를 만들어내는 방식으로 데이터(값) 그 자체를 의미함 - 변수에 넣는 변하지 않는 데이터 - `(백틱) 기호를 사용하면 템플릿 리터럴 - [] 배열, {} 객체, 문자열 등 데이터 2) Null, undefined Null : 명시적으로 작성 undefined : 암시적으로 자동으로 들어감(값을 명시하지 않았을 경우) - 123+undefined의 경우, NaN(Not a number) 3) toFixed() 소수점 자리수 자르기 - toFixed(1) : 소수점 1자리 숫자만 자르기 - 반올림된 값을 문자열로 반환 - 0은 기본 값(0~100) 4) typeof() - null, [], {} 모두 object 타입이기 때문에 다른 방식..

1. Sprite Image - 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지 - 이미지를 다운받기 위한 서버 요청을 단 번으로 줄일 수 있음(웹페이지 로딩시간 단축) .icon { width: 100px; height: 100px; background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/apple-ipad-app/main/images/sprite_apps.png"); background-position: -200px -100px; /* animation : sprite-icon 3s steps(1) infinite; */ animation-name: sprite-icon; animation-duration: 3s; an..

1. 라이브러리 [오픈 그래프 / 트위터 카드] - 웹페이지가 소셜 미디어(카카오톡, Slack 등)로 공유될 때 우선적으로 활용되는 정보 지정 - 페이지 title, 설명, image, url 등 [GSAP] - 자바스크립트로 웹 화면을 제어(세밀한 움직임, 동작의 연속성 등)하는 애니메이션 라이브러리 - gsap.to() [ScrollToPlugin] - GSAP 추가기능으로 스크롤 애니메이션 라이브러리 - scrollTo() 사용 ex) 버튼 클릭시, 최상단으로 화면 스크롤) [Swiper] - 슬라이드를 구현하는 라이브러리 [Youtube API] - Youtube 동영상 제어 - onYouTubePlayerAPIReady 함수명은 해당 IFrame Player API에서 사용하기 때문에 다르게 ..

21. flex-basis - flex item의 공간 배분 전 기본 너비 - auto가 기본 값으로 기본 너비는 content 너비와 같음 - 0으로 하면 기본 값을 무시하고, 비율 값을 사용함 22. transition - transition : 속성명 지속시간 타이밍함수 대기시간; - 요소의 전환 효과를 지정하는 단축 속성 - 전환 효과는 전 상태와 후 상태 말고는 추가적인 애니메이션을 부여할 수 없음 - 지속시간은 필수 - 같은 클래스에 display 속성은 적용 안됨. visibility로 설정해야함. 1) transition-property - 전환 효과를 사용할 속성 이름 지정 - 기본값은 all 2) transition-duration - 전환 효과의 지속시간을 지정 3) transitio..