개발자R의 삶

리액트로 프로젝트 진행 중... 하단 네비게이션을 만들어야했다. 모바일화면으로 구성을 하려고 해서 찾아보니 react navigation 라이브러리가 있었는데 React Native 전용이었다. 그래서 그냥 만듦! 위와 같은 모양을 만드는 것이 목표! BottomNav.js import { NavLink } from "react-router-dom"; import classes from "./BottomNav.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, faListDots, faCirclePlus, faGear, faUsers } from "@fortawesome/free-sol..

1. 설치 https://fontawesome.com/v6/docs/web/use-with/react/ Set Up with React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 위 사이트에서 npm 명령어로 설치를 해준다. 사용 방법은 두가지로 나뉜다. 한 컴포넌트에서만 쓰는 방법, 글로벌로 쓰는 방법. 나는 우선 하단바에서만 사용할거기 때문에 individual 방식을 사용했다. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' //사용할 아이콘을 임포트 해준다. import {..

새로운 토이프로젝트를 시작하면서 프로젝트를 만들었다 create-react-app을 이용해서 띄웠는데... react-dom.development.js:86 Warning: 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. Learn more: https://reactjs.org/link/switch-to-createroot 콘솔에 위와 같은 메시지가 떴다. 리액트18버전부터는 ReactDOM.render() 방식을 쓰지 않는다는 것! 이게 기존 코드였다면.... impor..

https://github.com/flatlogic/one-react-template/ GitHub - flatlogic/one-react-template: Flatlogic One - React Template and Theme Flatlogic One - React Template and Theme. Contribute to flatlogic/one-react-template development by creating an account on GitHub. github.com 우측 상단에 Use this template 을 눌러서 내 레포지토리로 가져올 수 있다. node 16버전을 쓰고 있었더니 설치가 잘 안됨... 옛날 노드 모듈을 많이 쓰고 있는 템플릿인 것 같다. 그래서 노드 버전을 14로 낮..

useParams, useRouteMatch import { Fragment, useEffect } from "react"; import { useParams, Route, Link, useRouteMatch } from "react-router-dom"; import Comments from "./../comments/Comments"; import HighlightedQuote from "../quotes/HighlightedQuote"; const QuoteDetail = () => { const match = useRouteMatch(); const params = useParams(); console.log(match) console.log(params) const { quoteId } = pa..

웹개발을 하다보면 절대 빼놓을 수 없는 라우터! 라우터를 사용하기 위해서 react-router-dom 라이브러리를 사용해야한다. index.js import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App_router_practice"; ReactDOM.render(, document.getElementById("root")); 최 상위 컴포넌트인 컴포넌트를 컴포넌트로 감싸주어야 한다. App.js import { Route, Switch, Redirect } from "react-router-dom"; import Layout fro..

Lazy Loading이란? 특정 코드가 필요할 때만 그 코드를 로드하는 것. SPA로 개발을 하면 모든 코드 번들이 로드되기 때문에 비효율적일 수 있다. 코드를 여러 번들로 나누고, 각각 필요할 때만 다운로드 하는 것. 라우트별로 나누어 그 라우트로 들어갈 때 다운로드한다. import React from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; import AllQuotes from './pages/AllQuotes'; import QuoteDetail from './pages/QuoteDetail'; import NewQuote from './pages/NewQuote'; function App() { return (..

userState() 일반적으로 보통 많이 사용함. 쉽게 빠르게 state를 업데이트 하기 때문에 일반적으로 사용 useReducer() 복잡한 state를 업데이트 할 때 필요함 *처리해야할 데이터가 관련된 state의 부분들로 구성되어있을 때. ex. form 유효성을 전체적으로 관리할 때

https://appicon.co/ 에서 아이콘으로 만들 이미지들을 형식에 맞게 변환한다. 안드로이드 android > app > src > main > res 아래에 다음과 같이 폴더를 넣어준다. IOS ios > Runner Assets.xcassets 폴더를 전체 다 바꾸어준다. 앱 아이콘 스타일 바꾸기 1. 프로젝트명 오른쪽 클릭 > Flutter > Open Android module in Android Studio 2. 그 다음 new window를 클릭 3. 새로운 창에서 기다리면 아래와같이 폴더들이 나오는데, app > res 오른쪽 클릭 > New > Image Asset 4. 초기 화면에는 안드로이드 아이콘이 그려져있다. 그걸 내 아이콘 이미지로 바꾸어준다. 나같은 경우엔 그냥 down..

잘 되던게 갑자기 안될 경우가 있지 않은가? 나의 경우에도 늘 잘 되던게... 갑자기 css가 깨져보이는 현상이 나타났다. 도대체 왜...?? 알고보니 node-sass 가 제대로 적용이 안되어서 그랬던 것 같다. 해결은 간단! Error: Cannot find module 'node-sass' Require stack: - C:\dev\aitutor-m\node_modules\rollup-plugin-scss\index.cjs.js - C:\dev\aitutor-m\rollup.config.js - C:\dev\aitutor-m\node_modules\rollup\dist\shared\loadConfigFile.js - C:\dev\aitutor-m\node_modules\rollup\dist\bin\..