next.js

[Next.js] [MongoDB] CRUD의 Create, Read 연결하기

작년 여름부터 이어져온 몽고디비와의 (일방적)사투연결이 너무 안돼서, 쉬운 연결 하나도 못 하는 나는 개발자 못 하는 거 아닐까 하고 그냥 개발을 접어버렸었다. 그러다 만들고 싶은 게 생겨서 다시 해보다가, 역시 DB가 필요해서... 다시 시도해봤다.  클라우드는 몽고디비 아틀라스를 이용했다. Next.js - 13 App routertypescript   이 글에선 Next.js 자체 서버를 그냥 서버로 부릅니다. 1. 환경변수 설정, 타입 선언// .env.localMONGODB_URI=mongodb+srv://:@어쩌구저쩌구appName=Cluster-XXXXMONGO_DB=lovablePassages 최상단에 .env.local 파일에 MONGODB_URI 입력하는데 그 옆에 들어갈 내용은 친절하..

[Next.js] Next.js 설치

이번에 알아보면서 느낀건데, 내가 SSR과 CSR을 거의 잘못 알고 있었던 것 같다. 지금까지 생각하던 건 / 리액트 왜 쓰나 - SPA를 위해, 넥스트 왜 쓰나 - SSR을 위해, SSR은 왜 필요한가 - SEO 최적화 위해 / 였다. 그러면서 SPA는 SSR을 전제로 하고 있는 줄 알았다(위에 말이랑 약간 모순되긴 하지만 생각없이 외워서 그렇다). 그러나 그게 아니였고, 리액트는 CSR 위주로 돌아간다고 한다....!(대충격ㅎ) 그리고 넥스트는 리액트의 프레임워크, 즉 라이브러리의 프레임워크다. 넥스트는 첫 페이지를 백엔드에서 렌더링(프리렌더링)해서 SEO에 유리하게 만들어준다. 그리고 CSR을 부분적으로 사용하여 SSR의 단점인 페이지 전체를 받아와야하는 등의 단점을 보완했다고 한다. https:/..

JavaScript heap out of memory - 힙 메모리 누수 확인, 디버깅

Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' // 힙 사이즈 확인 export NODE_OPTIONS=--max_old_space_size=800 // 힙 사이즈 늘리기 AWS 배포 중 터진 오류! 위처럼 힙 사이즈를 확인해보고 한 단계 올려주니 저 문제는 해결! 근데 그 다음엔 'SIGKILL' 이게 정확히 heap 문젠지 다른 메모리 문젠지 긴가민가 해서 일단 누수날 것 같은 부분을 다 잡아보기로 했다. AdminCafeDetail.container에서..

220609 프론트엔드 부트캠프 30일차 : Diffing, Hydration, closure, HOC/HOF

일단... 커서를 커스텀하고 닿는 것에 따라서 효과를 주려고 했는데, 하진 못했다. 그냥 커서를 다른 이미지로 바꾸는 것만 성공..?~~! 근데 이것만으로도 기쁘다~ 별안간 테스트 페이지를 만들고 싶어져서(사실 오랜 꿈이었음) 무턱대고 강의를 결제했다. 그랬더니 의욕이 상승했다,,, 아니 이런 얘기말구 어제부터 한 댓글 분리-수정 작업까지 완료.. 디폴트 밸류 안 들어오던 문제도 고쳤다.(그냥 props 안 내려줘서였다 ㅎㅎ) 동아리 져지 디자인도 한 시간 정도 함... 근데 져지 안 사봤고 안 입어봤고 아이디어도 안 떠오르고 보내준 디자인들만 보고 비슷하게 해보려 하는데 따라하긴 싫고 환장ㅠㅠ 오늘은 노션에 바로 정리한 것도 있어서 그냥 수업시간에 쓴 것 + 추가한 것 그대로 복붙 localStorag..