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

카테고리

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

서브카테고리

웹 개발

대상자

• 대상자: 웹 개발자, 프론트엔드/백엔드 개발자
• 난이도: 중급 (Next.js, Tailwind CSS, EmailJS 기초 지식 필요)

핵심 요약

• 핵심 기술 스택: Next.js, Tailwind CSS, EmailJS를 활용한 포트폴리오 웹사이트 구축
• 설정 단계: git clone, npm install, .env 파일 설정, npm run dev 실행
• 데이터 맞춤화: utils/data/* 파일에서 개인 정보(이름, 이메일, GitHub 등) 수정 필요
• EmailJS 연동: NEXT_PUBLIC_EMAILJS_SERVICE_ID, TEMPLATE_ID, PUBLIC_KEY 설정으로 이메일 기능 활성화

섹션별 세부 요약

1. 프로젝트 클론 및 초기 설정

• git clone 명령어로 GitHub 저장소 복제 후 developer-portfolio 디렉터리 이동
• npm install 또는 yarn으로 의존성 설치
• utils/data/* 파일에서 personalData 객체의 이름, 이메일, 연락처 등 정보 수정

2. EmailJS 설정

• Emailjs.com에 계정 생성 후 Gmail 이메일 서비스 등록
• Service ID, Template ID, Public Key를 .env 파일에 입력
• NEXT_PUBLIC_ 접두사로 환경 변수 설정

3. 포트폴리오 실행

• npm run dev 또는 yarn dev 명령어로 로컬 서버 실행
• devUsername 속성을 dev.to 사용자 이름으로 변경하여 블로그 자동 수집

결론

• GitHub 저장소를 별표로 표시하고 LinkedIn 계정으로 연결하여 프로젝트 공유
• Next.js + Tailwind CSS 기반으로 한 빠른 개발 템플릿 활용 권장
• EmailJS를 통해 이메일 연동 기능 추가 가능 (무료)