프리노트

비구조화 할당이란 디스트럭처링은 비구조화 할당/구조분해 할당 이라고도 한다. 배열[]이나 객체{}의 값을 개별로 변수에 담을 수 있게하는 표현식(expression) 기본문법(배열) [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(a1,a2); // 1 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] console.log([a1,a2,rest_a]); // [1, 2, Array(7)] //전개 연산자 이후 변수 입력 / 다른 속성일 경우 에러 발생 //[a1, a2, ...rest_a, a3] = [1, 2, 3, 4, 5,..

Developer/React 2022. 11. 23. 18:09

forEach() 반환 값을 항상 저장하지 않으며 리턴값을 받지 못한다. 콜백 함수가 현재 배열을 변경하도록한다. let arr = [1,2,3,4,5]; let a = arr.forEach(function(value){ return value; }); console.log(a); //undefined let data = [10, 15, 20, 25, 30]; data.forEach( (val, idx, arr) => { data[idx] = val - 5; }); console.log(data); //[5, 10, 15, 20, 25] map() 반환값들로 구성된 새로운 배열을 반환한다. 메모리를 할당한다. let arr=[1,2,3,4,5]; let a = arr.map(function(value){..

Developer/Javascript 2022. 11. 20. 16:45

배열의 기초 배열은 값을 순차적으로 저장하는 용도로 사용 var arr = [1, 2, 3]; // 배열 요소에 접근하기 arr[0]; // 1 arr[2]; // 3 // 배열 요소의 개수 확인하기 arr.length // 3 // 마지막 요소에 접근 arr[arr.length - 1]; //=> 3 Array Method 배열 수정(삭제, 추가) 메서드 let arr = [1,2,3]; // 배열의 마지막 요소 제거, 제거된 요소 리턴 arr.pop(); // 3 // 배열 마지막에 요소 추가, 배열의 크기 리턴 arr.push("new"); // 3 console.log(arr); //-> [ 1, 2, 'new' ] // 배열의 첫번째 요소 제거, 제거된 요소 리턴 arr.shift(); // 1..

Developer/Javascript 2022. 11. 19. 21:11

map 함수는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다 선언방법 및 구성 array.map(function(currenValue, index, array){ //내용... },thisArg); currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 사용법 1.array 자료 갯수만큼 반복적으로 함수안의 코드 실행해준다. ["사과","banana",3].map(function(){ console.log(1) }) // 결과값 // 1 // 1 // 1 var numbers = [4,9,16,25,36]; var result = numbers..

Developer/Javascript 2022. 11. 18. 22:19

일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다. 1.선언방법 React 모듈에서 {useState}를 불러오고 useState()를 선언해서 사용하면 된다. import { useState } from 'react'; let [글제목, 변경글제목] = useState('남자 코트 추천'); let [글제목, 변경글제목] = useState(초기값 생략 가능); 2.데이터 변경 방법 state 변경함수는 ()안에 넣은걸로 state를 갈아치워주는 함수..

Developer/React 2022. 11. 16. 20:01

1.Github page 생성 2.Github page 패키지 설치 깃허브 페이지 생성을 도와주는 패키지며 React 프로젝트에 설치해준다. npm install --save gh-pages 3. Package.json 1)프로젝트 폴더에 있는 Package.json을 열어 아래 코드를 추가해준다. "homepage": "" //신규 작성 부분 2)"scripts" 하위에 "scripts": { ... "deploy": "gh-pages -d build", //추가부분 - 깃허브 페이지에 build 폴더를 배포하겠다는 의미 "predeploy": "npm run build" //추가부분 - 배포 전에 build가 되어있지 않다면 build부터 실행 }, 4. build 배포용 파일로 만들기 위해 buil..

Developer/Git 2022. 11. 15. 18:17

Git을 사용하면서 오류 이슈 모음 1) error: failed to push some refs to '주소’ 원격저장소(github)에 내 로컬(내컴퓨터)에는 없는 파일이 있을 때 push하면 발생하는 오류이다. 이럴때는 원격저장소에서 내 로컬에 저장하지 않은 파일을 pull한 후 원격저장소에 push를 해야한다. error: failed to push some refs to 에러 error:failed to push some refs to git push를 했을때 아래와 같이 error: failed to push some refs to 에러가 발생하는 경우가 있다 이는 원격저장소(github)에 내 로컬(내컴퓨터)에는 없는 파일이 있을 때 내 파일을 p sosoeasy.tistory.com

Developer/Git 2022. 11. 15. 18:07

Props와 State React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용됨. Props 불변의 데이터 부모로부터 전달 받음 변경 불가 State (상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 Props는 부모 컴포넌트로 부터 상속 받는 데이터이며, 데이터를 변경할 수 없음. Props는(함수 매개변수 처럼 ) 컴포넌트에 전달 State는 내부(컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음. State는 (함수 내에 선언된 변수처럼 ) 컴포넌트 안에서 관리 참고 사이트 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org [React] Pr..

Developer/React 2022. 11. 15. 17:59