https://portfolionew-o7m5ec0x4-jihyeonjeong11.vercel.app/
우선 1차적으로 프로젝트를 완결하고, Vercel에 올리는 것 까지 성공하였다.
https://github.com/jihyeonjeong11/portfolionew
해당 포트폴리오에 대해 여러가지 더 하고싶은 이야기는 많지만, 이후 다른 것도 할것이 많으므로 시간이 날 때마다 정리해서 올려야 할 것 같다.
(Tailwindcss가 Bootstrap에 비해 얼마나 간편했는지, Storybook을 실제로 확인해 보았을 때 어땠는지 등등..)
수많은 버그가 있었지만 다행히 모두 해결할 수 있었다.
몇가지 기억할 만한 것들만 나열하면(나머지는 제대로 npm build로 체크하지 못한 나의 잘못..)
1. Typescript Index Signature
Type error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type...어떤 for loop을 사용하는 function으로 매개변수를 받아올 때, 해당 매개변수의 타입 정의 + 인덱스 타입의 정의가 필요하다.
일반적으로는 그냥 숫자를 지정해주면 크게 문제가 없었지만, 이를 string으로 바꾸어 주는 방식으로 문제를 해결하였다.
interface WorkObjectProps {
id: string;
title: string;
description: string;
imageKey: string;
url: string;
stack: string;
work1?: string;
work2?: string;
work3?: string;
work4?: string;
work5?: string;
work6?: string;
[key: string]: string | undefined;
}
// 위 work1~6까지를 받아오는 for loop 코드이므로, 키 자체를 스트링으로 사용할 수 있도록, { [key: string]: number }와 같은 형태로 위 work prop과 같은 형태로 만들어 주었다.
function values(project: WorkObjectProps) {
const filteredArr = Object.keys(project).filter((item) => item.includes('work'))
return filteredArr.map((item, index) => (project[item]))
}
// 사용할 때도 위 매개변수에서 타입 정의를 받을 수 있도록 해준다.2. global CSS importing
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets...Create-Next-App에서 기본 제공하는 ./styles/global.css는 프로젝트 맨 상위에서만 import하여야 한다.
Tailwindcss 적용 중 실수로 상위가 아닌 page에 적용된 import문을 지움으로써 해결했다.
이 부분이 아주 좋을 수 있다고 생각이 드는 것은, 이전 프로젝트에서 sass를 실험 적용하다, import 자체가 꼬여서 풀어내는데 며칠이 걸렸던 기억 때문이었다.
특히나 스타일 같은 부분은 프론트 개발자가 주도권을 가져가는 것도 아니고(물론 그 개발자가 디자인까지 다 한다면 모르겠지만), 이렇게 상위에 단 한 번 import하는 것이 더욱 통일성에 좋겠다는 생각이 든다.
일주일정도의 시간을 들여서 열심히 만들어 보았는데, 약간 울적해진다.
1년여 간 나는 Typescript를 사용한다고 했지만 실제로는 전혀 아니었던 것 같다.
그렇다고 페이지 내에 엄청 신박한 디자인이나 코드적인 무언가가 있는 것도 아니고...
하지만 예전에도 적었듯이, 할 수 있는 일을 매일 해나가는 것이 개발자의 본분이 아닐까 한다.
