이전까지 npx create-react-app을 통해서 리액트 앱을 만들었는데 , vite는 이를 대신해서 사용할 수 있는 것이다. 물론 리액트 뿐만 아니라 뷰 같은 다른 프로젝트도 생성이 가능하다.
그렇다면 왜 바이트를 사용할까?
공식 문서내용은 아래와 같고 요약하자면 기존에 ES모듈(import)이 사용하술 있기 전에는 번들링을 통해서 , 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결했다. 그런데 이러한 방식이 점점 자바스크립트 코드가 많아지면서 병목현상이 생겼다. 그 당시엔 좋았떤 것이 점차 속더 및 성능 저하가 생긴 것이다.
이를 ES모듈을 적용하여서 속도 및 성능을 개선한 게 바이트다.
바이트는 느린 서버시작과 업데이트를 개선함
서버시작 개선방법
Depencies 부분
자바스크립트는 ES번들을 사용하여 종속성을 사전 번들로 제공하고, ES번들은 GO로 작성되었는데 이는 자바스크립트 기반 번들보다 10~100이상 속도가 빠르다.
Sourcecode 부분
Native ESM을 통해서 소스코드 제공 + 브라우저가 일부 번들링 작업을 인계받고, 브라우저가 요청시에만 제공
서버업데이트 개선방법
기존 번들러 기반 빌드 설정에서는 파일 편집 시 전체 번들을 다시 빌드하는 경우가 있는데 , vite가 사용하는 HMR방식은 페이지의 나머지 부분에 영향을 주지않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 함
또한 ESM을 통해서 실행하여서 기존 HMR방식과는 다르게 앱의 크기에도 덜 영향을 받는다.
소스코드를 작성하여 변경하더라도 state가 초기화 되지않음.
설치방법
npm init vite (처음 사용하는 경우 y를 누르면 create vite가 설치됨)
이후 원하는 프로젝트 (react ) -> typescript를 선택한 후 npm install로 모듈 설치 이후 npm run dev로 실행 (npm start 대신 사용)
패캠 강사님이 비교한 것에 의하면 바이트 vs CRA 의 차이는 설치 시간 30초 1분40초 FIle Size 45MB 221MB Build File Size 150KB 553KB
에서 임의의 더미데이터를 넣어 작성하였지만, 서버와 연결을 할 거면 axios를 통해서 데이터를 전송하시면 됩니다.
이제 라이브러리에 대해 설명하겠습니다.
<FullCalendar
headerToolbar={{
left: "prev next today", // 좌측버튼
center: "title",
end: "dayGridMonth timeGridWeek timeGridDay listMonth",
}}
locale={"ko"} // 한국어
navLinks={true} // 오른쪽 상단의 day 클릭 대신 날짜를 클릭
businessHours={true} // 주말을 다른 색으로
plugins={[dayGridPlugin, timeGridPlugin, listMonth, interactionPlugin]}
initialView="dayGridMonth"
eventClick={eventCLick}
ref={calendarRef}
dateClick={handleDateClick}
events={[
{
title: "점심약속",
date: new Date(), //'2023-08-16
},
{
title: "미팅",
start: "2023-08-14", //'2023-08-16 까지 적으면 줄이 김
},
{
title: "미팅2",
start: "2023-08-14 12:30", //'2023-08-16 까지 적으면 줄이 김
},
{
title: "비지니스",
start: "2023-08-18 12:30:00",
constraint: "김사장과 복싱",
end: "2023-08-20 12:30",
},
{
title: "워크샵",
start: "2023-08-17 12:30:00",
constraint: "팔협지 또 일등이야",
end: "2023-08-22 12:30",
},
{
title: "데이트",
start: "2023-08-27 12:30:00",
constraint: "영화관람",
backgroundColor: "#ff0000",
},
]}
/>
headerToolbar 의 경우 헤더에 있는 버튼들을 정의해줍니다. 이때 prev 와 next 는 화살표 모양으로 달력이동, today는 현재 날짜로 돌아오게 합니다. left title right는 해당 버튼들의 위치를 정의하고, dayGridMonth timeGridWeek timeGridDay listMonth 는 각각 월 주 일 일정리스트별 정렬을 해줍니다.
Pagination 이 컴퍼넌트 이기에 소문자로 import하면 제대로 작동하지 않습니다.
<Pagination
// 내가 선언한 상태 : page, totalCnt 함수 : handlePageChange
activePage={page}
itemsCountPerPage={10}
totalItemsCount={totalCnt}
pageRangeDisplayed={5}
prevPageText={"이전"}
nextPageText={"다음"}
onChange={handlePageChange}
/>
npx create-react-app react-test ( 프로젝트 명) 을 통해서 리액트 프로젝트를 생성하면 아래와 같은 구성이 생긴다.
이때 리엑트는 노란색 칠해진 3부분에 의해서 작동한다.
기본적으로 웹페이지는 index.html에서 시작을 하는데 리엑트에서도 마찬가지이다.
하지만 리엑트의 특징은 컴퍼넌트를 통해서 하나의 index.html 페이지에서 컴퍼넌트 교체를 통해서 다른 페이지를 보여주는 거 처럼 작동한다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
index.html에 보면 다음과 같이 적혀있다.
이때 npm start(혹은 yarn)대신 직접 열면, root 하위의 파일들이 불러와지지 않아서, 빈 페이지가 보인다.
index.html에 하위 컴퍼넌트를 연결하는 역할을 index.js가 한다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이떄 StrictMode는 좀 더 엄격하게 프로젝트를 사용하기 위해 설정하는 것으로, 굳이 없어도 된다.
코드를 보면 html에 있던 id가 root인 곳(body)에 <App/> 을 랜더링한다고 적혀 있다.
그리고 App이 무엇인지는 App.js 파일을 보면 알 수 있다.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
현재 우리가 봤던 화면은 위 코드를 통해 구성되어있다.
그리고 이를 App.css와 저장된 이미지에 애니메이션 효과를 주어서 우리가 봤던 아래 이미지를 구현한다.
컴퍼넌트는 이때 대문자로 이름이 시작해야하고, export default를 통해서 외부 파일에서 사용할 수 있게 한다.
// index.js의 임포트 부분
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
index.js 에서 ./App 을 통해서 export한 App을 사용하고 있다. 이때 뒤에 './App'; 은 경로인데, .js의 경우는 생략이 가능하다.
이후 \주소\내프로젝트 이름\src\main\webapp\WEB-INF\lib에 mysql-connector-j-8.0.33.jar파일 넣으면 초기세팅이 끝난다.
2. 신세계에서 배우는 프로젝트에선 db, jsp , bootstrap, jquery를 이용해서 만들었다.
3. db는 MYSQL을 사용했는데,
create table member(
id varchar(50) primary key,
pwd varchar(50) not null,
name varchar(50) not null,
email varchar(50) unique,
auth int
);
select count(*)
from member
where id='abc';
select * from member;
delete from member
where id='abc';
회원가입은 다음과 같다. 아이디와 비밀번호 email name을 입력받는다. auth는 추후 관리자 관련 값이다. 관리자는 1 회원은 3 이를 eclipse에서 만든 java코드를 통해서 db에 값을 추가해준다.
프론트쪽에서 값을 입력하기 전에 db와 연결할 java코드를 먼저 작성한다.
3. 데이터에 접근할 때는 dto와 dao를 사용한다. dto 는 Data Transfer Object로 데이터로 주로 db와 주고 받은 값을 담는데 사용한ㄷ. dao는 데이터 베이스에 접근하기 위한 객체 Data Access Object이다.
