프론트 터미널에서 명령어 입력 npm create vite@latest √ Project name: . or 생성할 폴더명(본인이름) √ Package name: movie-app √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev # 스타일 컴포넌트 npm install styled-components # 라우터 npm install react-router-dom 컴포넌트 폴더에는 ReviewListItem 파일이 들어가 있고 페이지 폴더에는 Home 페이지, ReviewList 페이지, ReviewWrite 페이지가 들어가있습니다. App.jsx import { BrowserRouter as Rou..

npm i express 로 백엔드 부분 생성 app.js를 만들어주고 cors 미들웨어 설치 npm i cors // 모든 도메인에 대해서 CORS 허용해주도록 설정 import express from "express"; import cors from "cors"; const app = express(); app.use(cors()); // cdpn.io에서 들어오는 요청은 특별히 허용해주도록 설정 import express from "express"; import cors from "cors"; const app = express(); const corsOptions = { origin: "*", }; app.use(cors(corsOptions)); fly.io Windows 에서 설치 윈도우는 새..

React와 Express를 활용한 사진 앨범 만들기안녕하세요. 오늘은 React와 Express를 활용하여 간단한 사진 앨범 웹 어플리케이션을 만드는 방법에 대해 자세히 알아보겠습니다.1. 프로젝트 구조프로젝트는 크게 두 부분으로 나뉘어져 있습니다. 프론트엔드는 React를 사용하며, 백엔드는 Express.js와 MySQL을 사용합니다.프론트엔드는 다음과 같은 구조로 이루어져 있습니다:App.js: 라우팅을 담당하는 메인 컴포넌트입니다.pages: 각 페이지 컴포넌트를 담고 있습니다. (Home, MyPage, UploadPage 등)components: 재사용 가능한 컴포넌트들을 담고 있습니다.백엔드는 Express.js를 사용하여 API를 구축하며, 데이터는 MySQL 데이터베이스에 저장됩니다.2..

빈 폴더를 하나 만들고 터미널을 열고 npm create vite@latest √ Project name: . or 생성할 폴더명(본인이름) √ Package name: movie-app √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev # 스타일 컴포넌트 npm install styled-components # 라우터 npm install react-router-dom src 폴더에 App.jsx, main.jsx 말고는 다 삭제하고 남겨준다. App.jsx 는 옆에 저 코드가 시작코드이다. 다 삭제하고 저렇게 만들어준다. main.jsx 코드이다. 또 리액트는 컴포넌트로 분리시켜 유지보수와 편리성..

React 2013년 5월 오픈 소스로 공개되었고 안정적인 기술 스택입니다 React의 특징 1. React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. React의 특징 2. 뷰를 컴포넌트 시스템을 이용하여 관리한다 재사용이 가능한 독립적인 객체. 런타임 시점에 사용된다. 컴포넌트 여러개가 모여 애플리케이션 을 만든다. 결론: React는 컴포넌트의 조합으로 view를 구성한다. React의 특징 3. 가상돔의 장점 : 필요한 부분만 한 번에 렌더링한다. 성능보다는 개발을 편하게 할 수 있도록 도입했다고 볼 수 있다. 많은 오픈 소스는 훌륭한 DX(Developer Experience)를 위해 나왔다. React를 구성하는 기능들은 최소한의 노력으로 최대의 효율을 내기 위함 이..