728x90
반응형
- [TypeScript] React.js에서 타입스크립트 사용(udemy 강의 "Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS" 섹션 14)2024-03-06 11:09:33섹션 14: React.js 및 TypeScript 📌 React.js + TypeScript 프로젝트 생성 .은 현재 경로에 프로젝트를 생성하는 것을 말한다. npx create-react-app . --template typescript 😉 공식 문서 : https://create-react-app.dev/docs/adding-typescript/ 📌 React.FC // src/app.tsx import React from "react"; // React.FC는 리액트 함수 컴포넌트 사용함을 의미 const App: React.FC = () => { return ; } export default App; 📌 React.FC와 React.FC에 화살 괄호 를 사용해 props의 타입을 지정할 수 있다..
- [React.js] 네이버 지도 API 마커 클러스터 튜터리얼 따라하기!2024-02-21 16:52:441. 네이버 지도 API 설치 npm install react-naver-maps --save 2. App.js에 NavermapsProvider 적용 NavermapsProvider의 경우-이 글을 작성하는 시점에-공식 문서에는 NaverMapsProvider로 되어 있었고 따라서 로딩 에러가 발생했다. 따라서 NavermapsProvider라고 import 해야 한다. // src/App.js import { NavermapsProvider } from "react-naver-maps"; import NaverMapsMarkerCluster from "./components/NaverMapsMarkerCluster"; function App() { // ncpClientId에 네이버 지도 API 클라..
- [React.js] 간단한 Todo List 만들기(Zustand를 이용한 전역 상태 관리)2024-02-13 11:10:111. Zustand를 적용한 Todo List [그림 1]과 같이 Zustand를 이용해 간단한 Todo List를 구현해 보았다. Zustand를 이용할 경우 Redux보다 훨씬 간편하게 전역 상태를 관리할 수 있었다. 전역 상태를 이용해야 하는 컴포넌트에서 Zustand의 create 메서드를 이용해 작성한 모듈을 로딩하기만 하면 즉시 사용할 수 있었기 때문이다. 2. React.js 프로젝트 생성 "react-zustand-todolist"라는 리액트 프로젝트를 생성한다. npx create-react-app react-zustand-todolist 3. Zustand 라이브러리 설치 npm i zustand 😉 공식 문서 : https://docs.pmnd.rs/zustand/getting-sta..
- [React.js] React Router 적용2024-02-06 17:57:081. React Router 설치 npm i react-router-dom 😉 공식 문서 : https://reactrouter.com/en/main 2. 프로젝트에 적용 1. BrowserRouter 컴포넌트 적용 // index.jsx // (생략) import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // BrowserRouter 컴포넌트 적용 ); 2. , 컴포넌트 적용 // app.js // (생략) import { Link, Route, Routes, useLocation } from "react-router-dom"..
- [React.js] React-Toastify 적용2024-02-02 17:52:321. React-Toastify 설치 1) 설치 https://www.npmjs.com/package/react-toastify#react-toastify npm install --save react-toastify 2) 추가 설치 사용자 정의 애니메이션(Define a custom enter and exit animation)을 적용하고자 한다면 설치하면 된다. React-Toastify 공식 문서: https://fkhadra.github.io/react-toastify/custom-animation Animate.css 공식 문서: https://animate.style/ npm install animate.css --save 3. React-Toastify 적용예 📌 app.js import "...
- [React.js] 웹 카메라 제어 : 사진 촬영 기능 위해 react-camera-pro 설치, Styled-Components도 필요!2023-10-12 09:32:311. 단말기의 카메라 이용한 사진 촬영 기능 스마트폰이나 노트북의 카메라를 이용해 사진을 촬영해 저장하는 기능을 구현하고자 하였다. react-webcam과 react-camera-pro가 눈에 띄었는데 공식문서와 데모를 통해 내가 원하는 기능에 react-camera-pro가 더 맞아 선택하였다. 2. Styled-Components가 설치되어 있어야! 처음에는 Next.js 프로젝트에서 진행을 했었다. Styled-Components가 없다는 에러가 발생하여 설치해 주었으나 역시 작동하지 않았다. 그래서 React.js 프로젝트를 새로 생성하여 테스트를 진행하였다. Usage의 코드를 이용해 테스트하였고 역시 Styled-Components가 없다는 에러가 발생하였다. 하지만 React.js 프로젝트..
- [React.js] 컴포넌트에서 svg 파일 import 하기2023-04-27 11:31:01ERROR in ./src/components/layout/Navi.js 31:40-44 export 'ReactComponent' (imported as 'Home') was not found in './home_black_24dp.svg' (possible exports: default) @ ./src/components/index.js 3:0-33 6:0-39 @ ./src/index.js 12:0-40 42:42-51 React.js 컴포넌트에서 svg 파일을 import 하기 위해서 시도했는데 다음과 같은 에러가 발생했다. import 명령 코드는 아래와 같았다. import HomeIcon from '@assets/svg/home_black_24dp.svg'; 정확한 경로를 잘 입력했는데 뭐가..
- [React.js] Cannot read properties of undefined 해결2023-04-24 11:42:47서버로부터 데이터를 불러오는데 비동기적으로 데이터를 가져오기 때문에 데이터가 없는 상태에서 렌더링이 되어 발생한 에러이다. 옵셔널 체이닝(?.)을 이용하여 프로퍼티가 존재하지 않을 경우 에러를 발생시키지 않고 undefined를 반환할 수 있다. 아래는 옵셔널 체이닝을 적용한 코드이다. dashboardStateTotalTest.batch_total_nowDTO?.count 참고 자료 : https://velog.io/@party3205/React-Cannot-read-properties-of-undefined-reading-%EC%97%90%EB%9F%AC [React] Cannot read properties of undefined (reading) 에러 Cannot read properties of..
728x90
반응형