minarae’s story

javascript에서 숫자를 표현할 때 3자리마다 ,를 찍어서 숫자를 인식하기 좋게 만들어주는 코드를 작성할 일이 많다. 매번 검색해서 추가하기 귀찮아서 블로그에 포스팅해서 저장해둔다. const numberWithCommas = (number) => { if (!number) { return '-'; } number = parseInt(number); return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); };

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

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