https://velog.io/@rmaomina/react-env React에서 .env 환경변수 사용하기 외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, null값이라 나서 헤맸다. velog.io
프론트엔드/React
문제 발생 필자는 카카오 로그인 API 기능을 사용하기 위해 위 사진처럼 index.html에 javascript SDK 를 추가하였다. https://developers.kakao.com/docs/latest/ko/javascript/getting-started 공식 API 문서를 살펴보니 카카오 로그인 API는 Kakao 객체로 접근하는 것을 알게되었다. 하지만 필자는 SDK 스크립트를 불러온 index.html 파일이 아닌 Main.jsx에서 API 기능을 사용하고 싶었다. 이에 Main.jsx에서 Kakao.init()으로 접근하니 오류가 발생했다. 해결 방법 index.html에 있는 SDK 스크립트를 Main.jsx에서 접근하려면 어떻게 해야할까? 위 궁금증을 해소하기 위해서는 window 객..
import React from "react"; import { motion } from "framer-motion"; const Penalty = () => { const arr = ["사과", "배", "포도", "망고", "수박", "귤", "딸기", "바나나"]; const variants = { visible: { opacity: 0.7, y: 0 }, hidden: { opacity: 0, y: 50 }, }; return ( {arr.map((item, index) => ( {item} ))} ); }; export default Penalty;
1. 도메인 구매(링크 > 도메인 > 도메인 검색 > 사용하고 싶은 주소 검색) https://domain.gabia.com/regist/regist_domain 가비아: 대한민국 도메인 점유율 1위 대한민국 100만 도메인 등록 업체 domain.gabia.com 2. 도메인 DNS 설정 my 가비아 > 이용중인 서비스(도메인) > DNS 관리툴 > 구매한 도메인의 우측에 있는 설정 버튼 > DNS 설정 > 레코드 수정 아래 표와 같이 레코드를 수정/추가 한다. 타입 호스트 값/위치 TTL 우선 순위 서비스 A @ 185.199.108.153 1800 DNS 설정 A @ 185.199.109.153 1800 DNS 설정 A @ 185.199.110.153 1800 DNS 설정 A @ 185.199.11..
https://8ugust-dev.tistory.com/47 [Git-Pages] Github Custom Domain 설정 (hosting.kr / react) (2022)1. 도메인 구매 https://hosting.kr 사이트로 접속합니다. 회원가입 및 로그인 은 너무 당연한 과정이니 생략하겠습니다. 구매를 원하고자 하는 도메인을 검색합니다. 도메인 별 가격을 확인한 뒤, 원8ugust-dev.tistory.com 배포 후 빈화면만 뜬다면?!위 글의 4번 과정인 React : Package.json 설정 변경을 꼭 봐야한다!
import styled from '@emotion/styled'; import React from 'react'; const FileSelectButton = ({onChange}) => { return ( 파일찾기 // 라벨로 스타일링 할 거임 ); }; export const FileSelectButton_Container = styled.div` `; export const FileSelectButton_Label = styled.label` display: inline-block; `; export const FileSelectButton_Input = styled.input` display: none; // 기존 버튼 숨기기 `; export default FileSelectButton;
https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B7%B8%EB%9E%98%ED%94%84%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%AA%A8%EC%9D%8C [React] 리액트 그래프/차트 라이브러리 모음 기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판 velog.io
깃허브 호스팅을 이용한 리액트 배포 방법은 아래 5가지 과정으로 이루어 진다. 1. package.json 파일 수정 package.json 파일 최하단(중괄호{} 안에)에 아래 코드를 삽입한다. "homepage": "https://깃허브아이디.github.io/레포지토리명" 삽입 후 package.json 코드 예시 // homepage 삽입 후 package.json 코드 예시 { "name": "for-mj", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.9", "@mui/materi..
