본문 바로가기

JavaScript

(21)
Javascript 함수 선언, 익명함수 함수? 프로그래밍 언어에서의 함수는 어떠한 값을 도출해내기 위해 수행하는 코드들의 집합이다. 함수를 사용하는 이유는, 코드의 단순 반복을 줄임으로써 가독성을 높이고 유지보수하기 쉬워지려고 사용한다. Javascript에서 함수 자바스크립트에서의 함수 선언법은 아래와 같다. 함수 선언문 방식 function Study(){ console.log('Javascript!'); } Study(); // Javascript! 익명 함수 let Study = function(){ console.log('Javascript!'); }; Study(); // Javascript! 함수 선언문 방식은 여타 프로그래밍 언어처럼 function 함수명(){...}으로 선언되었다. 익명 함수를 보면 변수를 생성하고 함수를 변..
배열, 객체의 속성을 해체하여 그 값을 여러 변수에 할당하는 Destructuring(구조 분해 할당) 표현식 Destructuring Destructuring(구조 분해 할당)은 배열의 요소나 객체의 속성을 해채하여 그 값을 여려 변수에 할당 할 수 있는 자바스크립트의 표현식이다. 배열에 있는 요소 전체를 개별의 변수에 할당하고 싶거나, 요소의 일부분을 개별의 변수에 할당할때 더 간편하게 담기 위해서 사용한다. Destructuring 사용법 Destructuring을 할 데이터의 형식에 따라 사용법이 다르다. 배열일 경우 요소를 할당할 개별의 변수명을 [ ] (대괄호)로 감싸고 배열을 할당해준다 let [변수명1, 변수명2] = 배열명 객체일 경우 속성을 할당할 개별의 변수명을 { } (중괄호)로 감싸고 객체를 할당해준다 let {변수명1, 변수명2} = 객체명 배열 Destructuring 사용 전 let ..
배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator) 전개 연산자 전개 연산자는 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본(원본에 영향을 미치지 않는)을 만들 수 있으며, 여러개의 배열이나 객체를 손쉽게 병합할 수도 있다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자이다. 사용법은 객체나 배열을 담은 변수 앞에 '...'을 붙이면 된다. ex) 배열일 경우 변수 = [...변수명] 객체일 경우 변수 = {...변수명} 전개 연산자 사용법 배열에서 전개 연산자 사용 배열 복사 let numArr = [1, 2, 3, 4, 5, 6]; let copyNumArr = [...numArr]; console.log(numArr, copyNumArr); console.log(numArr === copyNumArr); (실행결과..
배열의 값을 추가 및 제거 배열에 값을 추가 인덱스 값을 지정하여 값 추가 Javascript는 C처럼 배열의 공간을 할당하고 사용하는게 아니라 동적으로 공간이 할당되기 때문에 원하는 인덱스를 주고 값을 추가할 수 있다. 하지만 마지막 요소에 추가하는게 아니라 마지막 요소에서 조금 멀리 떨어진 곳의 인덱스에 값을 추가하게 되면 마지막 요소부터 새로 추가한 요소까지는 빈 인덱스로 남게된다. selectIndex.html (실행결과) HTML,CSS,,,,JavaScript 6 push 메소드 사용 push 메소드를 사용하여 배열에다가 값을 추가할 수 있다. 그러나 이 메소드를 사용시에는 배열의 마지막 요소 뒤에만 추가할 수 있다. push.html (실행결과) HTML,CSS,Javascript 3 splice 메소드 사용 push..
React 개발 환경 구성, 실행 Win10 운영체제를 기준으로 작성된 게시물입니다. React를 사용하기 위해서는 npm을 필요로 하고 npm을 설치하려면 Node.js의 홈페이지에서 Node.js를 설치해야 한다. (2020.09.12 기준)홈페이지에 들어가보면 설치 선택사항에 LTS버전과 Current버전이 있는데, LTS는 장기적으로 지원이 되는 버전이며 Current는 현재 최신버전이다. 취향대로 설치하여 사용하면 되고 필자는 Current버전으로 설치하였다. 설치가 끝났으면, 설치가 제대로 되었는지를 확인하기 위해 cmd를 열어 npm 버전 체크를 한다. npm -v 출력 결과로 버전이 나온다면 설치가 제대로 되었다는 것 이다. 그럼, 이제 리액트를 사용하기 위해 cmd에서 npm를 이용해 create-react-app을 설치..