개발천재

.gitignore가 필요한 이유불필요한 파일을 Git에 추가하지 않기 위해 프로젝트에서 생성되는 임시 파일 또는 캐시 파일은 원격 저장소(GitHub 등)에 업로드할 필요가 없다. 예를 들어, react에서 node_modules/ 폴더는 NPM 패키지들이 저장되는 폴더인데, 이 폴더는 package.json을 이용해 언제든 다시 설치할 수 있다. 따라서 Git에 추가할 필요가 없다. 민감한 정보 보호API 키, 데이터베이스 비밀번호 같은 개인 정보가 포함된 파일이 올라가는 것을 방지하기 위해 gitignore 파일이 필요하다. 예를 들어, .env 파일에는 환경변수를 저장하는데, 이 파일을 .gitignore에 추가하면 깃허브에 API 키가 공개되는 실수를 방지할 수 있다. 운영체제 및 IDE 관련 ..

리액트에서 firebase SDK 설치하기터미널에서 아래의 코드를 입력하여 firebase SDK를 설치한다.npm install firebase  src 폴더 안에 firebase.js 파일을 생성하고 Firebase 설정 코드를 추가한다.설정코드는 firebase에서 프로젝트를 생성하고 설정을 완료하면 제공된다.(문서 하단 참조)// src/firebase.jsimport { initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";import { getFirestore } from "firebase/firestore";// Firebase 설정 객체const firebaseConfig = { apiKey: "YOUR_A..

Objects are not valid as a React child (found: object with keys {type, payload}). If you meant to render a collection of children, use an array instead.  이 오류는 리액트 컴포넌트에서 객체를 직접 렌더링하려 할 때 발생하는 오류이다. 리액트는 객체를 직접 렌더링할 수 없다. 예를 들어, payload 또는 type과 같은 객체 속성을 렌더링하려고 할 때 이 오류가 발생한다.  오류 발생 원인Objects are not valid as a React child (found: object with keys {type, payload}). 오류는 컴포넌트에서 type과 payload와 같은..

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks    오류 발생 원인useEffect가 조건문 안에서 호출되거나, 렌더링에 따라 조건적으로 호출되는 경우에 React가 훅을 호출하는 순서를 추적할 수 없어서 에러가 발생한다.예를 들어, useEffect가 조건에 따라 호출되면, React는 그 조건이 변경될 때마다 훅이 호출되는 순서가 달라지므로 상태를 관리할 수 없다.   오류 해결방법useEffect를 제일 최상단에 넣으니까 해결된 이유는 리액트 훅 규칙 때문이다. 리액트 훅은 ..

[eslint] src\pages\CartPage\index.jsLine 4:3:  React Hook "useEffect" is called in function "cart" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooksSearch for the keywords to learn more about each error.  오류 발생 원인이 오류는 리액트 컴포넌트의 이름이 소문자..

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리   리액트란(React)?리액트(React)는 페이스북에서 개발한 자바스크립트 기반의 UI 라이브러리다. 2013년에 처음으로 오픈소스로 공개됐다. 웹 애플리케이션의 뷰(View)를 구축하는데 초점이 맞춰져있고, 컴포넌트 기반 아키텍처를 통해 UI를 재사용할 수 있다. 2015년에 React Native가 발표되면서 모바일 앱 개발에서도 리액트의 인기가 급증했다. React Native는 기존의 자바스크립트와 리액트의 개념을 사용하여 네이티브 모바일 앱을 개발할 수 있도록 했습니다. 이로 인해 리액트는 웹뿐만 아니라 모바일 앱 개발에서도 매우 중요한 기술로 자리잡게 되었다. 리액트를 사용하려면 자바스크립트를 기본적으로 이해하는 것이 좋다. 리액트는 ..

Module not found : Error: Can't resolve 'web-vitals' in '경로' ERROR in ./src/reportWebVitals.js 5:4-24Module not found: Error: Can't resolve 'web-vitals' in '경로'  이 오류는 web-vitals 모듈이 설치되어 있지 않거나 제대로 설치되지 않았을 때 발생한다. web-vitals는 리액트 애플리케이션에서 성능을 측정하기 위한 라이브러리인데 이 라이브러리가 설치되지 않으면 아래와 같은 오류를 띄운다.     web-vitals 모듈 설치하기터미널에서 다음 명령어를 실행하여 web-vitals 패키지를 설치한다. web-vitals 가 설치되지 않아서 발생하는 경우가 대부분이므로 대부..

state 개념 정리리액트의 state는 컴포넌트의 동적인 데이터를 관리하는 객체로, 시간에 따라 변할 수 있는 상태를 나타낸다. state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지하므로, 사용자 입력, API 응답, 타이머 등 변화하는 데이터를 효율적으로 관리할 수 있다. 리액트의 변수에는 일반변수와 state 변수가 있는데 변수 값을 직접 변경하는 일반 변수와는 달리 state 변수는 setState 또는 useState를 사용해 변경할 수 있다.일반 변수는 값을 변경해도 UI가 자동으로 업데이트 되지 않지만 state 변수는 값을 변경하게 되면 리액트가 자동으로 UI를 다시 랜더링한다. 이는 리액트가 직접 state 변수 상태를 관리하기 때문이다. 그래서..

JSON(JavaScript Object Notation)이란?JSON (JavaScript Object Notation)은 데이터를 교환할 때 주로 사용하는 경량의 데이터 형식이다. JSON은 텍스트 기반이며, 사람이 읽고 쓰기 쉽고, 기계가 해석하고 생성하기도 용이하다는 장점을 가지고 있다. 주로 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환을 할 때 많이 사용되는 JSON은 사람이 읽고 쓰기에 쉬운 형식을 제공하며, 자바스크립트에서 제공하는 메서드(JSON.parse(), JSON.stringify())를 사용하면 손쉽게 처리할 수 있다. JSON의 주요 특징은 경량, 텍스트 기반, 언어 독립적이라는 점이다. JSON 구조JSON은 기본적으로 키와 값 쌍으로 구성된다. 각 값은 문자열, 숫자..

export와 importES6(ECMAScript 2015)에서 도입된 모듈 시스템의 기능으로, 코드를 여러 파일로 나누어 재사용성과 유지보수를 개선하기 위해 사용한다. 이를 통해 한 파일에서 정의된 함수, 객체, 클래스 등을 다른 파일에서 사용할 수 있다.  export로 내보내기사용방법은 선언부 앞에 export 붙이면 된다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다.// data.jsexport const questions = [ { number: '01', question: '곧 크리스마스! 회사에서 크리스마스 파티 스텝을 모집한다는데?', choices: [ { text: '파티 스텝은 못하지ㅎ...(그래도 파티는 재밌겠다 ..