리액트3 React 취소 버튼 컴포넌트 만들기 React는 반복 사용되는 컴포넌트를 만들어두고 어느 곳에서든 재사용 할 수 있다는 장점을 갖고 있습니다. 이번 포스팅에서는 프로젝트를 만들며 빈번하게 사용되는 취소 버튼을 컴포넌트로 만들고 이용하는 방법에 대해 적어보겠습니다. 1. CancelButton.jsx 만들기 import React from "react"; import { css } from "@emotion/css"; export default function CancelButton({cancelAction}) { return ( 취소 ); } 취소 버튼을 컴포넌트로 따로 제작해둡니다. index.jsx를 만들어 해당 컴포넌트를 빼주는 것도 잊지 마세요! 2. 취소 버튼에 동작 넣기 취소 버튼의 행동에는 여러가지가 있을 수 있습니다. 모달 .. 2021. 4. 24. 리액트 프로젝트에 구글 로그인 연동하기 리액트를 이용하여 개발할 때, 구글 로그인을 연동하는 방법에 대해 알아보겠습니다. 1. Google Cloud Platform에 프로젝트 만들기 구글 인증을 사용하기 위해는 Google Cloud Platform에 접속하여, 프로젝트를 생성해야 합니다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 구글 로그인을 연동하고자 하는 서비스 이름으로 만들어주세요. 2. 사용자 인증 정보 만들기 프로젝트 생성 이후 대시보드에서 다음과 같이 이동해주세요. 좌측 메뉴의 사용자 인증 정보 - OAuth 클라이언트 ID 만들기에 오셔서 해당하는 정보들을 적어주고, URI에는 http.. 2021. 4. 18. 리액트 프로젝트 만들기 create-react-app 0. 준비물 Nodejs - 리액트 관련 라이브러리들하을 손쉽게 설치할 수 있도록 해주는 npm, yarn을 위해 필요하다. VSCode (코드 편집기중 하나인데, 다른 편집기를 사용해도 괜찮다) 1. yarn 설치하기 yarn은 페이스북에서 만든 녀석인데, 프로젝트 의존성 관리를 담당하는 Javascript 기반의 패키지 매니저다. npm이 존재하긴 하나, 이보다 훨씬 빠르고 안전하다. npm의 속도, 성능, 보안 문제들을 해결하기 위해 개발되었다. 설치는 Yarn의 홈페이지에서 할 수 있다. https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarn.. 2021. 4. 18. 이전 1 다음 반응형
