분류 전체보기
-
[react] useEffect가 두 번 실행되는 현상react+vue 2022. 9. 23. 15:52
react Strict모드 때문인데 next.config.js가 있다면 그 안에 reactStrictMode를 false로 수정하면 된다 나 같은 경우에는 없었는데 찾아보니 index.js에서 설정을 변경할 수 있었다. index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to s..
-
[react] styled-componentsreact+vue 2022. 9. 23. 14:36
기존 스타일 적용 방법 function App() { const a = { backgroundColor: "red" }; return ( 안녕 ); } 단점 : 자동완성이 안된다. 주의 사항: style을 만들때는 함수안에 만들지 말것. 정적 코드이기 때문에 UI가 reload될 때마다 읽어지는 것을 방지한다. css파일 만들기 src폴더 우클릭→새파일→.css App.css .box-style{ background-color: pink; } App.js import './App.css'; function App() { const a = { backgroundColor: "red" }; return ( 안녕 css파일로 적용 ); } export default App; styled-components 다..
-
[정보처리기사] 정처기 재수 1일차 : 요구사항 확인정보처리기사 2022. 9. 23. 13:15
소프트웨어 개발 방법론 소프트웨어 생명주기 모델 소프트웨어 생명주기(Software Development Life Cycle) 시스템의 요구분석부터 유지보수까지 전 공정을 체계화한 절차 소프트웨어 생명주기 모델 프로세스 요구사항분석 설계 구현 테스트 유지보수 소프트웨어 생명주기 모델 종류 폭포수 모델 (선형 순차적 모델, 고전적 생명주기 모델): 각 단계를 확실히 마무리 지은 후 다음 단계로 넘어가는 모델 프로토타이핑 모델 : 고객이 요구한 주요 기능을 프로토 타입으로 만들어 고객의 피드백을 반영하여 소프트웨어를 만들어가는 모델 나선형 모델 : 시스템 개발 시 위험을 최소화하기 위해 점진적으로 완벽한 시스템으로 개발해 나가는 모델 반복적 모델 : 구축대상을 나누어 병렬적으로 개발 후 통합 하거나, 반복적..
-
[react] useRefreact+vue 2022. 9. 22. 14:56
태그의 속성을 동적으로 변경할 수 있는 방법 div태그 배경색 동적으로 변경하기 function App() { const myRef = useRef(null); return ( { myRef.current.style.backgroundColor = "red" }}> 박스 ); } export default App; 태그 속성 ref에 정의한 useRef를 지정해준다. button을 클릭하면 useRef의 current속성의 style.backgroundColor에 색을 지정해 준다. 리스트로 뿌려준 값 속성 동적으로 변경하기 먼저 배열을 만들고 배열의 값을 뿌려준다 function App() { const myRef = useRef(null); const [list, setList] = useState(..
-
[react] useMemoreact+vue 2022. 9. 22. 14:54
문제 상황 상태변수 감지로 인해 호출하지 않아도 될 함수까지 호출해버리는 현상 function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return setStr("안녕")}>문자 변경 { setList([...list,10]); }}>리스트값 추가 {list.map(i => ({ i}))} { str}:{getAddResult..
-
[react] Too many re-renders. React limits the number of renders to prevent an infinite loop.react+vue 2022. 9. 22. 14:50
react 실습을 하던 중 잘 따라하고 있다고 생각했는데 위의 에러 메세지를 만났다. 문제 코드 function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return 문자 변경 { setList([...list,10]); }}>리스트값 추가 {list.map(i => ({ i}))} { str}:{getAddResult()} ..
-
[javascript] import/export 방법react+vue 2022. 9. 21. 14:28
Sub.js를 import할 경우 Sub.js export default Sub; ⇒ Sub함수를 외부에 노출시킨다. 외부에서 Sub.js를 사용할 경우 import 함수이름 from 파일 경로로 사용한다. 또는 으로 작성하면 자동 import된다. import시 중괄호 {} 사용하는 경우 default 외에 다른 값 또는 함수를 export 시키는 경우 사용한다. Sub.js의 예시 default인 Sub 함수 외에 num 변수를 export시키기 위해 export {num};으로 작성하였다. import import {변수} from ‘경로’; 로 import할 수 있다. 사용시 {변수}로 가져와 사용한다. 앞의 예시에서는 div태그가 없었지만 return값은 하나의 태그만 가능하기 때문에 Sub태그..
-
[react] useEffectreact+vue 2022. 9. 21. 14:22
hooks라이브러리의 useEffect UI가 최초 로드될 때 혹은 의존 상태 변수가 변경될 때 실행되는 함수다. useEffect function App() { return ( {data} { setData(data+1)}}>더하기 ); } export default App; 더하기 버튼을 누를 때마다 data가 1씩 증가한다. function App() { //실행시점: //1.App()함수가 최초 실행될 때(마운트될 때) //2.상태 변수가 변경될 때 const download = () => { let downloadData = 5;//가정 setData(downloadData); }; const [data, setData] = useState(0); useEffect(() => { console...