나만의 웹 이력서 만들기(1) Next.js + Tailwind + Vercel

웹 개발 입문자도 따라할 수 있는 웹이력서 만들기

🚀 목표

• Next.js + TypeScript로 웹 이력서 프로젝트 만들기
• Tailwind CSS로 디자인 적용
• GitHub에 코드 업로드
• Vercel에 무료로 배포하기

---

🧱 1단계: 개발 환경 준비

🔧 필수 설치 항목

• Node.js (최소 v18 이상 권장)
• 코드 에디터: Visual Studio Code 또는 IntelliJ

✅ Node.js 설치 확인

터미널 또는 명령 프롬프트에서 아래 명령어 입력:

node -v
npm -v

문제 없이 버전이 출력되면 설치 완료!

---

⚙️ 2단계: Next.js 프로젝트 생성

npx create-next-app@latest resume --ts

설정 질문이 나오면 이렇게 답변하세요:

질문	답변
Would you like to use ESLint?	Yes (Enter)
Would you like to use Tailwind CSS?	Yes
Would you like to use the src/ directory?	Yes
Would you like to use the App Router?	Yes
Would you like to customize the default import alias?	No (Enter)
Would you like to use Turbopack?	No (Enter) 또는 Yes (아래 참고)

💡 참고: Turbopack은 최신 번들러지만 불안정하다. 문제가 생기면 --turbo=false 옵션을 추가하여 Webpack으로 실행!

---

📁 3단계: 프로젝트 구조 이해

resume/
├── src/
│   ├── app/            # 페이지 구조 (App Router)
│   ├── components/     # 재사용 컴포넌트 보관
│   └── styles/         # 전역 CSS (globals.css)
├── public/             # 이미지 등 정적 파일
├── tailwind.config.js  # Tailwind 설정
├── postcss.config.js   # PostCSS 설정
├── tsconfig.json       # TypeScript 설정
└── package.json        # 프로젝트 메타 정보

---

🎨 4단계: TailwindCSS 적용 확인 및 설정

1. globals.css 수정 (src/app/globals.css)

@tailwind;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

2. tailwind.config.js

module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#facc15',   // 노란색
        secondary: '#a855f7', // 보라색
      },
    },
  },
  plugins: [],
};

3. postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

또는 Turbopack을 사용할 경우:

// postcss.config.mjs
const config = {
  plugins: ["@tailwindcss/postcss"],
};
export default config;

---

🧪 5단계: 개발 서버 실행

cd resume
npm install
npm run dev

브라우저에서 http://localhost:3000 접속

---

🌐 6단계: GitHub에 올리기

1. .gitignore 확인

.gitignore 파일에 다음 항목이 포함되어야 함:

node_modules/
.next/
dist/
.env

2. GitHub 연결 및 업로드

git init
git remote add origin https://github.com/your-username/resume.git
git add .
git commit -m "first commit"
git push -u origin main

❗ GitHub에서 레포지토리 먼저 생성

---

🚀 7단계: Vercel에 배포하기

1. vercel.com 접속

• GitHub 계정으로 로그인
• "Add New Project" → **resume** 선택 → Import
• 설정은 기본값 유지
• Environment Variables는 생략가능(지금은 필요 없음)
• Deploy 클릭!

2. 배포 완료 🎉

• https://your-project-name.vercel.app 주소 생성됨
• 이후 GitHub에 푸시만 해도 Vercel이 자동 재배포 💫

---

🎯 마무리

이제 웹 이력서 공개! 간단하게 프로젝트 생성 > 배포까지!
내용 채워서 웹 링크로 지원~ ㅎㅎ
Next.js배우면서 spa 구조도 알아보면서 해봐야겠다!

⛳️Action Item

• Tailwind로 예쁘게 스타일링하기
• 섹션별 컴포넌트로 나누기 (프로필, 경력, 기술 스택 등)
• 도메인 연결하고 완성도 올리기