React & Library9

• 

  [Cypress] 프론트엔드 E2E 테스트 회고 E2E 테스트를 하게 된 이유사실, 급박하게 프로젝트가 진행된 경우, 기존 개발 구조를 조금도 건드리지 않고 진행할 수 있는 유일한 테스트가 아닐까 싶다.기존 퇴사자들의 코드가 축적된 부분도 많았기 때문에, E2E 테스팅을 진행하게 되었다.E2E 테스트를 하기위해 Cypress를 고르게 된 이유는, 대규모 프로젝트가 아닌이상 굳이 Playwright 까지 사용할 필요는 없다고 여겨졌기 때문이다.그리고, 다른 팀원과 동일한 테스팅 라이브러리를 사용하기 위함이다. 같이 도입하면서 여러 자료조사를 해보았고, 대부분 cypress를 애용하는 것을 알 수 있었다.테스트 원칙을 세우다가볍게 자료조사를 하고, 코드를 작성하면서 여러 의구심이 들었었다. 자연스럽게 원칙을 세워놓을 필요가 있다고 생각했다. 이를 위해 여.. React & Library 2024. 12. 19.

• 

  [React] React-beautiful-dnd 활용법 Basic 개요 React-beautiful-dnd (이하 rbd)는 zira로 유명한 atlassian에서 만든 오픈소스다. 디자인 시스템을 구축하는 팀에서 주로 작업하는 듯 하다. (오픈소스 운영자 트윗) 만약, zira를 써보았다면, 오픈소스를 사용하면서, 똑같은 느낌을 받을 수 있을 것이다. 비슷한 오픈소스들이 많았지만, zira의 점유율이 높아지면서, 자연스럽게 atlassian 에서 공개한 rbd 라이브러리도 점유율이 매우 높다. 같은 카테고리에서는 과반이상이 되어버린 것 같다. 사용하게 된 계기 nomad coder 수업을 수강하면서 알게되었다. api 구조가 매우 단순하면서도, 편하게 사용할 수 있게 되어 있다. 그래서 앞으로 Trello 형태의 UI를 구현해야하면, rbd를 계속 사용하게 될 것 같.. React & Library/React-beautiful-dnd 2023. 2. 3.

• 

  [React / React Hook Form] Introduce Basic 코드를 간소화 해주는 React Form Library 개요 프론트엔드 개발자가 적지 않은 수작업을 해야 하는 부분이 뭐냐고 물어보면, Form 핸들링 작업이다. 각 Form 아이템에 맞는 수많은 validation, 입력 제한, value를 관리하는 State 등.. 신경써야할 게 많다. 이 요소들을 한 방에 해결하는 것이 React Hook Form 이다. Toss에서도 사용하는 라이브러리이고, 노마드코더 니코도 추천하고 있다. 좀 더 조사해보니까, 대부분의 사람들이 이 라이브러리를 많이 사용하고 있었다. (걍 쓰자...아니야 폼 조작한다고 걍 개고생한번 해보길 추천..그래야 감사함을..) 설치 yarn add react-hook-form 사용방법 const ToDoList = () => { cons.. React & Library/React-hook-form 2023. 1. 4.

• 

  [React / React Query] React Query를 사용하게 되면서 좋은 점들 React Query 공식문서에는 아래와 같이 설명되어 있다. Performant and powerful data synchronization for React 음... 그래. 리액트에 어울리는 동기화 라이브러리 라고 한다. (그래? 한번 써보았다.) 기존 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { getCoins } from "APIs/get"; import { useQuery } from "react-query"; // Styled Component 생략 // const Coins = () => { .. React & Library/React-Query 2022. 12. 21.

• 

  [React / Router] Link 에서 state로 값 넘기기 전달하는 Link // state로 주면 된다. {coin.name} → 이렇게 하면 state에 값이 넘어간다. react router v6 에서 좀 더 간편해졌다. 예전에는 to 에 객체를 통째로 넣어야 했는데.. 지금은 state에 넣을 수 있게 되었다. state={{ name=coin.name }} 이런 식으로 작성도 가능해졌다. 전달받은 Link의 컴포넌트 전달받은 Link에 해당하는 Component에서는 useLocation 을 사용하도록 한다. useLocation().state를 받기 위해서 const { state } 라고 선언해주어서 사용하면 된다. import { useLocation } from "react-router-dom"; const Coin = (props: any) =.. React & Library/Router 2022. 12. 16.

• 

  [React / Router] url 마지막에 있는 slash 없애기 http://localhost:3000/sub/ { const location = useLocation(); // If the last character of the url is '/' if (location.pathname.match("/.*/$")) { return ( ); } else return null; }; export default RemoveEndUrlSlash; 2. app 컴포넌트 내부에 합성 import React, { useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import AppLayout from "./components/AppLayout"; import .. React & Library/Router 2022. 12. 13.

• 

  [React / Router] v6 - creatBrowserRouter basename (baseURL) 설정 방법 본문 github repository를 이용해서 배포를 해야할 때가 있다. 그럴 때는 아래와 같이 baseURL을 입력해서 root 주소를 설정해주면 된다. import React from "react"; import { createBrowserRouter } from "react-router-dom"; import Coin from "./routes/Coin"; import Coins from "./routes/Coins"; const router = createBrowserRouter( [ { path: "/", element: , }, { path: "/:coinID", element: , }, ], { basename: "/reactMasterCrypto" } // 이 부분 ); export de.. React & Library/Router 2022. 12. 13.

• 

  [React / Router] React Router V6 Guide (Basic) - 부제 : v6 변경점 *참고로 아래 목록은 모두 Function이다. { } 로 불러오는 것 보면 알 수 있다. 0. Router는 props로 꽤 많은 기능을 포함하고 있는 것을 알 수 있다. Router 컴포넌트는 기본적으로 리액트의 context provider 기능을 포함시키고 있다. 그래서 routing 정보를 대부분의 자식 요소와 공유하게 된다. declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; nav.. React & Library/Router 2022. 12. 5.

• 

  [React Router] 특정 경로 접속 시, 다른 경로로 변경 (리다이렉트) 하기 코드 자체는 매우 간단하다. (간단한 몇 줄이지만, 굉장히 자주 쓰이는 코드라서 기록해둔다.) ( {props.history.push( props.history.location.pathname.replace("/theme", "/donation") )} )} /> /theme 라는 경로는 과거에 사용하던 경로였다. 이른 donation 경로로 했으면, 아예 다른 라우터로 잡고, 과거의 경로로 접속할 경우, push로 새로 링크를 잡고 연결해주면 된다. 만약, props 정보로 history를 사용하지 못하는 경우는 useHistory를 연결하고나서 사용하면 되겠다. 그런 경우는 아마....router 컴포넌트는 아닐 것 같다. React & Library/Router 2021. 8. 2.