본문 바로가기
반응형

분류 전체보기

 (385)
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 작..
VS Code ESLint 저장 시 자동 Fix, Format 설정하기 1. ESLint 설치 2. 기본설정 열기( Ctrl + . ) 3. 설정 창에서 code action on save 라고 입력 4. 위 그림에서 'settings.json에서 편집' 을 눌러 파일 수정창으로 이동 5. 아래구문 추가 또는 수정 "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": false,
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..
Git 사용법 개념은 잘 모르지만, 방법에 대해서만 남겨놓습니다. 1. git init 2. git add . (폴더 내 모든 파일을 대상으로 추가) 3. git commit -m "first commit" (커밋할 때 메시지 설정) 4. git remote add origin https://github.com/a;slkdfj;alskjdfk.git 5. git push origin master 그 외 주요 명령 6. git remote rm origin (기존 리모트 오리진 연결 삭제) 7. git config user.name "Username" 8. git config user.email "Email address" 9. git status 10. git remote -v user.name과 user.email은..
Manjaro linux에 guake설치 후 에러 만자로 리눅스로 한참 잘 쓰다가 뭔가 에러가 생겨서 새로 설치했습니다. 그리고 Guake를 설치하는데 잘 안되었던 부분을 해소하여 남겨놓습니다. manjaro 21 gnome 버전을 설치하고 Guake를 설치합니다.sudo pacman -S guake설치 후 F12를 누르니까 키 바인딩이 잘못되었다고 실행이 안됩니다. 그래서 이래저래 알아보니 xorg 환경이 아닌 요즘 나오는 wayland일 경우 키 바인딩을 제대로 인식하지 못한다고 합니다. 그래서 시스템 키 설정에서 바인딩을 추가해주어야 한다고 합니다. 그 키 바인딩 연결파일은 /usr/bin/guake-toggle 입니다. 1. '설정 -> 키보드 바로가기' 메뉴로 들어가서 맨 아래쪽의 '+'버튼을 눌러 바로가기 추가를 해 줍니다.2. 적당한 이름(..
반응형

티스토리툴바