////
Search
Duplicate
⚰️

[NextJS] public 폴더 동적 이미지 사용

생성일
2022/12/15 06:34
태그
최종 편집 일시
2024/06/27 02:02

NextJS 동적 이미지 사용 문제

현장 실습 프로젝트가 거의 막바지 단계라 기존의 yarn dev로 실행시키던 프로젝트를 build 후, 실행시켰다.
dev에서 보이지 않던 문제가 발견됬다. 이미지 로드 문제였다.
현재 프로젝트는 사용자가 이미지를 추가하면 아래와 같은 프로세스를 거친다.
사용자가 이미지 추가 ⇒ multer를 이용해 public 폴더 아래에 이미지 이름에 time stamp 찍어서 이미지 저장 ⇒ 이미지 이름만 db에 저장 ⇒ db에 저장한 이름을 가져와 public에서 찾아서 화면에 뿌림
렌더링시 ⇒ db에 저장한 이름을 가져와 public에서 찾아서 화면에 뿌림
dev모드에서는 잘 동작하였다. 그런데 build 후 start 에서는 public 아래 저장만 되고, 이미지 태그에는 찍히지 않았다.
원인을 찾아보니, nextJS는 빌드 시점에 public 폴더도 빌드를 하여 runtime 시점에 추가되는 파일에 대한 반영을 하지 않는다는 것이었다.
공식 문서에도 관련한 내용이 나와있는데, 아래와 같다.
요약하자면, public runtime에 업로드 되면 못쓰니까 외부 파일 서버 사용하란다.
그래서 nginx 로 웹 서버를 구현했다.
다 만들고 보고하니 고객사에서 포트 번호 하나 더 쓰면 안된다고 한다.
vercel에서 공식적으로 안된다고 하였으니 다른 서버 여는것 말고는 다른 방법은 없어 보이는데…

같은 태그의 다른 글 보기

Search
프론트 엔드
Input 태그의 multiple 옵션으로 여러 파일을 업로드 할 수 있게 하고 정해진 파일 갯수가 초과되면 파일을 최기화 시키고 alert 메시지 출력.

같은 태그의 다른 글 보기

[NextJS/React] 파일 업로드 리셋 시키기
2022/09/20 01:14
public/uploads 경로로 파일을 업로드 후 다운로드 받기 위해 아래와 같은 코드를 작성 하였다.
문제는 파일 경로였는데, 상대 경로를 사용하니, 파일 없음 - 실패 메시지가 발생했다.
그렇다고 절대 경로를 사용하자니, 2가지 정도가 걸렸다.
첫째로, 로컬에 저장 하는 것이라 추후에 코드 수정, 배포 할 때 문제가 될 것이라고 생각했다. 예를 들어 윈도우 환경에서 절대 경로인데, 리눅스 환경에서 배포 한다면, 파일 경로 수정은 필수였다.
두 번째는, 그래도 혹시 모르니 절대 경로를 설정하고 실행해 봤더니, 권한 에러가 발생했다;;
구글 크롬에서 권한 설정을 하면 해결되는 문제였으나, 사용자마다 권한 설정을 강요할 수 는 없었다.
검색 끝에 발견한 해결 방법은 파일을 업로드할 때 public/uploads/ 에 했는데, 다시 읽어 올 때는 첫 시작 경로가 public/ 아래 였다. 즉, 파일 경로를 작성할 때, root기준으로 public 아래로 설정해야 파일 경로를 정확하게 읽어 올 수 있었다.
이와 같은 방법으로 경로를 설정 해주어야 했다.
NextJS 파일 다운로드
2022/11/07 04:23
프로젝트를 진행하면서 당황했다.
당연히 알고 있다고 생각했던 get과 post가 생각보다 직접 쓰려고 하니 헷갈린다.
그래서 정리한다.
get이든 post 방식이든 둘 다 브라우저가 서버에 요청을 하는 것이다.

GET 방식

get 은 요청할 때, 필요한 데이터를 Body에 담지 않고, 쿼리 스트링을 통해 전달한다.
쿼리 스트링이라 함은 URL 의 끝에 ? 와 함께 이름과 값으로 쌍을 이루는 요청이다.
GET은 요청이 캐시될 수 있다. 브라우저가 get 요청에 대한 서버의 응답을 캐시해두고, 동일한 요청이 발생할 때 서버로 요청을 보내지 않고 캐시된 데이터를 사용한다.
•
GET 요청은 캐시가 가능하다.
•
웹 캐시가 요청을 가로채 응답의 복사본을 반환한다. HTTP header 에서 cache-control 헤더를 통해 캐시 옵션을 저장할 수 있다.
HTTP GET, POST 차이
2022/11/07 06:05
•
동기 방식은 서버에서 요청을 보냈을 때 , 응답이 돌아오기를 기다림.
•
비동기 방식은 반대로 요청을 보냈을 때, 응답 상태와 상관없이 다음 동작을 수행 할 수 있음.

같은 태그의 다른 글 보기

동기, 비동기
2022/11/07 07:29
미디움 닷컴 글들을 둘러보다가 재밌는 것이 있어서 기록해둔다.
console.~ 의 여러가지 사용법에 관련된 내용인데, 최소한 나는 이렇게 써본적이 없다.
앞으로 개발 할 때 편리할 것 같아서 기록해두고 나중에 써먹어야겠다.

1. console.log();

보통 흔하게 위와같이 사용하는 것 같다.
결과는 이렇다.
근데 변수가 많아지고 자료형이 동일한 것들이 생기기 시작하면 값이 어떤 변수인지 찾아야 하는 경우가 있다.
그래서 평소 나는 아래와 같이 사용했다.
별거 아닌것 같지만 진짜 귀찮다…..
근데 아래와 같이 사용하면 아주 편하게 변수와 값들을 매핑 해주는 log를 찍을 수 있다.
[JavaScript] console의 다양한 사용법/ console.log(”이렇게도 쓸수 있다고?”);
2022/12/01 01:48

NextJS 동적 이미지 사용 문제

현장 실습 프로젝트가 거의 막바지 단계라 기존의 yarn dev로 실행시키던 프로젝트를 build 후, 실행시켰다.
dev에서 보이지 않던 문제가 발견됬다. 이미지 로드 문제였다.
현재 프로젝트는 사용자가 이미지를 추가하면 아래와 같은 프로세스를 거친다.
사용자가 이미지 추가 ⇒ multer를 이용해 public 폴더 아래에 이미지 이름에 time stamp 찍어서 이미지 저장 ⇒ 이미지 이름만 db에 저장 ⇒ db에 저장한 이름을 가져와 public에서 찾아서 화면에 뿌림
렌더링시 ⇒ db에 저장한 이름을 가져와 public에서 찾아서 화면에 뿌림
dev모드에서는 잘 동작하였다. 그런데 build 후 start 에서는 public 아래 저장만 되고, 이미지 태그에는 찍히지 않았다.
원인을 찾아보니, nextJS는 빌드 시점에 public 폴더도 빌드를 하여 runtime 시점에 추가되는 파일에 대한 반영을 하지 않는다는 것이었다.
공식 문서에도 관련한 내용이 나와있는데, 아래와 같다.
요약하자면, public runtime에 업로드 되면 못쓰니까 외부 파일 서버 사용하란다.
그래서 nginx 로 웹 서버를 구현했다.
[NextJS] public 폴더 동적 이미지 사용