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]; ..
- Total
- Today
- Yesterday
- java
- REST API
- 백준
- js api
- 백기선 스터디
- JS 딥다이브
- Spring Security
- 이펙티브자바 아이템59
- 이펙티브자바 아이템60
- 가상 면접 사례로 배우는 대규모 시스템 설계 기초
- 모던자바스크립트
- HTTP 완벽가이드
- 드림코딩
- http
- 이펙티브자바
- 패스트캠퍼스 컴퓨터공학 완주반
- js array
- 킹수빈닷컴
- HTTP 완벽 가이드
- 김영한 http
- 이펙티브자바 스터디
- GCP
- ㅇㄷㅇㅈ
- dreamcoding
- JPA 연관관계 매핑
- 김영한 JPA
- 프로그래머스 SQL
- js promise
- BOJ
- 프로그래머스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |