본문 바로가기

분류 전체보기

(104)
[JavaScript] 배열 unshift(), shift(), push(), pop() unshift(값)배열 앞에 요소를 추가합니다.요소의 개수가 늘어 납니다.        ar.unshift('사과');                ar.unshift('대추');                ar.unshift('딸기');  shift()제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다. 이렇게 하면 두 번째 요소가 첫 번째 요소가 됩니다. 요소의 개수가 줄어 듭니다.          let data1 = ar.unshift();     let data2 = ar.unshift();     let data3 = ar.unshift();push(값)끝에 요소를 추가합니다.요소의 개수가 늘어 납니다.        ar.push('배');                ar.pus..
[JavaScript] 배열 요소의 반복(for, for ~ in, for ~ of, forEach) 배열의 요소의 모든 내용을 순회하는데는 방법이 존재 합니다.         let ar = ["밤","배","감","사과","대추"];        document.write(`${typeof(ar)}(${ar.length}개) : ${ar}`);        document.write(``); 전통적인 for 반복문을 사용하는 방법 : index의 범위인 0 ~ length-1까지를 반복하며 [](대괄호)로 접근합니다.         // 배열 요소의 반복        for(let i=0;i            document.write(`ar[${i}] = ${ar[i]}`);        }        document.write(``); for ~ in : 배열의 크기를 자동으로 판단하여 ind..
[JavaScript] 배열 요소의 추가/수정/삭제 하기 배열의 요소에 접근하기 위해서는 [](대괄호)안에 위치값(index)을 지정하여  사용합니다.위치값(index)은 항상 0부터 시작합니다.요소의 개수가 n개일 경우 위치값(index)의 범위는 0 ~ n-1까지 입니다.다른 언어와 다르게 위치값(index)의 범위를 넘는 값을 지정해도 에러가 발생하지 않습니다. undefined가 나옵니다.                let ar = ["밤","배","감","사과","대추"];        document.write(`${typeof(ar)}(${ar.length}개) : ${ar}`);         document.write(`요소의 개수(length 속성) : ${ar.length}개`);        // 첨자를 이용하여 개별요소에 접근한다.(첨자..
[JavaScript] 배열 생성하기 자바스크립트에서 배열 다루는 방법에 대하여 알아보겠습니다. 배열은 여러항목의 컬렉션을 단일 변수에 저장할때 사용합니다. 자바스크립트의 배열은 다른 언어의 배열과는 다릅니다. 흡사 다른언어의 리스트와 더 비슷합니다. 자바스크립트는 동적타이핑 언어이므로 다음과 같이 정수, 실수, 문자열, 함수,객체 등 모든 요소를 배열의 요소로 사용가능합니다. 그리고 요소의 추가/삭제도 가능합니다.       [1, 3.14, '문자열', true, ()=>{alert('Hi!!');}, {name:"한사람", age:22}, [11,22,33]] 이제 하나하나 알아 보도록 하겠습니다.배열만들기자바스크립트에서는 배열을 만들때 Array객체를 이용하거나 [](대괄호)를 이용합니다. 빈 배열의 생성은 다음과 같이 합니다.   ..
[JavaScript] 정적 타입 (Static Typing) & 동적 타입 (Dynamic Typing) 정적 타입 (Static Typing) : 변수의 타입이 컴파일 시간에 결정되고, 그 이후에는 변경할 수 없습니다.                                             c/c++, Java ....동적 타입 (Dynamic Typing) : 변수의 타입이 실행 시간에 결정되며, 실행 중에도 타입이 변경 가능합니다.                                                  python, javascript......정적 타입 (Static Typing) 장점컴파일 시 타입 검사 : 코드를 작성하는 동안 발생하는 많은 타입 오류를 컴파일 시간에 미리 감지할 수 있습니다.성능 최적화 : 정적 타입 정보를 활용하여 컴파일러가 코드를 더 효율적으로 최적화할..
[React Exam 25] google font 사용하기 Browse Fonts - Google Fonts Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 좌측의 language 에서 "korean"을 선택후 원하는 폰트를 클릭한다.원하는 폰트를 클릭한다. "Get Font" 버튼을 클릭한다. " Get embed code"버튼을 클릭한다. "@import" 라디오버튼을 클릭한다. css파일을 만든다. 보이는 코드를 복사해서 붙여 넣는다.12345678@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');.n..
[React Exam 24] dayjs 사용하기 홈페이지 입니다.Day.js · 2kB JavaScript date utility library Day.js · 2kB JavaScript date utility library2kB JavaScript date utility libraryday.js.org 설치입니다.npm install dayjs # or yarn add dayjs 포함입니다.import dayjs from 'dayjs'; import isLeapYear from 'dayjs/plugin/isLeapYear'; // 윤년 판단 플러그인 import 'dayjs/locale/ko'; // 한국어 가져오기 dayjs.extend(isLeapYear); // 플러그인 등록 dayjs.locale('ko'); // 언어 등록 1. create..
[React Exam 23] 이미지 홀더 사용하기 이미지 홀더 사용하기 https://github.com/imsky/holder GitHub - imsky/holder: :city_sunrise: Client-side image placeholders.:city_sunrise: Client-side image placeholders. Contribute to imsky/holder development by creating an account on GitHub.github.com 설치입니다. npm : npm install holderjsyarn : yarn add holderjs포함입니다.import Image from 'react-bootstrap/Image';import 'holderjs' 1. create-react-app를 이용하여 app009..