일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- ENFJ
- 반응형 이메일
- 노마드코더
- ENFJ포스팅
- bucket list
- 객체지향
- 코딩
- 국비지원
- 리액트
- K디지털기초역량훈련
- redux
- 반응형
- REACT강의
- HTML
- CSS
- class
- 자바스크립트
- object-oriented programming
- JavaScript
- react
- 패스트캠퍼스
- nomadcoders
- 내일배움카드
- 무료리액트강의
- free react course
- 버킷리스트
- 바이트디그리
- React & Redux로 시작하는 웹 프로그래밍
- 이메일 코딩
- Today
- Total
목록react (10)
미미 공부/취미방
Function return을 할 때, 항상 로 감싸서 한 개의 태그만 리턴하는 이유는, JSX를 사용하지 않은 React의 문법 때문이다. return ( Hello ); [JSX를 사용한 코드] return React.createElement( "div", //만드는 태그 {}, //속성 React.createElement("h2", {}, "Hello"), // 자식요소 React.createElement(NewExpenseItem, { expenses: expenses }) ); [JSX를 사용 안 한 코드] React.createElement(만들 태그, 속성, 자식요소) 해당 문법에서 '만들 태그'는 1개만 들어가기 때문에, JSX 문법을 사용할 때, 1개의 태그만 리턴 가능하다.
node, npm, npx가 무엇인가설명을 몇 번 들어도 헷갈려서 정리를 해 놓기로 한다...🙃Node.js일반적인 웹사이트/웹 애플리케이션은HTML을 웹브라우저가 읽어서 보여준다.하지만, Node.js사이트/애플리케이션은JavaScript를 Node.js Runtime이라는 프로그램이 읽어서 보여준다.웹브라우저에 Node.js는 이미 설치가 되어있지만우리 컴퓨터에는 없으니 작업하기 위해서 프로그램 설치가 필요하다.그래서 우리는 Node.js Runtime(Node.js)를 컴퓨터에 설치하는 것!참고 : https://www.opentutorials.org/course/3332/21029 Node.js - 설치 - 생활코딩수업소개 운영체제 별로 Node.js를 설치하는 방법을 소개합니다. 자신의 컴퓨..
npm ERR! code ENOENT npm ERR! syscall open npm ERR! path some/path/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'some\path\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoentnpm start를 했는데 이런 에러 문구가 떴다.package.json을 찾을 수 없다고 말하고 있음. (문제점)(설명)터미널에서 디렉터리 위치가 제대로 되어있는데 npm start만 하면 디렉터리 위치가 바뀌어서 npm이 시작된다...
1) React Component가 하는 일 세가지 Mounting, Updating, Unmounting 2) Mounting 코드가 만들어지고 뿌려지는 함수들 constructor() : 바닐라 자바스크립트에서 온 애(class를 이해해야됨) static getDerivedStateFromProps() render() componentDidMount() 3) Update 데이터(state)가 업데이트 될때 동작하는 함수들 static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 4) Unmounting 코드가 없어질때 동작하는 함수들 (페이지가 바뀔때 등)..
1) setState()로 state object 변화를 감지하고 render를 다시 동작시켜야 된다. class App extends React.Component { state = { count: 0 }; add = () => { console.log("add"); }; minus = () => { console.log("minus") }; render() { return ( The number is {this.state.count} add minus ) } } add = () => { this.state.count = 1; }; minus = () => { this.state.count = -1; }; 위의 코드는 동작하지 않는다. 그 이유는 add / minus 버튼을 클릭 > state objec..
1) State는 변화하는 데이터를 다루기 위한 것 (Prop은 이런 변화하는 데이터를 다루지 못 함) state를 사용하기 위해서는 App() Function Component를 Class Component로 정의해 주어야 한다. class App extends React.Component {} 위의 코드는 React.Component가 가지고 있는 것들을 가져와서 Class Component named App이 사용하려고 한다고 이해하면 될 것 같다. 2) Class Component App = React.Component React.Component를 가져다 쓰는 App Class Component는 React.Component와 동일하게 render method를 가지고 있다. class App ..