logo

angari.dev

#TypeScript
#Next.js
#Vercel
#TailwindCSS

프로젝트 소개

angari.dev는,
하나부터 열까지 직접 만드는 개발 블로그입니다.


  • 로고
    angari.dev logo
    Angari

  • 색상 팔레트

  • 주요 페이지
1. 메인 페이지

Daily Record
메인 화면
  • 블로그의 메인 화면입니다.
  • 상단 Header에는 Blog와 Projects 메뉴 버튼이 나열되어 있습니다..
  • 하단 Footer에는 Resume와 Github 링크가 표시되어 있습니다.
2. 개발 기록 페이지

angari.dev
개발 기록 목록 화면
  • Blog 메뉴로 이동하면 개발 기록 목록이 나타납니다.
  • 카테고리 / 글제목 / 내용요약 / 작성일자가 표시됩니다.
  • 태그(#) 검색을 이용하면 해당 태그를 가지고 있는 개발 기록만 보여집니다.
3. 개발 기록 상세 페이지

angari.dev
개발 기록 상세 화면
  • 개발 기록를 확인할 수 있습니다.
  • 내용은 Markdown 형식의 .md 파일로 작성합니다.
4. 개인 프로젝트 페이지

angari.dev
개인 프로젝트 목록 화면
  • Projects 메뉴로 이동하면 개인 프로젝트 목록이 나타납니다.
  • 예시 이미지 / 프로젝트명 / 설명 / 개발 기술이 표시됩니다.
5. 개인 프로젝트 상세 페이지

angari.dev
개인 프로젝트 상세 화면
  • 프로젝트의 설명과 개발 정보를 확인할 수 있습니다.
  • 내용은 Markdown 형식의 .md 파일로 작성합니다.
6. 포트폴리오 페이지

angari.dev
포트폴리오 화면
  • 하단 Footer의 Resume 버튼으로 진입할 수 있는 포트폴리오 화면입니다.
  • 개발 경력과 개인 프로젝트 등 이력서 형식으로 작성되어 있습니다.



개발 정보


*블로그를 직접 개발하고 배포한 이유

1. 맞춤형 디자인: UX/UI를 자유롭게 설정하고 원하는 기능을 추가할 수 있다.
2. 무제한 확장성: 플랫폼의 제약 없이 기능을 자유롭게 추가할 수 있다.
3. 정밀한 SEO 최적화: SEO 설정을 직접 조정하여 세밀하게 최적화할 수 있다.
4. 개발 실력 향상: 필요한 기능을 구현하거나 블로그를 관리하는 과정에서 개발 실력을 향상시킬 수 있다.
5. 개발 영역 확장: 백엔드 개발자로서 프론트엔드 영역까지 학습할 수 있다.
6. 무조건 특별함: 어디에도 존재하지 않는 나만의 블로그를 가질 수 있다.

1. 개발 기간
  • 2024.01 ~ 현재.

2. 소스 코드

3. 기술 스택
  • TypeScript Next.js Vercel TailwindCSS

4. 개발 특징
  • 나만의 스타일을 살릴 수 있도록 디자인하고 반응형 웹페이지로 제작
  • SEO 최적화와 프로젝트 경량화를 위해 Static Site Generation을 활용한 Next.js 웹사이트로 구현
  • Vercel과 GitHub를 연동한 CI/CD과 BaaS를 활용하여 웹사이트를 자동으로 배포
  • 관리의 효율성을 위해 Markdown 방식의 스크립트로 블로그 포스트 작성

5. 배포 과정
1. Next.js 정적 웹사이트 개발
2. 소스 코드를 Github 리포지토리 커밋/푸시
3. Vercel과 Github 연동 설정(자동 빌드 및 실행)
4. Vercel의 호스팅 서버에 소스 코드를 배포

Vercel Deployment
Vercel 배포 상태