본문 바로가기

Web Study124

코딩애플 - Next.js 에서 MongoDB 연결하기 새로운 프로젝트 시작 npx create-next-app@latest MongoDB 사용하기 분산처리가 용이 (많은 데이터가 빠르게) 1. Project 생성 2. Database Access 에서 User 생성 -> 데이터베이스에 접속할 수 있는 아이디/비번 생성 3. 유저 생성 시, Built in Role 항목을 atlas admin 으로 설정! 4. Network Access 에서 신뢰할 수 있는 IP 를 수동으로 지정... 하지만 공부용이므로 0.0.0.0/0 이나 Allow access from anywhere 로 설정 5. Database 에 접근하여 새로운 데이터베이스를 생성해준다. 아직 자료가 없어서 저 화면! Next 에서 MongoDB 사용하기 Database > Collection .. 2023. 6. 24.
Next.js 시작! 기본적으로 Next.js 는 리액트 기반 프레임워크이다. 그러므로 리액트 문법을 사용해준다. app 폴더 안의 page.js 가 제일 메인으로 보이는 페이지이며 동일한 폴더의 globals.css 로 스타일 지정이 가능하다. 페이지 라우팅 넥스트는 자동 라우팅 기능으로 코드를 길게 작성해줄 필요가 없어진다. /list -> 상품 목록 페이지로 사용 app 폴더 안에 폴더명과 동일한 url 이 자동 생성 해당 url 에서 사용해줄 페이지의 정보가 담긴 page.js 를 생성해준다. (이름이 무조건 page.js 여야 함) 해당 page.js 파일은 리액트 문법에 맞게 작성해줘야 한다. (컴포넌트) 즉 정리하자면, app 폴더 안에 만들어지는 폴더들은 url 로 접근이 가능해지고, 이는 계층적으로 누적될 수.. 2023. 6. 23.
코딩애플 Next.js, 개발 환경 세팅하기 일단 CSR 부터 Client Side Rendering 웹 페이지를 클라이언트(사용자의 브라우저)에서 실시간으로 만들어주는 것 웹의 인터렉티브함은 올라가게 되지만 구글 검색 노출이 안좋아지는 단점과 페이지 로딩 속도가 느려지는 단점이 수입성에 악영향을 끼치지면서 CSR 은 지고, SSR 으로 기울고 있는 추세이다. SSR(Server Side Rendering) ? 웹 페이지를 서버딴에서 만든 다음 클라이언트에게 보내주는 것이므로 가볍고 SEO 에 유리함, 원하는 곳에 CSR으로 보내줄 수 있으니 해당 기술을 사용하는 것이 점차 늘어나는 중 CSR -> SSR 리액트의 useState 나 Ajax, 비동기, 등등 CSR에서 사용하던 기술들이 SSR에선 별로 필요가 없어지므로 프론트엔드보다 풀스택이나 백.. 2023. 6. 22.
Vite 공식 문서 - 기본 설정하기 https://ko.vitejs.dev/guide/features.html Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 한글화 해주신 분이 누군지 모르겠지만 공식 문서가 정말 깔끔하게 잘 되어있다. 감사합니다...! CRA 만 사용하다가 Vite 를 쓰니 아직은 차이가 클 정도로 큰 프로젝트를 한 적은 없어서 체감은 안되지만, 빠르다고 명성이 자자한 Vite, 공식 문서를 차근히 읽어나가며 공부해보기로 한다. 기존의 CRA 와 Vite 를 비교한 것은 바로 전의 글로 정리했다. Vite 가 지원하는 기능 HMR 기본적으로 ESM 을 통하여 HMR API 를 제공한다. HMR, Hot Module Replacement 로 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않.. 2023. 6. 20.

티스토리툴바