JS' 공부흔적

Firestore에서 데이터를 불러오려고 하는데 아래와 같은 에러가 발생했다. 이를 해결하는 방법은 우선 해당 Firebase Console로 이동한다. 그리고 아래와 같이 Firestore Database를 클릭한다. 아래와 같이 규칙 탭에 들어간다. 아래 코드에서 false를 true로 바꿔주면 에러가 해결된다!

git config --global alias.변경_후_명령어 변경_전_명령어 // example git config --global alias.st status // 위처럼 설정하면 git status를 git st로 써도 됨 commit, pull, push 등등 원하는 명령어를 단축키로 설정하면 매우 편리하다! 부작용 : 내 pc에서 git st로 설정해서 쓰다가 설정 안 돼있는 다른 pc에서 git st라고 쳐놓고 왜 안 되지..? 라고 생각했던 경험 있음

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY가 유효하지 않다는 에러가 발생했다. auth/api-key-not-valid.-please-pass-a-valid-api-key. .env 파일을 생성하여 아래와 같이 관련된 값들을 저장한 후에 firebase-config 파일에서 불러다 쓰고 있었다. REACT_APP_FIREBASE_API_KEY = ... REACT_APP_FIREBASE_AUTH_DOMAIN = ... REACT_APP_FIREBASE_PROJECT_ID = ... REACT_APP_FIREBASE_STORAGE_BUCKET = ... REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ... REACT_APP_FIREBASE_..

API KEY는 개인 정보이다. 따라서 깃허브에 프로젝트 코드를 올릴 때는 이를 숨기고 올려야 한다. 이때 .env 파일을 생성하여 API KEY를 환경 변수로 설정해놓고 필요한 곳에서 불러다 쓰면 된다. 먼저 .env 파일을 만들자. 여기서 주의할 점은 .env 파일은 최상단 경로에 위치해야 한다! 그리고 아래와 같이 환경 변수를 선언한다. // .env REACT_APP_API_KEY = api key 입력 이때 환경 변수명은 꼭 REACT_APP_으로 시작해야한다. 또한 따옴표로 문자열을 감싸지 않아야 한다. 이와 관련된 내가 겪은 에러는 여기를 참고하면 된다. 이제 필요한 곳에서 환경 변수를 불러다 쓰면 되는데 아래와 같이 사용한다. const API_KEY = process.env.REACT_A..

개발을 하다 보면 프로젝트 전체에 기본적으로 적용하고 싶은 스타일이 있을 것이다. 예를 들어 나의 경우에는 button 태그를 스타일링 할 때 아예 처음부터 커스텀하고 싶어서 all: unset;을 주고 시작한다. 이때 all: unset;을 button 태그마다 모두 써줘야한다. 또한, hover 시에 포인터 커서가 되도록 모든 button에 설정해야 한다. 이런 귀찮음을 방지하기 위해서 전역 스타일 적용이 필요한데, styled-components에서는 createGlobalStyle를 사용하면 된다. 우선 전역 스타일을 작성할 파일 하나를 만든다. 나의 경우, src\style\global\ 경로에 파일을 만들었다. createGlobalStyle은 일반적으로 styled-components를 사용..

JSON.parse(localStorage.getItem("treasureList")); 위와 같이 localStorage에서 데이터를 불러온 후 파싱해주는 과정에서 아래와 같은 에러가 발생했다. string | null 타입은 string 타입에 할당할 수 없다는 뜻이다. localStorage는 string이나 null 타입을 반환하는데, JSON.parse는 string을 필요로 하기 때문에 발생하는 에러이다. 따라서 JSON.parse 안의 값이 항상 string이 되도록 수정해줘야 한다. JSON.parse(localStorage.getItem("treasureList") || "{}"); 이렇게 localStorage에서 불러온 값이 null이라면 "{}"라는 string 값으로 대신하면서 에..

자바스크립트를 사용하다 보면 예상한 대로 동작하지 않는 경우가 있다. 아래의 경우도 그렇다. 변수에 숫자를 저장한 후에 문자열로 변환하면 정상적으로 동작하지만, 숫자 자체를 문자열로 변환하면 에러가 발생한다. 이는 코드를 실행할 때 "123." 이라는 것이 나오게 되면 숫자 뒤의 점을 소수점으로 인식하여 그 뒤에 숫자가 나올 것으로 예상하기 때문이다. 숫자가 나와야 하는데 toString()이 나오게 되니까 에러가 발생하는 것이다. 이를 해결하기 위해서는 다음과 같은 방법이 있다. 우선 괄호를 사용하는 방법이다. 괄호로 숫자를 감싸주면 그 안에 있는 것만 숫자로 인식하므로 뒤의 점이 소수점으로 인식되지 않는다. 또다른 방법으로는 점을 2개 붙여주는 것이다. 아래의 예시를 보자. 위의 예시에서 3.은 그냥..

Axios에는 인터셉터라는 것이 존재한다. 이는 서버에 요청이 전달되기 전과 서버로부터 응답을 받을 때 가로채서 특정 동작을 수행하도록 하기 위해 존재한다. 인터셉터와 react-spinners 라이브러리를 사용하여 api 요청을 할 때 로딩 중인 상태를 알 수 있도록 로딩바를 구현해보자. 아래 나올 코드는 이전 글과 이어지는 코드이다. [Axios] Axios 인스턴스 생성하기 지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) ..

지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) => { console.error(e); }); }; 또다른 방법으로는 인스턴스를 생성하여 사용하는 방법이 있는데, 이를 사용하면 사용자 정의 구성을 사용할 수 있다. 또한, axios를 모듈화함으로써 재사용성을 높일 수 있다. 이때 재사용성을 높이기 위해 커스텀 훅을 만들어 사용하겠다. // useAxios.js export const useAxios = () => { const..

웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다. 이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다. 간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다. const Home = () => { return ( GET ); }; const Btn = styled.button` all: unset; margin-bottom: 20px; border: 1px ..