inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

프로젝트 구조 설명

assets과 public의 차이점

328

짜파게티

작성한 질문수 8

0

assets에 있는 파일이 번들링이 된다면
assets에 이미지같은것들을 넣으면 될까요???

public에있는 파일들은 '최종번들에 복사되어진다'고 하셨는데
이말이 무슨뜻인지 잘이해가 안가서그러는데 부가설명해주시면 감사하겠습니다.

react React-Context react-router tailwindcss react-query

답변 1

0

짐코딩

안녕하세요 🙂

assets와 public 폴더 차이점

프로젝트에서 assets와 public 폴더는 각각 다른 목적으로 사용되는데요 차이점을 명확히 설명드리면!

assets 폴더의 특징

  • 웹팩이 파일을 자동으로 최적화해줍니다 (압축, 이름 변경 등)

  • import 키워드로 불러와서 사용합니다

import logo from '../assets/logo.png';
<img src={logo} />

public 폴더의 특징

  • 파일이 있는 그대로 사용됩니다 (최적화 없음)

  • 절대 경로(/)로 바로 사용합니다

<img src="/logo.png" />

 

assets 폴더에 넣는 파일은 대부분 아래와 같습니다.

  • 컴포넌트에서 사용하는 이미지들

  • 로고, 아이콘

  • CSS/SCSS 파일들

  • SVG 아이콘들

public 폴더에 넣는 파일:

  • favicon.ico

  • robots.txt

  • manifest.json

  • 폰트 파일들

  • PDF 문서

  • SEO용 og 이미지

요약!

assets는 최적화가 필요한 파일을, public은 있는 그대로 사용할 파일을 넣으면 됩니다. 일반적으로 컴포넌트에서 자주 사용되는 이미지는 assets에, 브라우저에서 직접 접근이 필요한 정적 파일은 public에 놓으시면 될 것 같아요~! 💪 👍

0

짜파게티

감사합니다!!!

오타?

0

28

1

뭐하나 여쭤봐도 될까요?

0

70

1

안녕하세요 질문이 있습니다.

0

55

2

질문 : 삭제 버튼 아규먼트 (id)

0

50

1

Tailwind 버전 확인

0

62

1

align-items 정렬

0

50

2

vite 명령어로 프로젝트를 만들었습니다. (vscode)

0

79

1

31. 객체 업데이트 하기 - 10:15 질문

1

55

2

강의교안, 내용 인용해서 블로그 글 작성

1

80

2

이미지가 출력되지 않아요

1

74

2

강의와 만들어진 코드가 달라요

0

76

3

AI와 CSS 라이브러리의 궁합

0

95

1

onClick 이벤트에 함수 넘길 때

0

64

1

린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...

0

101

1

notes 없음 읽기 오류

0

72

1

Object.assign 문법

0

64

1

react-router 전혀 기능 안함

0

53

1

react-router-dom@6.25.1

0

47

1

React Router 최신 스펙

0

207

1

Immer 에서 filter, map 사용

0

54

1

vite 설치에 대해 질문있습니다.

0

76

2

라이브러리 버전 일치 이슈

0

76

1

"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다

0

49

2

TotalCounter을 작성할때

0

65

2