반응형 Programming306 서버리스 앱만들기 - 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.. 2023. 5. 20. 서버리스 앱만들기 - 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에 정의된대로 연결하니 오히려 더.. 2023. 5. 20. 서버리스 앱만들기 - 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라면 우리말로 바퀴벌레인데요, 단어를 알게.. 2023. 5. 18. 머신러닝(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.. 2023. 5. 18. Python 머신러닝 라이브러리 비교 : Scikit-learn, TensorFlow, Keras 및 PyTorch 파이썬은 기계 학습 및 데이터 과학에서 가장 인기 있는 언어 중 하나로 부상했습니다. 다양한 기능을 제공하고 다양한 요구를 충족하는 풍부한 머신 러닝 라이브러리 생태계를 제공합니다....라고 하는데. 한번 시작해볼까 하다가도 라이브러리가 너무 많이 존재해서 뭐가뭔지 잘 모르겠네요. 그래서 그 중 가장 유명한 네 가지 파이썬 머신러닝 라이브러리인를 비교해보고자 합니다. 1. Scikit-learn: Scikit-learn은 전통적인 기계 학습 작업에 널리 사용되는 라이브러리입니다. 데이터 전처리, 피쳐 추출, 모델 선택 및 평가를 위한 포괄적인 도구 세트를 제공합니다. Scikit-learn의 주요 기능은 다음과 같습니다: - 간단하고 직관적인 API를 제공하므로 다양한 수준의 전문 지식을 가진 사용자가 .. 2023. 5. 16. 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.. 2023. 5. 5. 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.. 2023. 5. 5. 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.. 2023. 5. 4. Vue todolist 만들기 - 5. Post 수정기능 Post를 수정하는 기능을 구현하겠습니다. 1. components/EachofPost.vue 수정 v-if 기능을 이용하여 edit모드인지 아닌지에 따라 다른 화면을 보여주도록 구성합니다. v {{ id }} {{ titleOfPost }} v x {{ bodyOfPost }} by {{ creator }} 2. store/store.js 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... 2023. 5. 4. Vue todolist 만들기 - 4. Store 적용하기...Post추가/삭제 Store를 적용해보겠습니다. npm i vuex axios // axios는 나중에 backend 통신을 위해 미리 설치 1. store/store.js 기본 post 리스트를 생성하고, 포스트 추가/삭제기능을 구현해놓는다. 기능은 추후 Backend와의 연동을 위해 actions에 구현해놓습니다.import { createStore } from 'vuex'; // import axios from 'axios'; export const store = createStore({ // export default createStore({ state:{ posts: [ {_id: '1', title: 'apple', body: 'Im apple', creator: 'apple'}, {_id: '2', title.. 2023. 5. 4. Vue todolist 만들기 - 3. Vue 프로젝트 상세구성 1. router/index.js 수정 불필요한 라우팅을 삭제합니다. import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/HomeView.vue'; const routes = [ { path:'/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router; 2. 불필요한 view도 삭제합니다. views/AboutView.vue --삭제 3. App.vue 수정 4. views/HomeView.vue.. 2023. 5. 4. Vue todolist 만들기 - 2. Vue 프로젝트 만들기 1. Vue 프로젝트 생성 vue_front 폴더로 이동하여 vue_프로젝트를 생성합니다. cd vue_front npm i -g @vue/cli // vuejs 프로젝트가 처음일 경우 글로벌로 vue cli를 설치해줍니다. vue create . // 현재의 폴더에 vue 프로젝트를 생성합니다. 2. Vue-router 설치 vue-router를 설치하면 프로젝트 구조가 조금 달라집니다. 따라서 vue-router를 먼저 설치하고 진행합니다. vue add router 3. vuex / axios 설치 및 port 설정 npm i vuex axios package.json의 scripts 부분을 수정하여 4000번 포트에서 서비스하도록 수정합니다. "scripts": { "serve": "vue-cli.. 2023. 5. 4. Vue todolist 만들기 - 1. 환경세팅 Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다. 폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다. TODO_APP - express_back - vue_front 2023. 5. 4. Flutter 단순 apk파일 만들기 1. 생성방법 flutter build apk --release --target-platform=android-arm64 2. no sound null safety 추가하기 flutter build apk --release --no-sound-null-safety --target-platform=android-arm64 3. 위치 project folder > build > app > outputs > flutter-apk 2023. 3. 30. Flutter 시작하기 2 일차 : splash screen 정렬하기 우선 색상코드를 바꿔줍니다. color: Colors.orange, --> color: Color(0xFFF99231), Center위젯을 Colum위젯으로 바꾸고, CircularProgressIndicator 반영하기 이미지를 높이방향으로 가운데 정렬하기 이미지의 사이즈를 200px로 줄이고 가운데 정렬하기 프로그레스 이미지를 흰색으로 변경하기 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override W.. 2023. 3. 3. Flutter 시작하기 1 일차 : splash screen 코드팩토리의 플러터 프로그래밍 - Splash Screen 우여곡절 끝에 플러터 설치를 마치고, 혼자 공부하다 잘 안되어 책을 구매하게 되었습니다. 기본 문법은 대충 보고, 첫번째 예제부터 따라해보기로 했습니다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body:.. 2023. 3. 3. Windows에서 Visual Studio없이 플러터(flutter)설치하기 Flutter를 한번 해보려고 합니다. 그런데 Flutter Doctor라는걸 실행하니까, Visual Studio가 안깔려있다네요???? 모바일 개발할건데 웬 Visual Studio? ㅠㅠ 그래서 포기할까도 생각해봤지만 여기저기 찾아다니다가 알아냈습니다. Windows에서 모바일만 개발할 계획인데 굳이 무거운 Visual Studio를 깔고싶지 않다면 아래와 같이 실행하여 설정을 변경해 줄 수 있습니다. 그러면 Visual Studio 관련 부분이 사라집니다.^^ flutter config --no-enable-windows-desktop flutter doctor (ps) Unable to find bundled Java version 에러 C:\Program Files\Android\Android.. 2023. 2. 27. C#(WPF) - Datagrid 멀티라인 추가하기 아래와 같이 xaml에서 직접 작성할 수 있습니다. 아래와 같이 C#코드로 작성할 수도 있습니다. /* * Created by SharpDevelop. * User: wijkim * Date: 2023-02-13 * Time: 오후 2:56 * * To change this template use Tools | Options | Coding | Edit Standard Headers. */ using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents;.. 2023. 2. 14. 파이썬 폴리움(folium) 라이브러리 시군구별 데이터 표시 시군별 평균수입/총수입 자료를 지도에 매핑해서 나타내보도록 하겠습니다. 아래의 자료는 시군별 평균수입/총수입 자료입니다. 한가지 추가로 필요한 파일이 시군구 지형자료입니다. 아래의 파일도 같은 프로젝트 폴더에 저장하고 실행합니다. import folium as g import json import webbrowser import pandas as pd g_map = g.Map(location=[37.4, 127], tiles='cartodbpositron', # tiles = 'Stamen Terrain', zoom_start=7) geo_data = json.load(open('skorea_municipalities_geo_simple.json', encoding='utf-8')) df = pd.rea.. 2023. 2. 13. 파이썬 Folium으로 주피터 노트북 없이 지도 표시하기..chatGPT가 도와줌 오늘은 파이썬의 Folium 라이브러리로 지도를 그려보도록 하겠습니다. 보통의 예제들이 주피터 노트북을 이용해서 지도 결과물을 표시하도록 되어있었는데, 불행히도 제 PC에는 아직 주피터 노트북 설치를 안했네요. 그래서 한참동안 그냥 결과물을 보려고 고생을 하다가 갑자기 그녀석이 생각났습니다. chatGPT~!!! ㅋㅋㅋㅋ 한번 이용해봐야겠습니다. 첨엔 folium 결과를 matplotlib로 내보낼 수 있을까 하고 한참을 고민했는데, chatGPT도 실패를 했습니다. IPython을 깔기도 하고, 별의별 라이브러리를 다 갖다가 붙여놨는데, 결론은 이미지 파일로 만들어서 픽셀단위로 matplotlib에 뿌리더군요. 이건 좀 아니지 않나 싶어서 간단히 html로 만든 결과물을 브라우저로 자동으로 오픈시켜주는.. 2023. 2. 12. 만자로(Manjaro) 리눅스 듀얼부팅 - 파티션 및 한글(ibus, uim) 적용 오랫만에 어떤 리눅스를 골라 설치할까 하다가 다시 만자로 리눅스를 설치해보기로 했습니다. 물론 Windows와 듀얼부팅으로요. 버전은 manjaro-gnome-22.0.2 입니다. 1. 파티션 다른 부분은 사실 거의 Next만 눌러줘도 되지만, 항상 어려웠던 부분이 바로 파티션이 아닐까 합니다. 요즘은 UEFI 방식의 BIOS지원으로 이를 적용하고자 뭔가 좀 더 복잡해진 것 같아...애를 먹었습니다. 그런데 사실 힘들었던 부분은 UEFI(GPT)방식이냐 옛날방식(MBR)방식이냐가 아니라... 부트로더를 제대로 설정하지 못해서 생긴 문제였습니다. - 윈도우즈에서 우선 리눅스를 사용할 공간을 마련합니다. 추가로, 부트로더 8MB를 위한 파티션을 현재 부팅하드인 C드라이브에 함께 추가합니다. 리눅스는 D드라이.. 2023. 2. 5. Golang - 파일명 일괄 변경하기 회사 동료 PC에서 파일명을 일괄 변경시켜줘야 하는 일이 발생했습니다. 예를들면 앞부분에 특정 구문을 붙인다던지, 뒷부분에 날짜를 일괄 붙인다는지 하는 식으로 말이죠. 검색해보면 여러가지 툴/방법이 있긴 합니다만 오랫만에 직접 프로그램을 짜서 도움을 줘볼까 합니다. 그래서 이번엔 쉽게 실행파일 생성이 가능한 Go언어를 이용해서 만들어보기로 했습니다. Java나 C#은 가상머신 세팅에서 약간의 까다로움이 발생하거나 괜히 덩치만 커질 수도 있었고, Python은 친구 PC에 Python을 굳이(개발자도 아닌데) 깔아야 하는 번거로움이 있고, Javascript는...음....?? Go언어 설치나 세팅 부분은 다른 글들에도 많으니까 패스하도록 하겠습니다. src 폴더 하위에 신규 폴더하나를 생성하고, 파일명은.. 2022. 11. 11. 파이썬으로 폴더 내 파일명 일괄 수정하기 특정 폴더의 파일 전체에 대해서 일괄 수정하는 기능을 구현해 보았습니다. add_string 함수는 파일명에 접두사와 접미사를 붙여서 출력하는 기능이고, change_string 함수는 파일명에 특정 문자열을 다른 문자열로 바꾸는 기능입니다. 우선은 파일명을 확인하는 부분까지만 구현하고, 실제 변경하는 부분은 주석 처리하였습니다. 사용하실 분은 해당 부분 주석 해제후 사용하세요. import os def add_string(path, prefix, suffix): for filename in os.listdir(path): name_only, ext = filename.split('.') # 파일명과 확장자로 분리 print(name_only, ext) new_name = prefix + name_onl.. 2022. 11. 5. 프론트엔드 프레임워크 비교 (Angular / React / Vue / Svelte) 프론트엔드 프레임워크 하면 Angular / React / Vue 그리고 최근 부각되고 있는 Svelte가 있는데요. 전문 개발자는 아니지만 조금은 손대본 경험을 토대로(Angular제외..) 특성을 알아보도록 하겠습니다. Stackoverflow Ranking에서 여러 프로그래밍 언어 및 프레임워크에 대한 점유율, 선호도 등 자세한 정보는 확인하실 수 있습니다. 해당 정보에 따르면 웹 프레임워크의 점유율은 아래 그래프와 같습니다. 이 중에 프론트엔드 프레임워크만 보면 React가 제일 상단에 있고, jQuery, Angular, Vue 그리고 한참 아래쪽에 Svelte가 있네요 역시 Stackoverflow Ranking에 따르면 이번엔 Svelte가 제일 위에 있고, 그다음 React,.. 2022. 11. 1. Django - Gitlab - Heroku CD/CI 배포 와 Freenorm DNS연결 Django앱을 Gitlab에 올리고, Heroku로 자동 배포하는 방법, 그리고 Freenorm의 무료 DNS를 적용하는 방법을 알아보겠습니다. 순서는 아래와 같습니다. django 앱 생성 (본문은 Django의 사용법을 다루는 글이 아니므로, 기본적인 앱은 만들어져 있어야 합니다.) Heroku repo 생성 Gitlab repo 생성 CD/CI설정 (Gitlab 추가설정 및 파일 추가 생성) 추가 설정 (오류 점검) 외부DNS(Freenom) 적용 1. Django 앱 생성 기본적인 앱이 구현되어있겠지만, 앱을 배포하기 위해서는 추가적인 라이브러리 설치가 필요합니다. pip install gunicorn whitenoise django-herok # gunicorn: 위에서 설명한 파이썬 HTTP.. 2022. 10. 9. .NET6(dotnet6)에서 entity framework 설치하기 (ef명령어 오류) dotnet core3.1 쓰다가 업그레이드 된 닷넷이 있다고 하여 dotnet6를 설치하고 스캐폴딩을 수행해보겠습니다. 1. 필요한 라이브러리를 설치하고(Oracle DB) 2. 스캐폴딩......근데, 스캐폴딩하다가 에러가 발생했습니다. dotnet ef dbcontext scaffold "User Id=abc;Password=1234;Data Source=abcd.efghijk.com:1521/dbname;" Oracle.EntityFrameworkCore -t TBL_ITMAN_AUTH -t TBL_ITMAN_CONSUMABLE -t TBL_ITMAN_ERP -t TBL_ITMAN_OH_UPLOAD -t TBL_ITMAN_PRT_MDL -t TBL_ITMAN_PRT_MST -t TBL_ITMAN_.. 2022. 9. 14. Python Dataframe 주요 함수 정리 Python의 주요 사용처가 엑셀, CSV 등의 데이터를 이용한 데이터 분석인데, 매번 함수를 찾아다니기 귀찮아서 한곳에 모아놓습니다. df=pd.read_csv('test.csv') df.to_csv('test.csv', index=False) df.head() df.tail() df.info() df.dtypes df.shape df.describe() df['나이'].describe() df['나이'].value_counts() # 컬럼 값 분포 df['나이'].value_counts().index # 시리즈 인덱스 df['나이'].value_counts().tolist() df['나이'].value_counts().reset_index() # 인덱스를 하나의 칼럼으로.. df['나이'].sort_.. 2022. 8. 22. Python Dataframe 출력 시 생략(...)없이 출력하는 방법 Pycharm이던 Jupyter Notebook이던 Dataframe형태의 결과를 볼 때, 칼럼의 수가 많아지면 기본적으로는 중간이 ....으로 표시됩니다. 간단하게 확인만 할건데 매번 추가코드를 작성하기도 귀찮고.... 이럴 때 옵션 하나면 간단히 처리할 수 있습니다. # row 생략 없이 출력 pd.set_option('display.max_rows', None) # col 생략 없이 출력 pd.set_option('display.max_columns', None) 누군가에겐 도움이 되었길 2022. 8. 21. Python matplotlib 마커(marker) 종류 matplotlib의 plot기능에서 색상/라인/마커의 종류에 대해 알아보겠습니다. import matplotlib.pyplot as plt plt.plot([1, 2, 3, 4], [2, 4, 6, 8], 'bo-') # 파란색 + 마커 + 실선 plt.xlabel('X-Axis') plt.ylabel('Y-Axis') plt.show() 2022. 8. 3. 자바GUI(Swing) - Simple text editor 인텔리제이(Intellij) IDE 를 사용하여 간단한 텍스트 에디터를 만들어보도록 하겠습니다. 1. 새 프로젝트 생성 인텔리제이 메뉴에서 File - New - Project 를 클릭하여 새 프로젝트를 생성해줍니다. Name은 editor로 하고, 적당한 위치에 아래와 같은 세팅으로 진행할 예정입니다. JDK는 설치되어있지 않다면 JDK의 드롭다운 메뉴 중 Download JDK를 눌러, 적당한 버전을 고른 후 다운로드 받아줍니다. 혹은 직접 원하는 JDK를 다운로드 받아서 선택할 수도 있습니다. 2. Main Class 생성 프로젝트 하위 폴더 중 src에서 우클릭하여 New - Java Class 를 클릭한 후, 클래스 이름을 editor로 하여 새로운 클래스를 생성해줍니다. 만들어진 클래스 내부에.. 2022. 7. 11. 이전 1 2 3 4 5 ··· 11 다음 반응형
