성연커밋 : )

리액트 index.js를 보면, import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVit..

버튼을 클릭하여, 주소가 전환되면서 컴포넌트가 바뀌는 모습을 나타내고 싶었다. https://react.vlpt.us/basic/07-useState.html →setState 값전환 https://velog.io/@chloeelog/React-버튼을-이용해-컴포넌트-전환하기 →onClick 컴포넌트전환 (이게 더 맞을듯?) —> 해보니까.. 컴포넌트 전환이라 링크가 변하지 않음.. 아닌듯,,,!? 😂 https://ddeck.tistory.com/23 → 이게 더 맞는듯!!! 라우터로 전환해야함..! →링크가 변해야하니까•••!!!! → 이것은 리덕스를 사용하는데...??? 위는 버튼을 클릭시 컴포넌트가 전환되는 모습을 개발하면서, 참고했던 자료들이다. 위와 같이 해결했을 때, 주소가 바뀌지 않았던 문..

router로 컴포넌트 전환을 위해 yarn add react-router-dom 설치 후, App.js에 route를 사용하였지만 아래와 같은 에러가 떴다. A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 버전이 바껴서 함수 사용을 하기전에 태그를 써주어야하는것 즉, 위처럼 되어야한다. 하지만, 위와 같은 코드로 yarn start를 하니 흰 화면밖에 나오지 않았다. component대신, element를 써주어야했던것이다. 최종 코드는 위와 같이 써주니, route로 화면 전환이 잘 되는 것을 확인할 수 있었다. Route구성 요소를 구성 요소로 래핑할 것! 경로는 자식을..

이번에도 같은 에러가 떴다. react와 react-dom이 같은 버전을 사용하는데도 그랬기에 이번엔 이유를 알지 못했다 정답은 yarn과 npm을 둘 다 써서 충돌이 나던것 .. vsc에서 노드모듈을 지우려했는데 충돌이 날 수도 있어서 리눅스에서 코드로 지웠다 rm -rf node_modules rm package-lock.json 후에 yarn install을 해주니? 정상적으로 실행이 되었다.

React프로젝트를 진행하면서 Img태그를 사용하려고 하는데, 처음에 html에서 작성하듯이 이렇게 코드를 추가하였지만 에러가 떴다. React에서 img태그 사용법은 다르기 때문! import ex2 from '../img/ex2.gif'; 이렇게 import문을 이용하여 이미지의 위치를 사용할 변수로 선언해준 후, 컴포넌트 내부의 return값에 src={} 는 import에서 선언해준 변수명처럼 해주면 된다. 리액트에서는 중괄호를 이용할 것!

react app 을 실행하려는데, 갑자기 node 와 yarn이 없다고 떠서, brew를 이용하여 재설치를 진행해준 후, 내 깃에서 풀한 코드들이 실행이 안되는 현상이 발생했다. https://reactjs.org/warnings/invalid-hook-call-warning.html Invalid Hook Call Warning – React A JavaScript library for building user interfaces reactjs.org 에 들어가보니, 에러의 해결법이 1번 버전문제 2번 hooks 규칙 위반 3번 중복된 사본사용 으로 나와 있었다. 당연히 버전문제라고 생각이 되어, 버전문제로 해결해보았다. npm ls react-dom npm ls react-native 를 하여 버전..

버튼을 클릭하여 이벤트 함수를 주려고한다. 처음에 js에서의 사용법 그대로 리액트에 적용했을 때 자꾸 사용하지 않은 함수라며 오류가 나와서 당황했다. javascript에서 버튼을 클릭할 때 나오는 onclick을 사용할 때와 리액트에서 사용할 때의 방법이 다르다는 것을 인지해야한다. js에서의 사용법 Start 리액트에서의 사용법 Start 두 방법의 차이는 onclick에서의 c가 대문자 소문자와 리액트에서는 중괄호로 묶어주어야한다는 것이다.

리액트 스터디로 인한 프로젝트를 시작할 것이다. 프로젝트는 teachable machine을 이용하여 목 각도들을 사진으로 학습시켜, 거북목인지 아닌지 판단할 것이다. (학습 시켜보니 조금 이상한듯 ) 내가 ml을 배울것이 아니므로..! https://teachablemachine.withgoogle.com/models/Bx2-itLur/ 에서 학습시킨 모델을 활용해볼 수 있다. 기능은 프론트엔드 위주니까, 할 수 있는 것이 없어서 점차 생각해 봐야겠다..

서버 사이드 렌더링 - UI를 서버에서 렌더링하는 것을 의미한다. 리액트 프로젝트 - 클라이언트 사이드 렌더링 -> UI 렌더링을 브라우저에서 모두 처리하는 것 서버 사이드 렌더링 장점 - 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있다. -> 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 페이지가 제대로 나타나지 않을수도 있음. - 초기 렌더링 성능을 개선할 수 있다. -> 서버 사이드 렌더링이 구현되지 않은 웹 페이지에 사용자가 방문 시, 자바스크립트가 로딩되고 실행될 때까지 사용자는 비어 있는 페이지를 보며 대기 -> 여기에 API호출하면, 사용자의 대기시간은 더욱 증가! 서버 사이드 렌더링을 구현한 페이지라면?? - 자바스크립트 파일 다운..

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 정말 간편하게 컴포넌트 코드 스플리팅을 할 수 있다. Suspense는 리액트 내장 컴포넌트로서 코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있고, 로딩이 끝나지 않았을 때 보여 줄 UI를 설정할 수 있다. React.lazy와 Suspense를 사용한 App.js import React, { useState, Suspense } from 'react'; import logo from './logo.svg'; import './App.css'; const SplitMe = React.lazy(() => import('./SplitMe')); function App() { const [visi..