index.ts

• Project 파일을 만들 때 버그와 실수를 미리 방지하기 위해 interface 코드를 만든다.
• 설정한 속성이 빠졌을 때 TypeScript가 바로 알려줘서 버그를 미리 고칠 수 있다.

---

ProjectData.ts

• 프로젝트 섹션에 들어갈 데이터들을 저장한다.

데이터를 분리해서 저장하는 이유

1. 유지보수성

• projectsData 배열은 프로젝트가 10개가 되면 100줄이 넘어가고, 20개가 되면 200줄이 넘어갈 수 있다.
• 만약 분리하지 않는다면?
  => 프로젝트 설명에 오타 하나를 고치기 위해 Project.tsx 파일을 열고, 수백 줄의 복잡한 코드 사이를 헤매며 데이터가 적힌 곳을 찾아야 한다.
• 분리하면?
  => 데이터를 수정할 일이 생기면, 다른 코드는 볼 필요 없이 src/data/projects.ts 파일만 열어서 데이터만 깔끔하게 수정하면 된다.

2. 재사용성

• 만약 나중에 'About Me' 소개 밑에 나의 최신 프로젝트 1개를 보여주고 싶다고 가정해 보자.
  => 파일을 따로 분리하면 데이터를 쉽게 가져다 쓸 수 있다.
  => 만약 데이터가 Projects.tsx 안에 같이 있다면, 다른 컴포넌트에서 이 데이터를 재사용하기 매우 어려울 것이다.

techColorMap

• 기술스택 별로 색깔을 지정하는 코드.

[key: string]

• 이 객체의 Key는 string 타입이다.
• key라는 단어는 그냥 예시 이름이다. [techName: string] 이라고 써도 똑같이 작동한다.
• 이 부분이 "이 객체는 'React', 'HTML', 'CSS'처럼 문자열로 된 Key를 가질 수 있다"고 알려준다.

: string

• Key에 해당하는 Value는 string 타입이어야 한다.
• 이 부분이 "'bg-indigo-500/50', 'bg-gray-500/50'처럼 문자열로 된 Value를 가질 수 있다"고 알려준다.

이렇게 작성함으로써 추후에 아래와 같은 코드를 작성할 수 있다.