728x90
반응형

Programming/Nextjs 3

[nextjs] 서버 설정 파일 읽기

Nextjs는 서버 사이드 렌더링임에도 불구하고 기본적으로는 스크립트 대부분의 동작은 Client 브라우저에서 작동되게 된다. 그래서 nextjs에서는 fs 라이브러리를 사용할 수 없고 따라서 프로젝트 포함되어 있는 별도의 설정을 읽어올 수가 없다. 별별 꼼수를 다 사용해 봤지만 특별히 아 이런 방법이면 좋겠구나 이런 내용은 찾기 힘들었다. 그러던 중에서 가장 그럴듯한 방법을 찾아서 기록을 남겨두고자 한다. 먼저 왜 이런 변수가 필요한지 설명하고자 한다. 개발을 하던 중에 특정 사용자에 대해서는 Backend에 오는 정보를 살짝 바꾸어주어야 하는 필수가 발생했다. 그래서 이 사용자들의 아이디를 기준으로 이렇게 정보를 바꿔주고 싶은데 Frontend이다 보니 DB에 연결할 수도 없다. 그래서 이 리스트를 ..

Programming/Nextjs 2023.04.27

[Nextjs] API 기능을 통한 파일 업로드 처리(base64) #2

개요 얼마 전 포스팅에서 nextjs를 통해서 api 구조에서 파일을 업로드하는 내용을 다루었다. 이게 로컬에서 개발할 때는 잘 작동하고 별 문제 없이 백엔드로 파일이 전달이 되었는데, 배포하려고 서버에 올려두고 테스트를 진행하니 backend에서 파일을 전달받을 때 자꾸 파일이 바뀌어서 업로드 되었다. 미세하게 파일 용량이 바뀌어서 업로드되는데 이렇게 되면 파일이 손상되어서 이미지 파일이 브라우저에서 열리지 않는 문제가 발생하였다. 어떤 원인 때문일지 디버깅을 해보다가 파일이 로컬 브라우저에서 nextjs API로 전달될 때 이미 파일이 바뀌 상태에서 업로드되었다. 위의 그림과 같이 파일이 전달되는데 브라우저에서 nextjs server로 전달될 때 이미 파일이 바뀐다. 근데 로컬 nextjs를 구동할..

Programming/Nextjs 2023.03.22

[Nextjs] API 기능을 통한 파일 업로드 처리

회사에서 Frontend 개발시에 nextjs를 사용하고 있다. 지금까지 React + nextjs를 공부하고 개발하면서 여러 고비를 넘기면서 개발을 이어왔는데 다시 한 가지 난제에 부딪히게 되었다. nextjs는 SSR(Server Side Rendering)을 지원해주는 프레임워크이지만 어쨌든 이미 로딩된 페이지 안에서의 동작은 브라우저에서 처리되기 때문에 비동기로 호출되는 데이터에 대한 정보는 서버에서는 잡을 수가 없다. 그래서 Nextjs에서는 Page 디렉토리 안에 api로 된 페이지에 대해서는 특별히 서버에서 직접 처리되도록 하여서 서버에서 처리할 수 있도록 기능을 제공한다. 자세한 내용은 아래 nextjs 문서에서 확인할 수 있다. API Routes: Introduction | Next.j..

Programming/Nextjs 2023.02.09
728x90
반응형