ruriruriya

스프링 부트에서 신규 프로젝트를 생성하고 환경설정하는 방법을 알아보자.0. Tool 준비IDE는 STS(Spring Tool Suite)로 사용했다. 이유는 회사에서 실무로 IntelliJ는 비싸고 vscode는 써봤지만 그렇게 편리하단 생각이 안들었기 때문에 STS를 선택했다.1. 신규 프로젝트 생성하기Package Explorer -> Create new Spring Starter Project 클릭 New Spring Starter Project 창이 뜨면 아래처럼 작성하고 Next > 버튼 클릭Name : 프로젝트 명을 작성Location : 프로젝트 저장할 디렉토리 위치 작성Type : Gradle (실무에서는 Maven일 수도 있음..)Packaging : JarJava Version : 17..

BrowserRouter, Routes, Route는 react-router-dom 라이브러리의 주요 컴포넌트로, React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있도록 도와준다.쉽고 심플한 코드로 헤더와 푸터를 고정해보자.1. BrowserRouter, Routes, Route1-1. BrowserRouter BrowserRouter는 HTML5의 History API를 사용하여 UI를 업데이트하고 URL을 동기화하는 라우터로 애플리케이션의 최상위 컴포넌트로 감싸져야 하며, 이를 통해 하위 컴포넌트들이 라우팅 기능을 사용할 수 있게 된다.import { BrowserRouter as Router } from 'react-router-dom';const App = () => ( ..

react에서는 네비게이션 바를 어떻게 만들까?react-router 라이브러리로 모듈화 시키고 간편하게 라우팅 설정을 할 수 있다. react-router 주요 기능동적 라우팅( Dynamic Routing) : 사용자가 특정  URL에 접근할 때 해당 URL에 필요한 컴포넌트를 렌더링라우트 가드(Route Guards) : 사용자 인증 상태 등에 따라 특정 라우트를 제한할 수 있음.레이아웃 관리 : 'Outlet'과 같은 기능을 통해 페이지 레이아웃을 쉽게 관리데이터 로딩 전략 : 로딩과 페칭을 효율적으로 처리하기 위한 'Loader' 기능이 제공코드 스플리팅(Code Splitting) :  'React.lazy'와 'Suspense'를 이용하여 필요한 라우트만 로드하고, 다른 페이지로 이동할 때 ..

React의 props는 한마디로 얘기하면 '속성'이다.실제로 properties의 줄임말! props는 컴포넌트로 전달되는 매개변수로, 컴포넌트의 재사용성을 높이고 데이터를 효과적으로 관리할 수 있도록 도와준다.주로 부모 컴포넌트에서 자식 컴포넌트로 ㅗ데이터를 전달할 때 주로 사용된다.1. props 사용방법  props 전달하기부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때,HTML 태그 속성을 설정하는 것과 유사한 방식으로 작성한다. props 사용하기자식 컴포넌트에서는 전달받은 props를 이용하여다양한 데이터를 표시하거나 로직에 사용할 수 있다.// 부모 컴포넌트function App() { return ( 사용자 정보 );}// 자식 컴포넌트fun..

React에서 컴포넌트를 함수로 정의하고 사용자 정의 태그로 컴포넌트를 사용해보자.그리고 리액트에서 함수를 정의할 땐 반드시 대문자로 시작해야 한다.import './App.css';// 컴포넌트 정의 1function Header() { return WEB }// 컴포넌트 정의 2function Nav() { return html css js }// 컴포넌트 정의 3function Article() { return Welcome Hello, WEB}function App() { return ( // 컴포넌트를 사용하기 위한 태그 );}expo..

React 테스트 후 빌드하고 배포하는 방법이다.1. 빌드하는 방법배포 전에 무언가 실행되고 있다면 실행을 중지하고 한다. 이는 포트 충돌을 방지하고, 빌드 프로세스가 안전하게 진행되도록 한다. Ctrl + Cnpm run build배포하면 build 폴더가 생성이 되고그 안에 파일의 용량을 줄이기 위해 띄어쓰기 등이 없어진 index.html 등이 생성된 것을 확인할 수 있다. 2. index.html 로컬 실행하기간편하게  build/index.html 서비스 웹을 실행할 수 있는 방법이다.npx serve -s build

src/index.js입구 파일전형적인 설정이 들어감은 App.js에서 태그를 불러와서 ui를 보여준다.App.jsfunction App(){} 이 안에서 ui를 제작함이 것에 대한 CSS는 App.css가 반영 됌.(index.js에도 index.css가 적용되어 있음.)id = rootroot id의 렌더링의 root는 public/index.html에 있음.

React 의 기본 환경설정을 해보자.1. node.js 설치 node.js 사이트에서 다운로드 LTS 또는 현재버전 크게 상관은 없다. https://nodejs.org/en/download  Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org node.js 사이트에 node.js 사이트에서 다운로드 LTS 또는 현재버전 크게 상관 없음. 서 다운로드 LTS 또는 현재버전 크게 상관 없음. 2. VS codevscode가 설치되어 있지 않다면 설치해야 한다.https://code.visualstudio.com/Download Download Visual Stu..