React & Library9 [Cypress] 프론트엔드 E2E 테스트 회고 E2E 테스트를 하게 된 이유사실, 급박하게 프로젝트가 진행된 경우, 기존 개발 구조를 조금도 건드리지 않고 진행할 수 있는 유일한 테스트가 아닐까 싶다.기존 퇴사자들의 코드가 축적된 부분도 많았기 때문에, E2E 테스팅을 진행하게 되었다.E2E 테스트를 하기위해 Cypress를 고르게 된 이유는, 대규모 프로젝트가 아닌이상 굳이 Playwright 까지 사용할 필요는 없다고 여겨졌기 때문이다.그리고, 다른 팀원과 동일한 테스팅 라이브러리를 사용하기 위함이다. 같이 도입하면서 여러 자료조사를 해보았고, 대부분 cypress를 애용하는 것을 알 수 있었다.테스트 원칙을 세우다가볍게 자료조사를 하고, 코드를 작성하면서 여러 의구심이 들었었다. 자연스럽게 원칙을 세워놓을 필요가 있다고 생각했다. 이를 위해 여.. 2024. 12. 19. [React] React-beautiful-dnd 활용법 Basic 개요 React-beautiful-dnd (이하 rbd)는 zira로 유명한 atlassian에서 만든 오픈소스다. 디자인 시스템을 구축하는 팀에서 주로 작업하는 듯 하다. (오픈소스 운영자 트윗) 만약, zira를 써보았다면, 오픈소스를 사용하면서, 똑같은 느낌을 받을 수 있을 것이다. 비슷한 오픈소스들이 많았지만, zira의 점유율이 높아지면서, 자연스럽게 atlassian 에서 공개한 rbd 라이브러리도 점유율이 매우 높다. 같은 카테고리에서는 과반이상이 되어버린 것 같다. 사용하게 된 계기 nomad coder 수업을 수강하면서 알게되었다. api 구조가 매우 단순하면서도, 편하게 사용할 수 있게 되어 있다. 그래서 앞으로 Trello 형태의 UI를 구현해야하면, rbd를 계속 사용하게 될 것 같.. 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.. 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 = () => { .. 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) =.. 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 .. 2022. 12. 13. 이전 1 2 다음
