MyLog — DB 없이 운영하는 나만의 블로그

💾 프로젝트 개요

MyLog는 Next.js 15 기반으로 개발된 개인 블로그입니다. 별도의 데이터베이스 서버 없이 JSON 파일로 데이터를 관리하며, Markdown 문법을 이용해 간편하게 글을 작성할 수 있습니다.

미리보기

💡 개발 목적

비용 부담이 큰 데이터베이스를 사용하지 않고도 개인 블로그를 운영할 수 있도록 개발하였습니다.

⚡️ 주요 기능

• 게시판 : JSON 파일을 통해 글을 작성, 수정, 삭제할 수 있습니다.
• 마크다운 에디터 및 뷰어 : 마크다운 문법으로 글을 작성하고, 뷰어를 통해 미리보기 및 렌더링된 결과를 확인할 수 있습니다.
• 마이페이지 : JSON 파일을 통해 블로그 이름, 사용자 정보를 관리할 수 있습니다.
• 반응형 디자인 : 데스크톱과 모바일에서 최적화된 화면을 제공합니다.
• 테마 변경: 다크 모드와 라이트 모드 중 원하는 테마를 선택할 수 있습니다.

⚙️ 사용 기술

• Next.js : React 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)을 제공하기 위해 사용하였습니다.
• React : JavaScript 라이브러리로, 부드러운 UI 동작을 위해 사용하였습니다.
• TypeScript : 정적 타입 명시를 통해 코드의 안정성과 유지보수성을 향상시키기 위해 사용하였습니다.
• Redux Toolkit : 전역 상태 관리를 위해 사용하였습니다.
• Styled-Components : JavaScript 파일 내에서 CSS를 작성하고, 스타일 충돌 방지를 위해 사용하였습니다.

🗂️ 프로젝트 구조

src/
 ├── app/
 ├── features/
 ├── widgets/
 ├── shared/
 └── assets/

• app : Next.js App Router 진입점 및 페이지 구조
• features : 독립적인 기능 단위
• widgets : 페이지 내에서 UI를 조합하는 단위 컴포넌트
• shares : 공통 모듈
• assets : 폰트, 아이콘, 이미지 등 정적 리소스

🏃 사용법

1. 설정

1️⃣ 프로젝트를 clone 또는 fork 해주세요

git clone https://github.com/Leewonno/mylog.git

or

# fork 후, 프로젝트를 내PC에 clone 해주세요
git clone https://github.com/UserName(leewonno)/mylog.git

2️⃣ fork하지 않고 clone한 경우, 새로운 레포지토리를 만들어 clone 한 레포지토리를 넣어주세요

git remote add origin https://github.com/UserName(leewonno)/RepositoryName(mylog-leewonno).git
git add .
git commit -m "commit message"
git branch -M main
git push -u origin main

3️⃣ 프로젝트 폴더로 이동해, 의존성을 설치해주세요

yarn install

or

npm install

4️⃣ next 개발 서버를 실행하고 블로그를 설정해주세요

yarn dev

or

npm run dev

2. 블로그, 사용자 설정

2-1. 마이페이지에서 설정

1️⃣ 오른쪽 상단 버튼을 이용해 마이페이지로 이동

2️⃣ 수정 후 저장

2-2. data.json 직접 수정

1️⃣ 프로젝트 폴더의 data.json 파일 선택

2️⃣ 파일 수정

• id : 사용자명
• email : 이메일
• github : 깃허브 링크
• portfolio : 포트폴리오 링크
• name : 블로그명

3. 게시글

3-1. 글 쓰기

1️⃣ 오른쪽 상단 글 쓰기 버튼을 클릭합니다

2️⃣ 제목과 내용을 입력 후 저장 버튼을 눌러주세요

3-2. 이미지 삽입

이미지를 본문에 삽입할 수 있습니다.
public/images 폴더에 삽입할 이미지 파일을 넣어주세요.

4. Github Push

글 작성, 수정, 삭제 또는 블로그 설정이 끝났으면 Github에 수정된 내용을 Push 해주세요

git add .
git commit -m "commit message"
git push origin main

📢 Vercel 배포하기

이제 Vercel에 나만의 블로그를 배포할 차례입니다.

1️⃣ Vercel에 로그인 후 Add New -> Project 버튼을 눌러주세요

2️⃣ 배포할 Repository를 선택(import) 해주세요

3️⃣ Framework Preset을 Next.js로 선택 후, Deploy 버튼을 눌러주세요

🚀 Deployed

배포가 성공적으로 완료되었습니다!
이제 모든 준비가 끝났습니다.
나만의 블로그를 자유롭게 커스터마이징하고 운영해보세요.

🔔주의 사항🔔

• 글 쓰기, 수정, 삭제와 블로그 설정은 배포된 환경에서는 불가능합니다. 개발 서버에서 생성, 수정, 삭제 후 Github에 Push 해주세요.
  
• main Branch에 Push 하면 자동으로 Vercel에 배포가 진행됩니다.

🌐 License

Copyright 2025 Leewonno

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.