Dev Log
1
오늘은 image api를 연결하는 작업을 했다. next.js 에서 image 업로드를 하는 과정을 다시 되짚어 보려고 한다. next.js는 image를 처리하는 Image 컴포넌트를 제공한다. 그래서 img 태그를 사용하지 않는다. Image 컴포넌트에 attribute 는 src로 경로를 지정한다. img와 형식은 비슷하다.
Image 컴포넌트 위에 input 엘리먼트를 두는 방식으로 구현되었다. input 속성을 file 로 설정하고 onChange 함수에 image 업로드할 함수를 할당한다. 그리고 input 엘리먼트를 opacity를 0을 주면 뒤에 기본설정된 이미지는 보이고 이미지를 클릭하면 input 엘리먼트가 파일을 업로드 하는 창을 열게 된다. 그렇게 선택하면 onchange 함수에 연결된 업로드 함수가 호출되어 해당 선택한 사진을 업로드 하는 방식이다.
api에는 multer가 middle ware로 미디어 파일을 업로드하는 것을 도와준다. multer를 이용해서 aws의 정적 파일을 S3에 담고 그 주소를 데이터베이스에 전달하는 방식으로 구현되었다. 그렇게 데이터베이스에는 파일의 url 주소값이 저장되고 클라이언트에서는 데이터베이스에서 받아온 파일의 주소로 외부의 url의 이미지를 불러오는 과정을 거치게 된다.
이때 next.js에서는 image를 외부 url에서 참조할 때 next.config.js 파일을 수정해야 한다.
module.exports = {
images: {
domains: ["naver.com"]
}
}이런 방식으로 설정해줘야 외부에서 url을 참조할 수 있다. 그리고 next.config.js를 수정하고 나서는 설정 파일을 수정했기 때문에 서버를 다시 껐다가 켜줘야 한다. 이것을 안하고 hot reload를 생각하고 껐다가 켜지 않으니 잘 적용되지 않았었다. multer 와 api 부분은 더 공부를 해야 한다.
느낀점
이제 시간이 한주 밖에 남지 않았다. 힘들긴 하지만 끝이 보이니 그래도 더 힘이 난다. 부족한 점을 찾고 메우는 노력을 하게 되고 그래도 처음보다는 찾거나 문제를 해결할 때 조금은 아주 조금은 더 나아진 것 같다. 그래도 매일 조금씩 성장하면 긍정적인 것이라고 생각한다. 앞으로도 지속적으로 성장할 수 있게 공부를 꾸준히 해야겠다.
