개발자 포트폴리오 웹사이트 구축 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

소프트웨어 개발자 (초보자 및 중급자), 포트폴리오 웹사이트 구축에 관심 있는 개발자

핵심 요약

• Next.js, Tailwind CSS, EmailJS를 활용한 포트폴리오 웹사이트 구축 방법 제공
• utils/data/ 폴더 내 이름, 이메일, 연락처 등 개인 정보를 JSON 형식으로 맞춤 설정
• .env 파일에 EmailJS 인증 정보 입력하여 이메일 전송 기능 구현
• npm run dev 또는 yarn dev 명령어로 로컬에서 웹사이트 실행 가능

섹션별 세부 요약

1. 프로젝트 초기 설정

• GitHub 레포지토리 클론 후 cd developer-portfolio 명령어로 디렉토리 이동
• npm install 또는 yarn 명령어로 의존성 설치
• utils/data/ 폴더 내 name, email, github, linkedIn 등 필수 정보 수정

2. EmailJS 설정

• EmailJS 계정 생성 후 Gmail을 기반으로 Service ID 생성
• 이메일 템플릿 생성 후 Template ID 및 Public Key를 .env 파일에 입력
• NEXT_PUBLIC_EMAILJS_SERVICE_ID, NEXT_PUBLIC_EMAILJS_TEMPLATE_ID, NEXT_PUBLIC_EMAILJS_PUBLIC_KEY 변수 정의

3. 웹사이트 실행

• npm run dev 또는 yarn dev 명령어로 개발 서버 실행
• 브라우저에서 http://localhost:3000 접속하여 포트폴리오 웹사이트 확인

결론

• GitHub 레포지토리에서 프로젝트 다운로드 후 .env 파일 설정, npm install 및 npm run dev 순서대로 진행하면 빠르게 포트폴리오 웹사이트 구축 가능.
• dev.to 블로그 연동 시 devUsername 필드에 계정명 입력해 자동으로 블로그 게시물 로드 가능.