우당탕탕 아장아장

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

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 Rechart 원하는 데이터 뿌려주기 상위 컴포넌트로부터 받은 title, data, name, domain, stroke을 이용 title : 그래프 상단 제목 data : 그래프에 출력될 데이터 name : X축 값의 기준 domain : Y축 값의 범위 stroke : 선 색상 되는게 있고 안되는게 있나 보다..😣 나는 이 아이로 결정! 원하는 데이터 값을 뿌려줘봐야지! Try the demo in codesandbox >> 를 클릭 const data = [ { name: "Page A", uv: 4000, pv: 2400, amt: 2400 }, { name: "Page B", uv: 3000, pv: 1398, amt: 2210 }, { name:..

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 firebase data fetch 우리조 노션에 올라가있던 firebase data fetch방법! import React, { useEffect, useState } from "react"; const 폴더명 = () => { const [data, setData] = useState([]); const fetchdata = async () => { try { const res = await fetch( "firebase 경로" ); const result = await res.json(); setData([...result]); } catch (error) { console.log(error); } }; useEffect(() => { fetchdata..

git 오류 기록 git switch가 되지 않을 때 내 브런치에 commit과 push를 했는데, 실행이 되지 않았다. 그리고 하기전에 필요 없어 보이는 코드 주석처리를 했더니 다시 commit을 하라고 한다.. 커밋 후 내가 원하는 브랜치(develop)으로 이동 성공!! 간단하게 해결되서 즐거웠다..

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개.. 하나만 남은것도 해결을 했는데, 화면에 안뜬다ㅠ_ㅠ 그냥 새롭게 하는것도 방법인듯 해서... 고민을 조금 더..