본문 바로가기
반응형

Programming

 (316)
헤로쿠 백엔드, 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..
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 작..
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..
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..
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 ( 스타일 후..
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..
Manjaro linux에 guake설치 후 에러 만자로 리눅스로 한참 잘 쓰다가 뭔가 에러가 생겨서 새로 설치했습니다. 그리고 Guake를 설치하는데 잘 안되었던 부분을 해소하여 남겨놓습니다. manjaro 21 gnome 버전을 설치하고 Guake를 설치합니다.sudo pacman -S guake설치 후 F12를 누르니까 키 바인딩이 잘못되었다고 실행이 안됩니다. 그래서 이래저래 알아보니 xorg 환경이 아닌 요즘 나오는 wayland일 경우 키 바인딩을 제대로 인식하지 못한다고 합니다. 그래서 시스템 키 설정에서 바인딩을 추가해주어야 한다고 합니다. 그 키 바인딩 연결파일은 /usr/bin/guake-toggle 입니다. 1. '설정 -> 키보드 바로가기' 메뉴로 들어가서 맨 아래쪽의 '+'버튼을 눌러 바로가기 추가를 해 줍니다.2. 적당한 이름(..
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..
반응형

티스토리툴바