본문 바로가기
반응형

전체 글

 (464)
몽고디비 (MongoDB) 와 연결하기 몽고디비는 비관계형 데이터베이스로 사용법이 단순하여 노드제이에스 개발자들 사이에 인기가 많습니다. 오늘은 노드제이에스 서버와 몽고디비를 연결하는 방법을 보겠습니다. 몽고디비에서 커넥션 스트링 가져오기 먼저, 몽고디비(https://cloud.mongodb.com/ )에서 해당 데이터베이스를 열고 'Connect'를 누릅니다. 열린 팝업에서 'MongoDB for VS Code'을 선택합니다. 3번에 커넥션 스트링 복사 애플리케이션에 연결하기 애플리케이션으로 이동하여 몽구스를 설치합니다. npm i mongoose 서버파일로 이동하여 (주로 server.js 또는 app.js를 많이 사용) 아래와 같이 몽구스를 가져옵니다. 그리고 .connect()를 사용하여 연결하는데요. connect() 안에 매개변수..
MySQL - Google Cloud MySQL은 관계형 데이터베이스로 가장 많이 사용되는 데이터베이스 중 하나인데요. 한 가지 단점은 자체적으로 제공하는 클라우드 서비스가 없기 때문에 로컬환경에서만 접근이 가능한 점인데요. 위치와 관계없이 데이터베이스에 대한 접근을 위해서는 구글 클라우드나 아마존 같은 서비스와 연결이 필요합니다. 오늘은 구글 클라우드와 연결하는 방법을 보겠습니다. 구글 클라우드 SQL 생성하기 1. 프로젝트 생성 구글 클라우드에 로그인 후 상단 좌측에 프로젝트 콤보박스를 클릭합니다. 'New project'를 누릅니다 (참고로, 플랜에 따라 생성할 수 있는 프로젝트의 수가 제한됩니다). ※ 프로젝트 삭제를 원하는 경우 상단 프로젝트 선택창에서 해당 프로젝트 선택 후 좌측에 햄버거 메뉴 아이콘 -> 'IAM & Admin'..
앵귤러 (Front) - 배포하기 (Netlify) 서버를 사용하지 않은 앵귤러 프로젝트 (Static)는 간단하게 배포가 가능한데요 다양한 플랫폼 중 오늘은 Netlify를 통해 배포해 보겠습니다. Develop and deploy websites and apps in record time | Netlify Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com Netlify로 이동하여 'Add n..
몽고디비 (MongoDB) 몽고디비는 No SQL (기존 관계형 데이터 베이스와 달리 테이블 방식이 아닌 객체형식의 데이터 베이스) 데이터베이스 중 하나로 클라우드 환경을 기본적으로 제공하기 때문에 추가 설정 없이 바로 사용할 수 있어서 MEAN (MongoDB, Angular, Node.js) 또는 MERN (MongoDB, React, Node.js) 스택으로 많이 사용됩니다. 프로젝트 생성 몽고디비 (https://cloud.mongodb.com/) 로그인 후 'New Project' 선택 프로젝트 이름을 설정하고 'Next' 누름 다음 페이지에서 해당 프로젝트 참여할 멤버를 더 할 수 있는데요. 없는 경우 그냥 'Create Project'를 누릅니다. 프로젝트 생성이 완료되면 DB생성이 가능한데요. 'Build a Dat..
노드제이에스 - 앵귤러 서버 API 배포하기 (Render) 백엔드 API기능을 가진 앵귤러 프로젝트를 배포하는 방식은 여러 가지가 있는데요. 크게는 Front와 Back을 따로 배포하고 연결할 건지 아니면 동시에 한 곳에 배포할 건지로 구분됩니다. 오늘은 Render와 Netlify를 사용하여 나누어서 배포하는 방식을 보겠습니다. 배포된 애플리케이션 Angular와 MongDB를 사용하여 만들어졌으며 Render의 무료버전은 MongDB를 지원하지 않기 때문에 MongDB을 지원하는 가장 저렴한 플랜으로 배포되었습니다 (무료 배포 아님). 개발환경과 프로덕션환경 구분 없이 분리된 Front와 Back 서버를 함께 작동시키고 작업된 코드를 깃에 커밋만 하면 자동 배포가 되도록 설정해 보겠습니다. Backend 배포 먼저 렌더에서 'Web service'를 생성합니..
프로젝트 - 퐁 Start /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; } .frame-1 { height: 100vh; width: 100%; transition: 0.4s ease; } canvas { border: 4px solid #000; border-bottom: none; margin: auto; display: block; } .game-over { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: cente..
[구글 태그] 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리자를 연결하는 작업이 필요합니다. 설치하기 태그관리자에서 해당 컨테이너를 열고 아래와 같은 화면에서 우측에 'GTM-'으로 시작하는 아이디를 누릅니다. 아래와 같이 팝업창이 뜨는데요 첫 번째 박스의 코드를 복사합니다 (박스 우측상단에 겹쳐진 네모 아이콘 클릭 또는 전체 선택 후 복사). 이후 관리하는 사이트로 이동하여 해당 코드를 공통된 메인 에 넣어줍니다. 삽입된 태그 확인하기 https://jin-co.tistory.com/117 사이트에 설치된 구글 태그 확인하기 구글 애널리틱스나 애즈를 사용하려면 사이트와 해당 제품의 태그를 연결하여야 하는데요. 연결작업 후 태그가 제대로 삽입되었는지, 작동은 제대로 하는지 눈으로 확인할 수 있으면 좋겠죠. jin-c..
티스토리 - 스타일링 완성된 공통스타일 코드 /* Custom Styles */ img { border-radius: 5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); margin: 10px 0 !important; } .entry-content p, span, a, td { font-size: 1.2rem !important; } .entry-content h1 { font-size: 1.8rem !important; } .entry-content h2 { font-size: 1.7rem !important; } .entry-content h3 { font-size: 1.6rem !important; } .entry-content h4 { font-size: 1.5rem !impo..
728x90

티스토리툴바