Github Readme.md 작성하기

README 파일은 GitHub과 같은 코드 저장소에서 프로젝트에 대한 설명과 정보를 알려주는 문서입니다.

주로 프로젝트의 목적, 설치 방법, 사용 방법 등을 안내하여 다른 사람들이 프로젝트에 대해 쉽게 알 수 있도록 하죠~

 

Readme가 깔끔하게 잘 적혀있어야 이게 어떤 프로젝트인지, 뭘 개발했는지, 어떤 기술을 썼는지 잘 알 수 있겠죠?

제 프로젝트도 아직 개발이 많이 진행되진 않았지만, 일단 Readme부터 써두고 점점 추가할 계획입니다

 

제 프로젝트는 아직 기획이 확정되지 않고 개발중이라 리드미에는 프로젝트 이름, 설명, 기간, 기술 스택, 실행 방법 정도만 넣었는데요, 기획이 확정되고 기능이 추가되면 프로젝트 구조, 기능 목록, 주요 기능 소개 등을 넣으면 좋을 것 같습니다.

 

1. Add a Readme

Add a README 버튼을 클릭한다.

repository를 만들 때 이미 생성했다면 수정해주면 된다.

 

2. 마크다운으로 작성하기

 

마크다운으로 작성하고 오른쪽의 preview를 눌러보면 예쁘게 뜹니다.

마크다운에 익숙하지 않으시다면 한가지 팁..!

 

노션으로 작성하시고 복사 붙여넣기 해도 노션의 스타일링과 비슷하게 보여요.

 

3. 기술뱃지 추가하기

기술뱃지는 어떻게 추가하는 걸까요?

 

아래 처럼 img 태그에 직접 스타일링 할 수 있습니다.

<img src=”https://img.shields.io/badge/기술-색상?style=원하는스타일&logo=기술&logoColor=원하는색상”>

<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">

 

 

스타일링 방법은 아래 링크에서 자세히 확인해보세요.

Static Badges | Shields.io

Static Badges | Shields.io

 

뱃지 모양과 색상, 로고도 바꿀 수 있어요!

 

4. 폴더 구조 추가하기

터미널에서 powershell이나 cmd를 켠다.

tree를 입력한다

복사 ㄱㄱ

├───assets
├───components
│   ├───chat
│   └───ui
├───lib
└───utils

 

프로젝트 사이즈가 작아서 그런지 휑하네요

프로젝트 구조는 좀 더 정리한 후에 추가하는게 맞는 것 같습니다.

 

5. 실행 방법 추가하기

git clone

# 폴더 clone 하기
git clone https://github.com/eunjin11/chat-app.git

Frontend

# 폴더 열기
cd chat-client

# 종속성 설치
npm install

#실행
npm run dev

Backend

# 폴더 열기
cd chat-server

# 종속성 설치
npm install

#.env 파일에 DB 주소 추가
# MONGODB_URI=MongoDB 주소

#실행
node server.js

 

 

아래는 제가 프로젝트의 Readme.md 파일입니다.

 

별건 없지만 ^^; 필요하신 분은 가져가서 쓰세요

# 💬chat-app

React, node.js, socket.io, mongoDB 학습용 채팅 앱입니다.

개발 기간: 2024.11~진행 중

<img width="780" alt="chat-app 화면" src="https://github.com/user-attachments/assets/9b10fc61-01fc-4ae7-a123-c0177996efae">

</br>

---

# 🛠기술 스택

## Frontend

React, typescript, tailwind, socket.io

<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black"> <img src="https://img.shields.io/badge/Typescript-3178C6?style=for-the-badge&logo=Typescript&logoColor=white"/> <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=TailwindCSS&logoColor=white"/> <img src="https://img.shields.io/badge/socket.io-010101?style=for-the-badge&logo=socket.io&logoColor=white">

## Backend

node.js, express, mongoDB, socket.io

<img src="https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white"> <img src="https://img.shields.io/badge/express-000000?style=for-the-badge&logo=express&logoColor=white"> <img src="https://img.shields.io/badge/mongoDB-47A248?style=for-the-badge&logo=MongoDB&logoColor=white"> <img src="https://img.shields.io/badge/socket.io-010101?style=for-the-badge&logo=socket.io&logoColor=white">

</br>

---

# 💻실행 방법

## git clone

```bash
# 폴더 clone 하기
git clone https://github.com/eunjin11/chat-app.git
```

## Frontend

```bash
# 폴더 열기
cd chat-client

# 종속성 설치
npm install

#실행
npm run dev
```

## Backend

```bash
# 폴더 열기
cd chat-server

# 종속성 설치
npm install

#.env 파일에 DB 주소 추가
# MONGODB_URI=MongoDB 주소

#실행
node server.js
```

 

 

직접 확인해보기!

https://github.com/eunjin11/chat-app

GitHub - eunjin11/chat-app: react, node.js, socket.io를 이용한 채팅 어플리케이션 실습