본문 바로가기

IT85

[리액트] API 키 숨기기, 환경 변수 401 오류와 undefined 해결 리액트로 프로젝트를 하다가 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_을 꼭.. 2021. 8. 6.
[리액트] 리액트 필수 크롬 확장 프로그램 (react developer tool) 변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다. 그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다. 참고) 렌더링이 일어나는 시점은 - state나 props가 변경될 때 - 부모 컴포넌트가 변경될 때 - forceUpdate()가 호출될 때이다. 렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!) 개발자 도구를 열어보면 Components 탭이 새로 생겼다!! 탭에 들어가서 톱니바퀴를 클릭해준다. General에 있는.. 2021. 7. 25.
[리액트] 버튼 클릭시 요소 표시, 숨기기 오늘 해볼 실습은 버튼을 클릭하면 요소(컴포넌트)가 보이고, 다시 버튼을 클릭하면 숨겨지게 하기!! 여기서 '보이기' 버튼을 클릭하면, 버튼은 '숨기기'로 바뀌고, Input창에 입력한 이름, 나이, 전화번호가 출력된다. [Myinfo.jsx] 컴포넌트의 이름은 Myinfo이며 코드는 다음과 같다. useState로 3개의 속성(이름, 나이, 전화번호)을 만든다음 onChange 이벤트 세 가지를 만들어주었다. 하지만, 이글의 핵심은!! 버튼 클릭시 어떻게 요소를 표시하고 숨기는 것이다!!! App.jsx에 다음과 같이 코드를 적어준다. [App.jsx] 코드를 위에서 아래로 설명하기보다 핵심만 설명하겠음!! 우선 15번째 줄을 보면, AND 논리연산자가 나온다. (만약 논리 연산자를 모르겠다면 밑 링크.. 2021. 7. 23.
[리액트] setState 비동기 해결, 콜백함수 [예시 - 결과, 코드] 버튼을 클릭하면 숫자를 1 더하고 빼는 간단한 컴포넌트를 만들었다. alertNumber()라는 함수를 만들어 현재 숫자가 무엇인지 알려주는 창을 띄어준다. import React, { Component } from "react"; class Counter extends Component { state = { number: 0, }; alertNumber() { alert(this.state.number); } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); console.log(this.state); this.alertNumber(); }} > +.. 2021. 7. 12.
리액트 VSCode 자동완성 익스텐션 추천 (Auto Import, Code snippets 등) 리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript. [Forked] marketplace.visualstudio.com 파일명을 입력하면 자동으로 import가 된다. [예시] 만약 SearchHeader라는 컴포넌트가 있고, 다른 파.. 2021. 7. 6.
깃 오류: Merging is not possible because you have unmerged files. 나의 경우엔 컴퓨터A에서 예전에 작업한 파일이 있고, push를 안 한 상태였다. 그리고 컴퓨터B에서 최신에 작업을 하고 master에 올려두었다. (컴퓨터A의 작업물은 필요 없어졌고 B의 작업물을 master에 덮어쓰기만 하면 됐다.) 시간이 지나 컴퓨터A에 B에서 한 작업을 불러오려고 하니 다음과 같은 오류가 발생했다. 합병이 안된 파일이 있기에 합병이 불가능합니다..?! git merge를 입력했을 때 다음과 같은 오류가 발생한다. 아직 해결이 되지않은 충돌 문제가 있어서 그렇다는데,,, 그럼 어떻게 해결하나요?? [해결] 로컬 변경사항을 삭제하고 master의 변경사항이 덮어쓰기 git fetch origin git reset --hard origin/master 주의 사항: 현재 로컬에 있는 변.. 2021. 6. 17.

티스토리툴바