본문 바로가기

React

(115)
[React] React 폴더구조 [ 리액트 폴더구조 ] assets 폰트, 이미지, 동영상, json 등 다양한 파일들을 저장하여 프로젝트에서 사용할 수 있도록 저장시키는 폴더이다. > fonts > images > videos > css (필요시 global한 css) > js (필요시 js import사용할때) - assets - font - 폰트입니다.otf - 폰트2입니다.ttf - images - guide - guide1.svg - guide2.svg - guide3.svg * 이미지와 같은 파일들을 public에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부입니다. 파비콘과 같이 index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에 반면, 컴포넌트 내부에서 사용하는 ..
[React] 서버에 데이터요청하기(express/ axios) [유튜브 강의 참고 정리] 라매개발자 기본제공 fetch 라이브러리 axios (블로그는 이것 사용) server가 없을때 임시로 만들기=>express 라이브러리 이용 1. 설치 npm i express https://www.npmjs.com/package/express express Fast, unopinionated, minimalist web framework. Latest version: 4.18.2, last published: 4 months ago. Start using express in your project by running `npm i express`. There are 67927 other projects in the npm registry using express. www.np..
[React] ReactDOM.render 오류 :ReactDOM.render is no longer supported in React 18.. 오류: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 현재 리액트를 사용하면 콘솔창에 "경고: ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 원인: CRA 를 통해 만들지 않아 index.jsx 코드 작성시 잘못된 코드로 인해 root 설정에 오류가 있었다. ReactDOM.render를 리액트 v18부터 사용하지 않기 때..
[React] react-router-dom 버전 오류: export 'Routes' (imported as 'Routes') was not found in 'react-router-dom' CRA 를 통해 설치하지 않고 npm init -y 를 통해 프로젝트를 생성한 상황이다. 오류: React Route 가 제대로 되지 않아 화면 출력되지 않으며 다음과 같은 오류 발생 export 'Routes' (imported as 'Routes') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter) 원인..
[React] Redux - 기본 개념 상태관리 라이브러리: Redux, Mobx, Recoil Redux 공식문서 https://redux.js.org/introduction/getting-started Getting Started with Redux | Redux Introduction > Getting Started: Resources to get started learning and using Redux redux.js.org actions : dispatch 보내기 실행 state: state 변경 view 는 state를 받아서 보여준다. store 에서 state 관리를 한다. dispatch를 통해서만 store를 업데이트 할 수 있다 selectors 는 state의 특정값을 꺼내오는 것이다. Initial stetup 초기값..
[React] Netlify 사이트 배포 방법 https://app.netlify.com/ Netlify App app.netlify.com 1. 깃허브 계정으로 접속 후 왼쪽 아래에 Sites 에서 Add new site - Import an existing project 클릭 2.GitHub 클릭 후, 배포하려는 프로젝트 선택하기 3. 빌드시 실행할 세팅 설정하기 => Deploy site 클릭 Branch to deploy : Github에 branch를 여러개 만들어놨다면, 배포하고자 하는 branch를 설정해줘야한다. Base directory : Github에 client, server 등 branch에 파일을 여러개 만들어놨을 때, Netlify가 어떤 것을 배포할지 알려주는 것이다. 만약 client에 프론트쪽..
강의 정리 참고 강의 정리 내용은 저작권상 비공개글로 작성하였습니다.
[2022.07.30]소플 강의 정리 3 소플의 처음 만난 리액트 -초청 강의 수강 Styled Components 스타일 컴포넌트를 따로 한 파일에 정리하고, jsx에서 이용하는 방식을 선호한다 함 클래스를 각 지정해주면 코드의 가독성이 떨어질 수 있음 useNavigate useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다./ 웹페이지를 navigate(탐색)한다. => Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다. react-router-dom에서는 페이지 이동을 위해서 useNavigate()훅을 제공한다. https://basemenks.tistory.com/278 windo..