다른 사람 저장소의 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을 생략하고 ..

절차지향 코드의 불편한 점 - 여러개의 기능을 만들 때, 반복적으로 실행되는 공통의 기능들까지 일일이 코드를 입력해야 함 --> 해결방안: 이벤트+함수 형태 (반복되는 공통의 기능을 함수로 패키징해서 호출하는 식으로 재활용) 이벤트+함수 형태의 불편한 점 - 공통적인 기능 자체는 함수라는걸 이용해서 재사용 가능하지만 전역변수에 저장되는 선택자와 해당 선택자를 불러와서 연결하는 이벤트구문은 필연적으로 계속 반복적인 코드를 입력해야 함 객체지향 - 선택자와 이벤트를 통째로 함수와 같이 기능단위로 패키징 함 객체지향의 기본 개념 - 자주 사용되는 특정 기능을 멤버변수, 메서드 형식으로 패키징을 해서 해당 기능이 필요할 때마다 손쉽게 복사해서 재사용하기 위한 시스템적인 틀 생성자함수(constructor) : ..