Frameworks/React.js

👉 react-toastify 란? react 프로젝트에서 예쁜알람을 만들 수 있도록 해주는 Node.js 패키지 react-toastify 사용 결과 react-toastify 설치 npm i react-toastify 👉 react-toastify 사용법 // App.js // 모듈 불러오기 import { toast, ToastContainer } from "react-toastify" export default function App () { // toastify 알람 실행 함수 만들기 const notify = () => toast("Toastify Alert!") // 버튼 클릭시 notify 함수 실행하기 // 알람 실행시 표시될 컨테이너 넣어주기 return toast.success("Su..

1. useHistory / useNavigate // ver.5 const history = useHistory(); history.push("/") // ver.6 const navigate = useNavigate(); navigate("/") 특정 링크로 위치 이동할 수 있다. 2. useLocation { pathname: '/auth/login', search: '', hash: '', state: null, key: 'default' } 현재 라우팅된 페이지에 대한 정보를 가지고 있다. 3. useParams // App.js ( 라우팅을 통해 렌더링 되는 컴포넌트 ) // 모듈 불러오기 import { useParams } from "react-router" function App(){ /..

React Router란? [Node.js] React Router란? / 사용법 ( version 5 ) 라우터의 왕 React Router란? React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지 Router란? URI와 화면을 연결해주는 기능을 하는 프로그램 다시, React Router란? React에서 각각의 URI에.. defineall.tistory.com React Router 버전 6 사용법 //index.js // Router 모듈 불러오기 import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./..

React.js / Typescrit 프로젝트에서, styled-components 내부에 변수를 사용하려면 styled-components의 변수의 타입을 지정해주어야 한다. GlobalStyle 변수 타입 지정, 변수 사용 //styled.ts import { createGlobalStyle } from "styled-componenets"; // GlobalStyle에서 사용할 변수 타입 지정 interface ModalProps { bgColor: string } // GlobalStyle에서 변수 사용 export const GlobalStyles = createGlobalStyle` body { background-color: ${(props) => (props.bgColor && props...

React는 바닐라js로 이루어져 있으므로,

GraphQL / Apollo Client란? [Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 ) GraphQL 이란? ( GraphQL API ) 브라우저와 서버가, Query, Mutation, TypeDefs, resolvers를 사용해 CRUD 요청, 응답을 주고받는 방식 GraphQL의 필요성 기존 서비스는 보유한 데이터를 설명하고, 클라이언트는.. defineall.tistory.com -- 이 게시글은 GraphQL과 Apollo Client에 대해 알고 있는 사람을 대상으로 작성했습니다. -- Apollo Cache란? GraphQL 서버와 통신하지 않고도 React 페이지에서 직접 데이터를 읽고 쓸수 있도록 하는 것 예전에 이미 사용한 정보와,..

React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다. defineall.tistory.com 배경 설명 React는 문자열에서 html 태그를 사용하지 못하도록 보안처리가 되어있다. ( 사용자가 입력란에 html 태그를 사용해 조종하지 못하도록 하는 것 ) 문자열에 html 태그를 사용하고 싶을 때는, 컴포넌트의 dangerouslySetInnerHTML 요소를 사용한다. dangerouslySetInnerHTML 사용하기 sani..

useEffect(function,변수) 변수가 변경될 때 마다 function 실행 클라이언트를 만들때 토큰을 전달하기 (헤더) const httpLink = createHttpLink({ uri: "/graphql", }); const authLink = setContext((_, {headers}) => { const token = localStorage.getItem('token'); return { headers: { ...headers, authorization: token ? `Bearer ${token}` : "", } } }); const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCach..

prop-types란? React.js에서 매개변수의 타입을 지정해 줄 수 있게 해주는 라이브러리 ( 보안 작업, 타입스크립트랑 동일한 기능 ) prop-types 설치 npm i prop-types prop-types 사용법 // Test.js - 컴포넌트 만들기 const Test = ({string, number}) => { return ( {string} {number} ); }; export default Test; // App.js - 컴포넌트 사용하기 // 컴포넌트 매개변수 검사하기 위한 PropTypes 불러오기 import PropTypes from "prop-types"; // 컴포넌트 불러옴 import Test from "./Test"; function App() { const nu..