개발자 포트폴리오 웹사이트 만들기

김민기·2025년 7월 8일

React Remix

Remix를 사용해서 개발자용 포트폴리오를 만들었습니다.

Remix에서 제공하는 템플릿 중 Cloudflare와 연동하는 템플릿이 있어서
그걸 기본으로 만들었습니다.

Cloudflare Workers가 아닌 Pages 템플릿을 사용했습니다.

포트폴리오 구성 요소

간단한 자기소개와 Hero Section
프로젝트 소개 (상세 페이지 포함)
경력사항
기술스택
관리자 페이지

데이터베이스?

Cloudflare의 D1 데이터베이스를 사용하도록 했습니다. (SQLite)

포트폴리오 수정은?

admin 페이지를 따로 만들고 인증이 필요한 페이지는 일반 사용자는 접속할 수 없도록 비밀번호 설정

프론트엔드 개발자만?

프로젝트 카테고리, 기술스택을 커스텀하게 변경할 수 있습니다.
/app/utils/categories.ts 파일 참고

사용방법

Node.js 버전은 22 이상을 권장합니다.

✅ 1. 프로젝트 클론 및 의존성 설치

git clone https://github.com/93minki/mk-portfolio
cd mk-portfolio
npm install

본인의 새로운 레포지토리를 만들어주세요 그 후

git remote remove origin

git remote add origin [새로 생성한 repo 주소]

git push -u origin main

Cloudflare에 배포할 때,
자신의 레포를 사용해서 배포하는 방법이 더 쉽기 때문에 이 방법을 사용합니다.
또한, CI/CD가 구현되어 코드 수정후 바로 배포가 가능합니다.
npm run deploy 명령어를 사용해도 되지만 자동 배포가 안된다는 단점이 있고
따로 연결해야 하는 불편함이 있습니다...

✅ 2. Cloudflare 설정

Cloudflare를 사용해서 배포할 예정이기 때문에 wrangler 가 필요합니다.

설치되어 있는 @remix-run/dev 과 최신 Wrangler 버전(4.X)간 충돌로 인해 3버전을 유지해야 합니다. package.json에서 설치되어 있는 3버전을 그대로 사용하시기 바랍니다.

# 1. wrangler 로그인
npx wrangler login

# 2. wrangler 로그인 확인
npx wrangler whoami

✅ 3. D1 데이터베이스 생성

Cloudflare에서 제공하는 D1 데이터베이스(SQLite)를 사용합니다.

npx wrangler d1 create [DB 이름]

데이터베이스 생성에 성공하면 database_name, database_id를 터미널에서 확인할 수 있습니다.
이때 데이터베이스 이름과 아이디를 복사해둡니다.

✅ 4. wrangler.toml 파일 수정

name = [원하는 앱 이름]
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]

pages_build_output_dir = "build/client"

[[d1_databases]]
binding = "DB"
database_name = [복사해둔 데이터베이스 이름]
database_id = [복사해둔 데이터베이스 아이디]

이전 단계에서 생성한 데이터베이스에 맞게 wrangler.toml파일을 수정합니다.

✅ 5. 환경변수 설정

Remix애서는 환경변수를 .env 가 아닌 .dev.vars에 생성합니다.

touch .dev.vars 

// .dev.vars
ADMIN_PASSWORD=[관리자 패스워드]
SESSION_SECRET=[세션 시크릿]

로컬에서 테스트할 때 사용되는 관리자 비밀번호와 세션 시크릿입니다.
포트폴리오를 수정할 수 있는 관리자 페이지에 접근할 때 사용하며, 로그인 없이 여기에 작성된 비밀번호로 접근할 수 있습니다.

✅ 6. 데이터베이스 설정

# 로컬 환경
npx wrangler d1 execute my-portfolio-db --local --file=./app/db/tables.sql

# 원격 환경 (프로덕션)
npx wrangler d1 execute my-portfolio-db --remote --file=./app/db/tables.sql

/app/db 폴더에 있는 tables.sql을 사용해서 데이터베이스를 초기화합니다.
schema.sql 파일은 실제로 테이블에 데이터를 채우는 SQL문이 포함되어 있습니다. (참고용)

로컬환경과 원격환경(Cloudflare) 모두 초기화 해줍니다. 테이블이 정상적으로 설정되어있지 않으면 추후에
데이터베이스가 존재하지 않는다는 에러가 발생할 수 있습니다.
우선, 테이블에 데이터를 추가하지 않고 기본적인 설정만 완료합니다.

✅ 7. 로컬 개발 및 테스트

npm run dev

실행 후 , localhost:5173 에서 정상적으로 실행되는지 확인합니다.
데이터가 비워져있기 때문에 localhost:5173/admin 으로 접속해서 환경변수에 추가한 비밀번호를 입력한 후 개인정보, 프로젝트, 기술스택 등을 추가하면 됩니다.

✅ 메인 페이지가 정상적으로 로드되는지 확인
✅ 관리자 페이지 로그인이 가능한지 확인 (/admin)
✅ 프로젝트, 스킬, 경력 관리 기능이 작동하는지 확인
✅ 데이터 추가/수정/삭제가 정상 작동하는지 확인

✅ 8. Cloudflare 배포

로컬에서 실행했을 때 문제가 없다면 Cloudflare에 배포합니다.

Cloudflare에서 왼쪽 사이드바 "컴퓨팅" -> Workers 및 Pages -> Pages 탭 선택
기존 Git 레포지토리 가져오기 시작 클릭

생성한 레포지토리를 선택하고 설정 시작 클릭

빌드 설정 단계에서 프레임워크 미리 설정에서 Remix 선택
환경변수(고급)에서 다음과 같이 추가 후 저장 및 배포 클릭
ADMIN_PASSWORD=[관리자 패스워드]
SESSION_SECRET=[세션 시크릿]

✅ Cloudflare 대시보드에서 배포 상태 확인 가능
✅ 코드 수정 후 main 브랜치에 Push 할 때 자동으로 배포

Web Analytics

✅ 1. 사이트 추가

Cloudflare 대시보드에서 분석 및 로그 -> Web Analytics를 클릭하고
호스트 이름에 배포된 URL을 작성합니다. 이때 https를 제거해야 합니다.

생성 후 JS 코드 조각 설치라는 항목을 복사해서
root.tsx 파일에 body 태그 내부에 추가해줍니다.

이때 토큰이 생성되는데 Cloudflare 환경변수에 CF_SITE_TAG 으로 추가해줍니다.
생성되는 토큰이 보안상 큰 위험요소는 아닐 수 있으나 혹시 모르는 위험을 방지하기 위함입니다.

✅ 2. root.tsx 파일 수정

export const loader = async ({ context }: LoaderFunctionArgs) => {
	const analyticsToken = context.cloudflare.env.CF_SITE_TAG;
	return { analyticsToken };
};

export function Layout({ children }: {children: React.ReactNode }) {
	const { analyticsToken } = useLoaderData<typeof loader>();
	return (
		<html lang="en">
			<body>
			// ...
		    {analyticsToken && (
          <script
            defer
            src="https://static.cloudflareinsights.com/beacon.min.js"
            data-cf-beacon={`{"token": "${analyticsToken}"}`}
          />
        )}
			</body>
		</html>
	);
}

export default function App() {
	return <Outlet />;
}