우당탕탕 아장아장

React 개념 정리 Context란? - 어플리케이션에서 전반적으로 사용할 값을 관리 (사용자 언어, 로그인 상태, UI 테마 등 환경 설정) - Context와 컴포넌트가 연동되면 재사용이 어려움⭐ - 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다! useContext const value = useContext(MyContext); - 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 useContext() 사용 방법 Context 객체 생성 import { createContext } from 'react'; // MyContext 객체 생성 const MyContext = createContext(); C..

State란? - 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태) State의 종류 - 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용) - 함수형 컴포넌트의 useState 함수 (16.8버전 이후) Hooks란? - 16.8버전 이후 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공 기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌 종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef 규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출 useState()..

리액트란? 자바스크립트의 UI 라이브러리로, "상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리" 그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택 Component 기반 Virtual DOM 사용 JSX 문법 사용 DOM(Document Object Model) 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 단어 그대로 정리하면 문서 객체 모델 MDN에서의 정의 HTML, XML 문서의 프로그래밍 interface DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할로, 브라우저는 CSS, HTML, 그리고 순수 자바스크립트 3 가지만 이해한다. 서로 ..

React에서 Reacjarts 라이브러리 사용하기 Chart.js보다 쉬운듯 $ npm install recharts npm에서 install 해주기! 1. 필요한 차트 영역 선택 2. 당신이 원하는 그릴 요소들을 추가하기 3. 일부 구성 요소의 소품 조정 4. 상호작용 추가 5. 당신의 컴포넌트를 사용자 지정하기 엄~~청나게 다양한 차트들이 있음! 왜인지는 모르겠지만, 아래 파란 링크를 눌러서 복붙한다는 후기를 보고, 따라하기 ⭐⭐ 꼭 파란 링크 눌러서 복붙! 그리고 상단의 styles 경로 확인! ⭐⭐ 뜨는데, 이제 문제는 뜨는게 있고, 안뜨는게 있다는 것.... 차이가 뭔지 모르겠다😅😅

React 오류 기록 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') 🤯 문제 path 이름이 정의가 되지 않았다고 하는데, 그걸 어디서 정의하지? 직독직해 하는 기분.... 🥳 문제 해결 import { BrowserRouter, Route, Routes } from "react-router-dom"; ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ BrowserRouter안에 넣으니까 pathname도 찾나보다.. 드디어 화면에 뜬다!!!🤸🏻‍♀️🤸🏻‍♀️

React 오류 기록 Uncaught Error: useRoutes() may be used only in the context of a component. 🤯 문제 해석을 해 보자면, useRouter()는 로 감싸야 한다,, 라는데 이게 감싼게 아닌가보다.. 🥳 해결 방법 import { BrowserRouter as Route, Router, Routes } from "react-router-dom"; 로 감싸고, element 옆에 경로 제대로 설정 거짓말,, 또 다른 오류에 봉착!🤯🤯🤯 유쾌하지못한 오류 시리즈는 계속 된다😥😥😥😥😥😥

Git 오류 기록 cannot lock ref 'refs/remotes/origin' 왜 맨날 cannot이라고 할까 긍정적으로 살아줘 제발 🤯 문제 누군가의 브랜치와의 문제가 생겼다..! 🥳 해결 방법! $ git push --force 너무나 오래 머지를 하지 않아서 생긴 오류일수도 브랜치끼리 꼬여서 생긴 문제.. 그냥 푸쉬해버리자~~ 에헤라디야!

React 오류 기록 npm start와 yarn start가 안될 때 ➡ npm start 오류 내용 npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\admin\AppData\Local\np..

React 오류 기록 Module not found: Error: Can't resolve 파일을 옮기다 생긴 문제들 작업하던 공간과 팀프로젝트를 하는 공간이 달라서 그대로 복붙을 했다고 생각했지만,,, 어제는 18개 ➡ 5개 export 문제는 파일명이 달랐음.. 해결 하나씩 해결해 나가보자.. 습습 후후 styled-component 설치하기 (1) npm 설치 명령어 npm install styled-components (2) Yarn 설치 명령어 yarn add styled-components 스타일드컴포넌트를 분명 설치했는데, pull 당겨오니 사라져버렸다!ㅜㅜㅜㅜ 오류 4개 ➡ 7개.. 하나만 남은것도 해결을 했는데, 화면에 안뜬다ㅠ_ㅠ 그냥 새롭게 하는것도 방법인듯 해서... 고민을 조금 더..

유쾌하지 못한 오류 기록 🤯문제 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 깃에서 풀을 당겨온 후, npm start를 하려고 하니, 저런 멘트가 떴다. 🥳 해결방법 yarn add global react-scripts npm install -g react-scripts 평소에 npm을 이용하지만, 저렇게 npm으로 문제가 생기면 yarn으로 해결 중.. (아무것도 모르는 사람) 아직까지는 yatn으로 해결했을 때, 문제가 없었다!