Programming (316) 썸네일형 리스트형 서버리스 앱만들기 - 3.Vue.js 앱 Netlify에 배포하기 서버리스 앱 만들기의 마지막 단원으로 Vue.js 프론트 앱을 배포해보도록 하겠습니다. 1. 앱 만들기 Vue 앱을 만들어줍니다. vue create node_post_vue . // .을 찍으면 현재 폴더에 프로젝트를 생성합니다. vue add router // 곧바로 router 라이브러리를 함께 설치해줍니다. 필요한 라이브러리를 아래와 같이 설치해줍니다. npm i vuex axios 간단히 백엔드에서 보내오는 데이터를 읽어다 표현해주는 것만 할건데도 Store를 구성하고 각 컴포넌트에서 Store state를 이용해야하는게 좀 불편해 보이네요. 그래도 한번만 세팅해놓으면 다음부터는 비교적? 편하게 작업을 할 수 있다고 생각하고 진행하셔요^^;; (1) ./src/main.js import { cr.. 서버리스 앱만들기 - 2.Node 서버(Qoddi)에서 PostgresqlDB(CockroachDB) 데이터 읽어오기 제목이 참 힘드네요... 데이터는 적당히 입력이 되었다고 하면, Node(Express)를 통해서 데이터를 넘겨주는 서버를 만들어보겠습니다. 1 .env 파일 CockroachDB연결정보는 사이트에서 제공하는 connection string을 그대로 붙이는게 편리합니다. 비밀번호도 찾아서 잘 넣어주시구요. PORT=3000 NODE_ENV='development' SECRET=mysecretkeytest COCKROACHDB_CONNECT_URL='postgresql://:@wind-raccoon-4725.8nk.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full' 2. postRoute.js Connection String에 정의된대로 연결하니 오히려 더.. 서버리스 앱만들기 - 1. CockroachDB Serverless 데이터베이스 시작하기 모든 서비스 클라우드에서 구동하기를 해보려고, 이번엔 Database를 찾고 있습니다. 이번에도 역시 무료가 어느정도 가능한 서비스를 찾다보니 CockroachDB라는 것을 찾게 되었습니다. Cockroach Labs, the company building CockroachDB Cockroach Labs, the company building CockroachDB CockroachDB is a distributed database with standard SQL for cloud applications. CockroachDB powers companies like Comcast, Lush, and Bose. www.cockroachlabs.com Cockroach라면 우리말로 바퀴벌레인데요, 단어를 알게.. 머신러닝(ML) 알고리즘 알고리즘 카테고리 분류 - 지도학습, 비지도학습, 강화학습 머신러닝 알고리즘은 크게 지도학습, 비지도학습, 강화학습으로 분류됩니다. 각 카테고리에 속하는 주요한 알고리즘들을 간단히 살펴보겠습니다. 1. 지도학습 (Supervised Learning) 지도학습은 입력 데이터와 정답(label) 쌍을 통해 학습하는 방법입니다. 주어진 입력에 대해 정확한 출력을 예측하는 모델을 학습합니다. 주요한 지도학습 알고리즘으로는 다음과 같은 것들이 있습니다: 1. 선형 회귀 (Linear Regression) 2. 로지스틱 회귀 (Logistic Regression) 3. 의사결정 트리 (Decision Trees) 4. 랜덤 포레스트 (Random Forests) 5. K-최근접 이웃 (K-Nearest Neighbors) 6. 서포트 벡터 머신 (Support Vector.. Python 머신러닝 라이브러리 비교 : Scikit-learn, TensorFlow, Keras 및 PyTorch 파이썬은 기계 학습 및 데이터 과학에서 가장 인기 있는 언어 중 하나로 부상했습니다. 다양한 기능을 제공하고 다양한 요구를 충족하는 풍부한 머신 러닝 라이브러리 생태계를 제공합니다....라고 하는데. 한번 시작해볼까 하다가도 라이브러리가 너무 많이 존재해서 뭐가뭔지 잘 모르겠네요. 그래서 그 중 가장 유명한 네 가지 파이썬 머신러닝 라이브러리인를 비교해보고자 합니다. 1. Scikit-learn: Scikit-learn은 전통적인 기계 학습 작업에 널리 사용되는 라이브러리입니다. 데이터 전처리, 피쳐 추출, 모델 선택 및 평가를 위한 포괄적인 도구 세트를 제공합니다. Scikit-learn의 주요 기능은 다음과 같습니다: - 간단하고 직관적인 API를 제공하므로 다양한 수준의 전문 지식을 가진 사용자가 .. Vue todolist 만들기 - 8. Backend 연동을 위해 Frontend 수정하기 1. store/store.js 수정 store.js 파일에 url request가 가능하도록 각 기능마다 axios 기능을 추가해줍니다. 아울러, 최초 Load시에는 DB의 정보들을 불러올 수 있도록 onLoad함수를 추가해주었습니다. import { createStore } from 'vuex'; import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; axios.defaults.headers.post['Content-Type']='application/json;charset=utf-8'; axios.defaults.headers.post['Access-Control-Allow-Origin']='*'; export con.. Vue todolist 만들기 - 7. Express로 Backend 구성하기 이번에는 Express.js를 이용해서 Backend를 구성해보도록 하겠습니다. Backend 서버는 Express지만, 그 외에도 추가로 MongoDB에 적당한 클러스터 생성이 필요합니다. 그리고 Kakao 로그인 연동을 위해 Kakao Developers 사이트에서 앱 생성이 필요합니다. 이부분은 많은 지문을 필요로 하는 부분이라 여기서 다루지는 않겠습니다. 1. 환경파일(.env) 생성 Backend 프로젝트 폴더에 .env 파일을 생성해서 비밀 환경정보 등을 저장합니다. PORT=3000 NODE_ENV='development' MONGO_URI='mongodb+srv://몽고디비ID:몽고디비PW@cluster0.juisc.mongodb.net/test' KAKAO_ID=00sdfsdf6432sd.. Vue todolist 만들기 - 6. Kakao 로그인 구현 Kakao 로그인을 프론트에서 작업하고, 사용자 정보 중 이름, 메일주소 등 몇가지만 백엔드에 등록하는 방식으로 진행하겠습니다. 이를 위해서는 우선 main.js에 아래의 코드를 추가해야 합니다. 1. main.js import { createApp } from 'vue' import App from './App.vue' import { store } from './store/store.js' import router from './router' createApp(App) .use(router) .use(store) .mount('#app') // 아래 추가 window.Kakao.init('ce8a7d7f75e0322350135c938a5f7182'); 2. components/KakaoLogin.vu.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 40 다음