포트폴리오 제작일지 #1

HR·2022년 7월 4일

React

목록 보기

5/5

'포트폴리오 제작 스터디'라는 좋은 기회가 생겨서 이참에 한 번 만들어보았다.
처음에는 단순히 생각해서 금방 만들겠지~ 했는데 생각보다 오래걸려서 이게 맞나 싶은 생각이 들었다.
디자인도 마음에 안들고.. 내용도 뭘 써야할지 고민을 많이 했던 것 같다.

제작할 때는 내용보다 디자인에 신경을 많이 썼더니 내용이 부실해지는 결과가 나오기도 했다..ㅠ 그래서 피드백을 받은 내용을 담아서 수정할 예정이다.

이번에는 포트폴리오를 만들면서 느꼈던 점들을 회고하는 방식으로 적어볼 예정이다.

목차는 다음과 같다.

세션 나누기
디자인
개발
배포

세션 나누기

나는 큰 틀로 메인화면, 내가 지금까지 써봤던 기술 스택, 프로젝트 세 가지로 나누었다. About Me 항목을 만들까 고민하다가 안만들었는데 피드백을 받은 결과 만들어야겠다는 생각이 들었다..ㅠㅠ 내가 어떤 사람인지 알기 어렵다는 피드백을 받았기 때문이다.

구글에 'developer portfolio', '개발자 포트폴리오'를 검색하니 수많은 좋은 포트폴리오를 볼 수 있었다!!

https://alvarotrigo.com/blog/web-developer-portfolio-examples/
이 사이트에서 많이 도움을 받았다.

내가 정한 세션에서 적을 내용은 다음으로 정했다.

메인 화면 : 짤막한 내 소개와 깃허브, 블로그, 메일 주소 아이콘 넣기
기술 스택 : 프론트엔드, 백엔드, DB 등으로 나눠서 내가 사용해본 스킬들 나열하기
프로젝트 : 프로젝트명, 프로젝트 주제, 사용한 기술, 내가 개발한 내용, 상세 내용

처음에는 메인, About me, 기술, 프로젝트, footer 이런식으로 구성을 하려고 했는데 메인과 footer에 넣을 내용을 합치다보니 위에 적은 세가지로 구성이 된 것 같다.

디자인

Figma를 사용해서 디자인을 했다.

부끄러운 피그마.. 지금보니 제대로 지킨게 별로 없다.ㅠㅠ 막판에 갈아엎어서 그런것같다. 그래도 전체적인 부분 디자인할 때는 유용하게 사용한듯..?

개발

리액트를 사용했다. 각 섹션별로 신경썼던 점을 기록해두려고 한다.

Github 데이터 차트화하기

메인을 다 만들고 Skill 세션을 만드는 도중 기술 목록만 적어놓으니 너무 허전해보였다. 그래서 github 메인 readme에 많이 보이는 most used languages를 사용하면 좋을 것 같다는 생각이 들었다.

이걸 그대로 사용해도 되지만.. 나는 도넛 형식의 차트를 원했다. 그래서 Github API를 찾아보게 되었는데 내가 위의 형식처럼 친절하게 제공하는 형식은 없었고.. 레포지토리 데이터를 얻을 수 있는 API만 찾을 수 있었다.

API는 준비됐고, 이제 차트를 어떻게 표현할까 고민했는데 직접 개발하기에는 시간이 부족할 것 같아 라이브러리를 찾아보게 되었다. 내가 찾은 것은 Chart.js라는 라이브러리였다.

https://www.chartjs.org/

사용법도 친절하게 나와있어서 쉽게 사용이 가능했다.

내 레포지토리의 데이터를 가져와서 그 레포지토리에서 사용한 언어의 수를 얻어왔다. 새로운 객체를 만들고 그 객체에 겹치는 언어 property가 있다면 기존값에서 더해서 새로 업데이트를 하고 아니면 바로 값을 넣어주는 형태로 코드를 작성했다.

async function getLanguageList(array) {
  const newList = array.map((data) => data.languages_url);
  const result = {};

  for (let i = 0; i < newList.length; i++) {
    const res = await fetch(newList[i]);
    const temp = await res.json();

    const arr = Object.keys(temp);
    arr.forEach((data) => {
      if (result.hasOwnProperty(data)) {
        const sum = result[data] + temp[data];
        result[data] = sum;
      } else {
        result[data] = temp[data];
      }
    });
  }
  return sortFunc(result);
}

더 좋은 방법은 많을 것 같지만 일단은 이렇게 작성해서 데이터를 가져왔다.

다음으로 Chart.js를 세팅했다.

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);

const options = {
  plugins: {
    legend: {
      labels: {
        color: '#262626',
        font: {
          size: 12,
          weight: 600,
        },
      },
    },
  },
  maintainAspectRatio: false,
  responsive: false,
};

사용할 옵션도 세팅했다. 나는 label의 색깔과 폰트를 정해주는 옵션을 설정했다! 그렇게 완성한 나의 영롱한 차트.

열심히 만들긴 했는데 결과적으로 이녀석을 빼야할지도 모르겠다..ㅋㅋ 차트를 보여주는데 3초 정도의 딜레이가 있어서 이걸 해결하거나 데이터를 정적으로 만들거나 해야될 듯 하다.

모달창 만들기

프로젝트를 썸네일 형식 두고 클릭하면 자세한 프로젝트 내용을 볼 수 있도록 계획했다. 그래서 모달창을 만들어야 했는데, 만들기는 생각보다 간단하다. position을 absolute로 설정해주고 원할 때 보여주고 x를 누르면 안보이게 하면 되니까..

function Modal({ props }) {
  const clickHanlder = () => {
    document.getElementById('modal').style.opacity = 0;
    document.getElementById('modal').style.transform = 'scale(0.9)';
    document.getElementById('modal').style.zIndex = 0;
  };
  return (
    <MyModal id="modal">
      <XButton onClick={clickHanlder}>&times;</XButton>
      <img src={props.url}></img>
      <h2>{props.title}</h2>
      <h3>{props.subject}</h3>
      <hr></hr>
      <ul className="skill">{list(props.skills)}</ul>
      {props.detail.work ? (
        <ul className="work">주요 개발{list(props.detail.work)}</ul>
      ) : (
        ''
      )}
      <p>{props.detail.description}</p>
    </MyModal>
  );
}

Modal component를 하나 만들었다. 프로젝트 내용은 따로 JSON 파일을 만들어서 데이터를 가져왔다. 최대한 중복성을 없애려고 했는데 아직도 중복되는 코드는 천지다..

그리고 모달창이 CSS 없이 그대로 만들면 부드러운 효과 없이 딱딱하게 사라지고 생기는 부분이 마음에 안들었다. 사소한거에 못참는 병이라도 있는지..😑 그래서 모달창이 사라질 때 (x버튼을 눌렀을 때) style을 변경했다.

배포

Vercel을 사용해서 배포를 했다. 처음 사용해봤는데 굉장히 간편하다.

배포할 때 마주했던 문제가 있었는데, 확장자명을 통일하지 않아서 생겼던 문제였다. 이미지의 확장자가 PNG였는데 코드에서는 png로 적혀있었다. localhost에서는 문제가 안생겨서 그대로 넘어갔더니 배포하고 문제를 마주할 수 있었다. 후다닥 해결하고 제출해야하는 시간 맞춰서 제출했다.