path alias 없이 절대경로 import만 적용

[ycs1m1yk]

import 방식들

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂components
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂SamplePage
 ┃ ┃ ┗ 📜samplePage.jsx
 ┣ 📂styles
 ┃ ┣ 📜colors.js
 ┣ 📂utils
 ┣ 📜App.js
 ┗ 📜index.js

예를 들어 위와 같은 디렉토리 구조가 있을 때

src > pages > SamplePage > samplePage.jsx 에서 src > styles > colors.js 룰 import 하려면

import styled from 'styled-components'

import { colors } from '../../styles/colors' // 1. 상대경로 import
import { colors } from 'styles/colors' // 2. 절대경로 import
import { colors } from '@/styles/colors' // 3. path alias import

export default function SamplePage () {
  return <Container>메인 페이지</Container>;
}

const Container = styled.div`
  background: ${colors.gray1};
`

비교

위의 1~3번 주석과 같은 import 방식이 있을 수 있습니다.

1. 상대경로 import는 가독성 등의 이유로 사용하지 않겠습니다.

2. 절대경로 import는 간단한 jsconfig 설정만으로 사용할 수 있습니다. CRA 공식문서

3. path alias를 사용하려면 craco와 같은 라이브러리를 사용해서 웹팩 설정을 수정해줘야합니다.

논의점

현재는 절대경로 import만 적용했습니다.

절대경로 import 로는 불충분하고 path alias 가 꼭 필요할까요?

[limelumo]

저는 현재 2번 적용만으로도 괜찮다고 봅니다 👍🏻

[woowsnu]

저도 2번까지만 적용해도 좋습니다!

[cockyb]

저도 2번이 좋습니다