Project.log

Firebase + React Hosting리액트 프로젝트에 파이어베이스를 적용하여 호스팅을 해보겠습니다. 설명하기에 앞서..저는 Vite를 이용하여 React.js+TypeScript 조합으로 사용중이며 프로젝트를 이미 만든 상태에서 시작합니다. 파이어베이스 세팅프로젝트 만들기파이어베이스에 구글로 로그인을 하시고 위와 같이 시작하시면 될것 같습니다.먼저 프로젝트 추가를 클릭하여 프로젝트를 만들어줍니다. 저는 프로젝트 이름을 DongNol이라고 하겠습니다.따라하시는 분들은 원하시는 프로젝트 이름으로 작명하시면 되겠습니다. 애널리틱스 설정을 해줍니다.대충 설명을 드리자면 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 서비스입니다.필수가 아닌 권장이므로 편하신대로 설정해주시면 되겠습니다.저는 나중에 테..

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다. 바로 firebase.js파일에서 다음과 같은 오류가 생깁니다. import firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, appId: proce..

리액트를 사용하는 프로젝트들을 보면 의미없이 쓰이는 태그들이 많이 보입니다. 사용하지 않는태그를 쓰는 이유는 리액트에서는 하나의 컴포넌트가 여러 엘리먼트들을 반환(return)하게 되는데 이때 리액트에 쓰이는 문법 JSX규칙상 return 문 안에는 반드시 하나의 최상위 태그가 있어야 하기 때문인데요. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문입니다. 의미없이 쓰이는 태그예시를 보면 이러한 코드를 짜고 크롬개발자도구에 Elements를 열어보면 이런식으로 출력되게 됩니다. 위 처럼 로 묶어주는 부분이 많지 않으면 상관이없지만 많다고 가정을 해보면 여러 엘리먼트를 감싸주기 위해 별 의미없는 div태그를 남발하게 됩니다. 물론 큰 문제는 되지않지만 코드가 더러워지고 효율이 안좋아지고 불필요한 태..