혼자 적어보는 노트

react-router-dom react-route-dom은 SPA앱을 만드는 것을 도와주는 package 페이지마다 다른 html파일이 아니라 다른 페이지처럼 보여주는 것이라고 볼 수 있다. npm에서 설치를 진행한다 npm i react-router-dom 기본 사용법 import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; function App(){ return } - BrowserRouter : history API로 URL과 UI를 동기화 시키는 라우터 - HashRouter: 기본적으로 BrouswerRouter를 사용하지만 HashRouter는 주소 뒤에 #이 붙으며 #뒤에 적는 것은 서버로 전달이 되지 않아 안전한 라우..

hashmap 알고리즘 문제를 풀다가 몰랐던 개념인듯 하여 정리하였다. Map() - Map()은 javascript의 key-value로 이루어진 자료구조 형태 - key를 사용해서 value를 get, set할수 있다. - key의 값은 중복될 수 없는 고유의 값이며, 한 개의 key는 한 개의 value를 가진다. - 배열에서는 key값에 숫자만 가능하지만 Hash Table 에서는 다양한 key값 활용 가능. - key로 사용할 수 있는 데이터 형 : string, object, symbol, function (*number는 안됨) Map() 기본사용 let abc = new Map(); // set() : key와 value값을 넣어준다. abc.set("A", 10); abc.set("B",..

fetch에 대해서는 몇번 접한적이 있었고 이번에 axios를 접하게되어 이전에 접했던 fetch에 대해 다시 정리해보기로 했다. fetch() fetch()를 호출하면 브라우저는 네트워크요청을 보내서 프라미스 타입의 객체를 반환한다. fetch 기본 사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션의 객체를 받으며 promise타입의 객체를 반환한다. url : 접근하고자 하는 URL options : 선택 매개변수, method나 header, body 등을 ..

Lifecycle 모든 component는 여러가지의 생명주기 메소드(lifecycle method)를 가진다. 대표적인 것만 적어보겠다. Mount 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출 - constructor() component가 mount되기 전에 호출 constructor(props) { super(props); this.state = {date: new Date()}; } constructor() 를 구현할 때에는 super(props)를 호출해야 한다. * constructor() 내부에서 setState()를 호출하면 안된다. state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 된다. - render() - compone..

class Components and state state는 보통 동적 데이터와 함께 작업할 때 만들어진다. Class 만들기 class App extends React.Component{ render(){ return Hi hello } } React.component는 return이 아닌 render method를 가지고 있다. function component는 함수이고 return을 한다. class component는 class이고 react component로 부터 extend된다. 그리고 render method안에 넣어야 한다. Class에서 로컬 State 생성하기 class component안에서는 state를 사용할수 있음 state는 object, 동적인 데이터를 넣을 공간이다. c..

Prop-types란 전달받은 props가 내가 원하는 props인지 확인해주는 package. 구성 요소에 전달된 속성의 의도한 유형을 정해줄 수 있다. 구성요소에 전달된 데이터를 확인하고 일치하지 않는 경우 개발 단계에서 경고를 띄워 줌. npm i prop-types //설치 import PropTypes from "prop-types"; npm install을 이용해 설치 해주고 파일 위에 선언 해준다. const fruitList = [ { id: 1, name: "orange", price: "2,000", store: 3 }, { id: 2, name: "apple", price: "3,000", store: 5 }, { id: 3, name: "grape", price: "4,000", s..

몇번 this를 접했지만 제대로된 이해가 필요 할 것 같아 정리해보았다. method와 this 자바스크립트에서는 object의 property에 함수를 넣을 수 있다. let user = { name: "Jay", age : 28 }; user.hello = function(){ console.log("hello"); }; user.hello(); //hello user의 property에 함수를 만들어 넣고 해당 object에 할당되어있는 함수 호출이 가능하다. 이 object property에 할당된 함수를 메소드(method) 라고 한다. let user = { name: "Jay", age : 28 }; function hello(){ console.log("hello"); }; user.hel..

데이터에 따른 반복되는 Component 표현 - map() 반복되는 component를 렌터링 하기 위해서는 javascript의 내장 함수인 map()을 사용한다. map함수는 파라미터로 전달된 함수를 사용해 원하는 규칙에 따라 변한한 다음 새로운 배열을 생성하는 함수이다. const fruitList = [ { name: "orange", price: "2,000" }, { name: "apple", price: "3,000" }, { name: "grape", price: "4,000" }, { name: "banana", price: "5,000" } ] fruitList라는 간단한 object를 만들어 보았다. 이 fruitList의 데이터를 토대로 javascript의 map()함수를 이용하..