본문 바로가기

반응형

FrontEnd

(65)
#24. 자바스크립트(javascript) - 내장함수(concat, join, reduce) 1. concat concat은 두 배열을 합치고, 기존의 배열은 건드리지 않습니다. const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const concated = arr1.concat(arr2); console.log('concated: ', concated); console.log('arr1: ', arr1); console.log('arr2: ', arr2); 2. join join은 배열 안에 있는 원소를 문자열로 합쳐주는 기능을 합니다. join 함수의 파라미터는 문자열 사이에 배치됩니다. const array = [1, 2, 3, 4, 5] console.log('join: ', array.join()); console.log('join parameter: '..
#23. 자바스크립트(javascript) - 내장함수(filter, splice, slice, pop, unshift, push) 1. filter filter는 특정 조건을 만족하는 원소를 찾아서 반환하는 역할을 합니다. const blood_type = [ { id: 1, type: 'A', donation: true, }, { id: 2, text: 'B', donation: true, }, { id: 3, text: 'AB', donation: true, }, { id: 4, text: 'O', donation: false, } ] const need_donation = blood_type.filter(blood => blood.donation); console.log(need_donation); const need_donation = blood_type.filter(blood => blood.type === 'B'); co..
#22. 자바스크립트(javascript) - 내장함수(forEach, map, index, findindex, find) 내장함수 내장함수란 자바스크립트에서 자체적으로 제공하는 함수를 내장 함수라고 합니다. 내장 함수는 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하면 되는 함수입니다. forEach forEach 함수는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, 증감 등을 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. const superHeros = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; 아래 방법은 forEach 함수를 이용해 원소를 hero라는 파라미터로 받아 출력하는 방법입니다. function print(hero) { console.log(hero); }..
#21. 자바스크립트(javascript) - 객체 다루는 방법 객체 다루는 방법 객체의 내부 요소를 출력하는 방법은 3가지로 볼 수 있습니다. 1. key, value를 한 쌍으로 묶어 배열로 출력하는 방법 2. key만을 배열로 출력하는 방법 3. value만을 배열로 출력하는 방법 const IronMan = { name: 'Tony Stark', alias: 'IronMan', actor: 'Robert Downey Jr.' } // key, value를 한 쌍으로 묶어 배열로 출력 console.log(Object.entries(IronMan)); // key만을 배열로 출력 console.log(Object.keys(IronMan)); // value만을 배열로 출력 console.log(Object.values(IronMan)); for .. in 함수를..
#20. 자바스크립트(javascript) - 배열(array) 배열 배열은 여러 원소를 담고(나열하고) 있습니다. 자바스크립트에서의 배열은 배열 안에 있는 모든 원소들이 같은 타입일 필요가 없습니다. 배열 선언 방식 const array_name = [] 즉, 대괄호 안에 있는 원소들이 문자열이든, 숫자이든, 객체이든 또 다른 배열이든 상관없이 작성될 수 있습니다. const array = ['a', 'B', 1004, ['c', 'D'], 3.99]; 조회방법 배열을 조회할 때, 0번부터 시작합니다. const array = ['a', 'B', 1004, ['c', 'D'], 3.99]; console.log('array[0]:', array[0]); console.log('array[1]:', array[1]); console.log('array[2]:', ar..
#19. 자바스크립트(javascript) - 객체 안에 함수 넣기 객체 안에 함수 넣기 이번에는 객체 안에 함수를 넣어보도록 하겠습니다. const dog = { name: '멍멍이', sound: '멍멍!', say: function say() { console.log(this.sound); // 여기서 this는 객체 자체를 의미한다. // 따라서 this.sound는 dog.sound 라고 볼 수 있다. } }; 먼저 dog라는 객체를 만들어 줍니다. 객체 내부에서 함수를 정의할 때는 아래와 같이 정의합니다. key: function function_name() { } 이 부분은 간소화가 가능합니다. 간소화 방법은 아래와 같습니다. 1. say: function say() {} 2. say: function() {} 3. say() {} 위의 dog라는 객체의 s..
#18. 자바스크립트(javascript) - 비구조화 할당 비구조화 할당 사용자의 정보를 간단히 보여주는 함수를 만들어보도록 하겠습니다. 객체 및 함수에 대해 잘 모르시는 분들은 클릭해서 읽어보시기 바랍니다. const AXCE = { name: 'Sudon Noh', age: 30, birth: '1992.10.16', alias: 'AXCE' }; function print(main) { const text = `'${main.alias}'의 이름은 '${main.name}'입니다. 나이는 ${main.age}이고, 생일은 ${main.birth} 입니다.`; console.log(text); } print(AXCE); 새로 만든 print라는 함수는 파라미터(main)을 받아 정보들(name, age, birth, alias)을 출력해주는 함수입니다. 이 ..
#18. CSS - background-attachment: fixed background-attachment nike 공식 홈페이지에 있는 이미지들을 배경으로 놓고 fixed 옵션을 적용해 보았습니다. section { height: 500px; } .section1 { background-image: url("https://static-breeze.nike.co.kr/kr/ko_kr//cmsstatic/structured-content/65250/211102_wlp_p6_bg.jpg"); background-size: auto 100%; background-position: right; background-attachment: fixed; } .section2 { background-image: url("https://static-breeze.nike.co.kr/kr/k..
#17. CSS - Keyframes Keyframes 2개 이사의 애니메이션 중간 상태를 지정합니다. @keyframes 애니메이션이름 { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; } } 1 /* CSS */ .container .item { width: 100px; height:100px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: flex; justify-content: center; align-items: center; } .item:hover { animation: my-animation 3s infinite alternate; } @keyframes my-animation{ 0..
#16. CSS - Flex items 속성 :: shrink shrink container가 감소할 때 item이 감소하는 비율을 설정하니다. 숫자가 크면 더 많은 너비가 감소합니다. grow와 마찬가지로 item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다. 기본값은 1입니다. flex-shrink: 감소너비; 현재 너비가 100px인 두 개의 item A와 B가 있다고 가정해보겠습니다. 각각 아이템에 flex-shrink를 2, 1로 주도록 하겠습니다. 만약 container의 너비를 30px만큼 줄이면 item A와 item B의 크기는 어떻게 계산이 될까요? 먼저 너비를 계산하기 전에 item A와 item B의 비율을 계산해야합니다. item A의 너비 * item A의 shrink : item B의 너비 * item B의 shrink ite..

반응형