Dev study and Repost

MERN - 클라이언트/서버 프로젝트 mongodb Clerk(firebase login) 권한 설정 4​간단하게 원리와 순서를 적어보았다.​---작동 순서서버 실행 - 데이터베이스 연결, 미들웨어 등록클라이언트 요청 - GET, POST인증처리 - 사용자 로그인 상태 확인 및 인증미들웨어 처리컨트롤러 실행응답 반환​필요한 파일 종류를 정리해보면​--필요파일서버초기화DB설정컨트롤러라우터미들웨어모델자원UI(프론트엔드)​--구조configs/ → 설정 관련 (DB 등)controllers/ → 실제 로직 처리 (DB 연산, 응답 생성)routes/ → API 엔드포인트 정의middleware/ → 인증 등 중간 처리models/ → DB 모델 정의client/components/ → 프론트엔드 React U..

MERN - 클라이언트/서버 프로젝트 mongodb Clerk(firebase login) 권한 설정 3 ​기존 로그인은 파이어베이스 clerk으로 이용중이다. 클라이언트, 즉 프론트엔드상 활성은 잘 되어있으나,이 연동된 로그인 계정과 서버, 데이터베이스와 연동이이어서 서버연동을 위해 설정이 필요.--​​clerk 공식 홈페이지 및 도큐먼트 링크 접속https://clerk.com/docs/quickstarts/express Express: Express QuickstartLearn how to use Clerk to quickly and easily add secure authentication and user management to your Express server.clerk.com도큐먼드 안내에..

MERN - MONGO DB 몽고디비 설정 - 클라이언트/서버 프로젝트 2​https://www.mongodb.com/ MongoDB: The World’s Leading Modern DatabaseGet your ideas to market faster with a flexible, AI-ready database. MongoDB makes working with data easy.www.mongodb.com몽고디비에 로그인을 한다.조직 생성조직내 프로젝트 생성​---클러스터 만들기무료 요금제 설정 및 이름 지정, 구글 클라우드 사용 (AWS 사용은 나중에 해보고...)오른쪽 아래 녹색 생성 버튼 클릭(CREATE DEPOLYMENT) 아이디 패스워드 지정Create Database user 버튼 클..

MERN - ex - 클라이언트/서버 프로젝트 내 하위폴더 프로젝트 프리뷰 설정 통합 프로젝트 프리뷰/미리보기 환경설정 ​웹서비스, 웹프로젝트 포트폴리오 작업과 연습을 겸해클라이언트 프로젝트와 서버 프로젝트를 각각 따로 만들어보았다.​하지만 결국, 이 두 프로젝트를 하나로 통합하여 메인 프로젝트로 만들어야 했고,개별적으로 클라이언트와 서버, 각각의 프리뷰 테스트가 필요하도록 설정해야 했다.​로컬 환경에서는 프리뷰 설정이 단순하지만, 파이어베이스 스튜디오 FIREBASE STUDIO나 가상 IDE 환경에서는 설정이 어렵고 까다롭다.​지금도 각각 만들어보고 통합해 보고 해보았고, 최종적으로 깔끔한 방법을 다시 설정해가며, 기록 차원으로 블로그 글로 남기며 이어서 작업을 하고 있다.​​@프로젝트 구조 확인메..

MERN - 백엔드 서버 구축 - 클라이언트 지원 및 데이터 저장​현재 프론트엔드는 구축 완료,이어서 ​START$ npm init -y​$ npm i express dotenv cors mongoose cloudinary multer svix​----express: Node.js 웹 프레임워크dotenv: .env 환경변수 파일을 로드하는 라이브러리cors: CORS 설정을 위한 미들웨어mongoose: MongoDB ODMcloudinary: Cloudinary 이미지 업로드용 SDKmulter: 파일 업로드 미들웨어svix: 웹훅 관련 라이브러리 (Svix 서비스용)---- type: module 추가 버전 확인​이후 파이어베이스 스튜디오 가상서버환경 설정 필요.(테스트서버 기동확인)​$ npm r..

노마드코더 ReactJS로 영화 웹 서비스 만들기 07 무료강좌 리액트 API 의 json을 받아 값을 처리하여 간단 웹페이지 구현을 하게 됩니다.이어서 react router 기능을 실습하게 됩니다. ***Command npm i react-router-dom*** ***React Router DOM***React Router DOM은 웹페이지의 주소(URL)에 따라 화면을 바꿔주는 도구로,예를 들어, /about 주소로 가면 "About 페이지"가 보이고, /home으로 가면 "Home 페이지"가 보이게 만들어줍니다. 페이지를 새로고침하지 않고 부드럽게 동작합니다.쉽게 말해, React 앱에서 주소별로 화면(컴포넌트)을 연결해 주는 역할을 합니다. https://reactrouter.com/ Rea..

노마드코더 ReactJS로 영화 웹 서비스 만들기 06 무료강좌 리액트 useEffect 간단 요약 useEffect는 React에서 컴포넌트가 화면에 렌더링되거나 업데이트될 때, 특정 작업(예: 데이터 가져오기, 구독 설정)을 수행하도록 도와주는 함수입니다.사용자가 지정한 조건(의존성 배열)에 따라 실행됩니다.컴포넌트가 사라질 때 정리(clean-up) 작업도 처리할 수 있습니다. 예를 들어, 처음 렌더링 시 API 호출을 하거나, 이벤트 리스너를 추가/제거하는 데 자주 사용됩니다.상세한 설명과 예시는 아래 링크를 참고해주세요.참고 링크: https://ko.legacy.reactjs.org/docs/hooks-effect.html Using the Effect Hook – ReactA JavaScri..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-2 무료강좌 진행중 npm start 후 오류 코드Failed to compile.[eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/index.js Line 18:1: 'reportWebVitals' is not defined no-undefSearch for the keywords to learn more about each error.ERROR in [eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-1 무료강좌 🔻🔻🔻node.js 설치 방법 확인하기ㅣhttps://blog.naver.com/devlunch4/223724591778 맥북 node js 설치 macOS Node.js install 설치 버전 확인맥북 node js 설치 macOS Node.js install 설치 버전 확인 웹 개발 시 node.js를 사용하는 경우가 있습...blog.naver.comreact app 설치 생성하지만 오류가 발생..이 에러는 주로 React 프로젝트를 생성하거나 패키지를 설치할 때 발생하며, 주된 원인은 의존성 충돌입니다.아래 단계에 따라 문제를 해결해 보았지만.. (실패..)1. 에러의 원인 react 버전 19.0.0이 설치되어 있는데, ..

맥북 node js 설치 macOS Node.js install 설치 버전 확인​웹 개발 시 node.js를 사용하는 경우가 있습니다.이를 위해 맥북에 nodejs를 설치하는 방법을 간단하게 글과 사진으로 남겨봅니다.숫자 순서에 따라 node.js를 설치 인스톨 install 하면 됩니다.1. node.js 공식 홈페이지 접속 https://nodejs.org/konode.js 공식 홈페이지 주소는 아래와 같습니다. 구글 또는 네이버 등의 검색 페이지에서 검색 후 가능하나,위조된 피싱사이트로 접속되지 않도록 주의해서 접속합니다.https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chro..