해물파이의 괴발개발 TIL

https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com *설치 후 뜨는 파워 쉘에서 nvm이 안 깔린 것 처럼 보이지만,그 창을 끄고 다시 파워 쉘을 키면 잘 작동한다.

URL.createObjectURL(objectURL 혹은 blob) 예시) inputThumbnailHandeler(e) { this.setState({ thumbnail: URL.createObjectURL(e.target.files[0]) }) } 특정 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성한다. 생성한 값은 현재 창이나, 객체를 생성한 문서 내에서만 유효하다. 새 객체 URL은 특정 File 객체나 Blob 객체로 표현할 수 있다. 매개변수로 전달한 blob는 URL을 생성할 File 객체나 Blob 객체이다. 생서된 objectURL은 해당 파일의 전체 내용을 URL 텍스트로 변환한 값이다. 객체의 URL의 사용을 마쳤다면, 아래 메서드를 호출해 메모리에..

Form submission canceled because the form is not connected 에러가 떴을 때는 버튼의 type이 button이 맞는지 확인해보자. 에러의 원인은 양식이 submit 되지 않는 것인데 button의 타입을 type='button'으로 바꾸면 해결된다.

Redux는 상태(state) 관리 프로그램으로 사실 React에 속한 프로그램이 아니다. Redux는 React 없이도 사용할 수 있는 상태 관련 라이브러리이다. Redux의 세 가지 원칙 1. Single source of truth - 동일한 데이터는 항상 같은 store에서 가지고 온다. 2. State is read-only - state는 직접 수정할 수 없고 Action으로 새로운 state를 생성하는 방식으로 사용한다. 3. Changes are made with pure functions - Reducer는 순수 함수어야 불변성을 지킬 수 있다. Redux는 크게 Action, Dispatch, Store, Reducer 이 네 가지를 유기적으로 연결해 상태를 관리한다. Action Ac..

설치 $npm install eslint-plugin-react-hooks --save-dev eslint 설정 // Your ESLint configuration { "plugins": [ // ... "react-hooks" ], "rules": { // ... "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies } }

useState는 state를 설정한다. -useState의 사용법 //다른 훅도 마찬가지지만 useState도 사용시 리엑트에서 임포트해야 한다 Import React, {useState, useEffect} from ‘react’; function Example() { const [count, setCount] = useState(0); //첫 번째 인자인 count는 state가 되고, //두 번째 인자인 setCount는 count를 업데이트하는 setState의 역할을 한다 //useState()에 들어간 0은 state의 일부인 count의 초기값이 된다. //이후 렌더하는 부분에서 return ( You clicked {count} times setCount(count + 1)}> count..

velog.io/@songsong2920/Form-Control

www.zerocho.com/category/React/post/579b5ec26958781500ed9955

호출하려는 함수가 리턴값을 가지고 있다면 ()를 붙이고 아니라면 붙이지 않는다? -- 아니다! 혹은 함수를 실행하면 ()를 붙이고 호출하려면 ()를 붙이지 않는다? -- 정확하지 않다! 함수를 하위 컴포넌트를 넘길 때는 넘길 함수를 실행해 반환값을 받는게 아니라 넘길 뿐이므로 ()를 붙이지 않는다. 물론 컴포넌트 내부에서 해당 함수를 실행할 때 반환값이 필요하다면 ()를 붙인다.

express 서버에 클라이언트가 요청할 때 get, options, post 모든 요청에 err_connection_refused가 뜨면서 fetch가 실패했다. 검색해보니 데이터 베이스가 응답을 하지 않았다거나 app.listen()에 port를 입력하지 않아 발생한다는 답변이 많았다. 나의 경우에는 http로 만든 서버를 express로 바꾸는 과정에서 app.listen(port, () => { console.log('server is listening on http://' + ip + ':' + port) }) 이런식으로 사용했을 때 변수 ip 때문에 오류가 발생했다. app.listen(port, () => { console.log('server port is ' + port) }) 로 바꾸니..