뭉게구름 엔지니어 되는 과정

📌 React 프로젝트를 처음 시작하면 main.jsx와 App.jsx라는 파일이 기본적으로 생성됩니다. 이 두 파일이 각각 어떤 역할을 하는지, 그리고 React가 실행되는 과정에서 어떻게 동작하는지 쉽게 이해할 수 있도록 설명해보겠습니다.🔹 1. main.jsx와 App.jsx는 왜 필요한가?React에서는 하나의 애플리케이션을 여러 개의 작은 컴포넌트(Component)로 나누어 관리합니다. 그중 main.jsx와 App.jsx는 기본적인 구조를 담당하는 핵심 파일입니다. ✔️ main.jsx → React 애플리케이션을 실행하는 진입점✔️ App.jsx → 실제 화면을 구성하는 메인 컴포넌트 이제 각각의 파일을 자세히 살펴보겠습니다.🔹 2. React의 기본 파일 구조📁 React 프로젝트..

React 책을 보면서 공부를 하던 도중, React.Fragment를 사용하여 여러 요소들을 감싸주었는데, 아래 이미지와 같은 에러가 나오면서 정상적으로 동작이 되지 않았습니다. 그래서 인터넷에서 찾아보니 맨 윗단에 React를 import 해주어야 합니다. 따라서 아래와 같이 맨 위에 React를 import 해주면 정상적으로 동작을 하게 됩니다.import React from 'react'function App() { return ( Hello World This is my first React component );}export default App   이상 입니다.

상황 정리스프링부트로 RESTful 웹 서비스를 만들고, OpenAPI 3를 이용하여 API를 문서화 하는작업을 하던 도중에 아래 이미지 처럼 500 에러가 나왔습니다. 오류 해결build.gradle 파일의 dependencies에 implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.0.2' 해당 의존성을 추가하고, 아래의 OpenApiConfig 클래스를 생성한 후,package com.packt.cardatabase;import org.springframework.context.annotation.Bean;import org.springframework.context.annotat..

리액트(React) 설치먼저 원하는 경로에 폴더를 생성 해줍니다.마우스로 폴더 클릭 후 마우스 오른쪽 버튼을 클릭하여 터미널에서 열기npm create vite 명령어 입력명령어를 실행하면 아래의 이미지와 같이 원하는 것을 선택해서 설치해주면 됩니다.원하는 프로젝트 이름원하는 프레임워크원하는 variant그리고 나서 설치가 정상적으로 완료되면 아래의 이미지 처럼 디렉터리를 옮긴 후 npm install 명령어를 입력해주면 리액트 설치가 완성되게 됩니다. 리액트 설치 중 겪은 오류처음에는 아래의 명령어로 리액트 설치를 진행 했더니npx create-react-app board-front --template typescript아래와 같은 에러 로그가 나오게 되어 인터넷에서 검색을 해보았더니,nstallin..