rhanziy

오브젝트나 클래스를 만들면 데이터를 출력/수정할 때 데이터의 무결성을 위해 함수를 만들어서 다룬다. 거기서 get과 set을 이용해 소괄호를 안쓰고도 기능을 실행시킬 수 있다. 함수의 프로퍼티화 라고 함. var 사람 = { name: 'Park', age : 29, get nextAge(){ return this.age + 1; // return이 있어야함. 파라미터x }, set setAge(age){ this.age = parseInt(age); // 파라미터가 1개 있어야함. } } // property화. 소괄호를 붙이지 않고도 기능실행 사람.setAge = '20'; 사람.nextAge; 주석에 써놨다싶이 get을 쓸 땐 return을 명시해줘야하고, 파라미터는 작성하면안됨 set을 쓸 땐 파..

ES6 문법으로 상속을 구현해보자. extends의 출현!!! 부모 class의 constructor를 상속받아서 새로운 class를 생성하기. class 할아버지 { constructor(name){ this.성 = 'Kim'; this.이름 = name; } sayHi(){ console.log('할아버지예요'); } } var 할아버지1 = new 할아버지('만수'); class 아버지 extends 할아버지 { constructor(name){ super(name); // 부모 class의 constructor this.나이 = 50; } sayHi(){ console.log('아버지예요'); super.sayHi(); // 부모 class의 prototype } } var 아버지1 = new 아..

// 옛날방식 상속기능 const Student = function(name, age){ this.name = name, this.age = age } Student.prototype.sayHi = function(){ console.log(`안녕 나는 ${this.name}이야`); } let 학생1 = new Student('Kim', 20); 학생1.sayHi(); var arr = [1,2,3]; var arr2 = [3,6,8,3,2,5,7]; Array.prototype.remove3 = function(){ for(let i = 0; i < this.length; i++){ if(this[i] == 3){ this.splice(i,1); } } } arr.remove3(); arr2.remo..

https://cocoon1787.tistory.com/831 [GitHub] 리액트 프로젝트 GitHub Pages에 호스팅하기 🚀 작년에 포트폴리오를 HTML, CSS, JS로 만들어서 GitHub Pages에 Hosting 호스팅 하였는데 Web관련 지식이 많이 부족했던 시기였고 썡 HTML로 작성해서 프로젝트가 추가될 때마다 업데이트해야 하는 작 cocoon1787.tistory.com 1. git 저장소 생성 2. 올릴 리액트 프로젝트 터미널에 차례대로 작성 git init // 프로젝트에 git 설치 git add -A // 해당 프로젝트 폴더 내의 파일 전부 올리기 git commit -m "first commit" // commit 메시지 작성 git remote add origin htt..

리액트에서 페이지를 나누고 싶을 때 react-router-dom 이라는 외부 라이브러리를 설치해서 구현해보자. 터미널 오픈 후 npm install reat-router-dom@6 설치 후 index.js 셋팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); App 컴포넌트를 BrowserRouter로 감싸준다. 이제 라우터로 url 경로마다 다른 페이지를 보여주고 싶을 때 (App.js) import { Routes, Route, Link } from 'react-router-dom'; function App(){..

오늘은 react-query 라이브러리를 설치했다. 더보기 서버 상태를 관리해주는 react-query 라이브러리 장점 1. 성공/실패/로딩 중 쉽게 파악 가능 2. 틈만나면 refetch 해줌 3. 실패 시 retry 해줌 4. state 공유 안해도 된다.(ajax코드 다시 쓰면 됨) 5. ajax 결과 캐싱 가능 => 실시간 데이터 전송이 필요한 페이지에서 주로 쓰인다. ( ex. 코인거래소) 사용법을 알아보자. 터미널 오픈 후 npm install react-query 그리고 index.js에서 설정해줘야 할 몇가지. import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient()..

저번 글에서 redux toolkit을 설치하고 store.js 파일에 공유할 state들을 모아놨다. 이제 useState처럼 state를 변경하는 방법. 좀 복잡하다 ㅋ let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ] }) 장바구니에 담긴 아이템 data가 들어있다. 중복된 아이템이 추가되면 수량을 올리거나, 장바구니 아이템을 추가/삭제하는 기능을 만들어 state를 변경하고 싶다면 reducers를 이용해 기능을 추가하면 된다. let cart = createSlice({ name : ..

컴포넌트끼리는 state를 props 문법으로 공유할 수 있다. 하지만 공유할 state가 많다면,... 자식 컴포넌트가 많은 복잡한 구조라면....! redux를 설치해보자. 리액트와 리액트 돔 버전이 18.1.x 이상이여야 설치가 가능하니 package.json파일에 가서 버전 확인/수정해준다. 터미널 오픈 후 install. npm install @reduxjs/toolkit react-redux 그리고 index.js에서 필요한 셋팅 import { Provider } from "react-redux"; // Provider import import store from './store.js' // Provider로 을 감싸주면 된다. 속성은 store //그럼 이제 과 그 모든 자식컴포넌트들은 s..