공부방

페이지를 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지이지만 React는 html 파일을 하나만 사용한다.(SPA) 그래서 react에서는 누가 다른 페이지 요청하면 그냥 내부에 있는 갈아치워서 보여주면 된다.React-Router-dom 설치외부 라이브러리이기 때문에 react-router-dom 홈페이지 들어가서 그대로 따라해야됨npm install react-router-dom@6터미널 열어서 입력하고 설치import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ..

CanvasJs 라이브러리를 기반으로 하는 React 컴포넌트다양한 유형의 차트를 제공하는 JavaScript 라이브러리빠르고 가벼운 차트 구현을 지원options라는 프로퍼티를 사용하여 차트의 설정을 지정하며 다양한 차트 유형과 상호작용(줌, 툴팁 등)을 사용할 수 있다.설치npm install canvasjs-react-charts사용import React from 'react';import { CanvasJSChart } from 'canvasjs-react-charts';const MyChart = () => { // 차트 옵션 설정 const options = { theme: "light2", // 차트 테마 title: { text: "Workout Performance..

fast-xml-parserJavaScript로 작성된 빠르고 가벼운 XML 파싱 라이브러리XML 데이터를 JavaScript 객체로 변환하거나 JavaScript 객체를 XML 문자열로 변환할 수 있다.특징빠른 파싱 : 이름처럼 매우 빠르게 XML을 파싱할 수 있으며, 성능이 중요한 환경에서 유용경량 : 종속성이 없고 가볍기 때문에 브라우저나 Node.js 환경 모두에서 사용하기 적합옵션 설정 가능 : XML을 파싱할 때 다양한 옵션을 설정할 수 있다. 예를 들어, XML 속성 파싱, 태그 및 속성 이름 변환, 텍스트 및 숫자 데이터 유형 처리 등에 대한 세부 제어가 가능JSON 변환 : 파싱된 XML 데이터를 JSON 형식으로 변환할 수 있어, JSON API와의 상호 운용성이 좋음유효성 검사 : X..

html  긴 부분 컴포넌트 만들기function App(){ return ( (생략) )}function Card(){ return ( 상품명 상품정보 )}Card 라는 컴포넌트를 만들고 축약할 html을 담는다.원래 App 컴포넌트에 있던 데이터들을 Card 컴포넌트로 데려오기(function App 내부)function Card(props){ return ( { props.shoes[0].title } { props.shoes[0].price } )}shoes라는 state는 A..

git restore파일 하나를 되돌릴 때git restore 파일명최근 commit 된 상태로 현재 파일의 수정내역을 되돌릴 수 있음git restore --source 커밋아이디 파일명입력한 파일이 특정 커밋아이디 시점으로 복구git restore --staged 파일명복구랑은 상관없지만 특정 파일은 staging 취소 가능git revertcommit을 되돌릴 때3개의 커밋 중 b 파일이 문제가 많아서 commit을 취소하고 싶은 상태왼쪽에 있는 노란 문자들은 commit의 고유 idgit revert 커밋아이디그 커밋아이디에서 일어난 일만 취소실행해서 에디터가 뜨면 맘대로 커밋메세지 수정하고 닫으면 됨이렇게 Vim 에디터가 뜬다면 커밋 메세지 수정하라는건데 i 눌러서 글자 수정하고 싶으면 하고 e..

전처리기(preprocessing)본격적으로 컴파일하기 전에 처리할 작업들외부에 선언된 다양한 소스 코드, 라이브러리 포함(e.g. #include)프로그래밍의 편의를 위해 작성된 매크로 변환 (e.g. #define)컴파일할 영역 명시 (e.g. #if, #ifdef, ...)컴파일(compile)전처리가 완료 되어도 여전히 소스 코드전처리 완료된 소스 코드를 저급 언어(어셈블리 언어)로 변환어셈블(assemble)어셈블리어를 기계어로 변환목적 코드(object file)를 포함하는 목적 파일이 됨링킹목적 파일 vs 실행 파일목적 파일과 실행 파일은 둘 다 기계어로 이루어진 파일하지만, 목적 파일과 실행 파일은 다르다목적 파일은 링킹(Linking)을 거친 이후에야 실행 파일이 된다.

object 자료형let user = { name : 'kim', age : 20 }자료들 왼쪽에 이름을 붙여야됨user라는 변수에 'kim', 20 둘 다 저장이 가능array와 다르게 이름 붙여서 저장할 수 있는게 장점원하는 자료를 꺼내고 싶다면 점 찍고 이름 부르면 된다.ex) user.nameexport default / import(data.js 파일)let a = 10;export default a;(App.js 파일)import a from './data.js';console.log(a)data.js라는 파일에 데이터들을 저장해두고 App.js에서 가져와서 쓸 수 있다.export default 변수명; 원하는 변수를 밖으로 내보내기export 했던 변수를 다른 파일에서 사용하고 싶으면 im..

이미지 넣기(App.jsx)(App.css).main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center;}css 파일에서 src 폴더 안에 있는 사진을 사용하고 싶으면 -> ./이미지경로 사용하면 됨.html 안에서 src 폴더의 이미지를 넣고 싶다면?import bg from './bg.png'function App(){ return ( )}이미지를 import 해오고 사용해야됨import 작명 from './이미지경로'이미지 경로가 필요한 곳에서 작명한 걸 사용 태그 쓰고 싶으면 이렇게 써도 보인다.화면을 가로로 3등..

3-way mergemerge의 기본 동작방식브랜치에 각각 신규 commit이 1회 이상 있는 경우 merge 명령을 내리면 두 브랜치의 코드를 합쳐서 새로운 commit을 자동으로 생성fast-forward merge새로운 브랜치에만 commit이 있고 기준이 되는 브랜치에는 신규 commit이 없는 경우딱히 합칠게 없어서 그냥 신규 브랜치 보고 "지금부터 니 이름은 main 브랜치야" 라고 해주는 것기준이 되는 브랜치에 신규 commit이 없으면 자동으로 fast-forward merge가 발동된다.이게 싫다면 git merge --no--ff 브랜치명 해서 강제로 3-way merge 해도 된다.브랜치 삭제git branch -d 브랜치이름git branch -D 브랜치이름3-way, fast-fo..

연산 코드 : 수행할 연산 오퍼랜드 : 연산에 사용될 데이터 혹은 연산에 사용될 데이터가 저장된 위치붉은색 : 연산코드검정색 : 오퍼랜드오퍼랜드연산에 사용될 데이터연산에 사용될 데이터가 저장된 위치(주소 필드)더 자주 사용됨.연산 코드수행할 연산대표적인 연산 코드의 종류데이터 전송MOVE : 데이터를 옮겨라STORE : 메모리에 저장하라LOAD(FETCH) : 메모리에서 CPU로 데이터를 가져와라PUSH : 스택에 데이터를 저장하라POP : 스택의 최상단 데이터를 가져와라산술/논리 연산ADD / SUBSTRACT / MULTIPLY / DIVIDE : 덧셈 / 뺄셈 / 곱셈 / 나눗셈INCREMENT / DECREMENT : 오퍼랜드에 1을 더하라 / 오퍼랜드에 1을 빼라AND / OR / NOT : A..