kingsubin kingsubin

React-Router 페이지간의 이동에서 사용된다. 설치 npm install react-router-dom --save # 여기서 왜 -- save 붙이는가 ? package.json 의 dependecies 안에 모듈이 추가된다. 만약 다른 프로젝트에 package.json 을 옮겨 npm install 하게 되면 dependencies 내의 모듈을 자동으로 설치해준다. 꼭 필요한 모듈을 -- save 명령어와 함꼐 설치하게 되면 다른 프로젝트 시작할때 npm install 한 번으로 필요한 모듈을 한번에 설치할수있다. -> npm version 5 부터는 기본값이라서 굳이 쓸 필요 없음. exact 역할

NPM (node pakage manager) 라이브러리를 담고있는 저장소 역할 pakage.json 에 상세히 정의가 되어있다. npx은 패키지 러너 라고 생각, npm 5.2.0 부터 추가되었다, npm install ~~ -g 가 없으면 local 에 설치 npm install ~~ -g 가 있으면 글로벌로 설치 (프로젝트 안에서만이 아니고 컴퓨터 안에 설치) 원래는 create-react-app을 사용할때 npm install -g crerate-react-app 이런 식으로 사용해서 global 디렉토리에 설치했다. 근데 이제는 npx를 이용하여 그냥 레지스트리에 있는걸 가져올 수 있다. npx가 npm registry 에서 create-react-app 을 찾아서 다운로드 없이 실행시켜준다. ..

컴포넌트 초기 생성 constructor constructor(props) { super(props); } : 컴포넌트가 새로 만들어질 때마다 호출된다. componentDidMount componentDidMount() { // 외부 라이브러리 연동 : D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청 : Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 } : 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 컴포넌트 업데이트 static getDerivedStateFromProps static getDerivedStateFromProps(nextProps, prevState) { // setState 를 하는 것이 아니라 // 특정 pro..

리액트가 만들어진 이유 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 시작되었다. 그러면 "업데이트를 어떻게 해야 할 지"에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워질 것이다. 하지만, 정말로 동적인 UI 를 보여주기 윟서 모든걸 다 날려버리고 모든걸 새로 만들게 된다면, 속도가 굉장히 느릴것이다. 하지만, 리액트에서는 Virtual DOM 이라는 것을 사용해서 이를 가능케 했다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 ..

Promise is a JavaScript object for asynchronous operation state: pending -> fulfilled or rejected Producer vs Consumer 1. Producer when new Promise is created, the executor runs automatically const promise = new Promise((resolve, reject) => { // doing some heavy work (network, read files) console.log('doing something....'); setTimeout(() => { // resolve('ellie'); reject(new Error('no network'));..

JavaScript is synchronous Execute the code block in order after hoisting hoisting : var, function declaration console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); // 1, 3, 2 Synchronous callback function printImmediately(print) { print(); } printImmediately(() => console.log('hello')); Asynchronous callback function printWithDelay(print, timeout) { setTimeout(print, time..

JSON (JavaScript Object Notation) simplest data interchange format lightweight text-based structure easy to read key - value pairs used for serialization and transmission of data between the network and the network connection independent programming language and platform 1. Object to JSON stringify (obj) let json = JSON.stringify(true); console.log(json); // true json = JSON.stringify(["apple", ..

Quiz // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); // 'apple,banana,orange' // Q2. make an array out of a string const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(','); console.log(result); // ["🍎", " 🥝", " 🍌", " 🍒"] // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; ..