[포트폴리오] 01. 포폴 다시 만들기

 

기존의 제 포트폴리오는 파워포인트로 디자인을 하고 notion 페이지를 이용하여 제작하였습니다.

아주 나쁘지는 않지만, 이제 4학년으로 올라가 본격적으로 취업 준비를 시작하고 싶었습니다.

그리고 좀 더 본격적으로 제 실력을 보여줄 수 있는 포트폴리오, 누가 봐도 깔끔하고 멋있는 포트폴리오를 만들고 싶었죠.

 

마침!

프로젝트를 추가로 진행하여 포트폴리오를 업데이트해야 했던 상황에 부딪혔습니다.

저는 제가 새로이 공부한 피그마도 활용하고, 웹 개발 능력도 활용해서 포트폴리오를 다시 제작하기로 합니다.

 

또한 요즘은 모두가 LLM을 적극적으로 활용하는데요.

Gemini, ChatGPT 등의 LLM을 본격적으로 활용하여 내용을 더 깔끔하게 다듬고 재구성하고자 합니다.

 

AI 시대에서 AI와는 구별되는 저만의 특별함을 갖추기 위해서는 많은 노력이 필요할 것 같다는 생각을 합니다.

기본기를 다루는 것이 우선적이어야겠지만요.

아직 부족한 부분이 많지만 그 활동의 일환으로 해당 내용을 진행해보았습니다.

지저분하고 활성화되지 않은 Github도 본격적으로 다듬고 싶네요.

---

 

1. Node.js 설치

https://lxvxxu.tistory.com/191

 

 

2. Github Repository 생성

# my-portfolio 폴더 안에서 실행
git init
# 아래 URL 대신 본인의 레포지토리 URL을 넣으세요.
git remote add origin https://github.com/lxvxxu/my-portfolio

# Githube에 Push
#파일 추적 시작: .gitignore에 의해 제외된 파일을 제외하고
# 모든 파일을 Git의 관리 대상으로 추가
git add .

# Commit (버전 기록 생성)
git commit -m "feat: initial commit for portfolio setup"

# GitHub로 전송 (푸시): 로컬의 코드를 원격 레포지토리(GitHub)로 업로드
git push -u origin master

 

3. Netflify - Github 연동

https://app.netlify.com/

Netlify

 

 

 

🛑 문제 발생: lucide-react 모듈을 찾을 수 없음

로그를 보면 빌드 과정(컴파일)이 시작되었지만, 다음 메시지와 함께 실패했습니다:

12:55:56 AM: Failed to compile.
12:55:56 AM: 
12:55:56 AM: Module not found: Error: Can't resolve 'lucide-react' in '/opt/build/repo/src'

이 메시지는 Netlify의 빌드 환경에 lucide-react라는 패키지가 설치되어 있지 않다는 뜻입니다.

트폴리오 코드에는 아이콘을 표시하기 위해 lucide-react 라이브러리를 사용했습니다.

import { Github, ExternalLink, Mail, Book, Code, ... } from 'lucide-react';

 

이 라이브러리는 로컬에서는 설치했기 때문에 잘 작동했지만, GitHub에 올릴 때 node_modules 폴더는 제외했기 때문에(정상입니다), Netlify는 빌드를 시작할 때 package.json을 보고 필요한 라이브러리 목록을 확인한 후 npm install을 실행합니다.

문제는 로컬에서 npm install lucide-react를 실행하고 GitHub에 푸시하는 과정이 누락되었을 가능성이 높습니다.

npm install lucide-react

 

• node_modules 폴더 안에 lucide-react 파일들이 다운로드됩니다.
• package.json 파일의 dependencies 섹션에 lucide-react 항목이 자동으로 추가됩니다. 

npm install -D @tailwindcss/postcss

 

 

---

 

참고 문헌

 

https://wikidocs.net/225092

https://velog.io/@nittre/%EB%B8%94%EB%A1%9C%ED%82%B9-Vs.-%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EB%8F%99%EA%B8%B0-Vs.-%EB%B9%84%EB%8F%99%EA%B8%B0