반응형 Programming307 Netlify Serverless function 작성 보안을 위해 API Key가 노출되지 않도록 API 요청 부분을 서버리스 함수로 작성하도록 하겠습니다. 추가로 API Key는 환경변수로 등록하여 Github 등으로 올릴 때 노출되는 것을 막기위해 추가적으로 보안설정을 하겠습니다. 1.netlify-cli 설치 npm i -D netlify-cli 2.netlify.toml # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "build" # 프로젝트 빌드 결과의 디렉토리를 .. 2021. 6. 17. 헤로쿠 백엔드, Netlify 프론트엔드 배포 1. 백엔드 헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다. 그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다. import cors from 'koa2-cors'; app.use(cors()); 2. 프론트엔드 Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public.. 2021. 6. 15. Recoil 따라하기 - TodoList 무작정 따라한 소스를 기록으로 남김니다. 1. App.js RecoilRoot 를 사용하여 TodoList 요소를 감싸준다. import React from 'react'; import TodoList from './components/TodoList' import { RecoilRoot } from 'recoil'; function App() { return ( ); } export default App; 2. ./src/recoil/state.js 작성 import { atom } from 'recoil'; export const todoListState = atom({ key: 'todoListState', default: [], }); 3. ./src/components/TodoList.jsx 작.. 2021. 5. 28. Vue 프로젝트 만들기 - with Webpack Template 1. 프로젝트 구성 (Template Download) /node_modules .babelrc.js .gitignore .postcssrc.js .babelrc.js .package-lock.json .package.json .webpack.config.js index.html /src/App.vue /src/main.js /src/assets/logo.jpg ㄴ/components/HelloWorld.vue /scss/main.scss /static/fabicon.ico 2. Package 설치 npm i vue@next npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc npm i -D file-loader npm i -D eslint esli.. 2021. 5. 21. Svelte / Snowpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 package 설치 npm i -D snowpack svelte @snowpack/plugin-svelte ( 템플릿 구성용 ) npm i -D @snowpack/plugin-optimize ( html, js 난독화 및 최적화 ) npm i -D @snowpack/plugin-babel ( 바벨 ) npm i -D @snowpack/plugin-sass ( sass ) npm i -D bootstrap@next ( 부트스트랩 ) Svelt for VS Code 패키지 설치 ( 코드 하이라이트 ) 3. package.json 파일 script 추가 "scripts": { "dev": "snowpack dev", "build": "snowpack buil.. 2021. 5. 20. Webpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 플러그인 설치 npm i -D webpack webpack-cli webpack-dev-server@next npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 ) npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 ) npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 ) npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 ) npm i -D postcss autoprefixer postcss-loader ( 스타일 후.. 2021. 5. 20. Nodejs V14 ESM 문법 적용하기 - 리액트를 다루는 기술 backend 주의점 "리액트를 다루는 기술" 의 22장...mongodb 연동하기 과정에서 Koa 백엔드에 ESM을 적용하는 부분이 있는데, 현재 Node 14 버전에서 주의해야할 점과 함께 몇가지 정리해보고하 합니다. 1. 라이브러리 설치 해당 과정에서는 ESM이 외에도 몇가지 라이브러리가 필요합니다. koa, koa-bodyparser, koa-router, mongoose, dotenv 등 말이죠. ESLint옵션 설정하는 부분은 제외하도록 하겠습니다. (VSCode에 설치한 ESLint 기능에, 추가 설정했을 경우 달라지는 부분을 잘 몰라서 이부분은 제외하고 사용했습니다.) 아래의 package.json을 보면 필요한 라이브러리들을 확인할 수 있을 것입니다. { "name": "05_react_backend", "v.. 2021. 4. 10. Manjaro linux에 guake설치 후 에러 만자로 리눅스로 한참 잘 쓰다가 뭔가 에러가 생겨서 새로 설치했습니다. 그리고 Guake를 설치하는데 잘 안되었던 부분을 해소하여 남겨놓습니다. manjaro 21 gnome 버전을 설치하고 Guake를 설치합니다.sudo pacman -S guake설치 후 F12를 누르니까 키 바인딩이 잘못되었다고 실행이 안됩니다. 그래서 이래저래 알아보니 xorg 환경이 아닌 요즘 나오는 wayland일 경우 키 바인딩을 제대로 인식하지 못한다고 합니다. 그래서 시스템 키 설정에서 바인딩을 추가해주어야 한다고 합니다. 그 키 바인딩 연결파일은 /usr/bin/guake-toggle 입니다. 1. '설정 -> 키보드 바로가기' 메뉴로 들어가서 맨 아래쪽의 '+'버튼을 눌러 바로가기 추가를 해 줍니다.2. 적당한 이름(.. 2021. 3. 29. Manjaro linux에 mongodb 설치하기 Manjaro 리눅스에서 mongodb를 설치해보도록 하겠습니다. 1. AUR 추가 MongoDB는 공식 저장소에서는 지원되지 않고 AUR에서 설치해야합니다. 아래 그림과 같이 소프트웨어 추가/제거에서 환경설정 메뉴를 찾아들어갑니다. 그리고 AUR탭으로 가서 'AUR지원 사용' 을 활성화 해줍니다. 그러면 검색시 AUR 을 포함한 검색 결과가 나타나게 되는데, 그 중 적당한 버전으로 mongodb-bin, mongodb-tools-bin, mongodb-compass 의 세 패키지를 설치해줍니다. 2.실행 설치가 완료되면 아래의 명령으로 mongodb를 실행합니다. systemctl enable --now mongodb 그리고 mongo명령어를 입력하면 머라머라 뜹니다. 3. Compass 확인 comp.. 2021. 3. 28. Newsapi api 키 발급받기 1. https://newsapi.org/register에 가입합니다. News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 가입 완료시 나오는 API Key를 저장해둡시다. 나중에 API 요청할 때 써먹어야 합니다. 2. 한국 Link에 들어가봅니다. https://newsapi.org/s/south-korea-news-api News API – Search News and Blog Articles on the Web Get JSON search results for global news a.. 2021. 3. 23. Storybook 사용하기 비주얼 테스트 도구인 스토리북에 대해 알아보겠습니다. 1. 설치 npx -p @storybook/cli sb init .storybook폴더가 자동 생성되고, 그 안에 story파일을 로딩해주는 main.js 와 preview.js 파일이 있습니다. main.js에는 ...story.js파일을 자동 추가/로딩해주는 부분과 addon 설정부분이 있습니다. (preview.js는 아직 잘 모르겠습니다.ㅠㅠ) package.json에도 storybook 스크립트가 추가되었습니다. (모두 이전 버전에서 수동 생성해주던 부분임...) 2. Sample 컴포넌트 작성 기존 컴포넌트들이 있으면 활용해도 되지만, 저는 새로 만든 프로젝트에서 테스트할 용도로 간단한? 컴포넌트 하나를 만들겠습니다. import React.. 2021. 3. 18. MongoDB 다운로드 설치 및 Compass 연결 MongoDB 설치파일 다운로드 위치를 몰라서 기록해놓습니다. 아울러 Compass에서 처음 접속하는 방법도 함께 공유합니다. 1. Download Site (www.mongodb.com/try/download/community)접속 2. 설치 (설치 중간에 함께 추천하는 Compass 도 설치합니다.) 3. 확인 정상 설치되었을 경우 커맨드 창에 mongo 라고 입력해보면 버전정보 등이 나타납니다. 4. Compass 실행 'mongodb://localhost:27017'을 입력하고 Connect를 누르면.. 현재의 데이터베이스들이 나타납니다. ~끝~ 2021. 3. 7. React - Apache에 배포하기 1. Build "create-react-app ." 명령으로 react app 생성 후 배포를 위해서는 아래의 명령으로 buid 합니다. npm run build 이렇게 하면 build 폴더가 생성되는데 필요한 파일을 서버가 작동하는 폴더에 위치시키면 됩니다. 2. httpd.conf 항목 추가 매번 build된 파일을 apache가 서비스하는 폴더로 옮기는 작업은 번거롭습니다. 현재 작업중인 폴더를 직접 서비스하도록 추가하고 싶다면, httpd.conf파일에 아래의 항목을 추가해줍니다. Alias /react "D:/05_Program_dev/03_web/04_react_hello/build" Options Indexes FollowSymLinks AllowOverride None Require al.. 2021. 2. 27. 캐러셀 만들기 - with Owl Carousel owl carousel 한 화면에 여러개의 이미지를 나타내며 돌아가는 기능을 합니다. 1. 다운로드 owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드 합니다. 필요한 파일은 dist\assets폴더 내부의 css파일과 src\js폴더에 있는 js 파일입니다. 그리고 jquery파일도 필요하니 다운받아놓습니다. Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your need.. 2021. 2. 24. 캐러셀 만들기 - with bxSlider 1. bxSlider 프러그인 다운로드 bxslider.com에서 다운로드에서 다운로드 가능합니다. 링크로 연결하는 방법이 기본으로 나와있는데, The other ways에 직접 다운로드하여 사용할 수 있도록 다운로드 경로도 제공합니다. 그리고 jquery도 필요하니, 다운받아놓습니다. jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 2. 복사하기 압축을 풀면 dist 폴더 안에 있는 css파일과 js파일을 원하는 폴더로 옮겨서 사용합니다. 주의할 점은 images 폴더를 css 파일들을 옮겨놓은 폴더에 함께 복사해 놓아야 한다는 점입니다. 이 이미지는 스타일시트에서 사용하는 이미지들입니다. 3.. 2021. 2. 24. Python - 엑셀 자료 분석(셀 참조 with xlwings) 오늘은 KB 부동산시세 사이트에서 제공하는 데이터를 이용해 각 셀의 값을 참조하는 방법에 대해 알아보겠습니다. 테스트를 위해 엑셀은 서식을 없애고 숫자만 표시되도록 했는데요, 아래의 엑셀 차트에 대해 일정 범위별로 수식을 적용하여 색깔을 표시하도록 하는 방법을 알아보겠습니다. (물론 엑셀 활용 측면에서는 조건부 서식으로 지정하는 것이 더 간단할 수도 있습니다만, xlwings 공부하는 차원에서 봐주시기 바랍니다.) 1. 엑셀 매크로 추가 엑셀 파일의 이름은 pyxl.xlsm으로 매크로가 가능한 엑셀파일 형태로 저장해둡니다. 그리고 엑셀에서 Python 코드를 불러올 수 있도록 VBA를 작성해줍니다. Sub some_code() mymodule = Left(ThisWorkbook.Name, (InStrRe.. 2021. 2. 4. Python - 엑셀에서 파이썬 매크로 사용하기(xlwings 설치) 현대 사회에서 엑셀의 지위는 정말... 이걸 빼고서는 업무를 상상할 수 없을 정도로 막강한데요,,, 한가지 아쉬운 점이 매크로를 작성할 때 Visual Basic을 사용한다는 것입니다. 그게 무슨 아쉬운 점이냐 하실 수도 있는데, VBA라고 하는게 처음에는 쉽다고 해서 접근해보면 딱히 쉽진 않죠. 프로그래머들도 어렵다는 VBA니까요. 물론 프로그래머는 VBA를 집중해서 파기보다는 다른 자신만의 언어(Java, Python, C# 등)가 있으니까 그럴 수도 있겠지만요. 하지만 파이썬은 전문 프로그래머들 뿐만 아니라 일반인들도 많이 쓰는 언어가 되어가고 있습니다. 우선 쉬우니까요. 물론 깊이 들어가면 결국 비슷하게 어려운 부분이 있지만,,, 개인적인 느낌으로는 VBA보다 쉽습니다. 가독성이 너무 좋습니다. .. 2021. 2. 3. Go언어 chromedp 라이브러리로 웹 크롤링하기 오늘은 웹 크롤링에 대해 알아보겠습니다. go언어에서의 웹 크롤링에도 selenium과 chrome webdvier를 사용하는 방법이 있지만, selenium 개발하신 분이 현재는 관리를 중단한 상태라고 합니다. 대신 chromedp를 주로 사용한다고 합니다. 간략하게 chromedp를 알아보겠습니다. 우선 설치는 일반적인 go 라이브러리들과 마찬가지로 go get 명령으로 설치합니다. (깃헙링크) go get -u github.com/chromedp/chromedp 그리고 예제는 여기링크로 가면 여러가지를 확인할 수 있습니다만, 천천히 살펴보시고 주요 method에 대한 예시로 아래 코드를 남겨놓겠습니다. (아래 코드는 실행되지는 않습니다. 추후 간단한 실행가능 예시로 업데이트 하겠습니다.) packa.. 2021. 1. 11. Go언어 - Fyne timer예제 Fyne tutorial에 있는 timer 예제입니다. 1. main.gopackage main import ( "time" "fyne.io/fyne/app" "fyne.io/fyne/widget" ) func showTime(clock *widget.Label) { formatted := time.Now().Format("03:04:05")//현재시각을 포멧에 따라 출력한다. clock.SetText(formatted) } func main() { a := app.New() w := a.NewWindow("Clock") clock := widget.NewLabel("") showTime(clock) w.SetContent(clock) go func() { t := time.NewTicker(time.S.. 2021. 1. 1. Go언어 - Fyne 아이콘 이미지 설정 1. icon.png 이미지 파일을 준비합니다. 2. fyne 패키징 툴을 다운받습니다.go get fyne.io/fyne/cmd/fyne3. icon.png파일을 실행파일의 이미지로 패키징합니다.fyne package -icon icon.png 2021. 1. 1. Go언어 - Fyne 한글 폰트 설정 Fyne를 이용해 GUI를 만들던 중 한글 출력이 안된다는 것을 뒤늦게 알게 되었네요.(아래 화면 참조). 오늘은 한글 설정하는 방법에 대해 알아보겠습니다. 샘플로 간단한 메모장 앱을 만들어보겠습니다. 1. main.go위 샘플로 만든 앱의 코드는 아래와 같습니다.package main import ( "fmt" "image/color" _ "unicode/utf8" "fyne.io/fyne" "fyne.io/fyne/app" "fyne.io/fyne/canvas" "fyne.io/fyne/layout" "fyne.io/fyne/theme" "fyne.io/fyne/widget" ) func main() { f := app.New() //f.Settings().SetTheme(theme.LightThem.. 2021. 1. 1. Pyside2 import sys import os from PySide2 import QtUiTools, QtGui from PySide2.QtWidgets import QApplication, QMainWindow from PySide2.QtCore import Slot, Qt class MainView(QMainWindow): def setupUI(self): global UI_set UI_set = QtUiTools.QUiLoader().load("./test.ui") self.setCentralWidget(UI_set) self.setWindowTitle("UI TEST") self.setWindowIcon(QtGui.QPixmap("./images/clock.ico")) self.resize(500, 270.. 2020. 12. 29. Go언어 - Lorca GUI CSS 적용하기 CSS를 텍스트 형태로 불러와서 HTML파일의 태그를 떼고(7바이트) CSS코드를 만들어 넣는 부분 package main import ( _ "fmt" "io/ioutil" "net/url" "github.com/zserge/lorca" ) var ui lorca.UI func checkError(err error) { if err != nil { fmt.Println(err) os.Exit(1) } } func main() { ui, _ = lorca.New("", "", 1028, 640) defer ui.Close() ui.Bind("helloFromGo", helloFromGo) ui.Bind("saveFromGo", saveFromGo) data, err := ioutil.ReadFile("... 2020. 12. 18. Go언어 - Gin Framework(5강 JSON/XML응답) JSON / XML 응답이 섹션에서는 요청 헤더에 따라 애플리케이션이 HTML, JSON 또는 XML 형식으로 응답 할 수 있도록 애플리케이션을 약간 리팩터링합니다.1. 재사용 가능한 함수 만들기Route Handler에서 지금까지는 Gin의 컨텍스트 중 HTML을 사용했습니다. 항상 HTML페이지를 보여줄 때는 괜찮지만, 요청에 따라 응답 형식을 변경하고 싶을 때에는 렌더링을 처리하는 단일 함수로 리팩토링해야합니다(?). 이렇게 함으로써 Route Handler는 유효성 검사(validation) 및 데이터 추출(data fetching)에 집중하도록 할 수 있습니다. Route Handler는 응답 형식에 관계없이 동일한 유효성 검사, 데이터 추출 및 처리를 수행해야합니다. 이 부분이 완료되면 데이터.. 2020. 12. 15. Go언어 - Gin Framework(4강 개별 Article 화면 구성) 개별 Article 화면 구성 현재까지 구성한 앱에서는 Article을 클릭했을 때 링크가 작동하지 않았습니다. 이번에는 각 Article에 대한 핸들러와 템플릿을 추가하도록 하겠습니다.1. Route 설정router.GET("/article/view/:article_id", getArticle)main함수의 Route 설정 부분에 위구문을 추가합니다. 위 라우터는 패턴과 맞는 요청에 대해 경로를 일치시키고, 경로 마지막부분을 route 파라미터인 article_id에 저장합니다. 이 라우터에서는 handler함수로 getArticle을 정의합니다. main.go 전체 코드 모습package main import ( //"net/http" "github.com/gin-gonic/gin" ) var rou.. 2020. 12. 15. Go언어 - Gin Framework(3강 Article List) Article List 표시 이 섹션에서는 index 페이지에 모든 article list를 표시하는 기능을 추가합니다. 1.Router 설정 원문에 따르면 응용 프로그램이 커질 것을 대비하여 별도의 Router파일에서 경로를 정의하는 방식으로 구성하였는데, 무슨 문제인지 제 실습 중에는 routes.go파일에 따로 코드를 분리하니 에러가 발생했습니다. 그래서 route 를 main() 함수 내부에 구성하도록 하겠습니다. 단, route handler 함수만 별도로 분리해 내도록 하겠습니다.(handlers.article.go) main.go파일은 아래와 같이 코딩합니다. package main import ( //"net/http" "github.com/gin-gonic/gin" ) var router.. 2020. 12. 14. Go언어 - Gin Framework (2강 HTML Template 구성) 이것저것 하다보니 일관된 포스팅 하기가 힘드네요...^^;; 오늘은 Gin Framework 강좌를 따라해볼까 합니다. 원 Tutorial은 여기를 참고했습니다. 파일 구성은 아래와 같이 구성하는 것으로 시작합니다. 1. main.gopackage main import ( "net/http" "github.com/gin-gonic/gin" ) func main() { r := gin.Default() r.LoadHTMLGlob("templates/*") r.GET("/", func(c *gin.Context) { // OK 이면 index.html파일에 JSON데이터를 넘겨서 보여줌 c.HTML(http.StatusOK, "index.html", gin.H{ "title": "Home Page", }, .. 2020. 12. 13. Go언어 - Lorca GUI 간단한 메모장 이번에는 모듈 구분을 하여 코드를 좀 다듬어보려고 합니다. 아직 Lorca는 예제가 많지도 않고, 튜토리얼이 있는 상태도 아니어서 혼자 여러가지 방식을 시도해 보는 중입니다. 어쨌든 목적은 Control, View와 Function을 다른 파일에 나누어 구성하는 것입니다. 1. lorca_ex.go(Control파일) 앱의 시작부분으로 Control에 해당하는 역할을 합니다. 함수 바인딩을 이곳에서 정의합니다. 그리고 index.html을 불러와서 data에 저장한 뒤 url.PathEscape메서드에 string형태의 인자로 넘겨주는 방식으로 수정해 주었습니다. package main import ( "io/ioutil" "net/url" "github.com/zserge/lorca" ) var ui .. 2020. 12. 9. Go언어 - Lorca GUI 라이브러리 Go 언어로 구현된 라이브러리들도 상당히 많습니다. (https://github.com/avelino/awesome-go#gui). 이전에 Fyne, Gotk3, andlabs/ui, sciter 에 대해서 포스팅한 적이 있는데요...최대한 설치할 것들이 적고 쉽게 구축 가능한 라이브러리들을 찾아보고 있었습니다. 그러던 중 Lorca라는 것을 발견했는데요. 오늘은 이 Lorca 를 한번 사용해보겠습니다. Lorca는 HTML 문법을 사용하여 매우 쉽게 UI를 구성할 수 있다는 장점이 있습니다. 비슷하게는 Webview가 있는데, 가볍고 build된 파일도 용량이 매우 작지만 설치시 조금 애로가 있을 수 있고, 세부설정도 Lorca보다는 조금 어렵다고 합니다. 반대로 얘기하면, Lorca는 설정할 수 있는.. 2020. 12. 8. Go언어- Gin Framework(1강 설치) Golang에는 웹 프레임워크가 여러가지 있습니다. 제가 공부했던 책에서는 Beego가 추천되었는데, 그 외에도 Revel, Martini, Buffalo, echo, iris 등 여러가지가 있습니다. 요즘은 gin이라는 프레임워크가 대세인 것 같아서 설치해볼까 합니다. https://github.com/gin-gonic/gin(Gin 소스 페이지) 우선 아래 명령어로 Gin을 설치합니다. go get -u github.com/gin-gonic/gin 그리고 프로젝트를 생성해보겠습니다. 적당한 폴더를 하나 만들어 주고 Go 파일을 하나 작성해줍니다. 저는 그냥 main.go로 만들었습니다. package main import "github.com/gin-gonic/gin" func main() { r :.. 2020. 12. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
