포트폴리오 사이트 제작 계획 (3) [FSD 구조 적용]

새로 알게된 사실들

1. 파일명은 대문자 시작인데 import문 작성하니 소문자로 변경됨

TypeScript는 대소문자 경로 충돌을 감지할 때 에러를 발생시킵니다. 이를 완화하려면 tsconfig.json에서forceConsistentCasingInFileNames 옵션을 활성화하세요.

이 설정은 파일 경로 대소문자가 불일치할 경우 컴파일 단계에서 에러를 발생시켜, 문제를 조기에 감지하고 수정할 수 있도록 합니다.

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true}
}

 

2. tailwind 설정 위치?

tailwind.config.ts에서 디렉토리를 추가한 위치마다 content에 경로 추가가 필요합니다.

import type { Config } from 'tailwindcss';

export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/widgets/**/*.{js,ts,jsx,tsx,mdx}',
    './src/features/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      },
    },
  },
  plugins: [],
} satisfies Config;

 

3. 구글문자 바로 사용 가능

const nanumGothic = Nanum_Gothic({
  variable: '--font-nanum-gothic',
  subsets: ['latin'], // 필요한 문자 집합 (한글 지원 필요 시 추가)
  weight: ['400', '700'], // 사용할 폰트 가중치 명시
});

 

위 형식으로 필요한 폰트 선언 후 사용 가능합니다. app/layout.tsx에서 설정!

 

FSD 구조 적용

아직 사이즈가 크지는 않다..

 

https://feature-sliced.design/kr/docs/get-started/overview

둘러보기 | Feature-Sliced Design

 

위는 fsd 디자인 공식 홈페이지고 이를 참조하여 프로젝트에 적용중이다.

 

일단 features를 화면 단위로 큰 주제로 나누었다.

 

나같은 경우는 포트폴리오 사이트이기 때문에 섹션으로 나누는 것이 합리적일 것으로 판단하여 생성 중이다.

 

더 정확한 코드가 보고 싶다면 아래의 링크에서 확인해보길 추천한다.

 

https://github.com/changheonkim/portfolio

GitHub - changheonkim/portfolio