[리액트] API 키 숨기기, 환경 변수 401 오류와 undefined 해결
IT/React 2021. 8. 6. 23:49

리액트로 프로젝트를 하다가 API 키를 가져와야 할 일이 생겼다. API 키는 아주 소중한 녀석이기 때문에 .gitignore에 추가해주어야 한다!! 마치 내 개인정보와 같다고 보면 된다. 어떻게 숨겨주어야 하는지 알아봅시다~! 401 에러가 발생할 때, .env를 추가했는데 undefined가 뜬다면 맨 밑을 참고 부탁드립니다. 1) dotenv를 설치해준다. yarn, npm 중 편한 걸로 선택해서 설치하면 된다. yarn add dotenv npm install --save dotenv 2) 프로젝트 루트 경로에. env 파일을 생성해준다. (src폴더 안 아님!!) 3) .env 파일 안에 변수를 작성하고 API key를 넣어준다. 리액트 프로젝트에서는 환경변수 이름 앞에 REACT_APP_을 꼭..

[리액트] 구글 로그인 API
IT/React 2021. 1. 11. 15:23

구글 로그인 기능을 만들고 싶어서 구글링을 열심히 했다.. 하지만 최신 자료는 없었고 리액트 구글 API 연동은 더욱 찾기 힘들었다. 그러다 발견한 영상. React로 하니까 정말 간단하게 되는 것 같다. npm 구글 로그인 설치하고, 컴포넌트 만들고, 생성해둔 client id 값 넣으니 끝이다. 잘 동작한다! 물론 css로 조금 더 다듬어야겠지만 작동하는 게 어디야..ㅠㅠ

[JavaScript / 생활코딩] Ajax
IT/JavaScript 2020. 12. 31. 17:06

· Ajax - Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. (출처:위키피디아) - 즉, JavaScript와 XML을 이용한 비동기적 정보 교환 기법 ​ - Ajax로 현재 페이지의 화면 전환 없이 서버에서 데이터 자료를 전송 가능 - 새로 고침이나 새로운 HTML 페이지로 전환이 필요 없다. - 부분만 로딩이 되므로 속도가 빠르다. ​ ​ JavaScript 선행학습이 필요하다. (무조건) ​ 생활코딩 강의를 들으며 이고잉님이 항상 강조하던 것은 중복의 제거이다. (+ 쪼개기) 이 수업 또한 중복을 제거해 나간다..