우당탕탕 아장아장

리액트란? 자바스크립트의 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 경로 확인! ⭐⭐ 뜨는데, 이제 문제는 뜨는게 있고, 안뜨는게 있다는 것.... 차이가 뭔지 모르겠다😅😅

JavaScript 개인 프로젝트 과거에서 온 기록 등산을 좋아해서 등산관련된 정보를 뿌려주는 걸 해볼지, 나에 대한 기록을 할지 고민을 해봤다! 종이에 슥삭슥삭 그려서 틀부터 잡아버리기! 이런 저런 사이트나 앱에서 봤던 거 중 내가 사용해보고 싶은 것들 사용해보기! 요렇게해서 다 구현을 하고 싶었으나, 어느 순간 현실과의 타협이 시작됨.. 이걸 리액트로 멋있게 예쁘게 다시 만들어봐야지.. 여기에 < 저건,, 또.. 왜!! 오타ㅠㅠ 사라짐! 경상 전라 제주가 안찍힘 왜? 뱉어낼 수 있는 산들이 이렇게나 있는데!? 해결..! 다시 문제.. 또 다시 해결.. 데이터 로드가 끊긴 부분 확인해보기! XML파일에서 뭔갈 하는건 아주아주 힘든 일인 것 같ㄷㅏ.... 이렇게,, 뭐,, ,,, 이미지 나오면 됐지.....

React에서 Chart.js 사용하는 방법 헤매지 않기 위한 기록 1. 리액트에서 Chart.js를 사용하려면 우선 두개가 필요 npm install chart.js npm install react-chartjs-2 chart.js 나는 쪼랩이니까 그냥 터미널에 두개 입력해서 설치 컴포넌트는 이렇게 준비 그리고 App.js에 연결함 ➡ Chart.js import styled from 'styled-components'; import { Line } from 'react-chartjs-2'; const Chart = () => { return ( ); }; export default Chart; const Container = styled.div` width: 90vw; max-width: 900px;..

뚝딱 만들 수 있는 그 날을 위해 재도전! 이번 컨셉은 .... 흑회백! 여백의 미..? 왜 화면에 안나오니 왜😩😩😩😩 거짓말.. 나한테 왜그래.. App.js에서 괄호를 다른 함수위에 닫음..... 내가 넣어놓은 값까지는 보임! 추가와 삭제까지..! 으아아아 두번째를 했지만,, 아직 내께 아니다.. 느낌이 아닌 확신.. 가계부는 언제쯤..

To Do List 정도는 껌으로 만들어야하는데, 나는 이가 없는 사람..🤐 힙겹고 어렵게 만들었고, 이제 다시 만들어볼 예정인 To Do List! 밥먹기 같은건 매일매일 잘 할 수 있는데, 리액트 공부하기와 투두리스트 만들기는 언제쯤.. 내 자신 화이팅.. 기능 ➕ 누르거나, 엔터를 치면 일정 입력 ✔ 를 누르면 텍스트 색 변경 + 중간에 줄 긋기 ➖ 누르면 아이템 삭제! 추가하고 싶은 기능 - 귀여운 폰트로 글씨체 변경 - 글자가 입력되지 않았을 경우 강조표시 🤦‍♂️ To Do List를 하면서 느끼고 배운 점 과정 1. 그림그리기 2. 전체적인 틀 만들기 3. UI만들기 (전체적인 틀, 입력 추가, 리스트 등) 4. 기능 구현 (체크박스 밑줄, 일정의 추가, 제거, 수정) map함수에는 key값..