전체 글29 [React] JSX 문법 JSX 우선 App.js를 아래와 같이 수정하고, App.css에 body와 .hello를 추가한다. JSX에서는 으로 작성해야 한다. 그리고 npm run start를 하면 아래와 같이 나옵니다 아래와 같이 변수를 {}를 이용하여 사용 가능하 State 변수대신에 state를 사용해도 되는데 import React, {useState} from 'react'; 를 추가해줘야 합니다. 그러고 나서 아래와 같이 사용하면 됩니다! 글제목은 state 데이터, 글제목변경은 state의 데이터를 변경하는 함수입니다. 아래와 같이 Array로 넣어줄 수도 있습니다. Reference https://velog.io/@kiyoog02/React-%EA%B8%B0%EC%B4%88-2-JSX%EC%99%80-state-.. React 2023. 12. 28. 더보기 ›› [React] React.js Fragments React에서 컴포넌트가 여러 Elemnet를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용 가능합니다. 아래 Table과 Columns 예시를 보겠습니다! class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이렇게 하면 Table의 출력결과는 아래와 같습니다! Hello World 결과를 살펴보면 안에 가 포함되어 있는 것을 볼 수 있는데 이것을 제거하기 위하여 아래와 같이 작성해줍니다. class Columns .. React 2023. 12. 27. 더보기 ›› [React] React.js 시작 우선 아래 사이트에 들어가서 node js를 설치해주어야 한다 ! https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node js 버전 확인은 cmd창에서 아래와 같이 확인 가능하다. React 프로젝트 생성은 아래와 같이 npx create-react-app [프로젝트이름] 으로 생성 가능하다. npx create-react-app test-app index.js 우선 index.js를 살펴보면 React.StrictMode라는 것이 있는데 애플리케이션 내에서 잠재적인 문제를 알아내기 위한 도구로, Fragment와 같이 UI를 렌더링하지 않고, 자식.. React 2023. 12. 27. 더보기 ›› [Spring Boot] Spring Boot와 MongoDB 연동하기 Spring Boot와 MongoDB를 연동하기에 앞서 MongoDB와 MongoDB Compass를 설치해줍니다! 의존성 추가 implementation 'org.springframework.boot:spring-boot-starter-data-mongodb' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' application.properties spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update #spring.jpa.properties.hibernate.format_sql=true spring.jackson.property-naming-strategy=SNAKE_.. Spring Boot 2023. 7. 19. 더보기 ›› PromQL을 이용한 서버 모니터링 프로메테우스와 그라파나 설치는 아래 글을 참고하였습니다 ! https://velog.io/@ryuni/Multipass%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-kubernetes-%ED%81%B4%EB%9F%AC%EC%8A%A4%ED%84%B0-%EA%B5%AC%EC%B6%95-%EB%B0%A9%EB%B2%95 Multipass를 활용한 kubernetes 클러스터 구축 방법 Multipass를 활용한 k3s 클러스터를 손쉽게 구축하는 방법을 작성한 글 입니다. velog.io 설치 후 프로메테우스와 그라파나를 실행시켜 줍니다. cd lightweight-kubernetes-sandbox-cli bash packages/prometheus/helm.sh --open prom b.. Server 2023. 7. 19. 더보기 ›› 이전 1 2 3 4 5 6 다음
