오늘은 작은 프로젝트를 만들기 위해 초기 세팅을 해주자!
먼저 VSCode로 폴더를 만들어준다!
구조는 서버 폴더 > 클라이언트 폴더로 구성할 거니까 서버 폴더부터 만들어주자
다른 건 그냥 엔터로 넘어가도 된다 하지만 entry point는 서버를 구성할 파일과 같은 이름으로 만들어준다
인스톨하면 알아서 설치해 준다 서버를 구성하는 데 도움을 주는 라이브러리이다.
서버를 조작할 파일을 하나 만들어준다.
이제 서버 폴더의 기본 구조는 완성했으니 클라이언트 폴더를 만들어주자
npm create-react-app
그리고
npx create-react-app 자유작명 또는 타입 스크립트로 사용하려면
npx create-react-app 자유작명 --template typescript 로 만들어 준다.
나의 경우는 typeScript 선택했다.
설치가 완료되면 클라이언트 폴더로 다시 열어도 좋지만 귀찮으니 터미널 창에서
cd 폴더이름으로 이동 후 npm run build로 Html문서를 합쳐주는 작업을 해준다.
그리고 아까 만든 server.js에서
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname+'/<폴더이름>/build'))
app.get('/',(res,req)=>{
req.sendFile('index.js')
})
app.listen(8080, function () {
console.log('listening on 8080')
}); 를 작성하여 서버를 켤 준비를 해준다 8080으로 접속하면 build/index.js 파일을 실행시켜주는 것이다!
실제로 클라이언트 폴더에 가서 경로로 따라가면 해당 파일이 있다.
이제 서버를 실행하여 확인해보자! 그 전에 나는 터미널에서 cd 폴더이름 으로 이동했으니 다시 그전 폴더로 이동시켜야 한다.
그래야 서버 폴더에서 서버를 실행하는 거니까
cd.. 해주면 됨
node server.js으로 서버를 실행하면 터미널 창에서 해당 콘솔 내용이 출력 된다.
app.listen(8080,function(){
console.log('listening on 8080');
});이제 클라이언트에서 실행하는 게 아니라 서버에서 실행하면 클라이언트 파일이 나온다는 걸 알 수 있다
그리고 웹 브라우저를 열어 localhost:8080 을 입력해서 들어가 보면 !?
굿 👍
