본문 바로가기

분류 전체보기321

코딩애플 - 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.
OrbitControls -Threejs 저번에 gltf 모델의 scene 에 rotation.y 값을 주어 빙글빙글 돌리는 애니메이션을 구현했었다. 참고로 모델링을 바꿨다. OrbitControls import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; addons 에서 import 해주고, new OrbitControls() 로 카메라를 지정해준다. 두번째 인자의 renderer.domElement 는 보여지는 canvas 를 가리킨다. const controls = new OrbitControls(camera, renderer.domElement); 카메라 position을 set 해준 다음 controls.update() 해주고, 애니메이션을 실행하는 animate.. 2023. 6. 21.

티스토리툴바