본문 바로가기

배운 것

 (29)
[js] Destructuring assignment (해체할당) 1. 배열의 해체 할당 var colors = ['red', 'blue','white']; var first = colors[0]; var second = colors[1]; var third = colors[2]; colors 배열의 요소들을 전부 펼쳐서 var [first, second, third] = colors; 위와 같이 배열 안에 1:1 순서대로 변수를 선언하는 것과 같다. 2. 객체의 해체 할당 const iu = { name : '아이유', age : 25, gender : 'female' } const { name, age, gender } = iu console.log(name, age, gender) // '아이유', 25, 'female const loginInfo = { devi..
[js] ES6 클래스 방식의 인스턴스는 name 프로퍼티를 찾는다 ES5 방식의 인스턴스는 name 프로퍼티를 찾지 못한다 예제 function G () {} G.method1 = function (){} G.prototype.method2 = function (){} const g = new G() console.log(G.method1.name, g.method2.name) 코드 해석 : -> G.method1 = function (){} G 를 생성자 함수로 사용했고 함수는 일급 객체이기 때문에 프로퍼티를 할당할 수 있다. -> G.prototype.method2 = function (){} G 의 프로토타입이 할당할 메서드들은 인스턴스(g)에 상속이 된다. 그렇기 때문에 -> g.method2 인스턴스 입장에서 자신의 것처럼 호출할 수 있다. G의 메서드 이름과..
훅스에서 setState는 비동기다 제로초님 강의 - 웹 게임을 만들며 배우는 React 2-2 일반 클래스 컴포넌트로 사용했던 setState this.setState((prevState) => { return { result: '정답! ' + prevState.result, firstNumber: Math.ceil(Math.random() * 9), secondNumber: Math.ceil(Math.random() * 9), value: '', beforeValue: this.state.value } }); 리액트에서 state 상태 변화가 일어날 때 setState 함수를 사용하는데 이 함수는 비동기식이라 카운트 함수와 같이 이전 값에 변화를 줘야 하는 경우 부작용이 일어날 수 있다. 그래서 setState 함수 안에 preveSt..
REST API란 REST REpresentational State Transfer 소프트웨어의 네트워크 구축하는 방법론이라고 한다. 웹은 서버와 클라이언트로 구분되어 있다. 클라이언트는 서버로 요청을 보내고, 서버는 그 요청에 대한 응답을 클라이언트에게 보낸다. REST API를 사용하는 웹앱은 URL를 통해 서버에게 요청을 하고, 서버는 html, json 등으로 응답을 한다. 웹에서 REST API를 사용하기 위해 HTTP의 5가지 메소드를 이용하는데 1. GET 2. POST 3. PUT 4. PATCH 5. DELETE 가 있다. GET : GET을 통해 해당 URL로 접근하면 이미 저장된 리소스를 조회한다. POST : POST를 통해 해당 URL를 요청하면 리소스를 생성한다. PUT : PUT을 통해 해당 리..
GET과 POST 강의를 보며 많이 보았던 단어 GET과 POST. 이 둘의 차이는 뭘까? 한 번 더 짚고 넘어가자. GET, POST 서버로 본인이 가지고 있는 데이터를 전달하기 위해 사용한다. 기능적으로 같은 역할을 하는 둘을 구분하는 이유는 보안과 전달방식, 전달하는 양에 따라 차이점이 발생한다. GET GET 방식은 데이터를 URL에 넣어서 전달하는 방식이다. GET 방식으로 데이터를 얻는 경우 http://localhost:2000/user?name=홍길동 과 같이 입력한 정보가 URL에 노출이 된다. 1. 한 번의 데이터 요청 시 전송 데이터의 양에 제한이 있다. 2. 저장된 데이터를 단순히 조회할 때 사용한다. 3. URL에 쿼리의 이름과 값이 연결되어 표시된다. POST POST 방식은 바디에 데이터를 넣어..
리액트 커스텀 훅 사용하기 => useTab const contentAPI = [ { tab: "section 1", content: "i am the content of the section1" }, { tab: "section 2", content: "i am the content of the section2" } ]; const useTab = (initialTab, allTabs) => { // allTabs 이 배열이 아닐 때 함수 종료 if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialTab); return { currentItem: allTabs[currentIndex], changeItem:..
리액트 커스텀 훅 사용하기 => useInput 리액트 훅으로 나만의 커스텀 함수를 만들 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; // mr.라는 값이 기본으로 들어가고, // 인풋값 변화시 event.target이 콘솔에 찍히는 커스텀훅 const useInput = initialValue => { const [value, setValue] = useState(initialValue); const onChange1 = event => { console.log(event.target); }; return { value, onChange1 }; }; const App = () => { // useInput 이라..
리액트 훅 (Reack Hooks) 간단 소개 리액트 훅이란? 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능이다. 즉, 기존에 훅스가 생기기전에 우리는 state를 함수형 컴포넌트에서 사용할 수 없어서 state를 가지고 작업하고 싶으면 클래스 컴포넌트에서 사용했다. 그럼... 함수형 컴포넌트와 클래스 컴포넌트의 차이는? 생김새부터 찾아봤다. 함수형 컴포넌트 const App = () => { return ( ... ) } 클래스형 컴포넌트 class App extends React.Component { render () { return ( ... ) } } 위의 코드만 봐도 함수형 컴포넌트가 훨씬 직관적이고 짧다. 버튼을 누르면 숫자가 증가하는 예제를 통해 조금 더 자세히 알아보자. class App extend..

티스토리툴바