본문 바로가기

728x90

분류 전체보기

(238)
React study / sass 연결시 Node Sass version 5.0.0 is incompatible with ^4.0.0. 충돌나서 그럼 지웠다가 4.0.0버전으로 다시 깔면 된다 npm이면 uninstall yarn이면 remove 로 지워주면 됨 👇 해결방법 https://guswnl0610.github.io/react/react-sass-error/
react study / 배열 입력 / 수정 / 삭제 app.js import './App.css'; import React from 'react'; import { useRef } from 'react'; import { useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser' function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name, value } = e.target; setInputs({ ...inputs, [nam..
react study / input처리하기 / 여러개 input 처리 https://binggamel.tistory.com/m/100 react study / 컴포넌트에서 값 받아 바꾸기 Counter.js import React from 'react'; import { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber +.. binggamel.tistory.com 👆컴포넌트 값 바꾸기 / useState 사용 input을 받아 처리하기 import React from 'react'; import { useState } from 'react'; function..
react study / 컴포넌트에서 값 받아 바꾸기 Counter.js import React from 'react'; import { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber- 1); } return ( {number} +1 -1 ) } export default Counter; 매우 쉬운 예제! 한번 해보자 버튼을 달아주고 누르는대로 숫자 바꾸기 onClick 이번트를 넣어준다 on이벤트이름 = {실행하고자..
react study / props 개념 이해 app.js import './App.css'; import React from 'react'; import Hello from './Hello'; function App() { const name = 'react'; const style = { backgroundColor: 'black', color: 'aqua', fontSize: 24, padding: '1rem' } return ( {name} {name} ); } export default App; app.css .gray-box { background: gray; width: 64px; height: 64px; } properties 👉 props 어떠한 값을 컴포넌트에 전달해 주어야 할때 사용함 app.js import './App.css'..
react 리엑트 공부 / 시작하기 https://yunyoung1819.tistory.com/122 [React] 리액트 작업 환경 설정하기 리액트 작업환경 설정하기 준비물 : node.js, VSCode 등 Node.js 설치하기 Node.js 를 LTS 버전으로 설치한다. 윈도우의 경우 노드 공식 홈페이지 다운로드 페이지에서 설치한다. (https://nodejs.org/kr/) macOS.. yunyoung1819.tistory.com 👆설치는 이곳을 참고했다 https://velopert.com/3626 누구든지 하는 리액트 3편: JSX | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다! 컴포넌트 파일 ..
MogoDB / Mongoose / populate / Nosql로 조인 구현 MogoDB / Mongoose / populate / Nosql로 조인 구현 www.zerocho.com/category/MongoDB/post/59a66f8372262500184b5363
210120 개발 공부 백개발에 들어가기 전 디비구조가 정확히 짜여있지 않으면 수정이 끝이 없을것 같아 맨땅에 헤딩으로 일단 디비 시작 야매로 해오다가 하나씩 정석으로 알아가는 재미도 있음 https://mongoosejs.com/docs/populate.html Mongoose v5.11.12: Query Population Populate MongoDB has the join-like $lookup aggregation operator in versions >= 3.2. Mongoose has a more powerful alternative called populate(), which lets you reference documents in other collections. Population is the process ..

728x90