[2일차] 프로젝트 세팅 & 홈화면 구성

프로젝트 구성을 어느정도 마무리 지은 후, 깃헙 repo를 파고, 필요한 라이브러리들도 설치한 후, 폴더들을 구성한 다음 본격적으로 프로젝트에 돌입했다.

디자인

지금 집중해야 되는 건 디자인보다는 기능이기 때문에, 피그마에 디자인하는 단계는 생략하기로 했다. 그 대신, 평소 워너뮤직코리아에 있는 Ed Sheeran 페이지가 예쁘다고 생각했던 터라 이 페이지 디자인을 참고로 하기로 했다.

(왜 Discography랑 News 섹션은 텅텅 비어있는 것이냐아ㅠ_ㅠ 내가 반드시 채워놓고 말리라)

theme.ts

theme.ts도 이 홈페이지에 있는 색을 가져와 구성했다.
이전에는 styled-components를 javascript로만 사용했는데, typescript로 사용하게 될 경우 emotion.d.ts 파일을 따로 구성해줘야 한다는 걸 처음 알았다 @_@

// src/styles/emotion.d.ts
import '@emotion/react';

type palette = 'gray' | 'white' | 'darkGray' | 'black';

declare module '@emotion/react' {
  export interface Theme {
    palette: {
      [key in palette]: string;
    };
  }
}

//src/styles/theme.ts
const palette = {
  white: '#FFFFFF',
  gray: '#FFFFFFB3',
  darkGray: '#666666',
  black: 'rgba(23,23,23,1)',
};
const font = {
  small: '0.8rem',
  base: '1rem',
  medium: '1.6rem',
  large: '2rem',
  huge: '2.4rem',
  title: '3.6px',
};
export const theme = { palette, font };

tsconfig.json 절대 경로 설정

../../ 점박이들로 이루어진 상대경로로 설정하다보니 외관적인 측면에서도 깔끔해 보이지 않았고, depth가 깊어질수록 경로 작성하는 데 계산하느라 머리가 아팠다.

//tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 기본 경로를 프로젝트 최상단으로 설정
    "paths": {
      "@src/*": [
        //@src로 시작하면 아래 줄의 디렉토리를 의미한다.
        "src/*" //baseUrl을 기준으로 src/ 하위 디렉토리를 @src로 표현한다.
      ],
      "@components/*": ["src/components/*"] 
      //@components로 시작하면 components/ 하위 디렉토리를 의미한다.
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig-paths

하지만 위와 같이 tsconfig.json에만 코드를 작성한다고 해서 절대경로를 바로 사용할 수는 없다. 타입스크립트 컴파일된 파일을(node 혹은 ts-node)를 인식하지 못하기 때문에, tsconfig.json내에 paths 필드에 명시된 모듈을 호출하게 도와주는 tsconfig-paths라는 라이브러리를 설치하도록 하자.

오늘의 작업물 결과

오늘의 일기: 프로젝트 세팅하는데 생각보다 시간이 꽤 걸렸다. 어쨌든 메인 홈 화면은 일단 첫번째 섹션 UI만이라도 끝-!