NextJs 05: 넥스트Js에서 정적 자원 사용하기

안녕하세요. 각성한 데브키라입니다.  NextJs에서 정적 자원 즉 이미지 파일이나 미리 정의된 데이터파일 또는 템플릿 파일을 사용할때 public폴더를 사용하면 정적데이터를 사용하실수 있습니다.

정적 파일과 동적 파일은 웹 개발에서 자주 언급되는 개념입니다. 이 둘의 차이점과 정적 파일을 사용하는 이유를 아래에서 설명하겠습니다.

[ 정적 파일(Static Files)과 동적 파일(Dynamic Files)의 차이점 ]

정적 파일(Static Files)

- 정의: 서버에 미리 저장된 파일로, 서버에서 추가적인 처리 없이 그대로 클라이언트에 전달됩니다. HTML, CSS, JavaScript 파일, 이미지 등이 여기에 해당합니다.
- 특징: 사용자의 요청이나 사용자의 입력에 따라 내용이 변경되지 않습니다. 모든 사용자에게 동일한 파일이 제공됩니다.

동적 파일(Dynamic Files)

- 정의: 서버에서 사용자의 요청에 따라 실시간으로 생성되거나 수정되어 전달되는 파일입니다. 이는 서버 사이드 스크립트(PHP, Python, JavaScript(Node.js) 등)를 사용하여 처리됩니다.
- 특징: 사용자의 요청이나 사용자의 입력에 따라 내용이 변경될 수 있습니다. 즉, 사용자별로 다른 내용을 보여줄 수 있습니다.

 

[ 정적 파일을 사용하는 이유 ]

1. 속도: 정적 파일은 서버에서 추가적인 처리가 필요 없기 때문에 동적 파일에 비해 빠르게 로드됩니다. 웹 페이지의 로딩 시간을 단축할 수 있습니다.

2. 효율성: 정적 파일은 CDN(Content Delivery Network)을 통해 쉽게 배포될 수 있습니다. 이는 전 세계 어디서든 빠르게 접근할 수 있게 만들어 줍니다.
3. 유지보수: 정적 파일은 구조가 단순하고, 복잡한 서버 사이드 로직을 포함하지 않기 때문에 관리하기가 더 쉽습니다.
4. 보안: 서버 사이드 처리가 없기 때문에, SQL 인젝션과 같은 일부 보안 취약점에 대한 위험이 줄어듭니다.
5. 확장성: 정적 파일은 서버의 부하를 크게 줄여줍니다. 따라서, 동일한 서버 자원으로 더 많은 사용자에게 서비스를 제공할 수 있습니다.

정적 파일과 동적 파일은 각각의 장단점을 가지고 있으며, 웹사이트의 목적과 요구사항에 따라 적절히 선택하여 사용해야 합니다. 예를 들어, 블로그나 포트폴리오 웹사이트와 같이 빈번한 변경이 없는 콘텐츠를 제공하는 경우에는 정적 웹사이트가 효과적일 수 있습니다. 반면, 사용자의 입력에 따라 동적으로 콘텐츠가 변경되어야 하는 경우(예: 온라인 쇼핑몰)에는 동적 웹사이트가 필요합니다.

[ Public 폴더의 역할 ]

Next.js에서는 public 폴더를 사용하여 정적 파일을 관리할 수 있습니다. public 폴더는 프로젝트의 루트 디렉토리에 위치하며, 이 폴더에 있는 모든 파일은 자동으로 정적 자원으로 제공됩니다. 여기에는 이미지 파일, 미리 정의된 데이터 파일, 템플릿 파일, css, javaScript등이 포함될 수 있습니다.

public 폴더에 있는 파일들은 웹 서버의 루트 디렉토리(/)에서 접근할 수 있습니다. 예를 들어, public 폴더에 image.png라는 파일이 있다면, 브라우저에서 http://yourdomain.com/image.png로 접근할 수 있습니다.

정적 파일 사용 예제

다음은 public 폴더를 사용하여 정적 파일을 관리하는 예제입니다.
1. 먼저, 프로젝트의 루트 디렉토리에 public 폴더를 생성합니다. npx create-next-app@latest 명령어를 사용하여 프로젝트를 생성하셨다면 대부분은 public 폴더가 이미 생성되어 있습니다.

참조) NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지
2. public 폴더에 사용할 정적 파일을 추가합니다. 예를 들어, NEXT.jpg라는 이미지를 추가해 보겠습니다.

3. 이제 이 이미지를 Next.js 페이지에서 사용해 보겠습니다. pages/index.js 파일을 열고 다음과 같이 수정합니다.

위의 코드를 보면 이미지의 경로가 /image.png로 설정된 것을 확인할 수 있습니다. 이는 public 폴더에 있는 NEXT.jpg 파일을 가리킵니다.

주의사항

public 폴더에 있는 파일들은 빌드 시점에 자동으로 포함되며, 변경 시 서버를 다시 시작할 필요가 없습니다. 그러나 파일 이름이 중복되지 않도록 주의해야 합니다. 만약 동일한 이름의 파일이 있다면, 나중에 추가된 파일이 이전 파일을 덮어쓰게 됩니다.

결론

Next.js에서 정적 파일을 관리하는 것은 매우 간단하고 직관적입니다. public 폴더를 사용하면 정적 파일을 효율적으로 관리할 수 있으며, 이를 통해 웹 애플리케이션의 성능을 최적화할 수 있습니다. 이번 포스이 Next.js를 사용하는 여러분에게 도움이 되었기를 바랍니다. Happy Coding!

[ NextJs 시리즈 목차 ]

NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지
NextJs 02: NextJs프로젝트 불필요한 파일제거
NextJs 03: NextJs서버 배포버전 빌드
NextJs 04: Link태그와 태그의 차이점을 이해하고 라우팅 설정까지
NextJs 05: 넥스트Js에서 정적 자원 사용하기
NextJs 06: npx와 json-server 사용하기
NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트
NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습
NextJs 09: Next.js 글입력 작성과 캐시처리
NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리
NextJs 11: next.js글수정 useEffect
NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드
NextJs 13: env파일을 활용한 환경변수 설정