jQuery의 json, JS의 fetch와 동일한 기능 1. 터미널 창에 'npm install axios --save' 을 입력해 axios를 설치해준다. 2. import axios from 'axios' 3. axios.get(url) .then(데이터 불러오기 성공시 작동되는 구문) .catch(데이터 불러오기 실패시 작동되는 구문)

다른 사람 저장소의 react프로젝트를 내 로컬 작업환경으로 가져올때 ​ 1- 내 작업폴더에 다른 사람 저장소 클론으로 복사 git clone 원격저장소주소 2- 저장소를 복사하고 나면 작업폴더안에는 node_module이 설치되어 있지 않음, --> 터미널창을 열어 모듈 설치 (package.json파일 안에 react개발환경 세팅을 위한 모든 기록이 담겨있으므로 npm install만 입력하면 해당 개발환경이 자동 설치되면서 세팅완료) npm install 3- node_modules설치가 완료되면 npm start로 프로젝트 구동시작 npm start 해당 리액트 작업을 다시 내 원격 저장소에 새로 업로드할때 1- 다른사람의 원격 저장소 정보를 삭제 git remote remove origin 2-..

▶ react파일 만들기 cmd창에서 데스크탑으로 이동(cd desktop) 후 npx create-react-app '파일명' 입력 Happy hacking! 이라는 문구가 뜨면 완료 ▶ 라이브서버 연결하는 법 터미널창에서 npm start 입력 ▶ components index.html에서 App.js 파일을 불러와서 로딩 되는 구조 App.js 파일 안에서도 각 레이아웃을 분리해서 js파일로 만들어 import 하여 불러올 수 있다 각 js파일은 컴포넌트함수를 통해 html값을 리턴해야 하고, 파일 하단에서 export 구문을 통해 내보내야 한다 ▶ public폴더 안에 있는 파일을 선택할 때 사용하는 구문 process.env.PUBLIC_URL + public폴더 안에서의 파일 경로 ▶ useS..

스크롤시 스크롤값 구하는 구문 window.scrollY window.pageYOffset window.addEventListener("scroll", e=>{ let scroll = window.scrollY(최신브라우저만 지원) || window.pageYOffset(구버전IE지원) }); node로 찍힐 때 배열로 바꿔주는 구문 Array.from(아이템)

getComputedStyle() : DOM의 css속성값을 가져오는 함수 //css로 적용되어 있는 DOM의 스타일을 구할 때 사용하는 구문 let ht = getComputedStyle(boxs[index]).height; ht = parseInt(ht); //문자열을 숫자로 변환 parseInt( string, n ) : 문자열을 정수로 바꾸는 함수 string을 n진법일 때의 값으로 바꾼다. (n은 옵션으로 2부터 36까지 입력할 수 있고, 입력하지 않으면 10으로 처리한다.) 소수 부분은 버린다. 0x로 시작하면 16진법으로 처리한다. string의 처리는 parseFloat()와 거의 같다. parseFloat( string ) : 문자열을 실수로 바꾸는 함수 수로 시작할 때 그 수를 실수로 ..

기존 es5 객체지향의 불편한 점 1. 생성자 함수와 그에 수반되는 다양한 메서드들이 따로 떨어져 표기되어 있으므로 구조적으로 안정적이지 않음 2. 특정 생성자의 프로토타입에 메서드를 등록하기 위해서는 생성자.prototype 형식으로 일일이 지정을 해줘야 함 3. 메서드 안쪽의 this 값이 이벤트문, ajax문, each문, setTimeout문에서는 값이 변경이 되기 때문에 일일이 .bind(this)로 해당 값을 고정시켜야 함 ES6클래스방식으로 변환하는 순서 1. class 생성자명{} 으로 전체 코드를 묶어줌 2. 그 안쪽에 명시적으로 constructor함수를 생성 3. 해당 클래스 블럭 안쪽에 prototype에 담겨야되는 메서드를 넣어줌 4. 메서드는 생성자.prototype을 생략하고 ..