react12 리액트에서 .env 사용하기 리액트에서 .env 사용하기 DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 환경 변수 파일을 외부에 만들어 소스코드 내에 하드코딩 하지 않고 사용하는 방법으로 .env 파일을 생성하는 것이다. ( 터미널로 직접 환경변수를 설정해줘도 된다. ) 리액트에서는 특이하게도 REACT_APP 으로 시작되어야 인식을 한다. # .env REACT_APP_FIREBASE_API_KEY = key REACT_APP_FIREBASE_AUTH_DOMAIN = auth_domain해당 환경변수를 사용하는 방법은 아래와 같다. console.log(process.env.REACT_APP_FIREBASE_API_KEY) 2021. 8. 20. 회원가입(SignUp) 페이지 비밀번호 내용 보이기 input태그의 type을 password로 주면 입력한 내용이 *** 처럼 보이지 않는다. 요즘 대부분의 서비스를 보면 비밀번호 오른쪽에 이모티콘을 클릭 시, 입력한 내용을 확인하고 다시 숨길 수 있는 기능이 있다. 이 기능은 이모티콘을 클릭하면 type을 text로 바꾸고 다시 클릭하면 password로 바꿔주는 간단한 기능이다. boolean state를 활용하여 아래와 같이 input의 type을 동적으로 넣어준다. ... const [hidePassword, setHidePassword] = useState(true); const toggleHidePassword =()=>{ setHidePassword(!hidePassword); } ... 2021. 8. 10. React.js Dropzone 라이브러리 사용하기 공식 문서 : https://react-dropzone.js.org/ 공식 문서를 기반으로 작성합니다. 라이브러리 설치 npm install --save react-dropzone yarn add react-dropzone or: yarn add react-dropzone 기본 사용법( 훅스를 사용하는 방식으로 작성했습니다. ) import React, {useCallback} from 'react' import {useDropzone} from 'react-dropzone' function MyDropzone() { const onDrop = useCallback(acceptedFiles => { // Do something with the files console.log(acceptedFiles) }.. 2021. 4. 11. 이전 1 2 다음
