Github에 푸시할 MERN 스택 프로젝트 설정

이것은 MERN 프로젝트 설정 및 전체 스택 프로젝트를 Github에 처음 푸시하는 방법에 대한 단계별 지침입니다. Github에 push하는 방법만 필요한 경우 3~11단계를 따르십시오.

전제 조건

작업 환경에 Node.js을(를) 설치했습니다.

귀하는 Github에 계정이 있습니다.

1. 프로젝트용 디렉토리를 생성합니다.

프로젝트 및 서버 디렉터리를 만듭니다. 서버(또는 백엔드) 디렉토리는 프로젝트 폴더의 하위입니다.

아직 클라이언트를 생성하지 마십시오. 클라이언트 디렉터리는 다음 단계에서 곧 생성됩니다.

2. 클라이언트 폴더에 React 앱을 생성합니다.

명령줄에서 프로젝트 디렉터리 안에 있는지 확인합니다. 반응 애플리케이션을 생성하고 클라이언트(또는 프런트엔드)로 이름을 지정합니다.

$ cd project
$ npx create-react-app client

3. 클라이언트 디렉터리에서 git 리포지토리를 제거합니다.

클라이언트 폴더에서 git 저장소를 제거해야 합니다. git repo는 리액트 애플리케이션을 설정한 2단계에서 생성되었습니다.



명령줄에서 클라이언트 폴더로 이동하고 다음 코드를 입력합니다. "rm -rf"가 무엇인지 궁금하시다면 이 글 하단의 참조 링크를 확인하세요.

$ cd client
$ rm -rf .git

4. .gitignore 파일을 클라이언트에서 프로젝트 디렉터리로 이동합니다.

아래 사진과 같이 클라이언트 디렉토리에 .gitignore 파일이 보입니다.


클라이언트용 .gitignore 파일을 프로젝트 디렉터리로 이동합니다.

5. .gitignore 편집

.gitignore 파일을 열고 "/node_modules"및 "/build"를 찾습니다. node_modules 앞의 슬래시("/")를 제거하고 빌드해야 합니다. 이렇게 하면 클라이언트와 서버 모두에서 node_modules 및 빌드가 무시됩니다.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

6. 프로젝트에서 git을 초기화합니다.

명령줄에서 프로젝트 디렉터리로 이동하여 git을 초기화합니다.

$ git init

이제 Github에 대한 첫 푸시까지 거의 다 왔습니다. 아래 다이어그램은 지금까지 수행한 모든 단계를 요약한 것입니다.

7. 프로젝트 설정을 커밋합니다.

$ git add . 
$ git commit -m 'Init the project'

8. 로컬 리포지토리에 기본 분기를 만듭니다.

$ git branch -M main

나처럼 "-M"플래그에 대해 궁금하다면 간단히 마스터 이름을 메인으로 바꾼다고 말할 수 있습니다. -M 플래그를 파헤치고 싶다면 아래 링크를 참고하세요.

9. github.com으로 이동하여 리포지토리를 생성합니다.

Github에서 프로젝트에 대한 원격 리포지토리를 만듭니다. 계정이 없으시면 먼저 회원가입을 하셔야 합니다.

10. 로컬 저장소를 원격 저장소에 연결합니다.

리포지토리를 만든 후 코드 버튼을 누르고 링크를 복사합니다. 명령줄에서 프로젝트 디렉터리에 있는지 확인하고 다음 코드를 입력합니다.

$ git add origin <YOUR LINK HERE> 

11. Github에 푸시

프로젝트를 원격 저장소로 푸시합니다. -u 플래그에 대해 더 알고 싶습니까? 아래 참조를 확인하십시오.

$ git push -u origin main 

12단계부터 서버 측을 설정합니다.

12. 서버 디렉터리에서 npm init를 실행합니다.

명령줄에서 서버 디렉터리에 있는지 확인하고 npm을 초기화합니다.

npm init -y

13. package.json 수정

import 대신 require를 사용하려면 아래와 같이 package.json에 "type": "module"를 추가합니다.

14. server.js 파일 생성 및 Express.js 설치

서버 디렉터리에서 server.js 파일을 만들고 Express.js를 설치합니다.

npm install express

15. 서버를 설정합시다.

import express from "express";

const app = express();

app.get("/", (req, res) => {
  res.send("connected");
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log("Server listening the port http://localhost/" + port);
});

[더 읽을 거리]

What is -M flag in git branch -M main

What does the Linux command rm -rf do?

What is -u flag