react5 React Testing Library(RTL) 사용법 React Testing Library는 Facebook에서 공식적으로 사용을 권장하는 리액트 테스트 도구이다. 이 라이브러리는 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계되어있다. React Testing Library는 기본적으로 cra로 react를 설치하면 같이 설치가 된다. 그럼 한번 사용법을 알아보자 초기 세팅 먼저, 새로운 React 프로젝트를 만들어보자. 이 포스팅에서는 타입스크립트를 이용했다. $ npx create-react-app react-testing --template typescript or $ yarn create react-app react-testing --template typescript 설치가 완료 되었으면 App.test.tsx 파일을 지워주.. 2022. 3. 28. [컴포넌트 재활용하기] - Button 오늘은 재활용 가능한 컴포넌트 중에 가장 많이 사용되는 Button을 만들어 보자. 개발 환경 - react 17.0.2 - typescript 4.4.2 - styled-component 5.3.3 1. styled-components를 적용한 기본적인 버튼 컴포넌트 생성 src/components/Button.tsx import React, { ReactElement } from "react"; import styled from "styled-components"; function Button(): ReactElement { return Button; } const ButtonStyled = styled.button``; export default Button; 우리는 여기서 고민을 해야 한다. 버튼.. 2022. 2. 19. Recoil에서 Redux로 마이그레이션 하게 된 이유 배경 현재 나는 IT 연합동아리 Yapp에서 활동을 하고 있다. 우리 팀은 북마크를 좀 더 쉽고 편리하게 관리하기 위한 서비스를 기획하게 되었는데, 첫 기획 당시에는 단순히 북마크 관리 페이지(검색, 휴지통), 로그인, 회원가입 페이지 이게 전부였다. 그래서 기술 스택을 정할 당시에 전역 상태가 그렇게 많을 거 같지 않아서, 러닝 커브가 매우 적고 상태를 react의 useState처럼 쉽게 관리할 수 있는 recoil을 하기로 정했었다. 동아리에서 진행하는 1차 기획캠프를 하게 되었는데, 기획 캠프는 각 팀별로 기획 내용을 발표한 후에 현업 기획자 분들에게 피드백을 받을 수 있는 시간이었다. 우리가 기획한 북마크 관리 서비스에 대해서도 피드백을 많이 받았는데, 다른 북마크 관리 서비스와의 차별점이 없다.. 2022. 1. 16. 리액트 라이프 사이클 - useEffect 라이프 사이클(Lifecycle) 이란? 라이프 사이클은 말 그대로 생명 주기이다. 그렇다면 리액트에서의 라이프 사이클은 무엇일까? 리액트에서의 라이프 사이클은 바로 컴포넌트의 수명 주기를 말한다. 컴포넌트의 수명 주기는 총 3단계가 있다. 1. 컴포넌트가 생성될 때 (마운트) 2. 컴포넌트가 업데이트 될 때 (업데이트) 3. 컴포넌트가 제거 될 때 (언마운트) 이 3단계의 수명 주기에 관해서 알아보자 컴포넌트가 생성될 때 (마운트) 다음과 같이 useEffect hooks를 이용하여 안에 코드를 넣어주면 컴포넌트가 생성(마운트)될 때 해당 코드가 실행이 된다. useEffect(() => { console.log("첫 랜더링") }, []) 컴포넌트가 업데이트될 때 (업데이트) 컴포넌트가 업데이트될 때.. 2022. 1. 8. React 프로젝트 Netlify에 배포하기 (+ Github) 오늘은 Github Repository의 올라가 있는 React 프로젝트를 Netlify에 배포하는 방법을 알아보자. 프로젝트를 배포하기 위해서는 우선 Netlify의 계정이 있어야 한다. Netlify에 회원가입이 되어있고, 배포할 프로젝트가 Github Repository에 올라와있으면 다음 진행과정을 따라 해 보자 Netlify 로그인 후 Import from Git 버튼 클릭 GitHub 버튼 클릭 배포할 Repository 선택 배포 환경 세팅 - Branch to deploy: 프로젝트 Repository의 배포할 브랜치 (ex main) - Base directory: repository 안에 client, server 이런 식으로 프론트, 백 둘다 관리하는 경우 우린 React를 배포할 예.. 2021. 12. 29. 이전 1 다음
