포트폴리오 웹사이트 프로젝트

2022년 11월 25일 부터 웹사이트 포트폴리오를 제작했습니다.

완성까진 아니지만 80% 완성되어 포트폴리오 사이트 설명글을 적어보려고 합니다.

 

Frontend Developer Doyeonism

next js 로 제작을 진행했고  vercel 로 배포했습니다.

 

nextjs로 개발을 진행한 이유는 유튜브섹션과 티스토리섹션에서 각각 api를 호출하는 코드가 필요했는데 nextjs를 사용하여 백엔드에서 youtube api와 티스토리 api를 호출하고 필요한 정보를 추가해 프론트로 넘겨주면 좋지 않을까 생각했습니다.

 

결과적으론 nextjs에서 백엔드 처리를 하지 않았습니다. vercel 무료배포는 백엔드의 짧은 지연시간만 무료지원해주는 형태였고 지연시간이 길어진다면 유료요금제로 바꿔야했기 때문에 nextjs를 이용해 api를 만들지 않았습니다.

 

Figma

위 디자인을 토대로 개발을 진행했습니다.

 

 

각 섹션별로 설명드리겠습니다.

1. 네비게이션 바

네비게이션바에는 로고,메뉴,테마변경과 이력서 순서로 나열했습니다.

로고를 누르면 홈페이지로 이동하고 메뉴를 누르면 각 섹션으로 넘어가도록 기능을 넣었습니다.

테마 변경 아이콘을 누르면 전체 테마가 context style로 설정한 테마로 변경됩니다.

'resume'를 클릭하면 제작한 pdf이력서 파일이 열립니다.

 

2, 간단한 설명섹션입니다.

두개의 컴포넌트로 나눠 왼쪽은 저에대한 설명을 간단히 적었고 오른쪽은 리엑트 이미지를 넣었습니다.

 

돌아가는 리액트 로고는 svg파일입니다. 일반적으로 nextjs에서 svg파일을 import해서 next/image로 불러오면 최적화되지 않은 사진이라는 경고를 출력합니다.

 

때문에 다음과 같이 svg파일을 출력해야합니다.

1. svgr/webpack설치

npm install @svgr/webpack --save-dev

2. svg파일을 불러와 컴포넌트처럼 사용한다.

 

styled-components를 이용해 style를 줄 수 있습니다. 

 

 

3. Service

웹개발을 진행하면서 중요하게 생각하는 3가지에 대해 적었습니다.

각 상자는 컴

포넌트로 제작해 mapping하여 출력했습니다.

 

3. youtube 채널섹션

제가 올리는 최신 영상 5개를 출력해줍니다.

youtube에서 제공해주는 youtubedata api를 이용해 영상을 출력해줍니다.

access-key는 .env파일에 작성했습니다.

process.env.NEXT_PUBLIC_YOUTUBE_ACCESSTOKEN으로 access-key를 불러옵니다.

 

youtube섹션은 반응형으로 제작했습니다.

1600px일때 820px일때 각각 영상의 gird 설정이 변경됩니다.

 

카드에 마우스를 올려놓으면 간단한 설명이 나오게끔 설정했습니다.

 

description 컴포넌트는 원래는 아래쪽으로 숨어있다가 hover가 되면 

top:70%의 속성을 가지게 되며 위로 올라오게 됩니다.

 

 

4. 블로그 글 출력 섹션

제가 자주 작성하는 3가지 카테고리인 react.js,javascript,프로젝트 카테고리를 출력하도록 설정했습니다.

각 카테고리의 글은 6개 출력됩니다.

 

youtube섹션처럼 썸네일이 나오고 마우스오버하면 제목과 설명이 나오도록 만들고 싶었지만 티스토리에서 글의 썸네일url을 제공해주지 않아 위와 같이 디자인했습니다.

클릭할 수 있다는 느낌을 주기 위해 hover하면 배경색과 글자 색이 변합니다.

 

이 섹션 또한 반응형으로 제작했습니다.

 

820px로 width가 작아지면 위와 같이 카테고리와 글의 위치가 변하도록 설정했습니다.

아래에서 위로 내려오는 디자인이 모바일에서 쉽게 클릭할 수 있다고 생각했습니다.

 

유튜브섹션과 마찬가지로 getTistoryPosts라는 함수를 만들어 api를 호출합니다.

 

5. Learning Path섹션

이 섹션에선 제가 제가 사용할 수 있는 언어, 프레임워크, 라이브러리 등을 적었습니다.

다른 프론트엔드 개발자들 처럼 각 스킬을 퍼센트로 나타내 활용능력을 적고 싶었으나 내가 주관적으로 평가한 스킬이 남들도 비슷하게 생각할까라는 의문에 위와 같이 바꾸게 되었습니다.

 

card를 누르면 티스토리에 클릭한 card와 관련하여 작성한 티스토리 글로 이동하게 됩니다.

각 글을 읽으면 제 수준이 어느정도 보일 것 같아 좀 더 객관적인 평가가 가능하다고 생각했습니다.

 

위 섹션도 grid를 이용해 width가 820px보다 좁아지면 grid의 변화를 줘 모바일에서도 쉽게 클릭할 수 있도록 스타일을 만들었습니다.

 

6. My Work섹션

이 부분도 간단하게 프로젝트의 전체적인 사진을 출력해주고 클릭하면 관련 글로 이동하도록 만들었습니다.

포트폴리오 사이트 내에서 프로젝트 설명을 길게 작성한다면 지저분해질것 같다고 생각했으며 제대로된 설명을 작성하지 못할 것 같아 티스토리에 프로젝트 설명 글로 이동하도록 만들었습니다.

 

7. contact 섹션

간단한 이메일과 메모를 보낼 수 있는 섹션입니다.

제 포트폴리오를 보고 관심이 있는 분들이 연락을 줬으면 하는 생각에 만들었습니다.

 

email js 라이브러리를 이용하여 name,email,message를 적고 send message 버튼을 클릭하면 제 email로 정보가 전달되도록 만들었습니다.

 

 

8. 스크롤이 한 지점에 위치하면 요소들이 올라오는 기능

제 포트폴리오를 보면 알아차리셨을 겁니다. 스크롤을 내려 한 섹션을 지나면 요소들이 위로 올라옵니다.

보는 사람들이 지루해하지 않도록 기능을 만들어 넣었으며 hook을 사용해 재사용성을 높였습니다.

각 섹션에 같은 애니메이션이 들어가기 때문에 hook을 만들어 재사용성을 높이면 효율적인 개발이 가능하다고 생각하여 hook을 만들게 됐습니다.

 

 

최대한 clean하게 코드를 작성하고자 고민했고 많은 분들이 코드를 읽어도 헷갈려하지 않도록 개발을 진행했습니다. 부족하거나 아쉬운 부분이 있다면 댓글에 적어주세요. 얼마든지 수용할 자세가 되어있습니다.

 

코드는 깃허브 저장소에서 보실 수 있습니다.

GitHub - jdy0120/portfolionext