[Portfolio] Next.js로 하루 만에 포트폴리오 만들고 배포하기

 

 

 

 

예상보다 빨리 회사에 지원할 일이 생겼다. 음..? 난 준비한 게 없는데?

포트폴리오가 있으면 좋다는데 그럼 만들어야죠 뭐 하하하

 

거두절미하고 그래서 어떻게 만들었는데 하는 분들을 위해.

완성이 목표였기 때문에 아직 손볼 곳이 많습니다... :) 그저 이런 사람도 있구나 참고 정도하시길..

부끄러우니까 열심히 수정하겠습니다 하핫

 

 

대충 이렇게 생겼습니다.

 

 

깃허브 링크

포트폴리오 링크

 

---

 

 

 

Next.js는 리액트와 달리 서버에서 HTML, CSS, 자바스크립트를 만들고 검색 엔진에서 HTML을 바로 가져오기 때문에

검색 엔진 최적화에 도움이 된다고 한다. 또한 정적인 콘텐츠를 가져와서 블로그, 홈페이지, 포트폴리오처럼 내용이 거의

변하지 않는 서비스 제작시 많이들 사용한다. 따라서 나도 (드디어) next.js를 사용해보기로 했다!

 

Find your Template – Vercel

 

 

공식 홈페이지에 있는 템플릿들이 꽤 괜찮았지만 내가 생각한 구조로 만들어보고 싶었기에 PASS.

그런데 터미널에서 설치할 때 보니까

 

 

타입스크립트, 테일윈드 CSS 등의 초기 설정 부분이 있어 나는 전부 기본값으로 설정했다.

 

📁 폴더 구조

 

리액트 기반 프레임워크라더니 폴더 구조가 거의 비슷하다.

app 폴더의 layout.tsx에서는 말 그대로 페이지에서 공통적으로 사용하는 레이아웃을 설정한 뒤

컴포넌트를 감싸면 layout이 적용되는데, 아직 필요할지 모르겠어서 따로 사용하지는 않았다. 

 

// page.tsx
"use client";

import About from "@/components/About";
import Projects from "@/components/Projects";
import Contacts from "@/components/Contacts";
import Works from "@/components/Works";
import Header from "@/components/Header";
import Activities from "@/components/Activities";

export default function Home() {
  return (
    <main>
      <Header />
      <About />
      <hr />
      <Projects />
      <hr />
      <Works />
      <hr />
      <Activities />
      <hr />
      <Contacts />
    </main>
  );
}

 

use client는 뭘까? onClick 이벤트나, useState같은 Hooks처럼

클라이언트에서 상호작용하는 컴포넌트 사용시 적어줘야 한다.

다시보니 여기서는 왜 쓴 걸까? 아마 다른 코드들 참고하다가 붙인 것 같은데 

page.tsx는 홈페이지의 구조를 보여주는 곳이고 상호작용하는 컴포넌트가 없기 때문에 지워도 될 듯.

 

그렇게 한두시간 혼자서 해보다가 막혀서 예제를 참고하기로 했다.

 

Tailwind UI - Official Tailwind CSS Components & Templates

 

 

기업에서 만드는 랜딩페이지에 자주 나오는 그 컴포넌트 예시가 여기 다 나와있었다.

게다가 반응형으로 잘 되어있어서 참고하기도 좋았다. 테일윈드 왜 쓰나 했더니 증말 편하다.

부트스트랩이랑 비슷하게 HTML에 클래스명만 적으면 알아서 CSS가 적용된다.

 

부트스트랩은 컴포넌트를 제공하지만 테일윈드는 플렉스, 배경 색상처럼 필요한 css 속성 값을

개발자가 사용할 수 있도록 제공한다. 단 쓰는 클래스가 많아질수록 HTML이 길어진다는 게 단점...이지만

조금 더 써봐야 명확하게 장단점을 파악할 수 있을 것 같다. 일단 나는 처음 써봤지만 매우 만족스러웠다.

 

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

a:hover {
  transition: ease-in-out 0.1s;
  color: #f8ba00;
  cursor: pointer;
}

body {
  background-color: rgb(250 250 250);
}

 

 

globals.css 파일 최상단에 tailwind 기본 값을 불러오는 세 가지 구문은 지우면 안 된다!

지웠다가 갑자기 못생긴 CSS로 변해서 당황했습니다만..

 

🌄 이미지

import Image from "next/image";

...
 <Image
  className="rounded-md"
  src="/profile.jpg"
  alt="profile"
  width={240}
  height={240}
  />

 

 

next.js에서는 기본 img 태그 대신 Image를 권장해서 사용해봤다. 

왜 권장할까? 공식 문서에 따르면

 

이미지는 일반적인 웹사이트 페이지 무게에서 큰 비중을 차지하며 웹사이트의 LCP 성능에 상당한 영향을 미칠 수 있습니다.
Next.js 이미지 컴포넌트는 자동 이미지 최적화를 위한 기능으로 HTML <img> 요소를 확장합니다:

- 크기 최적화: WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 디바이스에 적합한 크기의 이미지를 자동으로 제공합니다.
- 시각적 안정성: 이미지 로딩 시 레이아웃이 자동으로 이동하는 것을 방지합니다.
- 더 빠른 페이지 로드: 기본 브라우저 지연 로딩을 사용하여 뷰포트에 이미지가 들어올 때만 로드되며, 선택적 블러업 플레이스홀더를 사용할 수 있습니다.
- 자산 유연성: 원격 서버에 저장된 이미지도 온디맨드 이미지 크기 조정 가능

LCP(Largest Contentful Paint) : 웹 페이지의 로딩 성능을 나타내며
사용자가 페이지의 가장 큰 컨텐츠 요소를 볼 때까지 걸리는 시간을 측정

 

 

이러한 이유로 성능 최적화를 위해 권장하고 있다. 이미지가 많은 웹 사용시 유용하게 쓸 수 있겠다.

src의 path는 자동으로 public 폴더를 루트로 인식하기 때문에 /파일명만 적으면 된다.

 

 

❌ Module not found: Error: Can't resolve 'react-scroll' 에러

 

헤더에서 스크롤 이벤트를 사용하려고 react-scroll 라이브러리를 설치했는데 배포하려고 보니 자꾸 에러가 떴다.

npm install --save @types/react-scroll

 

 

앞에 타입스를 붙이니까 해결됐다. 타입스크립트 사용시 라이브러리에도 타입을 적용하기 때문에

npm install --save @types/라이브러리명 형태로 설치해야 한다.

 

 

🌐 Vercel 배포

Vercel: Build and deploy the best Web experiences with The Frontend Cloud

 

Next.js 공식 홈페이지에 따르면 Vercel에서 Next.js 애플리케이션에 대한 배포 환경을 제공한다고 한다.

 

 

 

 

 

Vercel 홈페이지에 들어가면 개인은 깃허브로 연동해서 Hobby plan을 사용하면 된다.

무료 플랜이지만 100GB의 대역폭, 이미지 최적화 최대 1,000개 등의 제한이 있고,

개인 프로젝트 규모가 크지 않으면 충분히 사용할 수 있을 것 같다.

 

 

 

 

 

새벽이라 비몽사몽한 와중에 자꾸 에러가 떠서(react-scroll 모듈 건) 몇 번의 시도 끝에 배포가 완료되었다.

거의 1-2분 안에 배포가 돼서 정말 신기했다... 파일 용량이 작아서 그런 걸까? 수정사항이 생겼을 때 깃허브에

커밋 후 푸쉬하면 자동으로 빌드와 배포가 돼서 정말 편하다! 

 

---

 

📝 느낀 점

그렇게 하루만에 포트폴리오 완성이라는 목표는 완수했으나, 정작 내용이 부실하고 Next.js에 대한 이해도가 낮아서

더 열심히 공부해야겠다~라는 생각을 가졌다. 풀스택 프레임워크라고 했는데 DB 연결해서 어떻게 사용하는지도 궁금하고,

Next.js로 소셜미디어 웹 만드는 강의가 있던데 내가 생각한 쓰임새와는 조금 다른 것 같아서 다른 예제를 더 알아봐야겠다.

 

그리고 기한을 짧게 맞춰야 있어야 미션 혹은 게임처럼 개발할 맛이 난다. 완성을 위해 개발하는 나는 재밌지만

이제는 코드의 퀄리티도 신경써야 하지 않을까.. 근데 또 모르겠다 지금은 우선 만들면서 배우고 나중에 리팩토링하는 편이

더 개발에 익숙해지는 데 도움이 되지 않을까 싶기도 하고. 개발은 너무 재밌는데 나의 자질에 대해서는 계속 의문이 든다... :)

 

참고로 디자인은 다른 프론트엔드 개발자분들 보면 엄청 기깔나고 액션도 멋지고 와~ 눈이 화려해지는데,

나는 우선 기본에 충실하고자 최대한 깔끔하게 만들었...으나 막상 만들고 보니까 이력서랑 다를 게 없어보여서

작은 애니메이션으로 곳곳에 포인트는 추가해야할 것 같다. 하하 개발이란 결정의 연속이로구나.

 

그럼 이제 하다 만 CocaVoca와 다른 개인 프로젝트를 준비하며 열심히 공부해야겠다. 화이팅~